Try the palettes live

Palette

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

Signature moves

float-in
Panels and UI elements rise 36px from 97% scale while fading in, staggered 80ms.
cursor-glide
The cursor travels between targets on eased straight segments with a short settle on arrival; never linear, never teleporting while visible.
click-ripple
Hover halo 0.25s before, cursor dips to 82% for 60ms, ripple ring expands from the tip, the target changes state on the same frame.
drag-and-drop
Press → card lifts (scale 1.04, rotate 2.5°, deeper shadow) → carried with the cursor → neighbours reflow → drop settles and a check pops.
tooltip-lead
A dark tooltip names the action 0.35s before the cursor performs it and leaves the moment it happens.
zoom-to-feature
The camera scales the UI layer 1→1.5 around the feature after an action; the cursor scales and moves with the same easing so it stays attached.
zoom-through
Scene change: the outgoing scene scales 1→1.3 toward the last click point and fades; the next panel floats in 0.25s later.
mesh-drift
The colour mesh drifts and breathes continuously under everything.

Sound

Light, optimistic electronic pop: soft plucks, airy pads, gentle four-on-the-floor at low volume, a hint of glassy bells. Feels like a sunny product page.

Voice

Friendly guide, clear and unhurried, ≈140 wpm. Describe the action as it happens ('drag the card to Done…') then the benefit ('…and Ana is notified'). Second person.

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 cursor tells the story · one action per beat · zoom to what matters