Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
nav-glide
The sidebar highlight slides to the next page's item as the page changes; the old label greys, the new one inks.
page-swap
Content pane changes like a docs navigation: old page lifts 8px and fades, new page rises 16px.
line-type
Code lines reveal left-to-right one line at a time.
copy-click
Cursor glides to Copy, presses, label flips to ✓ Copied, toast rises.
json-unfold
Response lines grow from 0 height so the panel visibly lengthens; nested caret rotates ▸→▾ before its children.
pill-pop
Method pills land a beat after their row.
Sound
Light, focused lo-fi or minimal electronic: soft keys, brushed hats, warm bass. Unobtrusive under VO.
Voice
Friendly senior engineer explaining to a peer. Clear, unhurried (≈145 wpm), no hype words; say code names exactly.
What's in the pack
STYLE.md
341 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 docs are the set · show the real call, then the real response · one action per beat
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.