Product UI

Cursor Tour — editable Remotion component

A reusable cursor walkthrough overlay with constant-speed waypoint motion, click pulses, an optional moving spotlight, and content-derived timing.

Component details

Version
0.2.0
License
MIT
Duration
2.7 seconds
Dimensions
1920 × 1080

Install editable source

npx @agent-motion/cli add cursor-tour@0.2.0

Agent guidance

  • Pair xPositions and yPositions in the order the cursor should visit them.
  • Use any number of paired waypoints; import calculateCursorTourDuration from the component entrypoint to derive the matching scene duration.
  • The cursor moves at pixelsPerFrame, so longer route segments automatically take more frames.
  • Place clickFrames when the cursor reaches the waypoint being selected; the duration calculator also includes click pulses that finish after the route.
  • Overlay Cursor Tour above Browser Spotlight or any product UI scene.
  • Disable spotlight when only pointer movement and click feedback are needed.
  • Cursor Tour is always a full-composition overlay; provide waypoints in composition coordinates and layer it above the UI being demonstrated.

Related Remotion components