Gravity Drop
No library Intermediate
The check mark falls from above the box with realistic gravity physics — accelerates in, overshoots slightly, bounces twice, then settles. Unchecking tosses it back upward and fades it out.
The check mark falls from above the box with realistic gravity physics — accelerates in, overshoots slightly, bounces twice, then settles. Unchecking tosses it back upward and fades it out.
Goal: Create a "Gravity Drop" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent, white/25% border. On state: dark background (#0f172a), sky-blue (#38bdf8) border. When checked, the check mark falls from translateY(-18px) opacity(0), accelerates to center, overshoots slightly (translateY(3px)), bounces up (-4px) then settles at (2px) then (0). Feels like real gravity with bounce. Unchecking: check mark briefly rises then drops out of the bottom with fade.
Technique: Key-bumped SVG restarts the keyframe. Box overflow: hidden clips any overshoot travel. Fill and border transition simultaneously.
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.