Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
slam
Numbers, tags and buttons fall onto the screen from 2.6× with a small overshoot.
impact-shake
The scene layer shakes right after the biggest slam, decaying over 9 offsets.
tick
Seconds step down exactly once per second everywhere they appear; the seconds digit drops in from −14% each tick; centiseconds race 99→0.
price-slash
Strike bar draws across the old price, old price shrinks/dims, new price tag slams in, discount disc slams onto its corner, the info column shakes.
stock-drain
Stock counter and bar step down together to show scarcity.
heartbeat
Hero numbers and the CTA pulse twice per 0.8 s once landed.
scene-whip
Each scene whips in from the right with a skew over the previous one, with a 0.12 s white impact flash.
click-press
Cursor glides to the CTA, clicks (scale .85), a ring bursts and the button presses into its shadow.
Sound
Driving electro-house / trap hybrid with a ticking hi-hat, risers into each scene, a big drop on the 50%.
Voice
Hype announcer, fast and clear (≈170 wpm), punchy short lines: 'Fifty percent off. Everything. Today only.' Always say the end time.
What's in the pack
STYLE.md
376 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 clock is always ticking · numbers are the heroes · every beat lands with impact
More social & ads styles
Bold Caption Hook
$19Huge word-by-word captions, a hook in second one and punch zooms that hold the scroll.
Y2K Chrome Drop
$19Liquid-chrome type, holographic pastels and star glints for streetwear and product drops.
Before After Slider
$19Split-screen comparisons with a hand-dragged slider, clinical labels and deltas that prove it.