Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
plop
Shapes and pills appear by scaling from 0 with a soft overshoot, like a drop landing.
morph
Every blob continuously cycles its border-radius; different blobs use negative delays so they never sync.
goo-orbit
Satellites stretch away from a parent blob, detach, and merge back through a liquid bridge.
drip-in
Headlines rise out of a mask line with a straightening skew.
liquid-wipe
The next scene's colour floods in from one edge as merging droplets.
fill-up
Stat gauge level rises while surfaces slosh and the numeral counts in sync.
merge
Several coloured blobs travel together in a colour-blending goo layer and become one marble blob.
bob
Ambient droplets float up and down while morphing.
Sound
Bright, bouncy electronic pop: plucky synth, round sub-bass, finger snaps, a little marimba. Polished, optimistic, no vocals.
Voice
Friendly, upbeat, smiling; mid-high energy, 150–165 wpm, crisp consonants. Short sentences that land on the beat.
What's in the pack
STYLE.md
395 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
5 tested palettes + rules for mapping your brand colours.
showcase.html
A working reference composition of every signature move.
Principle: nothing is rigid · shapes carry the story · one flood per cut
More brand & cinematic styles
Cinematic Trailer
$29Black frames, wide-tracked serif title cards, flash cuts and light-leak bursts — launches as events.
Art Deco Gala
$19Gold geometric frames, unfolding sunbursts and opening fans on black and emerald.
Bauhaus Shapes
$19Primary circles, squares and triangles that assemble into grid-locked layouts.