Try the palettes live

Palette

This is the actual HTML composition running in your browser — the same code your agent learns from.

Signature moves

pen-draw
Every doodle draws on stroke by stroke in the order a hand would draw it (outline → details → accent mark).
write-on
Handwritten text is revealed left→right in chunky steps, like a pen moving across the line.
marker-swipe
The highlighter block scales in from the left behind the keyword, 0.1s after the word finishes writing.
sticky-slap
Sticky notes drop onto the page: overshoot then settle, with their resting rotation preserved.
notebook-pan
Scene transition: the camera lifts (scale 0.9) and glides to the next spread on the same sheet, then sets down.
line-boil
Hand-animated wobble on every doodle so the page never feels frozen.
tick-off
Checklist items get a red check drawn in quick succession.

Sound

Light acoustic/indie-pop bed: ukulele or nylon guitar, glockenspiel, soft hand claps, brushed snare. Curious and warm, never cutesy.

Voice

Friendly teacher/friend energy: warm, mid-pitch, smiling, ≈150 wpm. Explain like to a smart 14-year-old. Pause 0.3s before each big number.

What's in the pack

STYLE.md

429 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, don't show it · one highlight per spread · the page is the camera

More explainers styles

Pastel isometric blocks for system, architecture and data-flow explainers.

Dusty chalk on a green board in a wooden frame — lessons that write themselves, panel by panel.

Bright, focused online-course videos: chapter cards, progress rings, quizzes and certificates.