On click, 22 colorful rectangular particles are spawned from the click point inside a relatively-positioned wrapper. Each particle flies outward in an evenly distributed radial spread with slight randomness, rotating and fading over 500–900ms via CSS custom properties (--tx, --ty, --rot, --dur) and a single @keyframes rule. Particles are removed from the DOM after animation. No dependencies.
Goal: Create a "Confetti" button animation.
Visual behavior: On click, 22 colorful rectangular particles burst from the click point in all directions — like a confetti cannon. Each particle is a small colored rectangle (5-10px × 4-8px) that flies outward in a radial spread, rotates up to 720 degrees, and fades to opacity 0 over 500-900ms. Colors are drawn from an amber/pink/indigo/emerald/red/teal/purple palette. The particles escape the button bounds (overflow: visible on a wrapper div).
Technique: Inject a @keyframes btn-confetti-fly rule once that transitions to translate(--tx, --ty) rotate(--rot) and opacity 0. On click, loop 22 times: compute angle as (2π * i / 22) + small random offset, compute tx/ty from cos/sin * speed (55-135px), pick a random color, create a div element with data-confetti attribute, set inline CSS custom properties --tx, --ty, --rot, --dur, position it at the click coords relative to a wrapper div obtained via containerRef. Append to the wrapper, remove after animation ends. Use a ref for the wrapper div.
Accessibility: Under prefers-reduced-motion, particles are set to opacity 0 immediately via CSS and do not animate.
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.