Cursor & Interaction Effects

Spring Line Cursor

스프링처럼 이어진 선이 커서를 따라오는 캔버스 트레일 효과입니다.

Preview

desktop only

Spring Line Cursor

desktop pointer preview

Desktop preview

Installation

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

Code

typescript
Copied
1import { CanvasCursor } from "@/components/canvas-cursor"23export default function Example() {4  return (5    <CanvasCursor trails={20} nodeCount={50}>6      <div className="min-h-64">Move inside</div>7    </CanvasCursor>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.

trails

Type
number
Default
20
Description
Number of spring trails.

nodeCount

Type
number
Default
50
Description
Number of nodes in each trail.

friction

Type
number
Default
0.5
Description
Trail friction from the Cursify default.

dampening

Type
number
Default
0.25
Description
Velocity transfer between trail nodes.

tension

Type
number
Default
0.98
Description
Spring tension decay across nodes.

lineWidth

Type
number
Default
1
Description
Canvas stroke width in pixels.

hueOffset

Type
number
Default
285
Description
Base hue from the Cursify oscillator.

hueAmplitude

Type
number
Default
85
Description
Hue oscillator amplitude.

hueFrequency

Type
number
Default
0.0015
Description
Hue oscillator frequency.

opacity

Type
number
Default
0.2
Description
Trail stroke alpha.

disabled

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

Reference

Cursify Canvas Cursor