Cursor & Interaction Effects

Dot Cursor Trail

영역 안에서 커서 뒤를 작은 점들이 따라오는 캔버스 트레일 효과입니다.

Preview

desktop only

Dot Cursor Trail

desktop pointer preview

Desktop preview

Installation

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

Code

typescript
Copied
1import { MouseTrailCursor } from "@/components/mouse-trail-cursor"23export default function Example() {4  return (5    <MouseTrailCursor color="#c084fc" size={5} length={20} decay={0.05}>6      <div className="min-h-64">Move inside</div>7    </MouseTrailCursor>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.

color

Type
string
Default
"#c084fc"
Description
Trail dot color from the playground default.

size

Type
number
Default
5
Description
Maximum dot radius in pixels.

length

Type
number
Default
20
Description
Maximum number of trail points to keep.

decay

Type
number
Default
0.05
Description
Alpha decay per frame.

blur

Type
number
Default
0
Description
Canvas blur filter in pixels.

disabled

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

Reference

mouse-animations playground