Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
prompt-type
Mono prompt reveals one character per step with width:0→Nch and steps(N); the caret rides the end and keeps blinking.
send-fill
When typing ends the send button floods with the spark gradient (0.25s) and presses to 0.86 and back.
bubble-hand-off
The user bubble rises 420px from where the composer was, so the prompt visibly becomes the message.
thinking-shimmer
Muted status line with an accent highlight sweeping through it; replaced by a quiet '✓ Thought for N s' line.
token-stream
Answer words fade in one by one from blur(6px), 0.03s apart (title words 0.05s); bold facts stream like everything else.
develop
Generated images resolve like a photo: blur 40px, saturation 0 and 1.4 brightness → crisp, while a soft scan band passes top to bottom.
line-wipe
Generated text lines in cards wipe in left→right (clip-path inset) 0.15s apart; a caret blinks at the end.
Sound
Warm minimal electronica / modern classical hybrid: felt piano, soft synth pads, gentle pulse. Curious, optimistic, uncluttered.
Voice
Thoughtful, warm, mid register, ≈140 wpm. Speaks like a capable colleague — plain words, no hype, no 'revolutionary'.
What's in the pack
STYLE.md
337 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: show the work, not the magic · type, think, stream, deliver · the spark marks what AI made
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.
API Docs Light
$19Crisp developer-docs videos: sidebar nav, syntax-coloured code and JSON that unfolds.