Diagrams

Animated Route Map — editable Remotion component

A deterministic dotted globe with geographic routes, moving travel markers, and optional location labels.

Component details

Agent Motion installs components into an existing Remotion project. If you are starting fresh, create the standard project structure first:

npx @agent-motion/cli create remotion my-remotion-video

Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.

npx @agent-motion/cli add animated-route-map@0.3.0

The canvas is transparent; compose the globe over a scene background with enough contrast for the selected preset.
Points use geographic latitude and longitude in degrees rather than screen percentages.
Links propagate as a directed graph: a route starts when its from point is reached, so branches from the same point animate in parallel.
Presets are reproducible bundles of public palette, route-width, and glow props; explicit props override mono, signal, or neon.
Choose one of four dotSize presets before adjusting any other visual density settings.
Land always uses the complete ultra-density Natural Earth point cloud.
Use dotJitter from zero to one to control deterministic position variation without changing density.
Use backsideOpacity to control the dim point cloud on the opposite hemisphere.
Use graticuleOpacity to control meridians and parallels independently from all point layers.
Use sphereOpacity to control only the globe body without fading land dots, routes, or labels.
The route graph finishes two seconds before the end while the globe keeps rotating; set rotationSpeed to zero when it must remain fixed.
Width and height control the container; size controls only the globe diameter while strokes and labels remain pixel-stable. Leave all five layout props unset for centered automatic sizing.