ClickSpark
Spawns a brief burst of thin spark lines radiating outward from the click point on every click, fading out as they travel — a satisfying, subtle click-feedback effect.
Installation
npx dafink-ui add click-sparkDemo
Click anywhere in this box
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Required. Content to wrap. Clicks anywhere within trigger a burst at the click coordinates. |
| sparkCount | number | 8 | Number of spark lines rendered per burst. |
| sparkSize | number | 12 | Length of each spark line in pixels. |
| duration | number | 400 | Milliseconds for one burst's full shoot-and-fade animation. |
| className | string | '' | Additional CSS classes. |
Accessibility
ClickSpark checks prefers-reduced-motion inside the click handler itself (not cached on mount); when it matches, burst spawning is skipped entirely — no spark lines are ever created or animated, though a passed-in onClick handler still fires. Every burst container is aria-hidden, so the spark 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.