# 100 Inputs CSS animations

Focus, validation, ambient and reveal states for form fields. Bundle: 8.3 KB gzip (47.0 KB minified).

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

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