Click Spark
Free
A wrapper that throws short spark lines out of every click inside it.
LV
Lina Varga
Shipped a new build · 2 min ago
Night mode is live. Every level now has a darker palette and softer lights.
Click anywhere on the card
Customize
#ffc24a
8
28px
0.45s
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/click-spark.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/click-spark.tsx.
Usage
import { ClickSpark } from "@/components/ui/click-spark";
<ClickSpark color="#ffc24a" count={8}>
<button type="button" onClick={like}>Like</button>
</ClickSpark>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content that sparks when clicked. |
| color | string | "#ffc24a" | Color of the sparks. |
| count | number | 8 | Number of spark lines in each burst. |
| radius | number | 28 | How far the sparks travel from the click, in pixels. |
| duration | number | 0.45 | Length of one burst, in seconds. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion