Try the palettes live
This is the actual HTML composition running in your browser — the same code your agent learns from.
Signature moves
drop-settle
Blocks fall 120px into place, overshoot 5px below the floor, settle; their contact shadow fades in on landing.
route-draw
Floor routes draw along the grid after the nodes they connect have landed.
packet-run
Data packets move at constant speed along the hot route, vanish into blocks (drawn behind them) and re-emerge on the far side.
flow-dash
The hot route's 4/16 dash crawls in the direction of travel.
layer-lift
Exploded view: a stacked node separates vertically; layer n rises n × 76px, then labels slide in from the left.
iso-slide
Scene transition along the iso axis: outgoing scene slides up-right (+110px, −64px) and fades; incoming arrives from down-left.
hover-float
Floating platforms and logo marks bob gently.
count-up
Latency / throughput stats count up in tabular Manrope.
Sound
Clean minimal electronica / soft techno-pop: muted plucks, round sub, light glitchy percussion, marimba-like arps. Precise, friendly, never aggressive.
Voice
Clear, knowledgeable engineer voice: mid pitch, friendly, ≈145 wpm. Name each node as its tag appears. No jargon without a visual.
What's in the pack
STYLE.md
415 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: build it on the grid · data is the only thing that glows · lift layers, don't list them
More explainers styles
Chalkboard Lesson
$19Dusty chalk on a green board in a wooden frame — lessons that write themselves, panel by panel.
Course Academy
$19Bright, focused online-course videos: chapter cards, progress rings, quizzes and certificates.
Crayon Storybook
$19Waxy crayon pictures, wobbly outlines and bouncy, friendly motion — a picture book that turns its own pages.