ClickSpark
click-sparkEmits short radial spark lines from pointer clicks.
Usage
Basic usage
Wrap any content and click anywhere within it to emit a circle of foreground color sparks at the click point.
Click here to emit sparks
tsx
<div className="relative h-56 cursor-pointer overflow-hidden rounded-xl border border-border">
<ClickSpark className="absolute inset-0">
{/* Your content */}
</ClickSpark>
</div>Custom color and quantity
sparkColor goes to token, sparkCount / sparkRadius to control spark density and burst range.
Click here to emit sparks
tsx
<ClickSpark
sparkColor="var(--color-chart-3)"
sparkCount={12}
sparkRadius={22}
className="absolute inset-0"
>
{/* Your content */}
</ClickSpark>Big outbreak
Lengthen the line segment, enlarge the radius, and slow down the easing for a more dramatic celebratory burst.
Click here to emit sparks
tsx
<ClickSpark
sparkColor="var(--color-chart-1)"
sparkCount={16}
sparkSize={18}
sparkRadius={36}
duration={700}
easing="ease-in-out"
extraScale={1.2}
className="absolute inset-0"
>
{/* Your content */}
</ClickSpark>When to Use
Use it to emit a radial spark burst wherever someone clicks inside a button area, card, or interactive hero. It is a wrapper, so clicks on its content define each burst origin. Use BlobCursor for a liquid cursor trail, Antigravity for a full particle field, or Crosshair for target tracking.
Import
ts
import { ClickSpark } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| sparkColor | string | var(--color-foreground) | Spark color (automatic light and dark theme), can pass any CSS color |
| sparkSize | number | 10 | Initial spark-segment length in pixels; higher values create bolder strokes |
| sparkRadius | number | 15 | The maximum radius of sparks flying (px), determines the burst range |
| sparkCount | number | 8 | The number of sparks emitted by one click (average 360°) |
| duration | number | 400 | Spark animation duration in milliseconds; higher values leave a longer-lived trail |
| easing | "linear" | "ease-in" | "ease-out" | "ease-in-out" | "ease-out" | Sparks fly out of the easing curve |
| extraScale | number | 1 | Radius extra scaling factor, >1 for amplified burst, <1 for convergence |
| className | string | — | Transparent to the root container (relative DOM element) |
| style | CSSProperties | — | Inline styles forwarded to the root container |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Package content, click anywhere within it and sparks will burst out at the click point |
Usage Guidelines
- The token used for
sparkColormust be prefixed with--color-(var(--color-foreground)), and the canvas strokeStyle feedvar(--foreground)does not resolve. See [[hulian-token-color-var-needs-color-prefix]]. - It is a wrapper: sparks are only triggered when clicked in the wrapped
childrenarea; the root container must be the positioning context (relative). - No sparks are released silently under reduced-motion; the RSC/jsdom environment is safe (no errors are reported), but the actual sparks require the browser to run.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
Click here to emit sparks
<div className="relative h-56 cursor-pointer overflow-hidden rounded-xl border border-border">
<ClickSpark
sparkCount={8}
sparkSize={10}
sparkRadius={15}
duration={400}
easing="ease-out"
className="absolute inset-0"
>
{/* Your content */}
</ClickSpark>
</div>