Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
circle-pop
Icon circles scale from 0 with a soft overshoot; a ring in the same colour ripples out once.
badge-drop
The number badge drops onto the circle after it lands.
dot-trace
Dotted connectors reveal in the direction of flow, head last.
rise
All text and cards rise 26px and fade in.
track-fill
Progress segments fill in sync with their step.
donut-sweep
Stats sweep a conic ring while the numeral counts up in step.
block-wipe
Scene change with two flat colour panels.
Sound
Upbeat corporate-pop / light electronic: clean plucks, claps, warm bass; optimistic but not cheesy.
Voice
Friendly, confident presenter, ≈150 wpm, mid pitch. Number every step out loud ('Step two…').
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: one colour per step · numbers lead, icons explain · build the flow left to right
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.