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