Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
rail-draw
The rail grows from the start of the period with a now-coloured head riding its tip; month ticks reveal with it; quarter ticks pop as the head passes.
node-pop
Milestones pop on in time order, label rising 0.1s later from its stem side.
now-slide
The now marker slides from the start of the period to today, then pings once.
rail-lift
From the cover, the title exits up while the whole timeline lifts into the centre and the now line extends to full height.
now-zoom
Match cut: zoom into the timeline around the now marker, blur and fade, while the next view (lanes) settles in with its now line at the same x.
bar-grow
Gantt bars grow from their start date; labels fade in once the bar is wide enough.
scroll-to-future
Exit: the view scrolls left as the next scene arrives from the right — time moving forward.
Sound
Driving, optimistic minimal electronic: clean pulses, light percussion, a subtle build into 'now'.
Voice
Founder or product lead, upbeat and transparent, ≈150 wpm. Say the date before the milestone; be honest about what is planned.
What's in the pack
STYLE.md
340 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: time runs left to right · status is shape, not just colour · always show where "now" is
More explainers styles
Isometric Systems
$29Pastel isometric blocks for system, architecture and data-flow explainers.
Chalkboard Lesson
$19Dusty chalk on a green board in a wooden frame — lessons that write themselves, panel by panel.
Course Academy
$19Bright, focused online-course videos: chapter cards, progress rings, quizzes and certificates.