Input field

How this works

Most of this library confirms that something worked. This is the first component that also has to tell you something didn't — and motion is what keeps that feeling like useful feedback instead of an alarm.

Focus/blur duration

How long the border takes to step from its resting color to accent (on focus) or back (on blur). This is the same kind of plain color transition as the checkbox's fill — no physics needed, just a clean, fast step. Focus uses ease-out (arriving), blur uses ease-in (leaving), per the library's entrance/exit rule.

Shake amplitude

How far the field travels left-right when validation fails, in pixels. At 0px there's no shake at all — you'd only have the red border to notice. At 12px it becomes a very deliberate, almost cartoonish wobble. The default, 6px, is small enough to read as 'no' without looking broken.

Shake duration

How long the entire shake sequence takes, start to finish. Short (150ms) reads as a sharp flinch; long (500ms) starts to feel like the field is malfunctioning rather than rejecting bad input. 300ms is the default because it's long enough to register as an oscillation rather than a jump cut.

Why the shake is allowed to overshoot

Every other motion in this library deliberately avoids bounce and overshoot — routine actions shouldn't feel playful. The error shake is the one exception, called out directly in motion-principles.md: a rare, meaningful moment is allowed to break the house style specifically because breaking it is what makes it register as different from everything else.

The floating label

The label isn't a separate hint above the field — it starts inside the field like a placeholder, then springs up and shrinks the moment you focus or type. That upward motion isn't exposed as a knob because it's a fixed spring (the library's 'standard' preset) rather than something this component's tuning pass is about — but watch it and you'll notice it settles rather than snapping, which is what makes it feel considered instead of mechanical.

Reduced motion

With prefers-reduced-motion on, the shake doesn't translate the field at all — instead the border briefly flashes to a stronger tone and back. The error is still perceivable the instant it happens; it's just communicated by color instead of movement.