Try the palettes live

Palette

This is the actual HTML composition running in your browser — the same code your agent learns from.

Signature moves

mask-reveal
Lines rise into view from behind their own baseline mask; multi-line headlines stagger 120ms per line.
rule-wipe
Rules, ticks and the ruler draw at constant speed from the left — the only linear motion, like a pen on a straightedge.
grid-draw
On the cover the 13 column lines draw top→bottom one after another; the margin rules wipe across.
block-slide
Red blocks and fields enter horizontally from outside the frame and stop dead on the grid.
numeral-measure
The hero numeral counts up while the red measuring bar grows beneath it with identical duration and easing, so the bar is always proportional to the number.
clip-wipe
List rows are revealed by a linear clip wipe combined with a 48px expo nudge from the left.
hard-cut
Scenes change instantly on a frame; the page counter flips on the same frame.

Sound

Minimal, rhythmic and dry: clean electronic pulse or prepared piano ostinato, a metronomic hi-hat, no reverb tails. Think precision, not drama.

Voice

Neutral, precise, unhurried, ≈135 wpm; short declarative sentences; numbers spoken in full with units ('twelve hundred lumen').

What's in the pack

STYLE.md

379 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 grid decides · type is the image · one red, used once per frame

More product & saas styles

A CSS-3D product turning in a dark studio, rim light sweeps and spec callouts on leader lines.

Dark, glowing launch energy for SaaS and developer tools.

Prompts that type, answers that stream and deliverables that develop — for AI product launches.