Click Spark Animation

A component that renders animated spark bursts when the user clicks anywhere inside its container.

Pumki UI

Installation

1import { ClickSpark } from '@/components/pumki-ui/animations/click-spark';

Wrap your clickable area (e.g., button, div) inside <ClickSpark> to add burst animations:

1<ClickSpark sparkColor="#ff3366" sparkSize={12} sparkRadius={20} sparkCount={10} duration={500}>
2  <button>Click Me</button>
3</ClickSpark>

Prop	Type	Default	Description
`sparkColor`	`string`	`”#fff”`	Color of the sparks (HEX or CSS color).
`sparkSize`	`number`	`10`	Length of each spark line.
`sparkRadius`	`number`	`15`	Radius of spark spread from the click point.
`sparkCount`	`number`	`8`	Total number of sparks emitted per click.
`duration`	`number`	`400`	Duration of spark animation in milliseconds.
`easing`	`”linear” \| “ease-in” \| “ease-out” \| “ease-in-out"`	`"ease-out”`	Easing function applied to spark motion.
`extraScale`	`number`	`1.0`	Additional scale multiplier for spark distance.
`children`	`React.ReactNode`	`-`	Any clickable content to wrap inside the spark animation.