Click Spark

Short strokes burst out from wherever you click, then shrink and fade away.

Preview

Click anywhere

Burst

Trigger

Colour

Custom

Count

Size

10px

Radius

18px

Duration

400ms

Line width

2px

Sound

Volume

0.4

Setup

Install with the shadcn CLI

$npx shadcn@latest add https://kinetikui.vercel.app/r/click-spark.json

One command adds every file, the npm packages and any Kinetik components it builds on. Needs a components.json; the CLI offers to create one if your project has none.

Or install manually

1
Run in your terminal:
$npm install clsx tailwind-merge
2
Copy lib/utils.ts from the Code tab. Skip if you already have cn().
3
Copy the component from the Code tab and create components/ui/click-spark.tsx in your project.

Import and render:

Example

import { ClickSpark } from "@/components/ui/click-spark"

<ClickSpark>
  <main>…</main>
</ClickSpark>

No dependencies: it is plain React and Canvas.

Usage

Wrap any area. Every click inside it sends sparks out from the cursor.

import { ClickSpark } from "@/components/ui/click-spark"

export function Page() {
  return (
    <ClickSpark sparkCount={10} sparkRadius={24}>
      <main>…</main>
    </ClickSpark>
  )
}

The sparks use the wrapper's text colour by default, so they follow light and dark mode. Pass sparkColor to pin a colour.

Bursts and triggers

Pick a shape with burst: straight lines, swirling curves, dots, a single expanding ring, or spinning stars. Set trigger="dblclick" to fire only on a double click, so normal clicks stay quiet.

<ClickSpark burst="curves">…</ClickSpark>

<ClickSpark burst="stars" trigger="dblclick">…</ClickSpark>

Sound

Set sound to play a soft synthesised tick on every click, or pass a URL to use your own file. Files are fetched once and decoded, so quick clicks overlap without lag.

<ClickSpark sound volume={0.3}>…</ClickSpark>

<ClickSpark sound="/sounds/pop.mp3">…</ClickSpark>

Props

Prop	Type	Default	Notes
`burst`	`"lines" \| "curves" \| "dots" \| "ring" \| "stars"`	`"lines"`	Shape of the burst. A ring draws one circle per click.
`trigger`	`"click" \| "dblclick"`	`"click"`	Fire on every click or only on a double click.
`sparkColor`	`string`	Text colour	Stroke colour.
`sparkSize`	`number`	`10`	Length of each stroke at the start, in px.
`sparkRadius`	`number`	`18`	How far the strokes travel, in px.
`sparkCount`	`number`	`8`	Strokes per click.
`duration`	`number`	`400`	Ms for one burst.
`lineWidth`	`number`	`2`	Stroke width in px.
`sound`	`boolean \| string`	`false`	true for a built-in tick, or a URL to an audio file.
`volume`	`number`	`0.4`	Sound volume, 0 to 1.
`className`	`string`	—	Applied to the wrapper.

Accessibility

The canvas is decorative, hidden from screen readers and ignores pointer events
Clicks pass through to the children as normal
Sound is off by default, since unexpected audio can be disruptive