Try the palettes live

Palette

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

Signature moves

layer-rise
Landscape layers slide up from below the frame one after another, back to front.
paper-drop
Cards and big props drop in from above with a slight twist, landing on their resting tilt.
paper-pop
Suns, badges, tags and buttons pop with a stepped overshoot.
word-stamp
Headline words stamp in one by one, as if pressed onto the card.
paper-boil
Everything that has landed jitters on twos: ±1.5px and ±0.3° on a 6-pose loop, each element offset so they never boil in sync.
sway
Seas, continents and long props shift sideways in steps.
sheet-swap
Scene transition: the next scene is a new sheet of paper slid in from the right over the old one, with a shadow on its leading edge.
stepped-count
Stats count up in visible jumps.

Sound

Handmade acoustic: pizzicato strings, kalimba, felt piano, wooden percussion, light whistling. Warm and curious; leave space for VO.

Voice

Storyteller warmth: friendly, gently smiling, ≈140 wpm, rising intonation on questions. Imagine reading to a curious ten-year-old and their parent.

What's in the pack

STYLE.md

396 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: every layer is paper · move on twos · tear for words, cut for worlds

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.