Compositions
Core Primitives
Transitions
Typography
Customize
28
36
1
Installation
$ pnpm dlx shadcn@latest add @framecn/cursor-flow
Usage
import { CursorFlow } from "@/components/framecn/cursor-flow";<CursorFlow />API Reference
CursorFlow
| Prop | Type | Default |
|---|---|---|
waypoints | CursorWaypoint[] | DEFAULT_WAYPOINTS |
cursorColor | string | "#fafafa" |
cursorSize | number | 28 |
segmentDuration | number | 36 |
background | string | "#0a0a0a" |
showTargets | boolean | true |
speed | number | 1 |
fps | number | 30 |
durationInFrames | number | 180 |
width | number | 1280 |
height | number | 720 |
className | string | - |
Notes
Bezier arcs between waypoints
The cursor follows per-segment cubic Bezier curves with perpendicular control points. The arc creates natural, realistic movement.
No d3-shape dependency
Curves are computed inline to avoid pulling in external dependencies. Path math is handled internally.