Shake Lock
No library Beginner
The box rattles in a rapid X-axis jitter sequence as if locking in, then snaps to the checked amber fill. Unchecking plays a shorter reverse shake. Kinetic, mechanical feel.
The box rattles in a rapid X-axis jitter sequence as if locking in, then snaps to the checked amber fill. Unchecking plays a shorter reverse shake. Kinetic, mechanical feel.
Goal: Create a "Shake Lock" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: amber (#d97706) fill, yellow (#f59e0b) border. When checked, the box plays a rapid X-axis jitter keyframe: translateX(0 → -5px → 5px → -4px → 4px → -2px → 2px → 0) over 380ms — like it's rattling before locking in. The fill and check mark appear after the shake settles. Unchecking plays a shorter 3-step shake.
Technique: Key-bumped wrapper span restarts the keyframe on each toggle. animIn state tracks direction. Fill transitions simultaneously via CSS transition.
Accessibility: Hidden native <input type="checkbox">. Animations removed under prefers-reduced-motion.
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.