Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
lights-on
The wire draws across, then bulbs pop on left to right and start twinkling in three desynced groups.
snowfall
Flakes fall the full frame height while swaying sideways on a separate sine loop; three depths give parallax.
cozy-rise
Type rises 28px out of a 6px blur. Greeting lines stagger 0.15s.
tag-drop-swing
Gift tags drop in on their strings and swing to rest like a damped pendulum, then idle.
knit-scroll
The knit band slides up into place once, then scrolls left two pattern repeats every 6 s.
steam-curl
Three wisps travel up S-curved paths and fade.
lights-flare
On the CTA all bulbs brighten together once — the room warms up.
Sound
Warm acoustic: brushed drums, upright bass, celesta or glockenspiel melody, felt piano, a hint of sleigh-bell shaker. Friendly, unhurried, no vocals.
Voice
Warm, smiling, close-mic (≈135 wpm). Speak like a note in a gift box: 'from all of us', 'treat yourself'. Pause after the greeting.
What's in the pack
STYLE.md
340 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: warm light in a cold night · handmade, not glossy · everything settles gently
More festive & seasonal styles
Back to School
$19Bright primaries on ruled notebook pages — pencils slide in, tabs pop, report cards check off.
Black Friday Neon
$19Neon tube signs flickering to life on a dark brick wall — doorbusters, slashed prices, live countdowns.
Eid Crescent Glow
$19Night blue and gold: a glowing crescent, hanging lanterns and blooming star patterns for Eid.