Click Spark
A feedback effect that bursts sparks / particles at the click point.
Wrap it around any content and a radial burst of sparks is drawn on canvas at the cursor position on click, as lightweight interaction feedback.
Loading preview…
npx shadcn@latest add https://webberui.com/r/click-spark.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
10
15
8
400
<ClickSpark />
Installation
npx shadcn@latest add https://webberui.com/r/click-spark.jsonOr, once registries are configured in components.json, install it as @webberui/click-spark.
Usage
import { ClickSpark } from "@/components/ui/click-spark";
<ClickSpark sparkColor="#f59e0b" sparkCount={10}>
<button className="rounded-md bg-black px-4 py-2 text-white">Click me</button>
</ClickSpark>The spark layer is stacked on top of the content with pointer-events-none and never intercepts clicks; the container itself listens for onClick, so any interactive element it wraps keeps working as usual.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sparkColor | string | currentColor | Spark color; follows the text color when unspecified |
sparkSize | number | 10 | Length of each spark line segment (px) |
sparkRadius | number | 15 | Maximum radius the sparks fly out to (px) |
sparkCount | number | 8 | Number of sparks per click burst |
duration | number | 400 | Duration of a single burst (milliseconds) |
easing | "linear" | "ease-in" | "ease-out" | "ease-in-out" | "ease-out" | Easing curve of the radius advance |
extraScale | number | 1 | Extra scale factor applied in the tail of the burst |
lineWidth | number | 2 | Spark line segment width (px) |
Accessibility
- When the user has "reduce motion" enabled at the system level, clicks no longer burst sparks
- The sparks are drawn on canvas and marked
aria-hidden— purely visual feedback that does not affect what assistive technology announces - The component calls
cancelAnimationFrameon unmount to clean up the animation loop