Wobble
No library Beginner
On focus the input jiggles with a CSS keyframe combining rotation and translateX zigzag over 400ms then settles. Playful tactile feedback.
On focus the input jiggles with a CSS keyframe combining rotation and translateX zigzag over 400ms then settles. Playful tactile feedback.
Goal: Create a "Wobble" input focus animation.
Visual behavior: On focus, the input jiggles with a CSS keyframe combining rotation (-2deg → 2deg → -1.5deg → 1deg → ...) and translateX zigzag over 400ms, then settles back to neutral. Playful tactile feedback that communicates "active". The animation fires once per focus event.
Technique:
- CSS @keyframes with alternating rotate() and translateX() values that decay in amplitude
- The keyframe runs once (no iteration) with forwards fill
- Use a React state counter as the input's key prop to remount and restart the animation on each focus
- easing: cubic-bezier(0.22,1,0.36,1)
Accessibility: Animation is skipped entirely under prefers-reduced-motion by overriding animation to none in a media query.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.