Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
letter-bounce
Title letters drop in one by one, overshoot, tilt and settle.
squash-pop
Shapes (sun, clouds, hills, buttons) grow from their base with squash and stretch.
hop-in
Characters fall in, squash on landing, bounce once.
boil
All illustration layers wobble like hand-drawn animation; text never boils.
crayon-draw
Outlines and thick bands draw on like a crayon stroke.
wiggle
Idle life for characters: a quick happy wiggle every 1.2s.
page-turn
Scene change: the page lifts from its right edge and turns toward the viewer around the spine, darkening as it goes.
Sound
Playful acoustic: ukulele, glockenspiel, toy piano, hand claps, a little whistle. Major key, gentle dynamics.
Voice
Warm, smiling storyteller (≈130 wpm), clear diction for early readers; repeat key words; leave a beat after questions.
What's in the pack
STYLE.md
333 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: colour it in · everything bounces once · turn the page
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.