A checkbox that plays a spring-bounce keyframe animation on the box itself when toggled — compresses then overshoots on check, lightly expands then settles on uncheck. Fill and border color transition simultaneously.
Goal: Create a "Bounce" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: indigo (#6366f1) fill and border. When toggled, the entire box plays a CSS keyframe spring-bounce animation — on check: compress (scale 0.8) then overshoot (scale 1.22) then settle; on uncheck: slight expand (scale 1.14) then compress (scale 0.93) then settle. The fill color and check mark opacity transition simultaneously. The check is a simple white SVG path that fades in/out.
Technique: React useState tracks checked state and animation direction. A separate animKey state triggers a component key change to restart the CSS animation. Two @keyframes (cb-bounce-in, cb-bounce-out) injected once via useEffect. The animation property on the box references the correct keyframe by name.
Accessibility: Hidden native <input type="checkbox">. Animations skipped 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.