The prompt formula
"In template/main.js: the .hero-image city glows in from black like a CRT warming up, then the .hero-title rises with a confident ease, then the .top-row items cascade in with a stagger, slightly overlapping — and the .btn-retro pops last with overshoot. Keep the ↻ replay button working."
Every element in the template has a class name for exactly this reason — open template/index.html and the comment at the top of main.js lists them all.
🚪Entrances — how things arrive
Fade in
Opacity 0 → 1. The quietest possible entrance.
Say: "fade the .bottom-right line in slowly, last of all"
Rise / slide
Moves in from below, above, or the side while fading in.
Say: "the .hero-title rises from below the fold and settles heavy"
Scale pop
Grows from nothing. Add overshoot and it feels alive.
Say: "the .btn-retro pops in from scale 0 with overshoot"
Blur reveal
Condenses out of fog — blur + opacity together. Dreamy, cinematic.
Say: "the headline condenses out of a blur, like smoke clearing"
Mask / wipe
Revealed left-to-right or bottom-up as if behind a curtain (clip-path).
Say: "wipe the .hero-subtitle in from the left with a clip-path"
Stagger
Many elements, one gesture — each starts slightly after the last. The workshop's MVP.
Say: "stagger the .top-row items in, 0.15s apart, from the brandmark outward"
Particles
Lots of small elements popping, drifting, or bursting — like a burst of small glowing dots.
Say: "scatter glowing ember particles over the .hero-image city and let them drift up forever"
Draw-on
An SVG line draws itself stroke-first, like a pen.
Say: "draw the route path on like it's being sketched, then send the icon along it"
Cascade
A stagger with direction and momentum — a wave through the layout.
Say: "cascade the .top-row in from the .brandmark outward"
🔤Text & numbers
Typewriter
Characters appear one at a time, optionally with a blinking caret.
Say: "type the .bottom-left line out like a terminal, with a blinking caret"
Scramble / decrypt
Random characters churn and settle into the real text — an npub resolving to a name.
Say: "scramble the headline's letters, then let them decrypt into place"
Count-up
A number rolls from 0 to its final value. Snap to whole numbers.
Say: "count a sats figure up from 0 to 21,000 with thousands separators"
Letter-by-letter
Each character animates independently — wave, flip, or tumble into place.
Say: "split the headline into letters and let them tumble in one by one"
Tracking spread
Letter-spacing animates wide → normal (or the reverse). Elegant, editorial.
Say: "the .hero-subtitle contracts from wide letter-spacing as it fades in"
🏀Physics & personality
Ease
The acceleration curve — the single biggest personality dial. Confident, lazy, snappy, cinematic.
Say: "use a confident ease" / "make it feel cinematic and slow to settle"
Overshoot
Goes slightly past the target and comes back. Playful confidence.
Say: "the chips land with a little overshoot, like back.out"
Elastic / spring
Wobbles around the target like it's on a rubber band before settling.
Say: "the .btn-retro springs in elastically"
Bounce
Hits the floor and bounces like a dropped ball.
Say: "drop the logo in from above with a bounce"
Squash & stretch
Deforms on impact — stretches while moving, squashes when it lands. Cartoon weight.
Say: "squash the package a little when it arrives at B"
Float / drift
A slow endless idle motion after arrival — nothing on a sovereign site should feel dead.
Say: "after the intro, let the .hero-image drift gently forever"
Parallax
Layers move at different speeds — background slower than foreground — for depth.
Say: "as the .hero-title rises, drift the .hero-image the other way for parallax"
🎬Scene & orchestration
Timeline / sequence
The story order: what enters first, second, last. Sequence = meaning.
Say: "one timeline: the city first, then the title, then the chrome, then the button"
Overlap
The next move starts before the last one finishes. Kills the robotic one-two-three feel.
Say: "overlap each step by about 0.4s so it flows"
Pulse / yoyo
Scales or glows up and back, once or forever. A heartbeat.
Say: "make the rings pulse outward forever, out of sync with each other"
Flicker / glitch
Rapid opacity or position jitter — neon signs, CRTs, unstable power.
Say: "the logo flickers on like a neon sign before holding steady"
Ripple / shockwave
One event radiates outward and everything reacts as the wave passes.
Say: "ripple a shockwave outward from the .brandmark as everything reacts in turn"
Color flood
The page wakes up grayscale, then color floods in from one element. The orange pill.
Say: "start everything grayscale; when the .brandmark lands, flood the red back in"
Camera move
The whole scene scales or pans slightly, like a dolly-in. Subtle = expensive-feeling.
Say: "start the whole hero at 1.06 scale and slowly settle to 1, like a camera pulling back"
Beat / hold
A deliberate pause before the payoff. Silence is part of the rhythm.
Say: "hold for half a second before the headline appears"
Finale
The closing accent that says "done" — a flash, a settle, one last pop.
Say: "end with the .btn-retro popping and a quick flash over the city"