Cursor & Interaction Effects

Character Particle Cursor

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

Preview

cursor effect

Characters

characters under your control

Installation

bash

Copied

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

bash

Copied

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

bash

Copied

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

bash

Copied

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

Prop	Type	Default	Description
children	React.ReactNode	-	Content rendered inside the component.
className	string	-	Additional classes merged onto the component.
characters	string[]	["h", "e", "l", "l", "o"]	Characters rendered as particles.
colors	string[]	cursor-effects palette	Particle colors from the cursor-effects default.
font	string	"15px serif"	Canvas font used for particle glyphs.
cursorOffset	{ x: number; y: number }	{ x: 0, y: 0 }	Offset applied to each spawned character.
maxParticles	number	170	Particle cap used to prevent runaway canvas work.
disabled	boolean	false	Whether to disable the cursor effect.

Reference

cursor-effects demo