Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
dew-in
Products enter out of soft focus: rise 30px, scale .94→1, blur 16→0.
glass-glint
One diagonal highlight band sweeps across the glass after it lands.
drop-fall
A drop forms at the pipette tip, stretches, falls and splashes into a dew bead with two ripples.
chip-float
Ingredient chips float up into place, then bob ±10px forever on desynced loops.
dew-condense
Small droplets appear on the 'lens' around the product.
meter-fill
Ring fills while the numeral counts, both on one curve.
hover
Hero products float 16px and tilt −1.2° on a slow loop once landed.
soft-dissolve
Scene exit: fade with blur 0→12px.
Sound
Airy downtempo / soft electronic: warm pads, plucked harp or kalimba, light shaker; clean and modern.
Voice
Calm, intimate, smiling (≈135 wpm), close-mic. Name ingredients clearly; no hype words.
What's in the pack
STYLE.md
333 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 texture · everything arrives out of soft focus · one glint, one drop, one italic
More lifestyle & local styles
Architecture Lines
$19Elevations and plans that draw themselves on warm drafting paper, labelled in thin serif.
Coffee House Craft
$19Hand-lettered café films: kraft paper, latte art, chalk menus and rubber stamps.
Eco Green Leaf
$19Sustainability stories on recycled paper: sprouts that grow, leaves that sway, impact that counts.