Click Spark

Every click throws a ring of sparks in currentColor — a tiny, satisfying acknowledgement.

canvasclick2 files · 92 locdeps: clsx, tailwind-merge

CLICK ANYWHERE

Sparks inherit currentColor — set it with a text-* class.

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/click-spark.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs click-spark

import { ClickSpark } from "@/components/opus/effects/click-spark";

<ClickSpark className="text-primary">…</ClickSpark>

Prop	Type	Default	Description
color	string	"currentColor"	Spark colour.
count / radius / length	number	8 / 26 / 10	Spark count, travel and size (px).
duration	number	0.45	Seconds.