Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
marker-write
Kalam text is revealed left→right in chunky steps like a marker crossing the board.
marker-draw
Every shape draws on in the order a presenter draws it: box outline → label → arrow shaft → arrow head → annotation.
box-it
A red rough rectangle snaps around the keyword 0.05–0.1s after it is written; the closing stroke overshoots.
arrow-connect
Blue arrows only start once both boxes they join exist; the head is a separate quick 3-point stroke.
eraser-swipe
Scene exit: a felt eraser crosses the top half left→right, drops, and crosses the bottom half right→left. Ink disappears exactly under the eraser centre with a 4% soft edge, and a ghost smear trails it.
tick-off
Green check over a finished box or list item.
gloss-glint
Once per video, a specular band slides across the board on the cover hold — it sells 'glossy'.
Sound
Light, rhythmic indie-electronic or acoustic-pop bed: muted guitar plucks, finger snaps, soft kick. Purposeful, not cute.
Voice
A sharp, warm team lead presenting at the board: ≈155 wpm, mid pitch, energetic but unhurried. Point with words ('this box', 'here').
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: draw it live · box the one word · erase, don't cut
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.