Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
chalk-write
Text appears left→right in chunky steps, slightly slower than a marker — chalk drags.
chalk-draw
Underlines, circles, arrows and pictograms draw on in hand order.
loop-circle
The key word or number gets a loose loop that overshoots its start by 10–15%.
dust-fall
Where a long stroke ends, 4–6 chalk specks drop and fade.
hatch-fill
Bars and areas fill with diagonal hatching like a teacher shading.
panel-slide
Scene change: the whole board panel slides up on its rail, the next panel follows 40px of wooden rail behind and settles with an 8px overshoot.
Sound
Soft acoustic bed: felt piano, pizzicato strings, light brushed percussion; curious and patient.
Voice
Kind, clear teacher voice, ≈140 wpm, mid pitch, smiling. Pause 0.4s after each new term so viewers can read it.
What's in the pack
STYLE.md
338 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: write it like a teacher · one colour per idea · slide the board, never cut
More explainers styles
Isometric Systems
$29Pastel isometric blocks for system, architecture and data-flow explainers.
Course Academy
$19Bright, focused online-course videos: chapter cards, progress rings, quizzes and certificates.
Crayon Storybook
$19Waxy crayon pictures, wobbly outlines and bouncy, friendly motion — a picture book that turns its own pages.