Turn any trip into a cinematic animated map video — right in your browser.
A free, no-watermark, no-API-key travel map animation studio.
▶ Live demo — travel-map-animator.vercel.app
▶ Watch the full demo video (original 1080p60)
A 17-stop round-the-world trip, rendered offline at constant 60 fps by the in-browser engine itself.
| 🎞️ Rendered, not recorded | Export steps a deterministic timeline frame-by-frame through WebCodecs (H.264 + AAC via mp4-muxer) at constant 30/60 fps — output smoothness never depends on how fast your machine renders |
| 🗺️ Build routes 3 ways | Search cities, click the map, or type "Lisbon to Madrid by train, then Barcelona by car" (English & 中文) |
| 🚄 10 transport modes | Plane, train, car, bus, boat, bike, walk, camper, motorcycle, tuk-tuk — hand-drawn vector icons; the plane banks along its smoothed heading |
| 🌊 Real sea lanes | Boats follow the global shipping network (Eurostat SeaRoute + Dijkstra) — through the Strait of Hormuz, not across it |
| 🛣️ Real roads & rail corridors | Cars/buses via OSRM; trains follow ground corridors up to 3 000 km |
| Long flights curve toward the poles and cross the antimeridian correctly — Tokyo → LA flies the Pacific | |
| 🌍 Globe & satellite | MapLibre v5 globe projection with camera-accurate far-side occlusion; free Esri satellite imagery as the default style |
| 🎥 Cinematic camera | Look-ahead tracking, gentle zoom/pitch arcs mid-leg, punch-in with a pulse ripple at every arrival, overview pullback finale |
| 🎵 Music, photos & titles | A music track is decoded, looped/faded to length and muxed as AAC; polaroid photo pop-ups per stop; title card and lower-third captions |
| 📂 Import | GPX / KML / GeoJSON with per-stop mode — try the bundled demo-journey.geojson |
| 🎨 7 map styles · 4 aspect ratios | Satellite, Voyager, Eclipse, Dark Matter, Liberty, Fiord, Positron · 16:9, 9:16, 1:1, 4:5 · custom accent color · optional watermark (off by default) |
| 📱 Responsive | Collapsible sidebar, mobile drawer layout, touch-friendly controls |
Online: open the live demo, press ▶ Preview, then ⏺ Record video.
Locally — it's a static site, any server works:
git clone https://github.com/Fangyuan025/triptrail.git
cd triptrail
python3 -m http.server 8742
# open http://localhost:8742- Plan — stops are geocoded with Nominatim; each leg picks a routing engine by transport mode: OSRM for ground, a Dijkstra search over the SeaRoute marine network for boats, great-circle interpolation for long flights.
- Timeline — the whole story (camera, trail reveal, vehicle, heading, pulses, titles, photos) is a pure function of time, built as intro → approach → travel → arrival → photo → pullback phases.
- Preview — the timeline plays at wall-clock speed on the live map; the route trail is one GPU line source revealed by a
line-progressgradient, so nothing re-tessellates per frame. - Export — the camera first sweeps the route to warm the tile cache, then the timeline is stepped frame-by-frame: each frame waits for tiles, is composited to canvas, and encoded with
VideoEncoder; music is rendered offline and muxed as AAC. The result is a constant-fps MP4 with no watermark. (WebM or missing WebCodecs falls back to realtime capture.)
| What | Source |
|---|---|
| Map tiles | Esri World Imagery · OpenFreeMap · VersaTiles · CARTO |
| Geocoding | Nominatim (OpenStreetMap) |
| Road routing | OSRM demo server |
| Shipping lanes | Eurostat SeaRoute marine network |
| Rendering | MapLibre GL JS v5 |
| Video muxing | mp4-muxer |
Map data © OpenStreetMap contributors. Satellite imagery © Esri, Maxar, Earthstar Geographics.
MIT © 2026 Fangyuan Lin