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

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

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the component.
classNamestring-Additional classes merged onto the component.
trailsnumber20Number of spring trails.
nodeCountnumber50Number of nodes in each trail.
frictionnumber0.5Trail friction from the Cursify default.
dampeningnumber0.25Velocity transfer between trail nodes.
tensionnumber0.98Spring tension decay across nodes.
lineWidthnumber1Canvas stroke width in pixels.
hueOffsetnumber285Base hue from the Cursify oscillator.
hueAmplitudenumber85Hue oscillator amplitude.
hueFrequencynumber0.0015Hue oscillator frequency.
opacitynumber0.2Trail stroke alpha.
disabledbooleanfalseWhether to disable the cursor effect.

Reference

Cursify Canvas Cursor