Simulated Cursor
Frame-timed cursor with click pulses for tutorials.
PrimitivePaths & shapes
simulated-cursor30fps · 960×540
Install
$ npx remotion-ui@latest add simulated-cursorOverlay a cursor that follows percentage-based waypoints with optional click ripples.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/simulated-cursor- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: points, clickFrames, 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
Example
import { SimulatedCursor } from "@/remotion/primitives/simulated-cursor";
<SimulatedCursor points={[{ x: 20, y: 60, frame: 0 }, { x: 70, y: 40, frame: 30 }]} clickFrames={[30]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| points | Array<{ x: number; y: number; frame: number }> | - | Percent-based waypoints with frame timestamps. |
| clickFrames | number[] | - | Frames that trigger click ripples. |
| size | number | 22 | Cursor size in px. |