Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
pin-drop
Pins fall 90px with one soft bounce (−12px) while their shadow grows; labels fade in 0.3s later.
route-draw
The dashed route reveals through a drawing mask while the vehicle rides its tip — same path, same clock.
arrive
As the vehicle reaches a port: pin flips to --done, a route ring pings outward, a DAY chip pops.
hud-count
Distance and days count with the travel, linear, tabular digits; a progress bar fills in sync.
camera-glide
The map camera reframes on the active route (scale 1→1.25) before travel begins.
city-dive
World map zooms toward the destination (→ ×3.5) and fades while the city grid scales in from 1.7→1.
Sound
Warm, optimistic indie-electronic or acoustic-pop: plucked guitar or marimba, light kick, forward motion.
Voice
Friendly operations lead or travel host: clear, warm, ≈150 wpm; say distances and days plainly.
What's in the pack
STYLE.md
341 lines: tokens, motion system, 6+ scene recipes, captions, sound, ratios, self-audit.
SKILL.md
Auto-loads in Claude Code when you ask for this look.
palettes.json
4 tested palettes + rules for mapping your brand colours.
showcase.html
A working reference composition of every signature move.
Principle: the route is the story · one clock for vehicle, line and counters · maps are drawn, never traced
More data & finance styles
Annual Report Navy
$19Corporate annual-report films: navy and white, big numbers, clean charts, year-over-year.
Crypto Neon Grid
$19Neon cyber charts over a running perspective grid: glowing candles, wallet cards, hex accents.
Donut Pastel Finance
$19Calm pastel money videos: donut charts that sweep in, category chips and savings-goal rings.