Try the palettes live

Palette

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

Signature moves

glow-rise
Primary entrance for titles: rise 40px, unblur 14px→0, fade 0→1.
word-stagger
Hero titles enter word by word with glow-rise.
light-sweep
A diagonal accent-2 highlight sweeps once across the gradient word or a card border after it lands.
orb-drift
The glow orb drifts 4–6cqw and breathes in scale (1→1.08) across the whole scene.
count-up
Stat numerals tick up from 0; the last 15% decelerates hard.
focus-pull
Scene exit: content scales to 0.96 and blurs to 10px while fading — like a lens refocusing.

Sound

Minimal electronic / cinematic synth. Warm sub-bass pad, soft arpeggio, one clean build into the hero reveal. No vocals.

Voice

Calm, confident, mid-low register, unhurried (≈140 wpm). Sentences short. Smile slightly on the product name.

What's in the pack

STYLE.md

354 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: darkness is the canvas · one light source · type does the talking

More product & saas styles

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

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

Crisp developer-docs videos: sidebar nav, syntax-coloured code and JSON that unfolds.