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-blog.vercel.app/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

children

Type
React.ReactNode
Default
-
Description
Content rendered inside the component.

className

Type
string
Default
-
Description
Additional classes merged onto the component.

sparkColor

Type
string
Default
"#fff"
Description
Spark line color.

sparkColors

Type
readonly string[]
Default
-
Description
Optional palette used to randomize each spark color.

sparkSize

Type
number
Default
10
Description
Spark line length.

sparkRadius

Type
number
Default
15
Description
Spark travel distance.

sparkCount

Type
number
Default
8
Description
Number of lines per click.

duration

Type
number
Default
400
Description
Spark animation duration in ms.

Reference

ReactBits Click Spark Burst