skills.rest
remotion-dev
remotion-devOFFICIAL
Explore all skills by this author →
Website𝕏@remotionGitHub

remotion-maps

Create animated map compositions in Remotion videos using static images, Mapbox, MapLibre, MapTiler, or CesiumJS.

57.9k|4.4k|Updated Jun 23, 2020
Search Tags:#video#Remotion#mapbox#cesium#MapLibre#maptiler#map animation
One-click install
npx skills add https://github.com/remotion-dev/remotion --skill remotion-maps
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-maps
Source: https://github.com/remotion-dev/remotion/tree/main/packages/skills/skills/remotion-maps
Command: npx skills add https://github.com/remotion-dev/remotion --skill remotion-maps

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mapbox-gl, maplibre-gl, @maptiler/sdk, @turf/turf, cesium, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Creating deterministic, frame-accurate map animations in Remotion is difficult because map libraries rely on WebGL, async tile loading, and browser-timed transitions that break headless rendering. This Skill provides vetted techniques for rendering maps as video frames without flicker, jitter, or non-deterministic behavior.

Core Features & Use Cases

  • Five Map Techniques: Choose between static satellite images, Mapbox GL JS, MapLibre GL JS, MapTiler SDK, or CesiumJS for 3D flyovers based on the shot requirements.
  • Deterministic Animation: Drive all camera and route animations from useCurrentFrame() with delayRender/continueRender gating, disabling CSS transitions and browser timers.
  • Geospatial Operations: Use Turf for great-circle routes, line slicing, distance calculations, and coordinate interpolation rather than hand-rolled math.
  • Use Case: Animate a flight route from Zurich to New York with a great-circle line, animated city markers, and a cinematic camera that zooms out, tracks the route, and zooms back in—all rendered deterministically to MP4.

Quick Start

Use the remotion-maps skill to animate a great-circle flight route from Zurich to New York with MapLibre, including animated city markers and a cinematic camera move.

Frequently Asked Questions about remotion-maps

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate a map route in Remotion?▼

Use MapLibre GL JS or Mapbox GL JS with Turf for geospatial operations. Create a great-circle route with `turf.greatCircle()`, slice it progressively with `turf.lineSliceAlong()` per frame, and drive the animation from `useCurrentFrame()` with `delayRender`/`continueRender` gating.

Mapbox vs MapLibre for Remotion animations, which should I use?▼

Mapbox requires an access token and offers higher-fidelity styles like Mapbox Standard. MapLibre is fully free with no API key but lacks 3D buildings. Both use the same GeoJSON source/layer pattern and Turf integration for route animations.

Why does my Remotion map render flicker or shimmer?▼

Calling `map.jumpTo()` on every frame causes renderer resampling jitter in headless capture. Use a fixed map plate with CSS transforms for camera movement, or render a short MP4 first to verify stability before using a live per-frame camera.

How do I create a 3D flyover in Remotion?▼

Use the CesiumJS technique with MapTiler terrain and satellite for landscapes, or Google Photorealistic 3D Tiles for cities. Set `useDefaultRenderLoop = false`, call `viewer.render()` per frame, and gate with `delayRender` until tiles load.

Can I use MapTiler without a Mapbox token?▼

Yes. MapTiler is a separate provider requiring `REMOTION_MAPTILER_KEY`. It offers vector layers for country borders, rivers, and labels that can be filtered and animated without maintaining duplicate GeoJSON.

What are the limitations of static map images in Remotion?▼

Static maps only provide location context with no camera movement or geographic data animation. They are the smallest and fastest technique but cannot show routes, markers, or terrain. Use MapLibre or Mapbox when the map itself must animate.

Related Skills

Explore More Design & Creative Skills→
YlopoYlopo

mapbox-mcp-devkit-patterns

Manage Mapbox styles, tokens, and validate GeoJSON data.

Official
Advanced
cosmicstack-labscosmicstack-labs
364

hyperframes

Create HTML-driven video compositions with timed clips and deterministic animation for MP4 rendering.

Official
Advanced
meiiiemeiiie
4

deep-research

Cross-reference factual claims against multiple authoritative sources with citations.

Community
Advanced
hasnaxyzhasnaxyz

remotion

Render JSON timeline specs into Remotion video compositions.

Official
Intermediate