Ink Blot
No library Intermediate
The box fill spreads via border-radius morphing through organic amoeba/blob shapes — animating through asymmetric four-corner border-radius values before settling square again. Feels like ink spreading.
The box fill spreads via border-radius morphing through organic amoeba/blob shapes — animating through asymmetric four-corner border-radius values before settling square again. Feels like ink spreading.
Goal: Create an "Ink Blot" checkbox animation.
Visual behavior: A 28×28px checkbox. Off state: transparent fill, white/25% border, 7px border-radius. On state: indigo (#4f46e5) fill, indigo border. When checked, the border-radius morphs through organic blob shapes via @keyframes: 7px → 40% 60% 60% 40% / 30% 70% 70% 30% → 55% 45% 45% 55% / 60% 40% 40% 60% → back to 7px, all while the background fills with indigo. Feels like ink spreading and pooling then settling square. Unchecking reverses with a different blob path.
Technique: Key-bumped element restarts the @keyframe animation. The keyframe animates both border-radius and background 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.