Components
Click spark
Wrap anything and every click inside throws a ring of sparks from the exact point — a tiny reward that makes a whole page feel more physical.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { ClickSpark } from '@vizzele/react';
<ClickSpark count={8} radius={26}>
<main>{/* your page */}</main>
</ClickSpark>Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 8 | Sparks per click. |
radius | number | 26 | How far they fly (px). |
color | string | — | One colour; the iridescent palette by default. |
duration | number | 450 | Milliseconds. |
Accessibility
- Sparks are aria-hidden and do not catch the pointer, so clicks reach what is underneath.
- Nothing is drawn with reduced motion.