Try the palettes live

Palette

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

Signature moves

device-float-in
The phone rises 760px from below the frame while untwisting from rotateX 38° / rotateY −42° / rotateZ 12° to a resting 3/4 tilt (7° / −20° / 4°). Perspective 2200px.
hover
Idle life: the device bobs 16px on a 3.2s alternate loop. Never rotates while hovering.
toast-drop
Notification falls 140px from above the phone and overshoots ~6% before settling.
tap-swipe
A tap-ripple lands on a tab or button; 0.25s later the screen content slides one full screen width.
pop-out
A UI card leaves the screen: starts 330px back toward the phone at 55% scale and springs to its spot beside the device.
fan-trio
Three phones rise together; the side phones start stacked behind the centre one and fan out to ±7° while all three settle at 74% scale.
icon-squash
End-card app icon pops from 20% with a −20° twist, squashes 1.08×0.94 and settles.

Sound

Upbeat indie-pop / future-funk instrumental: bright plucks, claps, bouncy bass, a little sidechain pump.

Voice

Friendly, upbeat, smiling, ≈160 wpm. Second person ('you'), short punchy lines, a tiny laugh in the voice on the end card.

What's in the pack

STYLE.md

334 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 phone is the hero · real screens, real taps · spring in, settle, breathe

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.