Map Flight
Animated map flyover with route reveal and markers.
SceneMaps & deviceAdvanced
map-flight30fps · 960×540
Install
$ npx remotion-ui@latest add map-flightThe docs preview is a stylized stand-in. The installed scene uses MapLibre + Turf with real tiles and camera flyover.
Render with npx remotion render --gl=angle --concurrency=1.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/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
Example
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. |