Cursor & Interaction Effects

Character Particle Cursor

커서 주변에 문자 파티클이 생성되는 영역형 효과입니다.

Preview

desktop only

Character Particle Cursor

desktop pointer preview

Desktop preview

Installation

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

Code

typescript
Copied
1import { CharacterCursor } from "@/components/character-cursor"23export default function Example() {4  return (5    <CharacterCursor characters={["h", "e", "l", "l", "o"]}>6      <div className="min-h-64">Move inside</div>7    </CharacterCursor>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.

characters

Type
string[]
Default
["h", "e", "l", "l", "o"]
Description
Characters rendered as particles.

colors

Type
string[]
Default
cursor-effects palette
Description
Particle colors from the cursor-effects default.

font

Type
string
Default
"15px serif"
Description
Canvas font used for particle glyphs.

cursorOffset

Type
{ x: number; y: number }
Default
{ x: 0, y: 0 }
Description
Offset applied to each spawned character.

maxParticles

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

disabled

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

Reference

cursor-effects demo