Cursor & Interaction Effects

Star Particle Cursor

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

Preview

cursor effect

Fairy Dust

stardust follows your cursor

Installation

bash

Copied

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

bash

Copied

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

bash

Copied

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

bash

Copied

1bunx shadcn@latest add https://ryong.dev/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

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