A tiny star of rays that bursts from every click.
Mount once and every pointer click sends out a small star of rays that clears from the centre outward. Tints itself from the clicked element's text colour, so it reads on any surface. Scope it to one element with target, tune rays, size, spread and duration. Keyboard activation never sparks, and it is off under prefers-reduced-motion.
Add the package. ClickSpark draws a small star of rays at the pointer on every click. It renders nothing itself and needs no stylesheet.
pnpm add @roy-ui/uiimport { ClickSpark } from '@roy-ui/ui';
// or just this component:
import { ClickSpark } from '@roy-ui/ui/click-spark';Mount it once, for example in your root layout, and every pointer click in the document sparks. Pass a target ref to limit it to one element. By default the rays take a soft tint of the clicked element's text colour, so they show up on light and dark surfaces alike.
With target, only clicks inside that element spark. Try the buttons or the empty space around them.
const ref = useRef<HTMLDivElement>(null);
<div ref={ref}>
<ClickSpark target={ref} />
<button>Save</button>
<button>Share</button>
<button>Archive</button>
</div>
// or app-wide, once:
<ClickSpark />Colour, ray count, length, travel, thickness and timing are all props. With jitter off, every burst uses the same angle.
Each box has its own ClickSpark with different settings.
<ClickSpark target={a} color="#f59e0b" rays={8} />
<ClickSpark target={b} color="#60a5fa" rays={12} size={10} spread={14} thickness={1.5} />
<ClickSpark target={c} color="#f472b6" rays={4} duration={900} jitter={false} />Only primary-button pointer clicks spark. Keyboard activation (Enter or Space, where event.detail is 0) never does, and nothing sparks under prefers-reduced-motion. Each burst is an aria-hidden, pointer-events: none node fixed to <body>. It is removed as soon as its Web Animations finish, so it never blocks clicks or stays in the DOM. The listener is passive and runs in the capture phase, so handlers that stop propagation still get a spark. Option changes apply to the next click without re-binding the listener. It is SSR-safe: nothing touches window or document until the component mounts.
<ClickSpark disabled={!settings.sparks} />ClickSpark renders null, so it takes no DOM props.
| Prop | Type | Default | Description |
|---|---|---|---|
target | RefObject<HTMLElement | null> | document | Element to listen on. Omit it to spark on every click in the document. |
color | string | text colour at 70% | Ray colour (any CSS colour). The default is a soft tint of the clicked element’s text colour. |
rays | number | 5 | Number of rays in each burst. |
size | number | 6 | Length of each ray in px. |
spread | number | 8 | How far each ray travels outward as it fades, in px. |
thickness | number | 1.25 | Ray thickness in px. |
duration | number | 520 | Burst duration in ms. |
jitter | boolean | true | Rotate each burst randomly so rapid clicks don’t all make the same star. |
disabled | boolean | false | Turn the effect off without unmounting. |