Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
plot-draw
Object lines draw on with stroke-dashoffset (pathLength=1): outlines first, then details, then hidden lines fade in.
dimension-extend
Extension lines fade in, then the dimension line grows from its midpoint to both ends at once; arrowheads and the value appear as it lands.
leader-callout
Dot pops on the feature, leader draws up and out to a shoulder, the numbered circle appears and the label types.
plotter-type
Mono text reveals one character per step (width 0 → n × (1ch + letter-spacing), steps(n)).
sheet-wipe
Display titles reveal left→right with a clip-path inset wipe, like a plotter pass.
redline
A yellow hand-drawn ellipse circles the key number, then an arrow and a typed note.
stamp-slam
The stamp drops from scale 2.4 to 0.94 with accelerating ease, settles to 1, and a thin shock ring expands and fades.
Sound
Minimal mechanical electronica: clockwork percussion, soft analogue synth arpeggio, felt piano, a little tape hiss. Focused, intelligent.
Voice
Measured, knowledgeable, unhurried, ≈135 wpm. An engineer explaining their design choices; numbers spoken with units.
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: draw it, don't show it · every line is measured · white for form, yellow for numbers, red for the verdict
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.