Cursor & Interaction Effects

Spring Line Cursor

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

Preview

cursor effect

Spring Line Cursor

spring lines follow your cursor

Installation

bash

Copied

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

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/canvas-cursor.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/canvas-cursor.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/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

Prop	Type	Default	Description
children	React.ReactNode	-	Content rendered inside the component.
className	string	-	Additional classes merged onto the component.
trails	number	20	Number of spring trails.
nodeCount	number	50	Number of nodes in each trail.
friction	number	0.5	Trail friction from the Cursify default.
dampening	number	0.25	Velocity transfer between trail nodes.
tension	number	0.98	Spring tension decay across nodes.
lineWidth	number	1	Canvas stroke width in pixels.
hueOffset	number	285	Base hue from the Cursify oscillator.
hueAmplitude	number	85	Hue oscillator amplitude.
hueFrequency	number	0.0015	Hue oscillator frequency.
opacity	number	0.2	Trail stroke alpha.
disabled	boolean	false	Whether to disable the cursor effect.

Reference

Cursify Canvas Cursor