Cursor & Interaction Effects

Star Particle Cursor

커서 이동을 따라 작은 별가루가 흩어지는 영역형 파티클 효과입니다.

Preview

desktop only

desktop pointer preview

Desktop preview

Installation

bash

Copied

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

bash

Copied

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

bash

Copied

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

bash

Copied

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

Code

typescript

Copied

1import { FairyDustCursor } from "@/components/fairy-dust-cursor"23export default function Example() {4  return (5    <FairyDustCursor>6      <div className="min-h-64">Move inside</div>7    </FairyDustCursor>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.

colors

Type: string[]
Default: ["#D61C59", "#E7D84B", "#1B8798"]
Description: Particle colors from the cursor-effects default.

fairySymbol

Type: string
Default: "*"
Description: Character rendered as each dust particle.

maxParticles

Type: number
Default: 160
Description: Particle cap used to prevent runaway canvas work.

disabled

Type: boolean
Default: false
Description: Whether to disable the cursor effect.

Prop	Type	Default	Description
children	React.ReactNode	-	Content rendered inside the component.
className	string	-	Additional classes merged onto the component.
colors	string[]	["#D61C59", "#E7D84B", "#1B8798"]	Particle colors from the cursor-effects default.
fairySymbol	string	"*"	Character rendered as each dust particle.
maxParticles	number	160	Particle cap used to prevent runaway canvas work.
disabled	boolean	false	Whether to disable the cursor effect.

Reference

cursor-effects demo