Round Morph
No library Beginner
The checkbox shape morphs from a rounded square (7px radius) to a perfect circle on check via animated border-radius with a spring overshoot. Pink/magenta color. Clean and satisfying shape transformation.
The checkbox shape morphs from a rounded square (7px radius) to a perfect circle on check via animated border-radius with a spring overshoot. Pink/magenta color. Clean and satisfying shape transformation.
Goal: Create a "Round Morph" checkbox animation.
Visual behavior: A 28×28px checkbox. Off state: square-ish (7px border-radius), transparent fill, white/25% border. On state: perfect circle (border-radius: 50%), pink (#ec4899) fill and border. The border-radius transitions with a spring overshoot cubic-bezier(0.34, 1.56, 0.64, 1) so it overshoots slightly past 50% before settling. Check mark fades+scales in with a 150ms delay after the shape starts morphing.
Technique: Single CSS transition on border-radius, background, and border-color. No keyframes needed.
Accessibility: Hidden native <input type="checkbox">. Transitions 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.