Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
rise-in
Default entrance for text and cards.
card-fan
Chapter cards are dealt from below in a stack, then fan to their angles.
marker-swipe
The key phrase gets highlighted like a student would.
ring-fill
Progress ring fills while the centre number counts to the same value.
check-draw
State discs pop, then their tick draws.
answer-lock
Quiz flow: select (accent) → reveal (correct + check) → dim the rest → XP pop.
page-advance
Next lesson screen slides in from the right over the current one, which drifts left and dims.
seal-stamp
The certificate seal stamps down with one overshoot and a ripple ring.
Sound
Light, curious underscore: plucked synths or kalimba, soft electronic beat, bright pads; focused, never sleepy.
Voice
Encouraging teacher: clear, friendly, ≈ 140 wpm, speaks to 'you', pauses 0.5s after questions so the viewer can think.
What's in the pack
STYLE.md
328 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 idea per screen · progress is always visible · green means right, nothing else
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.
Crayon Storybook
$19Waxy crayon pictures, wobbly outlines and bouncy, friendly motion — a picture book that turns its own pages.