Particle Burst Click

Create a particle burst button. A solid ink pill button (e.g. 'Celebrate ✦'). Every click fires a radial particle burst from the button's center: 12 particles evenly distributed around the circle (angle = index / 12 × 360deg), flying outward to deterministic distances, for example 34px + (index % 3) × 10px, with no randomness at render time, so the burst is stable and testable. Each particle is a 5-7px dot or tiny square drawn from a 4-color set (accent orange, ink, a lighter orange tint, deep rust; alternate shapes by index), animating from the center to its target while fading to 0 opacity and shrinking to 30% scale over 0.65s ease-out. The button squashes to 90% on press and lifts to 104% on hover. Mechanics: each click pushes a burst id into a small state array (cap at ~4 concurrent bursts); render each burst's particles absolutely positioned around the button with pointer-events: none, and remove the burst when its animation completes, so rapid clicks overlap correctly. Accessibility: particles are decorative - aria-hidden. The button keeps its real label and click handler. If prefers-reduced-motion is set, skip the particles entirely and keep only a subtle press scale. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.