Simulated Cursor
Frame-timed cursor with press, ripples, hit targets and labels.
PrimitivePaths & shapes
simulated-cursor30fps · 960×540
Install
$ npx remotion-ui@latest add simulated-cursorDrives a pointer across percentage-based waypoints with an arrival frame each. Every hop runs its own spring, so the cursor decelerates into a target the way a hand does rather than gliding at a fixed rate.
Give a waypoint a target to ring the hit area, and a label to chip the
control being used. Frames listed in clickFrames press the pointer down and
fire a ripple.
Each hop runs its own spring, so the cursor decelerates into a target instead of gliding at a fixed rate.
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, color, accent, 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, target: 96, label: "Render" },
]}
clickFrames={[32]}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| points | Array<{ x: number; y: number; frame: number; label?: string; target?: number }> | - | Percent-based waypoints with arrival frames. `label` chips the point, `target` rings the hit area in px. |
| clickFrames | number[] | [48] | Frames that press the pointer and fire a ripple. |
| color | string | "#f4f4f5" | Pointer fill. |
| accent | string | "#e8b86d" | Ripple and target ring color. |
| size | number | 26 | Cursor size in px. |