A burst of short lines radiates from every click and fades, like a cartoon impact.
npx shadcn@latest add https://hyperblur.dev/r/click-spark.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/click-spark.tsx.
import { ClickSpark } from "@/components/hyperblur/click-spark"
<div className="relative"><ClickSpark /><button>...</button></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#ffffff" | Color of the sparks. |
| count | number | 8 | Sparks per click. |
| size | number | 12 | Length of each spark in pixels. |
| radius | number | 24 | How far the sparks travel in pixels. |
| duration | number | 400 | Lifetime of a burst in milliseconds. |
| easing | "ease-out" | "linear" | "ease-out" | Travel curve of the sparks. |