Spatial
Map Flight
Animated map flyover with route reveal and markers.
ScenespatialAdvanced
Install
npx remotion-ui@latest add map-flightThe live preview uses a lightweight SVG stand-in (MapLibre tiles are unreliable in browser players). The installed component uses full MapLibre + Turf. Render with:
npx remotion render MapFlight out/map.mp4 --gl=angle --concurrency=1Live preview
Render with npx remotion render --gl=angle --concurrency=1.
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add map-flightImport after install
@/remotion/scenes/map-flight- Use when: map scenes, routes, markers, and spatial storytelling.
- Customize: from, to, fromLabel, toLabel, 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
import { MapFlight } from "@/remotion/scenes/map-flight";
<MapFlight from={[8.54, 47.38]} to={[-74, 40.71]} fromLabel="Zurich" toLabel="New York" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| from | [number, number] | — | Start coordinates [lng, lat]. |
| to | [number, number] | — | End coordinates [lng, lat]. |
| fromLabel | string | — | Start marker label. |
| toLabel | string | — | End marker label. |