Cartographic Route Map

About this style

A line crawling across a map is a long-standing film and documentary device for compressing a journey into seconds. The craft borrows from print cartography, including water-lining along coasts, a clear label hierarchy and a scale bar, and adds a camera that follows the traveller and pauses at each stop. Travel, logistics and documentary storytelling still rely on it because it shows sequence and distance at once.

<inputs>
You're making an animated route map. I may supply any of these; if I don't give you something, use the default and don't ask.
- Region: the Corran Coast (fictional).
- Stops: Port Calloway → Vessmere → Highbridge → Lantern Bay.
- Title: "The Corran Coast Line"; mode: train; distance: 412 km.
- Length: 10 seconds.
</inputs>

<direction>
Print-map look: land #EFE4CF, sea #BFD5D8, coastline #56646A at 1.5px, with water-lining (three copies of the coast offset 8, 16 and 24px seaward, fading 40% to 10%). Mountains are small ink chevrons (#8C7F6A) along a spine; forests are dot stipples (#9DB08A); minor roads #D6C6A8 at 1px. The route is signal red #D1452E, 6px, with a 2px white casing; the marker is an 18px white disc with a 4px red ring.
Geography: roughen a hand-authored coarse coast polyline with four rounds of seeded midpoint displacement, then smooth once. The route hugs the coast, curves through a mountain pass, and never crosses water.
Type: title "Fraunces" 600, 60px. City labels "Barlow Semi Condensed" 600, uppercase, tracking 0.12em, 24px, beside an 8px dot (#2E3336, white ring). Sea name "Fraunces" italic, 34px, tracking 0.4em, #7B999F. Labels and line widths keep a constant screen size at any zoom, and each label sits on the side away from the route.
Camera: zooms take 1.2–1.5s, easeInOutCubic. To trail the marker without stored state, aim at the average of its positions over the previous 0.4s, sampled fresh each frame.
Travel: each leg runs easeInOutSine, its duration proportional to length, the line drawing behind the marker via dash offset. At each stop the marker dwells 0.4–0.5s; the city dot springs to 1.2× and back and an arrival ring grows to 40px, fading. A distance counter and a zoom-aware scale bar sit bottom-left.
Authentic: water-lining, a clear label hierarchy, a camera that trails and lingers. Cheap: app-style UI, labels ballooning with zoom.
Banned: real places or map data, map libraries, teardrop pins, glowing routes, 3D globes.
</direction>

<structure>
- 0–1.5s: overview: the coast draws on, water-lines ripple out, mountains and forests pop in (20ms stagger); the title card draws in.
- 1.5–2.2s: city dots and labels pop in; the camera zooms 2× onto Port Calloway.
- 2.2–4.3s: leg 1 along the coast to Vessmere, dwelling from 3.8s.
- 4.3–6.4s: leg 2 inland through the pass to Highbridge, dwelling from 6.0s.
- 6.4–8.0s: leg 3 back to the coast at Lantern Bay.
- 8.0–9.0s: the camera pulls back over the whole route; the counter settles on "412 km · 4 stops".
- 9.0–10s: hold.
Other lengths: scale the legs; keep each dwell at least 0.4s.
</structure>

<build>
One self-contained index.html (inline CSS and JS; Google Fonts via <link> are fine), a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Draw in SVG (non-scaling strokes keep line widths constant); three.js isn't needed.
window.seek(t) (t in seconds) sets every visual from t alone, clamping past the end to the last frame. No CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames. Coast and stipple come from a fixed-seed PRNG (anything that varies per frame seeds from the frame number); never Math.random.
With no ?render in the URL, call seek from requestAnimationFrame so it plays in a browser; with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style: the route never crossing sea, labels never overlapping the route, marker or each other, the marker always in frame. Confirm the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Topographic Contour Map

Made by us

A calm cartographic animation: smooth brown contour lines draw in from valley to summit, the terrain slowly morphs as a…

HyperFrames Motion Graphics

by @heygen-com

The front door is /hyperframes. This skill makes a short, design-led, unnarrated motion graphic (motion is the message;…

Battle of Austerlitz Film

by @WinterArc2125

Create a 4–5 minute cinematic video about the Battle of Austerlitz (1805), built entirely in code. Research the battle…

Mongol Conquest War Atlas

by @YanqingCheng

Multi-war history atlas — intent brief Qing’s words from seat chat (Lupe), 2026-09-22 / 2026-09-23. Do not soften or in…