Cursor & Interaction Effects

Sparkle Cursor Trail

지정된 영역 안에서 커서 움직임에 따라 반짝임을 뿌리는 효과입니다.

Preview

cursor effect

Sparkle Cursor Trail

move to scatter sparkles

Installation

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

Code

typescript
Copied
1import { SparkleCursor } from "@/components/sparkle-cursor"23export default function Example() {4  return <SparkleCursor>Move here</SparkleCursor>5}

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the component.
classNamestring-Additional classes merged onto the component.
colorstring"var(--theme-accent-current)"Sparkle color.
fullScreenbooleanfalseWhether the canvas covers the viewport.

Reference

Lightswind Sparkle Cursor