ClickBurst

A small burst of sparks from wherever a button is clicked.

Clicked 0 times

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/click-burst.json

React
import ClickBurst from "@/components/fx/click-burst"

<ClickBurst><button onClick={save}>Celebrate</button></ClickBurst>

Sparks are aria-hidden, ignore pointer events and are removed after their animation.
Keyboard activation bursts from the centre of the element.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows no sparks.

Prop	Type	Default	Description
children	ReactNode	—	Usually a button; clicks still reach it.
color	string	'#fbbf24'	Spark colour.
sparks	number	8	Number of sparks.
distance	number	28	Spark travel in px.