Try the palettes live

Palette

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

Signature moves

hard-cut
Slides switch on a single frame via visibility. No dissolve, no wipe, ever.
slow-scale
Every held slide scales up imperceptibly while it is on screen, like a slow dolly-in.
track-settle
The opening whisper fades in while its letter-spacing tightens.
word-sequence
Three single words on hard cuts, each with a progress tick, building one idea.
leader-draw
Spec leaders draw out from the product; the label breathes in after.
breathe-in
Support lines appear by opacity only, 0.5s after their giant element.

Sound

Near-silence. A single sustained piano or felt-piano note, low strings swell or a sub pulse; at most one rhythmic motif under word sequences.

Voice

A presenter on a big stage: low, warm, unhurried (≈120 wpm). Long pauses. Say the product name, then stop.

What's in the pack

STYLE.md

338 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 slide · cut, never dissolve · silence is a design element

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.