The entire box squishes flat (scaleY 0.28) under simulated finger pressure then springs back up with an overshoot, revealing the checked fill. Distinct from raised (3D) — this is a flat squeeze-and-spring.
Goal: Create a "Pressure Dip" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: violet (#7c3aed) fill and border. When checked, the entire box squishes flat: keyframe goes scaleY(1) → scaleY(0.28) scaleX(1.15) at 18% → overshoots scaleY(1.08) scaleX(0.96) at 45% → scaleY(0.97) at 65% → scaleY(1) at 100%. Feels like pressing a physical button that springs back up. The check mark fades in with a delay after the spring settles. Unchecking plays a reversed squish.
Technique: Key-bumped wrapper span plays keyframe animation on toggle. Fill and border transition 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.