← All components
Interaction / effect
Click Spark
A precise burst of radial sparks, only when you interact.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The included Demo.tsx and shared/demo.css recreate the complete preview. Import the main component to compose your own design.
- No continuous work while idle, offscreen, or paused. Reduced motion renders a settled view.
React 19CSS
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | ReactNode | undefined | Button label |
sparkColor | string | #ffffff | Spark color |
sparkSize | number | 10 | Line length |
sparkRadius | number | 15 | Radius |
sparkCount | number | 8 | Spark count |
duration | number milliseconds | 400 | Duration |
easing | linear|ease-in|ease-out|ease-in-out | ease-out | Easing |
extraScale | number | 1 | Spread multiplier |
paused | boolean | false | Suspend motion without adding paused wall time to the animation. |
replayToken | number | 0 | Change this value to restart the animation. |
className | string | | Additional classes for the outer element. |