Cursor & Interaction Effects

Dot Cursor Trail

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

Preview

cursor effect

Trail

fading dots follow your cursor

Installation

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

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the component.
classNamestring-Additional classes merged onto the component.
colorstring"#c084fc"Trail dot color from the playground default.
sizenumber5Maximum dot radius in pixels.
lengthnumber20Maximum number of trail points to keep.
decaynumber0.05Alpha decay per frame.
blurnumber0Canvas blur filter in pixels.
disabledbooleanfalseWhether to disable the cursor effect.

Reference

mouse-animations playground