Stamp
No library Advanced
The check mark crashes down from above like a rubber stamp, with a blur-to-focus motion and six ink-splatter dots radiating outward on impact. Dramatic and tactile.
The check mark crashes down from above like a rubber stamp, with a blur-to-focus motion and six ink-splatter dots radiating outward on impact. Dramatic and tactile.
Goal: Create a "Stamp" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent, white/25% border. On state: dark indigo background (#1e1b4b), indigo border (#4f46e5). When checked: check mark plays a crash-down keyframe — starts translateY(-14px) + scale(1.3) + blur(2px), slams to center with slight overshoot (translateY(2px) scale(0.95)) then settles. Simultaneously, 6 ink-dot spans radiate outward from center using rotate(Ndeg) translateX(14px) + fade-out over 480ms. Unchecking: check shrinks and fades quickly.
Technique: Key-bumped SVG element restarts the stamp keyframe. Ink dots are conditional renders with CSS animation using --angle custom property per dot.
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.