Vectors
Cursor Path
Animated cursor movement along points.
Primitivevectors
Install
npx remotion-ui@latest add cursor-pathPointer motion primitive for product demos and tutorials.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add cursor-pathImport after install
@/remotion/primitives/cursor-path- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: points, durationInFrames, size, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { CursorPath } from "@/remotion/primitives/cursor-path";
<CursorPath points={[{ x: 80, y: 120 }, { x: 320, y: 80 }]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| points* | { x: number; y: number }[] | — | Cursor route points. |
| durationInFrames | number | 90 | Travel duration. |
| size | number | 34 | Cursor size. |