Cursor Path
Cursor travelling a route, with drawn trail and click ripples.
PrimitivePaths & shapes
cursor-path30fps · 960×540
Install
$ npx remotion-ui@latest add cursor-pathMoves a pointer along a route built from points, or along an SVG path passed
to d. Travel is measured by arc length, so the cursor holds one speed across
a long hop and a short one, and smoothing rounds the corners into a hand-like
curve.
The trail draws in behind the cursor by default; trail="guide" shows the
whole route up front instead. clickAt ripples at the waypoints you name — the
timing is derived from where each waypoint sits along the path, so clicks stay
in sync when the duration changes.
Advanced. Installs @remotion/paths.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/cursor-path- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: points, d, durationInFrames, delayInFrames, 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
Example
import { CursorPath } from "@/remotion/primitives/cursor-path";
<CursorPath points={[{ x: 80, y: 120 }, { x: 320, y: 80 }]} clickAt={[1]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| points | { x: number; y: number }[] | - | Route waypoints in the parent's coordinates. |
| d | string | - | Authored SVG path to follow instead of points. |
| durationInFrames | number | 90 | Travel duration. |
| delayInFrames | number | 0 | Frames before the cursor sets off. |
| color | string | "#e8b86d" | Trail and ripple color. |
| size | number | 34 | Cursor size in px. |
| smoothing | number | 0.6 | 0 hops in straight lines; higher rounds corners. |
| trail | "draw" | "guide" | "none" | "draw" | Reveal the route behind the cursor, show it up front, or hide it. |
| clickAt | number[] | - | Waypoint indices that ripple as the cursor arrives. |