Sparks

Bursts of white-hot sparks that cool to the neon color, fired from a hook, a function or a click wrapper.

New in 1.7.

relay-web

main · 4f2a91c

Retry webhooks with jittered backoff

Build: 41s
Checks: 214/214
Bundle: −3.2 kB

Ready for production

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/sparks.json

Usage

import { useSparks } from "@/components/ui/sparks"

const { ref, fire } = useSparks({ count: 48, spread: 150 })

<Button ref={ref} onClick={() => fire()}>Deploy</Button>

Examples

Hold to confirm

Fired from Hold Button's onComplete, in every direction.

Five stars only

fireSparks takes any element as its origin, here the star that was picked.

Wrapper

<Sparks> fires on any click inside it, from the pointer, or from the button when it's pressed with the keyboard.

API reference

useSparks

Returns { ref, fire }. Put ref on an element and fire() bursts from its centre in its --neon color.

Prop	Type	Default
`defaults`	`SparksOptions` Options for every burst; options passed to fire() win.	`{}`

SparksOptions

Also accepted by fireSparks(options), which needs no hook.

Prop	Type	Default
`origin`	`Element \| DOMRect` Fires from its centre. An element also lends its --neon and --neon-glow.	None
`x, y`	`number` Viewport coordinates, instead of the origin's centre.	None
`color`	`NeonColor` Overrides the origin's color.	None
`count`	`number` Number of sparks.	`40`
`angle`	`number` Direction in degrees; -90 is straight up.	`-90`
`spread`	`number` Width of the cone in degrees.	`360`
`velocity`	`number` Launch speed in pixels per second.	`520`
`gravity`	`number` Pull in pixels per second squared.	`900`
`drag`	`number` Air drag per second.	`2.4`
`life`	`number` Seconds a spark burns, give or take 40%.	`0.9`

Sparks

A wrapper with no box of its own (display: contents). Takes every SparksOptions field except origin, x and y, plus span attributes.

Prop	Type	Default
`disabled`	`boolean` Stop firing without unwrapping.	`false`
`color`	`NeonColor` Otherwise the clicked element's --neon.	clicked element

Accessibility

Sparks draw on one canvas fixed over the viewport, added on the first burst and removed when the last spark dies. It's aria-hidden and ignores the pointer.
Each spark is a short streak whose length follows its speed, white-hot at birth, the neon color through most of its life and a flickering ember at the end. Slow embers drift on less gravity.
The canvas is capped at 2× pixel density, holds at most 900 sparks, and drops everything when the tab is hidden.
With reduced motion nothing flies: a single soft bloom of the color fades where the burst would have been.
Bursts are decoration. Announce the event itself (a toast, a live region) as you would without them.