Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
box-sketch
Wire containers draw their outlines (stroke-dashoffset, pathLength=1) in reading order; text bars grow from the left; image crosses draw last.
review-markup
Pins pop onto elements (0.5s pop), comment cards rise in the margin, markup ellipses and arrows draw by hand.
polish-sweep
The polished layer reveals left→right over the wire layer with clip-path inset(0 100% 0 0)→inset(0); the sweep-handle rides the edge and fades when done.
component-morph
A single wire component becomes its polished self in place: border-colour → fill, radius 4–8px → final radius, wire bars fade out, real text/art fades in 0.2s later.
redline-flash
Spacing brackets and value tags appear on wire components and disappear exactly as each morph begins.
strike-swap
Old value struck through with a hand-drawn markup line, new value rises in accent.
Sound
Playful lo-fi / indie electronica: pencil-friendly percussion, warm keys, a tape-stop before the sweep and a bright lift as colour arrives.
Voice
Friendly, smart, a little wry, ≈150 wpm. A designer talking to designers: 'You sketch. It ships.'
What's in the pack
STYLE.md
339 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: same layout, two states · rough is grey, finished is colour · the sweep is the payoff
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.