On click, a single transparent ring (border only, no fill) expands outward from the exact click point and fades — different from ripple which fills. Multiple rings can overlap. Uses React useState to track active rings and removes them after 540ms. No dependencies.
Goal: Create a "Burst Ring" button animation.
Visual behavior: On click, a single ring (transparent fill, colored border) expands outward from the exact click point and fades to opacity 0. It's like a ripple but ring-shaped instead of filled. Multiple clicks create multiple overlapping rings. The ring is violet/purple themed.
Technique: Use React useState to store an array of { id, x, y } ring objects. On click, compute x/y relative to the button rect (like the ripple pattern), push a new ring entry, then remove it after 540ms. Each ring is an absolutely-positioned span with border-radius:50%, a colored border, transparent background, and the CSS animation btn-burst-ring: from { transform: translate(-50%, -50%) scale(0.2); opacity: 1 } to { transform: translate(-50%, -50%) scale(2.8); opacity: 0 } over 520ms. The translate(-50%,-50%) centers the ring at the click point. Button uses overflow:hidden and position:relative.
Accessibility: 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.