Technique 02 — Map Explainer
A flat, editorial explainer beat: a river or route traces on with a white-hot electric head, and each country lights up the moment the water reaches it—border draws, fill blooms, label rises. For “where is this?”, “what’s the path?”, and “who is upstream of whom?”
/ Rendered proof
A finished Water Wars render: the route establishes the geography, then the countries and labels enter in the order required by the narration.
/ Interactive model
The same visual grammar in a simplified model: the draw head follows the river; each region’s complete border, fill, and label respond to its entry trigger.
/ Fit
/ Architecture
The map draws the geography, Remotion runs the clock, and the labels live in React where typography is fully in your control.
Draws the map
A vector or satellite basemap, stripped of unwanted labels and inner borders, plus filtered MapTiler Planet vectors and custom GeoJSON layers.
Runs the clock
Per frame, update layers imperatively and hold capture until the map reports idle. For camera moves, use a fixed map plate rather than per-frame jumpTo().
Sets the type
Labels are positioned HTML elements projected from map coordinates to screen pixels every frame: any font, any entrance, pixel-exact.
/ Basemap
Default vector mode
Begin with MapStyle.BASIC. Remove labels and inner admin borders, then let the production’s own configuration define colour and type.
Surface truth
Use satellite imagery when terrain, land use, construction, or the river’s physical course carries narrative evidence. Keep overlays sparse.
Documentary framing
For depth without a flythrough, use a restrained pitch of 6–12° and bearing offset of roughly ±6–12°. Verify the rendered map for shimmer.
/ Element data
Choose the source for each map element. Roads, waterways, water bodies, boundaries, land cover, and places can often be surfaced directly from MapTiler Planet and filtered by their attributes. Custom geodata remains essential when the story owns the geometry.
Option 01
Use an existing source-layer when its feature and attributes are editorially correct. Animate opacity, colour, width, blur, radius, fill, or stable feature state without maintaining duplicate GeoJSON.
Option 02
Use verified custom data for proposed, historical, disputed, corrected, private, or missing features—and whenever motion must follow an exact geometry in a meaningful order.
Use MapTiler vectors for ordinary geographic context and custom GeoJSON only for the story-specific evidence. A tiled provider line can fade or highlight cleanly, but a deterministic start-to-end draw requires an ordered line baked to custom geometry.
/ Labels
Geographic region
Use a high-contrast uppercase display label with a short accent divider. Position it in clear territory, never over a marker cluster or river.
Physical geography
Anchor a leader directly on the real geometry and run it to the label. Use the route accent colour; omit redundant category words such as “RIVER”.
Constructed object
Use a smaller italic callout beside its actual point or line. Infrastructure is an object in geography, not geography itself.
Animate each label only after its geographic or data layer is established. Keep it visible long enough to read, avoid overlap, and test the actual 16:9 and 9:16 renders.
/ Pipeline
Check MapTiler Planet first. Use provider vectors when their geometry and attributes support the claim; use custom GeoJSON when the story requires its own verified or ordered geometry.
When custom data is required, the prep script calculates entry triggers, interior label anchors, and complete border geometry. Never trim a line or boundary to the viewport.
Remove basemap labels and inner admin borders. What remains is quiet context, so the story geography is the only thing talking.
Draw the line by arc length, led by a white-hot electric head—the final few percent rendered in its own bright, glowing layers.
As the head enters each country, its complete border draws over a constant duration, its fill blooms with a slight overshoot, and its label rises.
/ Tuning
| You want | Turn this | Proven value |
|---|---|---|
| River colour or glow | COLORS in tokens.ts | Icy core, electric-blue glow |
| Bigger or smaller electric head | Head length and widths | 3% of the line |
| Border draw time | BORDER_S | 2.5 seconds per country |
| Fill bloom strength | Opacity overshoot curve | ×1.25, settling to ×1 |
| Label position | Story-region bbox + nudge | Per country |
| Country trigger | River-arrival fraction | Recompute from geometry |
| Overall pace | River draw window | Beat length follows |
Each country’s lowercase key must be identical in the prep script’s country list, the component’s draw order, the palette tokens, and the generated data. A mismatch does not error—the country simply never appears.
/ Contents
SKILL.mdworkflow, architecture, semantics, and stability rulesassets/RiverReveal.tsxriver reveal and country sequenceassets/MapTilerVectorElement.tsprovider-vector layer setup and paint animationassets/CountryLabel.tsxreusable example labelassets/tokens.tsexample palette and durationsassets/example-Root.tsxminimal composition scaffoldassets/sample-data/runnable sample geographyscripts/prep-geo.mjsgeo preparation pipelinereferences/data sourcing, architecture, geo prep, and render stabilityCanonical skill, components, preparation script, sample data, and stability guidance.
Download ZIP