Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
tile-settle
Tiles rise 46px from 92% scale and settle with a ~4% spring overshoot; opacity is fully on by 45%.
hero-morph
The cover tile physically becomes the grid's hero tile: it shrinks and travels to its grid slot while the other tiles assemble around it.
living-visual
Each tile performs one small demonstration after it lands: ring fills, toggle flips, number counts, ink draws, chips pop.
count-up
Stat numbers count from 0 via @property integers, decelerating hard.
content-in
Text inside tiles rises 16px and fades in.
tile-recede
Exit: tiles lift 14px, shrink to 94% and fade, 30ms apart in reading order.
cta-press
The end-card button is pressed once by an invisible finger.
Sound
Warm, optimistic electronic-acoustic: soft felt piano or marimba motif, light shaker, round sub, gentle claps on the backbeat. Bright but not saccharine.
Voice
Warm, smiling, conversational, ≈145 wpm. Benefits not specs ('lasts all week' before '38 hours'). Pause 0.3s as each hero number lands.
What's in the pack
STYLE.md
404 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: one idea per tile · size equals importance · every tile does one small thing
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.