Cursor & Interaction Effects

Sparkle Cursor Trail

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

Preview

desktop only

desktop pointer preview

Desktop preview

bash

Copied

1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/sparkle-cursor.json

bash

Copied

1npx shadcn@latest add https://ryong-blog.vercel.app/r/sparkle-cursor.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong-blog.vercel.app/r/sparkle-cursor.json

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/r/sparkle-cursor.json

typescript

Copied

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

Prop	Type	Default	Description
children	React.ReactNode	-	Content rendered inside the component.
className	string	-	Additional classes merged onto the component.
color	string	"var(--theme-accent-current)"	Sparkle color.
fullScreen	boolean	false	Whether the canvas covers the viewport.