21-second example rendered by this skill from examples/orielfinch-origin · 1280×720
Example settingswhat each example above was built from
examples/orielfinch-originbrief.json
- Brand
- Oriel & Finch
- Kicker
- Oriel & Finch · Origin trip
- Format
- wide
- Style
- atlas
- Headline
- Where this year's cup begins.
- Colors
- ground #efe6d2 · land #e0cfa9 · ink #1d1a16 · paper #f8f2e4 · accent #c4421f · panel #f8f2e4
examples/lumenfold-tourbrief.json
- Brand
- Lumenfold
- Kicker
- Lumenfold · Spring tour
- Format
- tall
- Style
- night
- Headline
- On tour this spring.
- Colors
- ground #04070f · land #18233b · ink #04070f · paper #eef2f7 · accent #ff4f8b · panel #0b1222
What you get
- A 1920×1080, 1080×1920 or 1080×1080 MP4 of your route with its own beat-synced music
- An original soundtrack with sound effects on every flight, arrival and the brand, synthesised on your machine, with nothing to license
- A globe drawn from bundled public-domain Natural Earth data in an atlas, night or poster look
- A route that draws stop to stop behind a plane, van or dot, with a label card and optional photo per stop
- A distance and day counter in km or miles, and an end card with the whole route and its totals
- A brief checker that refuses out-of-range coordinates and colours the route cannot be read on, and a pasteable PROMPT.md
- Open-source licenses for every part it builds on
Good fit
- A band, speaker or pop-up announcing tour dates as a vertical map reel.
- A coffee, wine or fashion brand telling its sourcing or origin story stop by stop.
- A travel, cycling or logistics brand showing where it went, with the total distance and days at the end.
Not for
- Street-level or turn-by-turn maps: the globe shows countries and coastlines
- More than 7 stops
- Live tracking or routes along real roads
- Vocals or a licensed hit song, since the music is synthesised
About this skill
A journey told on a globe and cut to an original beat-synced soundtrack: a tour, a sourcing trip, a road trip or a delivery network with 3 to 7 stops. The map is drawn in code from bundled Natural Earth data in one of three looks: atlas paper and ink, a night globe with glowing coasts, or a flat poster. The camera flies from stop to stop as the route draws itself behind a plane, a van or a dot, and each stop lands on the beat with a label card for its name, date, a short note and an optional photo, while a distance and day counter ticks up. It ends on the whole route with the totals, and your brand lands on the final hit.
Example request
Make a route map video of our coffee sourcing trip from Bristol to five farms in Ethiopia, Kenya, Rwanda and Brazil, with dates and a note per farm, in an atlas paper look, ending on the total distance and our brand.
How it works
Your agent
- 1
Make the project
- 2
Get the stops
The whole route has to fit on one side of the globe (every stop within 80° of the stops' centre);
apply-briefsays so if it doesn't. - 3
Pick the look and the colours
Text on every card is whichever of
paperorinkreads better on it; quieter text (the stop number, the totals' second line) is pulled toward the card only as far as it still reads at 4.5:1. - 4
Write the brief
Create
brief.jsonin the project. - 5
Apply the brief
It checks the whole brief and lists every problem at once with the fix (coordinates out of range, dates out of order or missing on some stops, a photo that isn't in the project, a route that wraps round the globe, colours the text or the route can't be read on, music out of range).
- 6
Check
"ok": truemeans it can render. - 7
Look before you render
Run the
snapshotcommandapply-briefprinted: one frame per stop with its card settled, the end card and the last frame. - 8
Render
It runs the layout gate, renders with the pinned HyperFrames, checks the track and its stems with
scripts/music/check.mjs(A1 to A11), muxes it as AAC with a true-peak limiter at -1 dBTP and checks the MP4 has sound as long as its picture. - 9
Hand it off
Give the person the MP4 and two stills: one stop and the end card.
- 1
You get


What you need
- Node.js 22 or newer and FFmpeg (with
ffprobe) on the PATH. - HyperFrames through
npx, pinned:npx --yes hyperframes@0.8.192. Ifrendersays Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensureonce. - Network access to
cdn.jsdelivr.net(GSAP). See Troubleshooting if it is blocked. The map libraries, the map data and the fonts (Fraunces, DM Mono, Space Grotesk, JetBrains Mono, Archivo) are bundled.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
Render hangs or shows a still frame.
GSAP didn't load. If
cdn.jsdelivr.netis blocked,npm i gsap@3.14.2, copynode_modules/gsap/dist/gsap.min.jstoassets/vendor/and point the GSAP<script src>inindex.htmlatassets/vendor/gsap.min.js.The gate fails on the title in 9:16.
It is more than three lines at 7% of the frame. Shorten it.
A marker is in the sea.
The coordinates are swapped or a sign is missing (west and south are negative).
What’s in the download
- SKILL.md16.1 KB
- examples/
- examples/lumenfold-tour/1.36 KB9:16 night, a made-up dance company's 7-city spring tour by van, three stage photos,
launch-pulse. · 1 file - examples/orielfinch-origin/1.10 KB16:9 atlas, a made-up coffee roaster's 5-farm origin trip by plane,
lofi-chill. · 1 file - scripts/
- scripts/gate/the layout gate and its Chrome DevTools client.
- scripts/gate/cdp.mjs5.63 KB
- scripts/gate/gate.mjs19.5 KB
- scripts/music/beatgen 2.1, the music and sound-effects generator, with its checker and README.
- scripts/music/examples/
- scripts/music/examples/events.example.json555 B
- scripts/music/samples/
- scripts/music/samples/manifest.json371 B
- scripts/music/beatgen.mjs11.8 KB
- scripts/music/check.mjs50.0 KB
- scripts/music/dsp.mjs20.0 KB
- scripts/music/engine.mjs51.7 KB
- scripts/music/mux.mjs2.36 KB
- scripts/music/presets.mjs36.8 KB
- scripts/music/README.md23.7 KB
- scripts/music/samples.mjs4.90 KB
- scripts/music/sfx.mjs17.1 KB
- scripts/music/theory.mjs3.34 KB
- scripts/music/voices.mjs16.9 KB
- scripts/apply-brief.mjs17.4 KBchecks a brief, lays the reel out on the beat grid, generates the track, writes the plan.
- scripts/beat-grid.mjs13.0 KBreads the
musicblock and runs beatgen. - scripts/render.mjs7.75 KBgate, render, track check, mux, MP4 check.
- template/the HyperFrames project.
index.htmlholds the variables and the CSS;reel.jsdraws the globe, the route and the cards and builds the timeline;assets/vendor/holds d3-array, d3-geo and topojson-client;assets/geo/holds Natural Earth countries and land at 1:50m and 1:110m (world-atlas);assets/fonts/the five type families (OFL). - template/assets/
- template/assets/fonts/
- template/assets/fonts/licenses/
- template/assets/fonts/licenses/archivo-OFL.txt4.29 KB
- template/assets/fonts/licenses/dmmono-OFL.txt4.38 KB
- template/assets/fonts/licenses/fraunces-OFL.txt4.29 KB
- template/assets/fonts/licenses/jetbrainsmono-OFL.txt4.30 KB
- template/assets/fonts/licenses/spacegrotesk-OFL.txt4.39 KB
- template/assets/fonts/fonts.css7.85 KB
- template/assets/geo/
- template/assets/geo/countries-110m.js105 KB
- template/assets/geo/countries-50m.js739 KB
- template/assets/vendor/
- template/assets/vendor/d3-array.min.js16.8 KB
- template/assets/vendor/d3-geo.min.js35.5 KB
- template/assets/vendor/topojson-client.min.js7.00 KB
- template/hyperframes.json318 B
- template/index.html15.1 KB
- template/package.json296 B
- template/reel.js52.3 KB
- NOTICE.md2.82 KBthe data and software this skill uses, and their licences.
- PROMPT.md2.25 KBa prompt for Claude Code or Codex.
- TESTED.json1.33 KB
39 files · 1.30 MB · installs to ~/.claude/skills/route-map-reel for Claude Code and ~/.agents/skills/route-map-reel for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 15–25 s · 1920×1080, 1080×1920 or 1080×1080
- Needs
- Node.js 22+, FFmpeg on the PATH and Chrome (HyperFrames downloads its own headless Chrome on first render); network access to cdn.jsdelivr.net (GSAP). The map data, map libraries and fonts ship with the package.
- Series
- Social Shorts · 6 skills
- Updated
- Nov 2, 2026
- Checked
- Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
Do I need a map service or an API key?
No. The globe is drawn in code from Natural Earth country and coastline data that ships inside the package, projected with d3-geo. You give each stop as latitude and longitude in decimal degrees; with names only, your agent looks the coordinates up and tells you which it used.
Which looks can it draw?
Atlas (cream paper, ink coastlines and a halftone land fill), night (a dark globe in a starfield with an atmosphere glow and glowing coastlines) or poster (flat bold colour). Each takes your own colours, and the checker makes sure the route and the text read on both land and sea.
Does the route follow real roads?
No. A plane flies an arc between stops, and a van or dot draws a dashed or solid line across the map. It tells the story of the journey, not the exact path.
Which agents is Route Map Reel written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.
Credits and licensesBuilt on heygen-com/hyperframes
What Lookbk adds on top of heygen-com/hyperframes (Apache-2.0): Lookbk wrote this package and its music generator; it renders with HyperFrames (Apache-2.0) and GSAP (Standard License), draws the map with d3-geo and topojson-client (ISC) from Natural Earth data (public domain, via world-atlas, ISC), and the brands and trips in its examples are invented.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.