Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
squish-pop
Icon grows from 0 with a −14° twist, overshoots to 1.16×0.86 (squash), rebounds to 0.93×1.08 (stretch), settles via 1.03×0.97.
jelly-drop
Hero object falls from 900px above, squashes 1.24×0.76 on impact (origin bottom), hops 60px, lands again 1.06×0.95, settles. Its floor shadow grows in sync.
wobble-bob
Idle life for every icon: rises 14px and tilts ±3–10° on its own 2.6–3.4s alternate loop (all different, never in sync).
check-squish
Checkbox tile squishes in (scale 0 → 1.15×0.88 → 1) and the tick draws 0.15s later. Items 0.3s apart.
toggle-flip
Clay knob slides across its track with overshoot.
button-press
CTA squashes down 8px to 1.05×0.86, rebounds to 0.97×1.05, settles — with a white tap bloom.
soft-rise
Text and pills rise 40px from 96% scale; no squash on type.
Sound
Playful acoustic-pop / kids-TV-adjacent but grown-up: ukulele or marimba, claps, toy piano, round bass. Smiling, not silly.
Voice
Warm, cheerful, playful, ≈155 wpm; light smile, gentle humour, never sing-song.
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: everything is squeezable · squash on arrival, wobble at rest · pastel, never neon
More product & saas styles
Hardware Hero Reveal
$29A CSS-3D product turning in a dark studio, rim light sweeps and spec callouts on leader lines.
Midnight Gradient Launch
$19Dark, glowing launch energy for SaaS and developer tools.
AI Chat Reveal
$19Prompts that type, answers that stream and deliverables that develop — for AI product launches.