← All effects
Input Glow & Shake
-- fps
prefers-reduced-motion detected — validates by colour only, no shake
X-ray · layers
the field glows on focus and on success
an invalid submit shakes the field (off = just turns red)
a tick appears when the value is valid
Parameters
Shake intensity8 px
Shake time400 ms
Glow spread14 px
Roundness10 px
your version · updates as you tinker
How this effect works
The shake is the interesting part: it's not a canned CSS wiggle, it's a decaying sine wave. When an invalid submit fires, the field's horizontal offset is set to sin(progress × π × 8) × INTENSITY × (1 - progress) — a fast oscillation whose amplitude shrinks to zero over the shake time. Because the amplitude decays, it settles smoothly instead of stopping dead, which is what makes it read as a physical "no".
Everything else is state: focus adds a soft glow; a valid value turns the border and glow green and reveals a check; an invalid one turns it red and triggers the shake. Validity here is a tiny check for an @ and a dot, but it stands in for any rule. Type into the field and hit Submit — or watch it demo both states on its own.
Production notes: respects prefers-reduced-motion (colour only, no shake) · the glow is one box-shadow, the shake one transform — no layout thrash · keyboard: Enter submits · the copied snippet is self-contained HTML + CSS + JS.