Pulse Ring
No library Beginner
A checkbox that emits an indigo ring radiating outward (scale 1→2.4, opacity 0.65→0) when checked. The ring only fires on check, not uncheck. The check mark draws in via stroke-dashoffset.
A checkbox that emits an indigo ring radiating outward (scale 1→2.4, opacity 0.65→0) when checked. The ring only fires on check, not uncheck. The check mark draws in via stroke-dashoffset.
Goal: Create a "Pulse Ring" 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 checked, an indigo ring radiates outward from the box — scales from 1× to 2.4× while fading from 0.65 opacity to 0 over 550ms. The ring only fires on check, not uncheck. The check mark draws in via stroke-dashoffset.
Technique: React useState tracks checked/unchecked. A ringKey state (null initially, then incrementing number) controls when the ring span mounts and re-mounts to replay the CSS keyframe. The ring span is only rendered when ringKey is not null. A single @keyframes cb-pulse-ring injected once via useEffect.
Accessibility: Hidden native <input type="checkbox">. Ring animation 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.