Try the palettes live

Palette

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

Signature moves

squash-hop
The mascot travels between scenes in a parabolic hop: anticipation squash, stretched take-off, airborne, stretched fall, squash landing, settle.
wave
Greeting/goodbye: the arm swings up and oscillates 3 times.
point
The arm snaps toward the thing being explained with a small jab.
celebrate
Both arms up in a V, happy ^^ eyes, two small hops and a confetti burst.
blink
Eyes squash to 8% height for 0.06s every 2.5–4.5s (irregular, never during a pose change).
talk
While a bubble is on screen, the open-mouth shape alternates with the smile.
bubble-pop
Speech bubbles spring out of the tail point.
circle-wipe
Scene change: a circle of an accent colour, then the next scene's background, expands from where the mascot takes off.
count-up
Big stats count up with a spring scale.

Sound

Upbeat ukulele/marimba pop with hand claps and a bouncy bass; bright, never frantic.

Voice

Cheerful, warm narrator ≈155 wpm with smiles in the voice; the mascot's lines can be voiced by a playful higher-pitched second voice or left as bubbles.

What's in the pack

STYLE.md

410 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: the mascot shows, the words tell · one pose at a time · bounce with purpose