Confetti
Bursts colorful confetti pieces outward from the click point on every click — falling, spinning, and fading out. A celebratory effect for success states, completions, and purchases.
Installation
npx dafink-ui add confettiAlso installs: Button
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Required. Content to wrap, typically a button. Clicking it (or anywhere in the wrapper) triggers the burst. |
| particleCount | number | 60 | Number of confetti pieces rendered per burst. |
| colors | string[] | ['#f43f5e', '#fb923c', '#facc15', '#4ade80', '#38bdf8', '#a78bfa'] | Hex colors randomly assigned to pieces. |
| duration | number | 1500 | Milliseconds for one burst's full fall-and-fade animation. |
| className | string | '' | Additional CSS classes. |
Accessibility
Confetti checks prefers-reduced-motion inside the click handler itself (not cached on mount), the same pattern as ClickSpark; when it matches, burst spawning is skipped entirely — no confetti pieces are ever created or animated, though a passed-in onClick handler still fires. Every burst container is aria-hidden, so the celebratory feedback is invisible to assistive technology. It adds no keyboard behavior of its own and doesn't alter the wrapped children's existing keyboard or focus behavior.