Cursor & Interaction Effects

Bubble Cursor Trail

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

Preview

desktop only

Bubble Cursor Trail

desktop pointer preview

Desktop preview

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/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

children

Type
React.ReactNode
Default
-
Description
Content rendered inside the component.

className

Type
string
Default
-
Description
Additional classes merged onto the component.

fillColor

Type
string
Default
"#e6f1f7"
Description
Bubble fill color from the cursor-effects default.

strokeColor

Type
string
Default
"#3a92c5"
Description
Bubble stroke color from the cursor-effects default.

maxParticles

Type
number
Default
180
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