Cursor & Interaction Effects

Click Spark Burst

클릭할 때마다 방사형 불꽃이 캔버스 위에 그려지는 효과입니다.

Preview

interaction effect

Click Spark Burst

click anywhere in the stage

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/r/click-spark.json

Code

typescript
Copied
1import { ClickSpark } from "@/components/click-spark"23export default function Example() {4  return (5    <ClickSpark sparkColor="#5227ff" sparkRadius={32}>6      <button>Click for sparks</button>7    </ClickSpark>8  )9}

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the component.
classNamestring-Additional classes merged onto the component.
sparkColorstring"#fff"Spark line color.
sparkColorsreadonly string[]-Optional palette used to randomize each spark color.
sparkSizenumber10Spark line length.
sparkRadiusnumber15Spark travel distance.
sparkCountnumber8Number of lines per click.
durationnumber400Spark animation duration in ms.

Reference

ReactBits Click Spark Burst