Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
float-up
Default entrance: rise 32px, unblur 8px→0, fade in.
card-lift
Frost cards and product windows rise from 90px below while scaling .96→1, like a sheet floating up through water.
aurora-drift
Ribbons sway ±4cqw and breathe scaleY .9–1.25 forever; the whole field re-positions between scenes to sit behind the new focal point.
connector-draw
Gradient wires between UI nodes draw on with stroke-dashoffset after the source node lands; the target node then gains a violet border glow.
soft-pop
Toasts, checks and badges pop in with a gentle 6% overshoot — the only overshoot allowed.
ring-fill
Stat ring sweeps from 0 to its value (conic gradient accent → accent-2) while the numeral counts up in sync.
float-away
Scene exit: content rises 28px, blurs 8px and fades — the opposite of float-up, faster.
Sound
Bright indie-electronic / organic pop instrumental: plucked synths, soft claps, warm Rhodes, airy pads. Optimistic but not hyper.
Voice
Warm, friendly, smiling, mid register, ≈150 wpm. Conversational — like a helpful teammate, not an announcer.
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: light is the brand · float, never fall · one gradient word per frame
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.