remotion-maps

remotion-dev/skills

Animate maps in Remotion videos with Mapbox, MapLibre, MapTiler, CesiumJS, or static images.

What is remotion-maps?

Remotion Maps provides multiple techniques for adding animated map visualizations to Remotion videos. Choose from Mapbox (3D buildings, globe view), MapLibre (free, no API key), MapTiler (geographic annotations), CesiumJS (terrain flythroughs), or static map overlays depending on your animation needs.

Mapbox integration with 3D buildings and globe visualization when zoomed out
MapLibre open-source mapping without requiring API keys
MapTiler support with geographic feature annotations (borders, rivers, labels)
CesiumJS terrain and mountain flythroughs with flight-simulator perspective
Static map technique using satellite images mounted in Img tags

How to install remotion-maps

npx skills add https://github.com/remotion-dev/skills --skill remotion-maps

Prerequisites

Remotion project set up
For Mapbox: valid Mapbox API key
For static maps: satellite image file

Claude Code

Cursor

Windsurf

Cline

How to use remotion-maps

1.Install the skill using: npx skills add https://github.com/remotion-dev/skills --skill remotion-maps
2.Choose one technique based on your requirements (Mapbox, MapLibre, MapTiler, CesiumJS, or static map)
3.Load the TECHNIQUE.md file for your chosen technique
4.Follow the technique-specific setup instructions and code examples
5.Integrate the map component into your Remotion composition

Use cases

Good for

Creating animated travel route visualizations with 3D landmarks
Building geographic data visualizations with annotated borders and features
Generating drone-style flythrough animations over terrain
Producing marketing videos with interactive map interactions
Animating location-based storytelling with satellite imagery

Who it's for

Video creators using Remotion
Geographic data visualization specialists
Travel and tourism content producers
Real estate and location-based marketers
Motion graphics designers

remotion-maps FAQ

Which technique should I use if I don't have an API key?

Use MapLibre, which is fully free and requires no API key. It has all core mapping features except 3D buildings.

Can I show 3D buildings and landmarks in my animation?

Yes, use Mapbox which includes 3D buildings like the Eiffel Tower and supports globe visualization when zoomed out.

What if I need to annotate geographic features like borders or rivers?

MapTiler is designed for this purpose and allows you to draw annotations on top of geographic features.

How do I create flythrough animations over terrain?

Use CesiumJS, which provides flight-simulator perspective and terrain/mountain flythrough capabilities.

Can I use my own satellite image instead of a mapping service?

Yes, the static map technique lets you mount a satellite image in an Img tag and animate on top of it.

Full instructions (SKILL.md)

Source of truth, from remotion-dev/skills.

name: remotion-maps description: Remotion Map animation knowledge version: 4.0.529

Remotion Maps

Choose exactly one technique from the intended shot, then load only that technique's TECHNIQUE.md. Every technique directory is self-contained and may be removed without breaking the others.