Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
version-roll
The patch digit spins through ten values while the minor digit clicks over at the end — an odometer turning to the new release.
date-stamp
The SHIPPED stamp slams onto the frame at −6° with a 5% overshoot right after the version lands.
feed-slide
Release items slide in from the right like new posts arriving in a feed, then a faint highlight sweep passes over each.
diff-strike
Diff lines slide in from the left; deleted lines dim to 45% ink as the added lines arrive.
count-up
The headline metric counts on @property integers with a hard deceleration; before/after bars grow after it.
ticker-run
The ticker marquee scrolls continuously under every scene; it never pauses, never changes speed.
feed-scroll
Scene change: the outgoing scene lifts 60px and fades (like scrolling up), the next rises in from 34px below.
Sound
Upbeat, clean electronic with a newsroom pulse: tight drums, plucked bass, short synth stabs; confident but not hype.
Voice
Product-team voice: upbeat, plain-spoken, ≈155 wpm. Read the version ('two point four'), then each item as a short sentence. No jargon unless the audience is developers.
What's in the pack
STYLE.md
384 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 version is the headline · every item gets a tag · the ticker never stops
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.