Cursor & Interaction Effects

Bubble Cursor Trail

커서 움직임을 따라 거품 파티클이 떠오르는 영역형 효과입니다.

Preview

cursor effect

Bubbles

move to float bubbles

Installation

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

Code

typescript
Copied
1import { BubbleCursor } from "@/components/bubble-cursor"23export default function Example() {4  return (5    <BubbleCursor fillColor="#e6f1f7" strokeColor="#3a92c5">6      <div className="min-h-64">Move inside</div>7    </BubbleCursor>8  )9}

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the component.
classNamestring-Additional classes merged onto the component.
fillColorstring"#e6f1f7"Bubble fill color from the cursor-effects default.
strokeColorstring"#3a92c5"Bubble stroke color from the cursor-effects default.
maxParticlesnumber180Particle cap used to prevent runaway canvas work.
disabledbooleanfalseWhether to disable the cursor effect.

Reference

cursor-effects demo