Motion & texture

Shake Animation

Q: How do I implement a Shake Animation?

On failed password submit, shake the input: translateX keyframes alternating with decay (6, -5, 4, -2, 0) over ~350ms ease-in-out, remove the animation class on animationend so it can replay, and keep a visible error message saying how to fix it.

A quick horizontal wiggle that reads as a head-shake—error feedback with body language.

Also known as error shake · wiggle · head-shake

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Shake Animation".

On failed password submit, shake the input: translateX keyframes alternating with decay (6, -5, 4, -2, 0) over ~350ms ease-in-out, remove the animation class on animationend so it can replay, and keep a visible error message saying how to fix it.

Anatomy:
- amplitude: 4–8px is enough; more reads as an earthquake.
- cycles: Two or three round trips in 300–400ms total.
- decay: Each swing smaller than the last—macOS login does this.

Preferred API / pattern: `CSS animation class toggled on error`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Shake with no copy
○Avoid: Class never removed
○Avoid: Huge amplitude
○Avoid: Shaking the whole page

In plain wordsHow people search for it

“the password field wiggles left and right when I get it wrong”“that Mac login shake when the password is bad”“the little jiggle forms do when validation fails”

AnatomyOpen for part names

amplitude: 4–8px is enough; more reads as an earthquake.
cycles: Two or three round trips in 300–400ms total.
decay: Each swing smaller than the last—macOS login does this.

How to write itOpen for stack patterns

Web (HTML/CSS)@keyframes translateX alternating

React + Tailwind + shadcn/uiCSS animation class toggled on error

SwiftUIwithAnimation + offset keyframes

Ant Designcustom CSS; pair with Form.Item validate status

Notes

Borrowed from the macOS login field: wrong password, no modal—just a head-shake. Motion only says “no”; text must still say what and how to fix (see form-field errors). Use on passwords, codes, and illegal drag snaps. Restraint is taste: 4–8px, three decays, done. Bigger and longer becomes a seizure, not a nod.

Common mistakesHumans and models trip here

Shake with no copy: screen-reader users hear nothing; sighted users still don’t know what to fix.
Class never removed: second error doesn’t shake—clear the class on animationend.
Huge amplitude: looks broken, not polite.
Shaking the whole page: only the offending control should move.

More failure symptoms on AI broke it.

Related patterns

Form FieldOne complete input unit: label, control, placeholder, helper text, and error message.Alert / BannerAn in-page, persistent status strip—four severities, never traps the user in a dialog.Spring AnimationMotion driven by stiffness and damping instead of a fixed duration curve—naturally overshoots, then settles.

Spotted a wrong name or missing pattern?

Message on X