# Map Route Broll

> Create map travel B-roll with miniature city backgrounds, animated airplanes, route tracing, stopovers and return journeys. Use for city-to-city flight-line videos or multi-city itinerary animation.

- Skill: `paul010/map-route-broll` (Agent Skill, multi-file: 11 files)
- Install (CLI): `npx skillmds@latest add paul010/map-route-broll`
- Raw SKILL.md: https://api.skillmd.com/api/skills/paul010/map-route-broll/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: paul010 (https://skillmd.com/u/paul010)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/paul010/map-route-broll

---


# Map Route B-roll

Produce a reusable background image, editable HTML/SVG animation and verified H.264 MP4. Use the user's current visual style and route; for open-ended requests propose a reasonable route and proceed with reversible local production. Do not imply that a city-to-city line is a real airline service.

## Choose the deliverable

- Background only: create the map image; do not force a video pipeline.
- New video: default to 1920×1080, 30fps, silent; about 8s for one leg or 16s for four legs. Adjust for the requested pacing.
- Existing video: preserve the previous version and edit the requested layers.

The supplied generator targets a fixed 1920×1080 coordinate space. For portrait/square output, redesign projection and layout; do not stretch this composition. The included background is a four-city Bohai example, not a map for arbitrary destinations.

## Design and source

1. Resolve requested cities, itinerary order and whether the last leg returns to the origin. Verify unfamiliar locations from geographic sources. Use city coordinates for symbolic trips; use actual airport coordinates only if the user requests an airport route.
2. Select a map extent that fits **all** destinations and label margins before generating an image. For regional maps use one north-up projection for coastlines and every point. Long-distance or antimeridian routes need an appropriate projection or globe view; this starter is regional.
3. Use licensed geographic data (the examples use Natural Earth) for a reference coastline. For miniature artwork read [background-design.md](references/background-design.md). When available use built-in ImageGen; inspect local references before editing. Otherwise accept a user-supplied background or use a geographic vector backdrop. Never silently switch to a paid generator.
4. Inspect generated land/sea masks, coastline relationships, landmark anchors and route corridors. Models can turn peninsulas into islands or fill land with water: repair against the geographic reference before animation. Generated roads, relief and architecture are artistic details, not surveyed facts.

## Animate

Read [configuration.md](references/configuration.md) when building or changing a route. Keep text, plane and route separate from the raster background. Reuse the included generator:

```bash
python3 scripts/build.py assets/examples/four-cities.json --out /absolute/path/to/new-project
```

Paths here are relative to this skill folder. The script fetches two checksum-pinned GSAP files during build; it does not generate images or render videos. `--dependency-dir` permits verified local copies. No network runs inside the rendered animation. Output must be a new directory.

The output includes pinned HyperFrames commands. Requires Python 3.10+, Node 22+, FFmpeg and a Chromium supported by HyperFrames. If HyperFrames skills are installed, consult their current composition/CLI instructions for render troubleshooting; this skill does not depend on private local paths or another personal skill.

```bash
cd /absolute/path/to/new-project
npm run check
npx --yes hyperframes@0.8.37 snapshot --at 0,2.8,5.9,9,13,15.7
npm run render
```

Change proof times for the actual route. Use the user's existing production authorization for ordinary local rendering; ask separately for paid services or public publishing if not already authorized.

Plane motion and line drawing must use the same path, start time, duration and easing. Retain completed lines. Allow a perceptible stop at each city and a final hold. Use a second route color for a return leg when useful; do not force a return when the itinerary is one-way. Numeric DOM IDs and escaped visible copy keep city names out of code selectors.

## Verify and hand off

- Run `npm run check`; inspect start, each leg's midpoint/arrival, and end. Correct clipping, coast mistakes, labels crossing landmarks, wrong plane heading, gaps between route and endpoint, or render-only failures.
- Decode the actual MP4: `ffmpeg -v error -i renders/video.mp4 -f null -`.
- Read actual dimensions, fps, duration and frame count with `ffprobe`; extract corresponding MP4 frames and inspect them. Passing HTML checks alone is not a video QA result.
- Supply clickable video, background, source/config paths, measured specs, and material limitations. Preserve prior accepted versions. Describe artwork and city-route lines as illustrations, not real flight tracking.

Default font is Hiragino Sans GB W6 on macOS. If unavailable, install/declare an appropriate licensed CJK font such as Noto Sans CJK SC Bold and update the template; never distribute system fonts from a user's machine.