Category · sds-input-*

100 Inputs CSS animations

Focus, validation, ambient and reveal states for form fields. The inputs bundle is 8.3 KB gzip (47.0 KB minified).

Import only this category

import "@salkomdesignstudio/sds-motion-forge/categories/inputs";

Or use the CDN: https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/categories/inputs.min.css. Core (tokens, modifiers, reduced-motion) is already inside each category bundle; to use two or more categories, load the full https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css instead.

All 100 inputs animations

• Active Line .sds-input-active-line — Active Line — input animation
• Arrive Drop .sds-input-arrive-drop — Drops in from above and lands with a squash while its shadow snaps up to meet it
• Arrive Materialize .sds-input-arrive-materialize — Assembles in stepped slices out of blur and brightness, left to right
• Arrive Pendulum .sds-input-arrive-pendulum — Swings in from a top hinge through two decaying swings, then levels out
• Arrive Slide Label .sds-input-arrive-slide-label — The field slides in from the left as its label drops from above, meeting with a synced bounce
• Arrive Spotlight .sds-input-arrive-spotlight — A dark veil lifts as a spotlight passes over the arriving field
• Arrive Stack .sds-input-arrive-stack — Frame, interior tint, and field arrive as three staggered layers
• Arrive Stretch .sds-input-arrive-stretch — Stretches open from a narrow pill to full width with an elastic settle
• Arrive Unzip .sds-input-arrive-unzip — The field unzips open from its center line with a bright seam that cools as it spreads
• Aurora .sds-input-aurora — Aurora — input animation
• Bloom .sds-input-bloom — Bloom — input animation
• Border Beam .sds-input-border-beam — Border Beam — input animation
• Border Comet Loop .sds-input-border-comet-loop — A glowing comet head rides the field's outline in a steady lap, dimming on the far side
• Border Corners .sds-input-border-corners — Corners take turns glowing — NE, SE, SW, NW — with a crossfade between each
• Border Heartline .sds-input-border-heartline — An ECG blip races along the underline every few seconds, then flatlines politely
• Border Orbiters .sds-input-border-orbiters — Two dim satellites orbit the field on opposite sides of its outline
• Border Rain .sds-input-border-rain — Thin light streaks run down both sides of the field in offset phase
• Border Static .sds-input-border-static — A quiet frame with an occasional two-frame static jitter — idle tech energy
• Border Tide .sds-input-border-tide — Border emphasis flows around the frame like a tide through four phases
• Burst .sds-input-burst — Burst — input animation
• Caret Trail .sds-input-caret — Pulsing inner ring emulates caret activity
• Caret Pop .sds-input-caret-pop — A caret bar pops in at the text start with a double bounce, blinks once, and hands over
• Charge .sds-input-charge — Charge — input animation
• Comet .sds-input-comet — Comet — input animation
• Crystal .sds-input-crystal — Crystal — input animation
• Depth .sds-input-depth — Depth — input animation
• Echo .sds-input-echo — Echo — input animation
• Electric .sds-input-electric — Electric — input animation
• Elevate Focus .sds-input-elevate-wrap — Label floats up on focus/fill
• Error Buzz .sds-input-error-buzz — Three sharp 1px vibrations with a red-shifted flash, then an apologetic settle
• Error Quake .sds-input-error-quake — Caret-safe shake — the frame quakes while the field counter-shifts so your text stays readable
• Error Sink .sds-input-error-sink — The field sinks 2px and desaturates, recovering slowly — the weight of the error
• Expand .sds-input-expand — Expand — input animation
• Fill Corner Shade .sds-input-fill-corner-shade — A shade wedge sweeps in from the bottom-right corner on focus, adding active depth
• Fill Flood .sds-input-fill-flood — On focus the interior floods with tint, then drains down to a strong underline — two acts
• Fill Meter .sds-input-fill-meter — While focused, a meter advances in confident bursts with holds — progress you can feel
• Fill Pulse Floor .sds-input-fill-pulse-floor — The field's floor pulses brighter on a slow loop while it holds focus
• Fill Rise .sds-input-fill-rise — On focus a tint rises from the floor and settles at a shallow waterline
• Fill Scanline .sds-input-fill-scanline — One soft scanline crosses the field on focus, then drifts back and parks at the caret edge
• Fire .sds-input-fire — Fire — input animation
• Flicker .sds-input-flicker — Flicker — input animation
• Flow .sds-input-flow — Flow — input animation
• Focus Field .sds-input-focus — Glow ring appears on :focus
• Focus Glow .sds-input-focus-glow — Focus Glow — input animation
• Frame Bloom .sds-input-frame-bloom — Four corner accents bloom outward then seat back onto the field, top pair leading
• Frost .sds-input-frost — Frost — input animation
• Gate Open .sds-input-gate-open — Two tinted panels part horizontally over the field when it takes focus
• Ghost .sds-input-ghost — Ghost — input animation
• Glitch Valid .sds-input-glitch-valid — Glitch Valid — input animation
• Glow Border .sds-input-glow-border — Glow Border — input animation
• Gradient Border .sds-input-gradient-border — Gradient Border — input animation
• Gravity .sds-input-gravity — Gravity — input animation
• Idle Depth .sds-input-idle-depth — The field breathes in depth — its shadow approaches and recedes on a slow tide
• Idle Floatline .sds-input-idle-floatline — The underline drifts gently side to side like a buoy line at rest
• Idle Glimmer .sds-input-idle-glimmer — A tiny star glimmers at the corner every few seconds, spins a quarter turn, and is gone
• Idle Lean .sds-input-idle-lean — A barely-perceptible lean cycle, like paper that isn't quite flat
• Idle Noise .sds-input-idle-noise — Film-grain dots shimmer at 7% opacity in stepped jumps — analog quiet
• Idle Perimeter Dot .sds-input-idle-perimeter-dot — A single dot blinks at each corner in turn, patrolling the field's perimeter
• Idle Soft Zoom .sds-input-idle-soft-zoom — A 0.6% scale tide — imperceptibly alive
• Ink Stroke .sds-input-ink — Outline expands with ink-stroke feel
• Kinetic .sds-input-kinetic — Kinetic — input animation
• Label Spring .sds-input-label-spring — On focus the label lifts with an 8% overshoot and settles small while the field swells a hair
• Laser .sds-input-laser — Laser — input animation
• Momentum .sds-input-momentum — Momentum — input animation
• Border Morph .sds-input-morph — Border-radius morphs between shapes
• Morph Placeholder .sds-input-morph-ph — Placeholder letter-spacing breathes
• Neon Input .sds-input-neon — Neon glow with flicker on the border
• Neural .sds-input-neural — Neural — input animation
• Orbit .sds-input-orbit — Orbit — input animation
• Placeholder Blink .sds-input-ph-blink — A double-blink invitation every few seconds, then a straight face
• Placeholder Breathe .sds-input-ph-breathe — The placeholder breathes slowly between half-light and dim — alive, not urgent
• Placeholder Fade Steps .sds-input-ph-fade-steps — On focus the placeholder vanishes in three stepped after-images, like type lifting off
• Placeholder Flicker In .sds-input-ph-flicker-in — The placeholder powers on through stepped flickers when the field loads
• Placeholder Ghost .sds-input-ph-ghost — On focus the placeholder dips to a ghost, lingers a beat, then lets go
• Placeholder Wave .sds-input-ph-wave — Soft irregular pulses roll through the placeholder, like text under water
• Plasma Field .sds-input-plasma — Plasma glow cycles around the field
• Prism .sds-input-prism — Prism — input animation
• Pulse Dot .sds-input-pulse-dot — Pulse Dot — input animation
• Quantum .sds-input-quantum — Quantum — input animation
• Radar .sds-input-radar — Radar — input animation
• Ring Pulse .sds-input-ring — Magnetic ring pulse on the border
• Ripple .sds-input-ripple — Ripple — input animation
• Saved Flash .sds-input-saved-flash — A quick brightness sweep with a 1% stamp-squash — saved, confirmed
• Scan .sds-input-scan — Scan — input animation
• Seismic Shake .sds-input-shake — Horizontal shake for invalid state
• Shimmer Scan .sds-input-shimmer — Light shimmer scans across the field
• Solar .sds-input-solar — Solar — input animation
• Success Glow .sds-input-success — Green glow for a validated field
• Success Ripple .sds-input-success-ripple — Two green glow rings ripple off the field as it does a contented little bob
• Success Tick .sds-input-success-tick — A checkmark draws itself in two strokes and snaps at the finish
• Tilt In .sds-input-tilt-in — The field tips toward you on focus while its shadow approaches — a 3D nod
• Underline Draw .sds-input-underline-draw — Underline draws from the center to both edges with a snap of overshoot
• Underline Trail .sds-input-underline-trail — Underline draws left to right behind a bright comet head that burns out at the far edge
• Unlock .sds-input-unlock — Unlock — input animation
• Void .sds-input-void — Void — input animation
• Voltage Pulse .sds-input-voltage — Border brightens like voltage spikes
• Warn Tilt .sds-input-warn-tilt — Leans one degree with an amber cast, then rights itself — visible uncertainty
• Waveform .sds-input-waveform — Waveform — input animation
• Zap .sds-input-zap — Zap — input animation
• Zoom Focus .sds-input-zoom-focus — Camera-focus on the field: a breath of blur clears as it sharpens and brightens

Browse all categories · Installation & usage docs