motion-library 0.0.0-stage → 0.1.0

package/anims/registry.js

@@ -0,0 +1,294 @@
+// The catalogue. Each entry points at anims/<cat>/<id>.js.
+// `params` gives the slider range for each key in that file's PARAMS line.
+
+import { MORE } from './registry-more.js';
+
+export const CATEGORIES = [
+  { id: 'basics', name: 'Basics', hue: '#3b5bdb' },
+  { id: 'transitions', name: 'Page transitions', hue: '#0e9488' },
+  { id: 'text', name: 'Text', hue: '#4f5d75' },
+  { id: 'scroll', name: 'Scroll', hue: '#2f9e44' },
+  { id: 'hover', name: 'Hover & cursor', hue: '#b07a00' },
+  { id: 'micro', name: 'Micro & loading', hue: '#d63c74' },
+  { id: 'springs', name: 'Springs & physics', hue: '#d9601a' },
+  { id: 'morph', name: 'Morph & SVG', hue: '#b8359a' },
+  { id: 'flow', name: 'Flow & particles', hue: '#0a87a6' },
+  { id: 'fluid', name: 'Fluid', hue: '#2b74c9' },
+  { id: 'chrome', name: 'Chrome & 3D', hue: '#8a6a4f' },
+  { id: 'shaders', name: 'Shaders & glitch', hue: '#7b8c10' },
+];
+
+const P = (min, max, step, label) => ({ min, max, step, label });
+
+const BASE = [
+  // ── Basics
+  { id: 'fade-scale', cat: 'basics', title: 'Fade & scale in', kind: 'dom', posterAt: 900,
+    trick: 'Cards rise from 94% scale, never from zero',
+    notes: ['Entering things start slightly small and transparent, then ease out hard: fast at first, gentle at the end.', 'Starting at scale 0.94 instead of 0 keeps the shape readable the whole way in.', 'The exit is shorter than the entrance; leaving should never make you wait.'],
+    params: { duration: P(150, 1200, 10, 'Duration (ms)'), startScale: P(0.5, 1, 0.01, 'Start scale'), stagger: P(0, 200, 5, 'Stagger (ms)') } },
+  { id: 'stagger-grid', cat: 'basics', title: 'Stagger grid', kind: 'dom', posterAt: 420,
+    trick: 'Delay grows with distance from the origin cell',
+    notes: ['Each cell waits in proportion to its distance from a starting cell, so the grid reads as one ripple instead of 60 separate pops.', 'The origin moves every loop; the same rule makes a new pattern each time.', 'Keep the per-cell delay small (20–40 ms) or the wave feels sluggish.'],
+    params: { delayPerCell: P(5, 80, 1, 'Delay per cell (ms)'), cols: P(4, 16, 1, 'Columns') } },
+  { id: 'easing-race', cat: 'basics', title: 'Easing curves race', kind: 'dom', posterAt: 1100,
+    trick: 'Same distance, same time, four different feels',
+    notes: ['All four dots travel the same distance in the same time; only the easing differs.', 'Linear feels mechanical, ease-in feels late, a strong ease-out feels instant, and a spring overshoots like something with mass.', 'Stiffness and damping only shape the spring lane.'],
+    params: { duration: P(400, 3000, 50, 'Duration (ms)'), stiffness: P(40, 400, 5, 'Spring stiffness'), damping: P(4, 40, 1, 'Spring damping') } },
+  { id: 'card-flip', cat: 'basics', title: '3D card flip', kind: 'dom', posterAt: 1300,
+    trick: 'rotateY on a spring, with the back face hidden',
+    notes: ['The card has two faces glued back to back; backface-visibility hides whichever one faces away.', 'Perspective on the parent gives the turn real depth; lower values exaggerate it.', 'A spring drives the angle, so the flip overshoots a few degrees and settles.'],
+    params: { perspective: P(300, 2000, 10, 'Perspective (px)'), stiffness: P(40, 400, 5, 'Stiffness'), damping: P(4, 40, 1, 'Damping') } },
+  { id: 'anticipation', cat: 'basics', title: 'Anticipation & follow-through', kind: 'canvas', posterAt: 650,
+    trick: 'Crouch before the jump, wobble after the landing',
+    notes: ['Before it moves, the blob squashes down, telling your eye where the energy is going.', 'In flight it stretches along its path; on landing its antenna keeps going and wobbles back (follow-through).', 'Remove the crouch and the same jump feels like it was pushed.'],
+    params: { anticipation: P(0, 0.6, 0.01, 'Crouch depth'), overshoot: P(0, 0.5, 0.01, 'Landing overshoot') } },
+
+  // ── Page transitions
+  { id: 'push-slide', cat: 'transitions', title: 'Push slide', kind: 'dom', posterAt: 1500,
+    trick: 'The new page pushes; the old one drifts slower',
+    notes: ['The incoming page slides the full width while the outgoing one moves only 30% and dims: that difference reads as depth.', 'Both share one easing so they feel physically connected.', 'Enter and exit along the same axis, so going back reverses the motion.'],
+    params: { duration: P(200, 1500, 10, 'Duration (ms)'), parallax: P(0, 1, 0.05, 'Parallax') } },
+  { id: 'circle-reveal', cat: 'transitions', title: 'Circle reveal', kind: 'dom', posterAt: 1700, pointer: true,
+    trick: 'clip-path circle grows from where you clicked',
+    notes: ['The next page sits on top, clipped to a circle of radius 0 at the click point; the radius grows until it covers the farthest corner.', 'Starting from the pointer ties the change to your action.', 'Click anywhere in the detail view to set the origin.'],
+    params: { duration: P(200, 2000, 10, 'Duration (ms)') } },
+  { id: 'staircase-wipe', cat: 'transitions', title: 'Staircase wipe', kind: 'dom', posterAt: 880,
+    trick: 'Bars cover in a stagger, the page swaps unseen',
+    notes: ['Vertical bars sweep down one after another, cover the screen, and the content swaps while nothing is visible.', 'The bars then continue out the bottom, so the motion never reverses.', 'More bars with a smaller stagger feels smoother; fewer feels bolder.'],
+    params: { bars: P(2, 14, 1, 'Bars'), stagger: P(0, 160, 5, 'Stagger (ms)'), duration: P(200, 1200, 10, 'Bar duration (ms)') } },
+  { id: 'shared-expand', cat: 'transitions', title: 'Shared-element expand', kind: 'dom', posterAt: 1400,
+    trick: 'FLIP: measure, jump, invert, play',
+    notes: ['FLIP: measure the tile, move it to its final layout, measure again, then transform it back to where it started and animate the transform to zero.', 'Only transform animates, so it stays smooth even though the layout changed.', 'Collapsing runs the same steps the other way.'],
+    params: { duration: P(200, 1500, 10, 'Duration (ms)') } },
+  { id: 'view-transition', cat: 'transitions', title: 'View Transitions morph', kind: 'dom', posterAt: 1450,
+    trick: 'The browser morphs matching view-transition-names',
+    notes: ['document.startViewTransition() snapshots the page, runs your DOM change, then animates every element that shares a view-transition-name between its old and new box.', 'Here a list row becomes the header of its detail view.', 'Browsers without support simply swap instantly.'],
+    params: { duration: P(150, 1500, 10, 'Duration (ms)') } },
+
+  // ── Text
+  { id: 'letter-rise', cat: 'text', title: 'Letter rise stagger', kind: 'dom', posterAt: 950,
+    trick: 'Each letter springs up 40 ms after the last',
+    notes: ['Every letter sits in a clipped line box and rises from below it on its own spring.', 'A small stagger (30–50 ms) makes the word read left to right without feeling slow.', 'Lower damping gives each letter a little bounce at the top.'],
+    params: { stagger: P(0, 150, 1, 'Stagger (ms)'), stiffness: P(60, 500, 5, 'Stiffness'), damping: P(6, 40, 1, 'Damping') } },
+  { id: 'scramble', cat: 'text', title: 'Scramble decode', kind: 'dom', posterAt: 900,
+    trick: 'Random glyphs settle into the word, left to right',
+    notes: ['Each character cycles through random glyphs until its turn comes, then locks to the real letter.', 'Locking left to right keeps it readable; locking randomly feels more like hacking.', 'Use a monospaced or tabular face so the line does not jump while it scrambles.'],
+    params: { speed: P(10, 120, 1, 'Step (ms)'), settle: P(1, 12, 1, 'Steps per letter') } },
+  { id: 'vf-wave', cat: 'text', title: 'Variable-font wave', kind: 'dom', posterAt: 800,
+    trick: 'A sine wave rolls through weight and width',
+    notes: ['A variable font has continuous weight and width axes, so each letter can sit anywhere between thin-condensed and black-wide.', 'Each letter reads a sine wave offset by its index, so the bulge travels along the word.', 'Only font-variation-settings changes; no layout tricks.'],
+    params: { amplitude: P(0, 1, 0.05, 'Amplitude'), speed: P(0.2, 4, 0.1, 'Speed'), spread: P(0.1, 1.5, 0.05, 'Spread') } },
+  { id: 'typewriter', cat: 'text', title: 'Typewriter', kind: 'dom', posterAt: 1900,
+    trick: 'Jittered keystrokes, pauses on punctuation',
+    notes: ['Real typing is uneven: each delay is randomised around the base speed, and punctuation adds a pause.', 'The caret blinks only while idle; while typing it stays solid.', 'Deleting runs faster than typing, the way people backspace.'],
+    params: { cps: P(4, 40, 1, 'Characters / second'), jitter: P(0, 1, 0.05, 'Jitter') } },
+  { id: 'line-mask', cat: 'text', title: 'Line mask reveal', kind: 'dom', posterAt: 1100,
+    trick: 'Lines slide up from behind a clipping edge',
+    notes: ['Each line lives in a box with overflow hidden, so its text can start fully below the edge and slide up into view.', 'Staggering the lines makes a paragraph feel typeset rather than faded in.', 'The strong ease-out does most of its travel in the first third.'],
+    params: { stagger: P(0, 250, 5, 'Stagger (ms)'), duration: P(200, 1500, 10, 'Duration (ms)') } },
+
+  // ── Scroll
+  { id: 'parallax', cat: 'scroll', title: 'Parallax layers', kind: 'dom', posterAt: 1800, scroll: true,
+    trick: 'Far layers move less than near ones',
+    notes: ['Each layer moves by a fraction of the scroll distance: the far hills a little, the near ones a lot.', 'The difference in speed is what your eye reads as depth.', 'Scroll inside the stage in the detail view to drive it yourself.'],
+    params: { depth: P(0, 1.5, 0.05, 'Depth') } },
+  { id: 'scrub-reveal', cat: 'scroll', title: 'Scrub reveal', kind: 'dom', posterAt: 2600, scroll: true,
+    trick: 'Each word brightens as the scroll passes it',
+    notes: ['Every word maps scroll progress to opacity, offset by its position in the paragraph.', 'Scrubbed means it follows the scroll exactly, forwards and backwards; nothing plays on its own.', 'A wider spread lights several words at once.'],
+    params: { spread: P(0.05, 1, 0.05, 'Spread') } },
+  { id: 'pinned-track', cat: 'scroll', title: 'Pinned horizontal track', kind: 'dom', posterAt: 3000, scroll: true,
+    trick: 'Vertical scroll drives a sideways row',
+    notes: ['A tall section holds a sticky frame; while the frame is pinned, scroll progress translates the row of panels sideways.', 'The section height sets the pace: taller means slower travel.', 'position: sticky does the pinning, so no scroll-jacking.'],
+    params: { panels: P(3, 8, 1, 'Panels') } },
+  { id: 'zoom-through', cat: 'scroll', title: 'Zoom-through', kind: 'dom', posterAt: 1700, scroll: true,
+    trick: 'Scale a letter until you pass through its counter',
+    notes: ['A word scales exponentially with scroll; exponential scale feels like a steady push forward, linear would feel like braking.', 'The transform origin sits inside the letter O, so you fly through its hole into the next scene.', 'Max scale sets how far you travel.'],
+    params: { maxScale: P(5, 60, 1, 'Max scale') } },
+  { id: 'velocity-skew', cat: 'scroll', title: 'Velocity-skew marquee', kind: 'dom', posterAt: 2000, scroll: true,
+    trick: 'Scroll speed boosts the marquee and leans it',
+    notes: ['The marquee always drifts; scroll velocity is added on top and smoothed, so a fast scroll makes the rows race.', 'The same smoothed velocity skews the text, which reads as momentum.', 'When you stop, both decay back to the idle drift.'],
+    params: { skew: P(0, 0.6, 0.01, 'Skew'), boost: P(0, 15, 0.5, 'Boost') } },
+
+  // ── Hover & cursor
+  { id: 'magnetic', cat: 'hover', title: 'Magnetic button', kind: 'dom', posterAt: 1200, pointer: true,
+    trick: 'Pulled toward the cursor, label pulled further',
+    notes: ['Within a radius the button moves a fraction of the way toward the pointer; its label moves even further, which gives a layered feel.', 'Both positions run through a spring, so release snaps back with a little life.', 'Keep the strength low or it feels like the button is running away.'],
+    params: { strength: P(0, 1, 0.05, 'Strength'), radius: P(40, 300, 5, 'Radius (px)') } },
+  { id: 'ripple', cat: 'hover', title: 'Click ripple', kind: 'dom', posterAt: 450, pointer: true,
+    trick: 'A circle expands from the exact press point',
+    notes: ['The ripple starts exactly where you pressed, which confirms the click was heard and where.', 'It grows to reach the farthest corner, then fades out as it finishes.', 'Press feedback starts on pointerdown, not on release.'],
+    params: { duration: P(200, 1500, 10, 'Duration (ms)') } },
+  { id: 'tilt', cat: 'hover', title: '3D tilt card', kind: 'dom', posterAt: 1000, pointer: true,
+    trick: 'The card turns toward the pointer, glare follows',
+    notes: ['Pointer position across the card maps to rotateX and rotateY, so the card turns toward you.', 'A soft glare moves opposite the tilt like light on a real surface.', 'Springs smooth the raw pointer so it feels heavy instead of twitchy.'],
+    params: { maxTilt: P(2, 30, 1, 'Max tilt (deg)'), stiffness: P(30, 400, 5, 'Stiffness') } },
+  { id: 'cursor-trail', cat: 'hover', title: 'Cursor trail', kind: 'canvas', posterAt: 1400, pointer: true,
+    trick: 'Each point chases the one before it',
+    notes: ['The first point follows the cursor; every other point eases toward the point ahead of it.', 'That chain of lagging points draws a ribbon that tapers toward the tail.', 'A lower ease factor makes a longer, lazier trail.'],
+    params: { points: P(4, 60, 1, 'Points'), ease: P(0.05, 0.8, 0.01, 'Ease') } },
+  { id: 'spotlight', cat: 'hover', title: 'Spotlight reveal', kind: 'dom', posterAt: 1300, pointer: true,
+    trick: 'A soft mask follows the cursor over a dark layer',
+    notes: ['A dark layer covers a colourful one; a radial mask cut out of the dark layer follows the pointer.', 'The mask position is smoothed so the light trails slightly behind.', 'Mask-image keeps it all in CSS: no canvas needed.'],
+    params: { radius: P(40, 300, 5, 'Radius (px)') } },
+
+  // ── Micro & loading
+  { id: 'toggle', cat: 'micro', title: 'Toggle spring', kind: 'dom', posterAt: 700,
+    trick: 'The knob stretches while it travels',
+    notes: ['The knob runs on a spring and stretches in proportion to its speed, then snaps round when it lands.', 'The track colour follows the knob position, not a timer, so they never disagree.', 'Click it in the detail view; it is a real button.'],
+    params: { stiffness: P(80, 800, 10, 'Stiffness'), damping: P(8, 50, 1, 'Damping') } },
+  { id: 'like-burst', cat: 'micro', title: 'Like burst', kind: 'dom', posterAt: 640,
+    trick: 'Squash, pop, ring and sparks on one beat',
+    notes: ['The heart squashes on press, overshoots to 120% and settles, while a ring and a burst of dots fire from its centre.', 'Everything starts on the same frame: that synchrony is what makes it feel like one event.', 'The sparks use their own random angles each time.'],
+    params: { particles: P(4, 24, 1, 'Sparks'), spread: P(0.4, 2, 0.05, 'Spread') } },
+  { id: 'submit-success', cat: 'micro', title: 'Submit to success', kind: 'dom', posterAt: 1700,
+    trick: 'The button becomes the spinner becomes the tick',
+    notes: ['The button morphs into a circle, spins while waiting, then draws a tick, so the control itself shows each state.', 'The width animates with a strong ease-out; the tick draws with stroke-dashoffset.', 'One object changing shape beats three swapping in and out.'],
+    params: { duration: P(150, 1000, 10, 'Morph (ms)') } },
+  { id: 'arc-spinner', cat: 'micro', title: 'Arc spinner', kind: 'dom', posterAt: 600,
+    trick: 'The arc grows and shrinks while it turns',
+    notes: ['Two things run at once: the whole ring rotates, and the stroke dash grows and shrinks.', 'Their periods do not match, so the arc never repeats the same way twice in a row.', 'A faster spinner makes waiting feel shorter.'],
+    params: { speed: P(0.25, 3, 0.05, 'Speed') } },
+  { id: 'skeleton', cat: 'micro', title: 'Skeleton shimmer', kind: 'dom', posterAt: 900,
+    trick: 'A light sweep says loading, then content fades in',
+    notes: ['Placeholder shapes match the real layout, so nothing jumps when content arrives.', 'A soft highlight sweeps across them to signal work in progress.', 'The real content cross-fades in over the skeleton.'],
+    params: { speed: P(0.4, 4, 0.1, 'Shimmer speed') } },
+
+  // ── Springs & physics
+  { id: 'squash-bounce', cat: 'springs', title: 'Squash & stretch bounce', kind: 'canvas', posterAt: 700,
+    trick: 'Stretch with speed, squash on impact',
+    notes: ['In flight the ball stretches along its velocity; on impact it squashes while keeping its area, so it reads as soft, not shrinking.', 'Each bounce keeps a fraction of its energy (bounce).', 'The shadow grows and darkens as the ball comes down.'],
+    params: { gravity: P(600, 5000, 50, 'Gravity'), bounce: P(0.3, 0.95, 0.01, 'Bounce'), squash: P(0, 0.7, 0.01, 'Squash') } },
+  { id: 'rubber-band', cat: 'springs', title: 'Rubber-band drag', kind: 'dom', posterAt: 1500, pointer: true,
+    trick: 'Resistance grows past the edge, release springs back',
+    notes: ['Inside the track the card follows the pointer 1:1. Past the edge it follows less and less (Apple\'s rubber-band formula).', 'On release, a spring returns it, starting with the speed your hand had.', 'Drag it in the detail view.'],
+    params: { constant: P(0.1, 1, 0.01, 'Resistance'), stiffness: P(60, 600, 10, 'Return stiffness') } },
+  { id: 'pendulum-wave', cat: 'springs', title: 'Pendulum wave', kind: 'canvas', posterAt: 4000,
+    trick: 'Lengths tuned so the row drifts in and out of sync',
+    notes: ['Each pendulum swings a whole number of times more than its neighbour per cycle.', 'So they start together, drift into travelling waves and snakes, and line up again at the end of the cycle.', 'Pure maths, no physics step: angle = A·cos(2π·n·t / cycle).'],
+    params: { count: P(5, 30, 1, 'Pendulums'), cycle: P(10, 60, 1, 'Cycle (s)') } },
+  { id: 'verlet-rope', cat: 'springs', title: 'Verlet rope', kind: 'canvas', posterAt: 1500, pointer: true,
+    trick: 'Points remember where they were; lengths are enforced',
+    notes: ['Verlet integration moves each point by its last motion plus gravity, with no velocity stored.', 'Then the solver nudges neighbours back to their rest length a few times per frame.', 'More iterations make a stiffer rope.'],
+    params: { segments: P(6, 50, 1, 'Segments'), gravity: P(0, 3000, 50, 'Gravity'), iterations: P(1, 30, 1, 'Iterations') } },
+  { id: 'ball-collisions', cat: 'springs', title: 'Ball collisions', kind: 'canvas', posterAt: 1200,
+    trick: 'Elastic impulses along the line between centres',
+    notes: ['When two balls overlap they are pushed apart, then swap the part of their velocity along the line between their centres.', 'Heavier (bigger) balls keep more of their momentum.', 'Restitution below 1 loses a little energy each hit.'],
+    params: { count: P(4, 40, 1, 'Balls'), restitution: P(0.5, 1, 0.01, 'Restitution') } },
+
+  // ── Morph & SVG
+  { id: 'shape-morph', cat: 'morph', title: 'Shape morph', kind: 'canvas', posterAt: 1500,
+    trick: 'Every shape is the same 160 polar radii',
+    notes: ['Every shape is stored as 160 distances from the centre at fixed angles, so any shape can blend into any other point by point.', 'Interpolating radii keeps the outline smooth with no tangles.', 'Square, circle, star, flower and blob share one list.'],
+    params: { hold: P(0, 2000, 50, 'Hold (ms)'), morph: P(150, 2000, 10, 'Morph (ms)') } },
+  { id: 'icon-morph', cat: 'morph', title: 'Icon morph', kind: 'dom', posterAt: 900,
+    trick: 'Two paths with the same points, interpolated',
+    notes: ['Play and pause, menu and close: each pair is drawn with the same number of points in the same order.', 'Blending the numbers point by point turns one icon into the other.', 'A little rotation during the morph hides the in-between shapes.'],
+    params: { duration: P(100, 1200, 10, 'Duration (ms)') } },
+  { id: 'gooey', cat: 'morph', title: 'Gooey blobs', kind: 'dom', posterAt: 1300,
+    trick: 'Blur, then a hard alpha threshold',
+    notes: ['The blobs are blurred together, then an SVG colour-matrix filter cranks alpha contrast, so the soft overlap becomes a hard liquid bridge.', 'More blur means blobs merge from farther away.', 'The circles themselves are plain divs.'],
+    params: { blur: P(4, 30, 1, 'Blur'), blobs: P(2, 10, 1, 'Blobs') } },
+  { id: 'line-draw', cat: 'morph', title: 'Line draw-on', kind: 'dom', posterAt: 1700,
+    trick: 'stroke-dasharray equals the path length',
+    notes: ['Set the dash length to the full path length, offset the dash by the same amount and the line disappears; animate the offset to zero and it draws itself.', 'getTotalLength() measures each path.', 'Several paths staggered read like a hand drawing.'],
+    params: { duration: P(500, 6000, 50, 'Duration (ms)') } },
+  { id: 'liquid-button', cat: 'morph', title: 'Liquid button', kind: 'canvas', posterAt: 1300, pointer: true,
+    trick: 'Edge points on springs, pushed by the pointer',
+    notes: ['The button outline is a ring of points, each on its own spring back to the rounded rectangle.', 'The pointer pushes nearby points as it passes, and the springs make the edge wobble like liquid.', 'Lower stiffness gives a gloopier surface.'],
+    params: { wobble: P(0, 3, 0.05, 'Push'), stiffness: P(30, 400, 5, 'Stiffness') } },
+
+  // ── Flow & particles
+  { id: 'curl-flow', cat: 'flow', title: 'Curl-noise flow field', kind: 'canvas', posterAt: 2200,
+    trick: 'A divergence-free field, so particles never clump',
+    notes: ['Each particle moves along the curl of a smooth noise field, which has no sources or sinks, so streams swirl without piling up.', 'Drawing a translucent rectangle each frame instead of clearing leaves the trails.', 'Scale sets the size of the eddies.'],
+    params: { count: P(500, 8000, 100, 'Particles'), speed: P(0.2, 3, 0.1, 'Speed'), scale: P(0.0008, 0.006, 0.0001, 'Field scale') } },
+  { id: 'drone-show', cat: 'flow', title: 'Drone light show', kind: 'webgl', posterAt: 19000,
+    trick: 'Every formation change is an assignment problem, solved by sorting and swaps',
+    notes: ['A fleet of drones lifts off a barge and flies formations over a night city: a turning globe, Saturn and its ring, a beating heart, a word. Each formation is a list of slots, and every drone needs its own.', 'To keep the sky clean, slots are matched to drones by sorting both into bands, then thousands of random swap tests each keep a swap only if it shortens the total flight, so no drone crosses the sky. Launch and landing paths curve: climb first, then swing over.', 'The bay mirrors everything at the waterline; three swells break the reflection up and stretch it toward you, and a bloom chain gives every light its halo.'],
+    params: { drones: P(300, 3000, 100, 'Drones'), speed: P(0.3, 2, 0.1, 'Show speed'), glow: P(0, 2, 0.1, 'Glow') } },
+  { id: 'particle-life', cat: 'flow', title: 'Particle life', kind: 'canvas', posterAt: 15000, pointer: true,
+    trick: 'Six species, one table of likes and dislikes, and creatures appear',
+    notes: ['Every pair of particles pushes apart when very close, then attracts or repels by an entry in a small table (how much species A likes species B), fading out at a fixed range.', 'The table is not symmetric: red may chase green while green flees red. Out of that come things that look alive: cells with membranes, worms, spinners, swarms that hunt each other.', 'Every half minute the table drifts to a new random one and the creatures melt and different ones form. Neighbours come from a grid, the box wraps, and you can drag to stir.'],
+    params: { particles: P(600, 4000, 100, 'Particles'), species: P(2, 8, 1, 'Species'), range: P(0.05, 0.16, 0.005, 'Range') } },
+  { id: 'cloud-chamber', cat: 'flow', title: 'Cloud chamber', kind: 'canvas', posterAt: 6500,
+    trick: 'Alpha stubs, spiralling electrons and straight muons in supersaturated mist',
+    notes: ['The alcohol vapour in the chamber is supersaturated, so any charged particle that passes leaves a trail of droplets, lit from the side. A thoriated welding rod sends out alpha particles: short, fat, dead-straight tracks.', 'Beta electrons are light, so they scatter and wander, and in the magnet under the chamber they curl into spirals that tighten as they slow; now and then one curls the other way, a positron. Cosmic-ray muons cut straight across, sometimes knocking loose a small electron of their own.', 'Each track is a list of droplets that swell, spread, drift with the convection and fade. Mist drifts through the light and a fine drizzle falls.'],
+    params: { activity: P(0.2, 3, 0.1, 'Activity'), field: P(0, 2.5, 0.05, 'Magnetic field'), mist: P(0, 2, 0.05, 'Mist') } },
+  { id: 'holi', cat: 'flow', title: 'Holi powder', kind: 'webgl', posterAt: 6000,
+    trick: 'Puffs that shade each other through a coarse 3D density grid',
+    notes: ['Handfuls of coloured powder are thrown up into a bright sky. Each burst is a thousand soft puffs that drag to a stop, swell and swirl in turbulence, drifting with the breeze.', 'To read as clouds rather than flat blobs, the puffs shade each other: every frame their density is splatted into a coarse 3D grid, light is marched through it from the sun, and each puff is lit by what gets through.', 'The sun sits behind the powder, so thin edges glow and thick cores go dusky; puffs are sorted far to near and drawn over one another with a lumpy noise texture.'],
+    params: { bursts: P(0.3, 2.5, 0.1, 'Bursts'), puffs: P(300, 2000, 50, 'Puffs per burst'), wind: P(-2, 3, 0.1, 'Breeze') } },
+
+  // ── Fluid
+  { id: 'ink-fluid', cat: 'fluid', title: 'Ink fluid', kind: 'webgl', posterAt: 2500, pointer: true,
+    trick: 'Stable fluids: advect, curl, project, repeat',
+    notes: ['A real Navier–Stokes solver on the GPU: velocity carries the dye, a vorticity step keeps the swirls alive, and a pressure solve keeps it incompressible.', 'Move across it to push ink; it also splats on its own.', 'Curl adds small swirls; dissipation sets how long the ink lasts.'],
+    params: { curl: P(0, 60, 1, 'Curl'), dissipation: P(0.9, 1, 0.002, 'Dye persistence'), splatRadius: P(0.05, 0.8, 0.01, 'Splat radius') } },
+  { id: 'ripples', cat: 'fluid', title: 'Water ripples', kind: 'canvas', posterAt: 1600, pointer: true,
+    trick: 'Two height buffers and the wave equation',
+    notes: ['Two height maps swap each frame; each cell becomes the average of its neighbours minus its old value, which is the wave equation.', 'Shading uses the slope of the surface, so ripples catch light.', 'Damping below 1 lets the waves die out.'],
+    params: { damping: P(0.9, 0.995, 0.001, 'Damping'), dropRate: P(0, 5, 0.1, 'Drops / second') } },
+  { id: 'liquid-distort', cat: 'fluid', title: 'Liquid image distortion', kind: 'webgl', posterAt: 1500, pointer: true,
+    trick: 'Offset texture lookups by flowing noise',
+    notes: ['The picture is a texture; each pixel samples it from a slightly shifted spot, with the shift taken from animated noise.', 'Near the pointer the shift grows, like a finger dragged through water.', 'Strength is how far pixels can be displaced.'],
+    params: { strength: P(0, 0.12, 0.002, 'Strength'), speed: P(0, 1.5, 0.05, 'Flow speed') } },
+  { id: 'lava-lamp', cat: 'fluid', title: 'Lava lamp', kind: 'webgl', posterAt: 2000,
+    trick: 'Metaballs: sum the fields, threshold the sum',
+    notes: ['Each blob adds a field that falls off with distance; wherever the total passes a threshold, the pixel is lava.', 'Because fields add, blobs bulge toward each other and merge smoothly.', 'They rise and sink on slow sine paths.'],
+    params: { blobs: P(2, 14, 1, 'Blobs'), speed: P(0.1, 2, 0.05, 'Speed') } },
+  { id: 'ocean-waves', cat: 'fluid', title: 'Ocean waves', kind: 'canvas', posterAt: 1200,
+    trick: 'Gerstner waves: points move in circles',
+    notes: ['In a Gerstner wave the water moves in circles, not just up and down, which sharpens the crests and flattens the troughs.', 'Several wave layers at different speeds and depths add parallax.', 'Choppiness sets how sharp the crests get.'],
+    params: { height: P(0.2, 2, 0.05, 'Height'), choppiness: P(0, 1, 0.05, 'Choppiness') } },
+
+  // ── Chrome & 3D
+  { id: 'portal', cat: 'chrome', title: 'Portal', kind: 'webgl', posterAt: 3000,
+    trick: 'A ray that passes through the ring finishes its journey in the other world',
+    notes: ['A stone ring stands on a dune, and through it you see a night sea under a ringed planet. It is not a picture on a disc: every ray is traced through the desert, and if it passes through the ring’s opening before hitting anything, the rest of its journey is traced in the other world, from that point, in the same direction.', 'So the view through the portal shifts with perspective as the camera moves. When the camera itself flies through, the worlds swap: the ring now stands on the sea and shows the desert. Then it turns round and flies back.', 'Both worlds are raymarched height fields (dunes; a sea of three swells reflecting the sky), lit by their own suns, with a glowing inner edge on the ring.'],
+    params: { speed: P(0.3, 2, 0.1, 'Speed'), glow: P(0, 2, 0.05, 'Ring glow'), waves: P(0, 2.5, 0.05, 'Waves') } },
+  { id: 'geode', cat: 'chrome', title: 'Geode', kind: 'webgl', posterAt: 6500,
+    trick: 'A Voronoi pattern on the sphere of directions grows the crystals inward',
+    notes: ['A rough grey stone cracks in half and opens like a book. It is one distance function: a sphere roughened with noise; each half keeps one side of the cut and has a hollow carved out of it.', 'The hollow’s wall is pushed inward by a Voronoi pattern over directions, measured with a squarish metric so every cell becomes a faceted crystal pointing at the centre: deep purple at the root, pale at the tip, facets glinting one by one.', 'On the cut face you see the layers in section: the rind, the stone, bands of agate, then the crystal lining.'],
+    params: { crystals: P(0.6, 1.8, 0.05, 'Crystal size'), sparkle: P(0, 2.5, 0.1, 'Sparkle'), speed: P(0.4, 2, 0.1, 'Speed') } },
+  { id: 'glass-lens', cat: 'chrome', title: 'Glass lens refraction', kind: 'webgl', posterAt: 1400, pointer: true,
+    trick: 'Bend the lookup by the lens normal, per colour',
+    notes: ['Inside the lens each pixel samples the scene behind it, offset by the lens surface normal, which is refraction.', 'Red, green and blue are offset by slightly different amounts, giving the coloured fringe at the edge (dispersion).', 'The lens follows the pointer.'],
+    params: { ior: P(1, 2, 0.01, 'Refraction'), dispersion: P(0, 0.08, 0.002, 'Dispersion') } },
+  { id: 'dust-bust', cat: 'chrome', title: 'Dust to the wind', kind: 'webgl', posterAt: 5600,
+    trick: 'A dissolving front frees each surface point into a swirling wind',
+    notes: ['A marble bust made of a hundred and fifty thousand points, each sitting on the surface with its own normal so it lights like stone. The surface is sampled from simple shapes (an egg of a head, nose, brow, ears, a bun, neck, shoulders), keeping only points no other shape covers.', 'A dissolving front sweeps across from one shoulder. Every point it passes flares like an ember, breaks loose and is carried off by a swirling wind, cooling to grey dust.', 'Then the dust is called back along curving paths and the bust stands whole again.'],
+    params: { points: P(30000, 250000, 10000, 'Points'), wind: P(0.3, 2.5, 0.1, 'Wind'), speed: P(0.4, 2, 0.1, 'Speed') } },
+  { id: 'cloth-reveal', cat: 'chrome', title: 'Cloth reveal', kind: 'webgl', posterAt: 3000,
+    trick: 'Verlet cloth with stretch, shear and bend constraints drapes, then is whipped off',
+    notes: ['A silk sheet falls over something on a plinth, drapes, and is whipped off by one corner to unveil a chrome sculpture.', 'The sheet is a grid of points joined by distance constraints: neighbours, diagonals, and every second point, so it resists folding too sharply. Points move by Verlet integration, the constraints are solved ten times a frame, and the cloth collides with the sculpture, the plinth and the floor, with friction.', 'Silk is lit two-sided with a soft sheen that runs along the folds; the sculpture reflects a studio of softboxes.'],
+    params: { grid: P(20, 64, 2, 'Cloth resolution'), stiffness: P(0.3, 1, 0.05, 'Stiffness'), speed: P(0.4, 2, 0.1, 'Speed') } },
+
+  // ── Shaders & glitch
+  { id: 'aurora', cat: 'shaders', title: 'Aurora gradient', kind: 'webgl', posterAt: 1500,
+    trick: 'Noise warped by noise, mapped to a palette',
+    notes: ['Domain warping: the noise coordinates are themselves pushed around by another noise, which gives slow folding curtains.', 'The result picks colours from a small palette rather than a rainbow.', 'Warp sets how much the curtains fold.'],
+    params: { speed: P(0, 1.5, 0.05, 'Speed'), warp: P(0, 3, 0.05, 'Warp') } },
+  { id: 'voronoi', cat: 'shaders', title: 'Voronoi cells', kind: 'webgl', posterAt: 1200,
+    trick: 'Nearest point wins; the gap to the second is the edge',
+    notes: ['Every pixel finds the nearest of a set of moving points; that point owns the cell.', 'The difference between the nearest and second-nearest distance gives clean edges.', 'Cell count sets the density.'],
+    params: { cells: P(2, 20, 1, 'Cells'), speed: P(0, 2, 0.05, 'Speed') } },
+  { id: 'reaction-diffusion', cat: 'shaders', title: 'Reaction–diffusion', kind: 'webgl', posterAt: 3000,
+    trick: 'Gray–Scott: two chemicals, feed and kill',
+    notes: ['Two simulated chemicals spread at different rates and one eats the other; the balance of feed and kill rates decides the pattern.', 'Small changes flip it between spots, stripes and coral.', 'The simulation runs on the GPU, several steps per frame.'],
+    params: { feed: P(0.025, 0.05, 0.001, 'Feed'), kill: P(0.058, 0.0655, 0.0005, 'Kill') } },
+  { id: 'guilloche', cat: 'shaders', title: 'Guilloche spirograph', kind: 'canvas', posterAt: 3200,
+    trick: 'A hypotrochoid, drawn as a seven-line ribbon',
+    notes: ['A hypotrochoid is a point on a small circle rolling inside a big one; whole-number ratios close the loop.', 'Drawing seven slightly offset copies gives the engraved banknote look.', 'Change R, r and d for completely different rosettes.'],
+    params: { R: P(3, 12, 1, 'Big circle'), r: P(1, 9, 1, 'Small circle'), d: P(1, 9, 0.1, 'Pen offset'), lines: P(1, 12, 1, 'Lines') } },
+  { id: 'rgb-glitch', cat: 'shaders', title: 'RGB-split glitch', kind: 'canvas', posterAt: 1250,
+    trick: 'Shift the colour channels, displace slices',
+    notes: ['The picture is drawn three times, one per colour channel, with additive blending; offsetting them splits the colour.', 'During bursts, horizontal slices jump sideways and scanlines jitter.', 'Bursts arrive at random so the eye cannot predict them.'],
+    params: { intensity: P(0, 2, 0.05, 'Intensity'), rate: P(0, 3, 0.05, 'Bursts / second') } },
+];
+
+// round 2 additions live in registry-more.js; keep every category together, in dial order
+const order = Object.fromEntries(CATEGORIES.map((c, i) => [c.id, i]));
+export const ANIMS = [...BASE, ...MORE].sort((a, b) => order[a.cat] - order[b.cat]);
+export const catById = Object.fromEntries(CATEGORIES.map(c => [c.id, c]));
+export const animById = Object.fromEntries(ANIMS.map(a => [a.id, a]));
+export const srcOf = a => `anims/${a.cat}/${a.id}.js`;

package/anims/scroll/parallax.js

@@ -0,0 +1,50 @@
+// Parallax layers: far layers move a little, near layers a lot, so scrolling reads as depth.
+const PARAMS = { depth: 0.6 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'px-root';
+  root.innerHTML = `<style>
+    .px-root { position: absolute; inset: 0; }
+    .px-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
+    .px-scroll::-webkit-scrollbar { display: none; }
+    .px-scene { position: sticky; top: 0; overflow: hidden; background: #d3f9d8; }
+    .px-layer { position: absolute; left: -5%; width: 110%; will-change: transform; }
+    .px-layer svg { display: block; width: 100%; height: 100%; }
+    .px-sun { position: absolute; width: 16%; aspect-ratio: 1; border-radius: 50%; background: #fab005; left: 66%; top: 12%; will-change: transform; }
+    .px-word { position: absolute; left: 7%; top: 12%; font: 800 9vmin/1 "Mona Sans", system-ui, sans-serif; color: #1b4d2b; letter-spacing: -0.02em; will-change: transform; }
+  </style>
+  <div class="px-scroll" data-scroll><div class="px-track"><div class="px-scene"><div class="px-sun"></div><div class="px-word">Scroll down</div></div></div></div>`;
+  stage.append(root);
+  const sc = root.querySelector('.px-scroll'), scene = root.querySelector('.px-scene');
+  const H = stage.clientHeight;
+  scene.style.height = H + 'px';
+  root.querySelector('.px-track').style.height = H * 4 + 'px';
+
+  // Hills from far to near. `top` is where the crest starts (fraction of the frame);
+  // `speed` is how far the layer rises over the whole scroll, as a fraction of the frame height.
+  const hills = [
+    { c: '#b2f2bb', top: 0.5, amp: 0.05, f: 1.3, speed: 0.12 },
+    { c: '#69db7c', top: 0.62, amp: 0.06, f: 2.1, speed: 0.3 },
+    { c: '#37b24d', top: 0.74, amp: 0.05, f: 3.2, speed: 0.55 },
+    { c: '#1b5e2c', top: 0.88, amp: 0.04, f: 4.6, speed: 0.9 },
+  ];
+  const layers = hills.map((L, i) => {
+    const pts = []; for (let x = 0; x <= 100; x += 2) pts.push(`${x},${(L.amp * (1 + Math.sin(x / 100 * Math.PI * L.f + i))) * 50}`);
+    const el = document.createElement('div'); el.className = 'px-layer';
+    el.style.top = (L.top * H) + 'px'; el.style.height = (H * 1.2) + 'px';
+    el.innerHTML = `<svg viewBox="0 0 100 120" preserveAspectRatio="none"><polygon fill="${L.c}" points="0,120 ${pts.join(' ')} 100,120"/></svg>`;
+    scene.append(el); return { el, speed: L.speed };
+  });
+  const sun = root.querySelector('.px-sun'), word = root.querySelector('.px-word');
+  let raf;
+  function frame() {
+    const max = sc.scrollHeight - sc.clientHeight, p = max > 0 ? sc.scrollTop / max : 0, d = PARAMS.depth;
+    sun.style.transform = `translateY(${p * H * 0.1 * d}px)`;
+    layers.forEach(L => { L.el.style.transform = `translateY(${-p * H * L.speed * d}px)`; });
+    word.style.transform = `translateY(${-p * H * 1.4 * d}px)`;
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); root.remove(); };
+}

package/anims/scroll/pinned-track.js

@@ -0,0 +1,40 @@
+// Pinned horizontal track: a sticky frame holds still while vertical scroll slides a row of panels sideways.
+const PARAMS = { panels: 5 };
+
+export default function (stage) {
+  const names = ['Sketch', 'Block', 'Spline', 'Polish', 'Render', 'Review', 'Deliver', 'Archive'];
+  const colours = ['#2f9e44', '#fab005', '#15171a', '#ff8787', '#4dabf7', '#a9e34b', '#e64980', '#868e96'];
+  const n = Math.round(PARAMS.panels);
+  const root = document.createElement('div');
+  root.className = 'pt-root';
+  root.innerHTML = `<style>
+    .pt-root { position: absolute; inset: 0; background: #ebfbee; font-family: "Mona Sans", system-ui, sans-serif; }
+    .pt-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
+    .pt-scroll::-webkit-scrollbar { display: none; }
+    .pt-frame { position: sticky; top: 0; overflow: hidden; display: flex; align-items: center; }
+    .pt-row { display: flex; gap: 4vmin; padding: 0 8vmin; will-change: transform; }
+    .pt-panel { flex: none; width: 62vmin; aspect-ratio: 4 / 3; border-radius: 3vmin; display: flex; flex-direction: column; justify-content: space-between; padding: 4vmin; box-sizing: border-box; color: #fff; }
+    .pt-panel b { font-size: 11vmin; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
+    .pt-panel span { font-size: max(11px, 3.6vmin); font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums; }
+    .pt-panel.light { color: #15171a; }
+  </style><div class="pt-scroll" data-scroll><div class="pt-track"><div class="pt-frame"><div class="pt-row"></div></div></div></div>`;
+  stage.append(root);
+  const sc = root.querySelector('.pt-scroll'), frame = root.querySelector('.pt-frame'), row = root.querySelector('.pt-row');
+  const H = stage.clientHeight;
+  frame.style.height = H + 'px';
+  root.querySelector('.pt-track').style.height = H * (1 + n * 0.8) + 'px';
+  for (let i = 0; i < n; i++) {
+    const el = document.createElement('div'); el.className = 'pt-panel' + ([1, 3, 5].includes(i) ? ' light' : '');
+    el.style.background = colours[i % colours.length];
+    el.innerHTML = `<span>Step ${i + 1} of ${n}</span><b>${names[i % names.length]}</b>`; row.append(el);
+  }
+  let raf;
+  function tick() {
+    const max = sc.scrollHeight - sc.clientHeight, p = max > 0 ? sc.scrollTop / max : 0;
+    const travel = Math.max(0, row.scrollWidth - frame.clientWidth);
+    row.style.transform = `translateX(${-p * travel}px)`;
+    raf = requestAnimationFrame(tick);
+  }
+  raf = requestAnimationFrame(tick);
+  return () => { cancelAnimationFrame(raf); root.remove(); };
+}

package/anims/scroll/scrub-reveal.js

@@ -0,0 +1,34 @@
+// Scrub reveal: every word's opacity is tied to scroll progress, offset by its place in the paragraph.
+const PARAMS = { spread: 0.35 };
+
+export default function (stage) {
+  const text = 'Scroll is the one input every visitor already knows. Tie the reveal to it and the reader sets the pace, word by word.';
+  const root = document.createElement('div');
+  root.className = 'sr-root';
+  root.innerHTML = `<style>
+    .sr-root { position: absolute; inset: 0; background: #0f2416; }
+    .sr-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
+    .sr-scroll::-webkit-scrollbar { display: none; }
+    .sr-sticky { position: sticky; top: 0; display: grid; align-content: center; padding: 0 9%; box-sizing: border-box; }
+    .sr-p { margin: 0; font: 700 clamp(14px, 6.4vmin, 44px)/1.18 "Mona Sans", system-ui, sans-serif; letter-spacing: -0.015em; color: #d3f9d8; }
+    .sr-p span { opacity: .15; }
+  </style><div class="sr-scroll" data-scroll><div class="sr-track"><div class="sr-sticky"><p class="sr-p"></p></div></div></div>`;
+  stage.append(root);
+  const sc = root.querySelector('.sr-scroll'), sticky = root.querySelector('.sr-sticky'), p = root.querySelector('.sr-p');
+  const H = stage.clientHeight;
+  sticky.style.height = H + 'px';
+  root.querySelector('.sr-track').style.height = H * 3.2 + 'px';
+  const words = text.split(' ').map((w, i, a) => { const s = document.createElement('span'); s.textContent = w + (i < a.length - 1 ? ' ' : ''); p.append(s); return s; });
+  let raf;
+  function frame() {
+    const max = sc.scrollHeight - sc.clientHeight, prog = max > 0 ? sc.scrollTop / max : 0;
+    const n = words.length, sp = PARAMS.spread;
+    words.forEach((w, i) => {
+      const k = Math.min(1, Math.max(0, (prog * (1 + sp) - i / n) / sp));
+      w.style.opacity = (0.15 + 0.85 * k).toFixed(3);
+    });
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); root.remove(); };
+}

package/anims/scroll/velocity-skew.js

@@ -0,0 +1,38 @@
+// Velocity-skew marquee: rows always drift; smoothed scroll velocity speeds them up and leans the type.
+const PARAMS = { skew: 0.25, boost: 6 };
+
+export default function (stage) {
+  const rows = ['Motion library · ', 'Sixty effects · ', 'Copy the code · '];
+  const root = document.createElement('div');
+  root.className = 'vs-root';
+  root.innerHTML = `<style>
+    .vs-root { position: absolute; inset: 0; background: #2f9e44; font-family: "Mona Sans", system-ui, sans-serif; }
+    .vs-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
+    .vs-scroll::-webkit-scrollbar { display: none; }
+    .vs-stick { position: sticky; top: 0; display: grid; align-content: center; gap: 1vmin; overflow: hidden; }
+    .vs-row { white-space: nowrap; font-size: 15vmin; font-weight: 850; letter-spacing: -0.03em; line-height: 1.05; color: #ebfbee; will-change: transform; }
+    .vs-row:nth-child(2) { color: #15171a; }
+  </style><div class="vs-scroll" data-scroll><div class="vs-track"><div class="vs-stick"></div></div></div>`;
+  stage.append(root);
+  const sc = root.querySelector('.vs-scroll'), stick = root.querySelector('.vs-stick');
+  const H = stage.clientHeight;
+  stick.style.height = H + 'px';
+  root.querySelector('.vs-track').style.height = H * 4 + 'px';
+  const els = rows.map(t => { const el = document.createElement('div'); el.className = 'vs-row'; el.textContent = t.repeat(8); stick.append(el); return { el, x: 0 }; });
+  let lastTop = sc.scrollTop, vel = 0, last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.max(1, now - last); last = now;
+    const raw = (sc.scrollTop - lastTop) / dt; lastTop = sc.scrollTop;   // px per ms
+    vel += (raw - vel) * 0.12;                                          // smooth it
+    const speed = 0.04 + Math.abs(vel) * PARAMS.boost * 0.1;
+    const skew = Math.max(-20, Math.min(20, vel * PARAMS.skew * 40));
+    els.forEach((r, i) => {
+      const dir = i % 2 ? 1 : -1, w = r.el.scrollWidth / 8;
+      r.x = (r.x + dir * speed * dt) % w;
+      r.el.style.transform = `translateX(${r.x - (dir > 0 ? w : 0)}px) skewX(${-skew * dir}deg)`;
+    });
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); root.remove(); };
+}

package/anims/scroll/zoom-through.js

@@ -0,0 +1,41 @@
+// Zoom-through: the word scales exponentially with scroll, around the hole of its O, until you fly through it.
+const PARAMS = { maxScale: 28 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'zt-root';
+  root.innerHTML = `<style>
+    .zt-root { position: absolute; inset: 0; font-family: "Mona Sans", system-ui, sans-serif; }
+    .zt-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
+    .zt-scroll::-webkit-scrollbar { display: none; }
+    .zt-scene { position: sticky; top: 0; overflow: hidden; background: #ebfbee; display: grid; place-items: center; }
+    .zt-next { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13vmin; font-weight: 800; color: #ebfbee; letter-spacing: -0.03em; background: #2f9e44; }
+    .zt-word { position: relative; font-size: 26vmin; font-weight: 900; font-stretch: 112%; color: #1b4d2b; letter-spacing: -0.04em; line-height: 1; will-change: transform; }
+  </style><div class="zt-scroll" data-scroll><div class="zt-track"><div class="zt-scene"><div class="zt-next">Inside.</div><div class="zt-word">GO<span class="zt-o">O</span></div></div></div></div>`;
+  stage.append(root);
+  const sc = root.querySelector('.zt-scroll'), scene = root.querySelector('.zt-scene'), word = root.querySelector('.zt-word'), o = root.querySelector('.zt-o'), next = root.querySelector('.zt-next');
+  const H = stage.clientHeight;
+  scene.style.height = H + 'px';
+  root.querySelector('.zt-track').style.height = H * 3.5 + 'px';
+  // The scene background paints over .zt-next until the zoom passes through the O's counter.
+  scene.style.background = 'transparent';
+  word.style.background = 'transparent';
+  const cover = document.createElement('div'); cover.style.cssText = 'position:absolute;inset:0;background:#ebfbee;will-change:opacity';
+  scene.insertBefore(cover, word);
+  let raf;
+  function frame() {
+    const max = sc.scrollHeight - sc.clientHeight, p = max > 0 ? sc.scrollTop / max : 0;
+    // origin = centre of the O's counter, relative to the word box
+    const ox = o.offsetLeft + o.offsetWidth / 2, oy = o.offsetTop + o.offsetHeight * 0.52;
+    word.style.transformOrigin = `${ox}px ${oy}px`;
+    const s = Math.pow(PARAMS.maxScale, Math.min(1, p / 0.8));
+    word.style.transform = `scale(${s})`;
+    const through = Math.min(1, Math.max(0, (p - 0.55) / 0.25));
+    cover.style.opacity = String(1 - through);
+    word.style.opacity = String(1 - Math.max(0, (p - 0.72) / 0.1));
+    next.style.transform = `scale(${1.25 - 0.25 * through})`;
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); root.remove(); };
+}

package/anims/shaders/aurora.js

@@ -0,0 +1,47 @@
+// Aurora gradient: domain warping. The noise coordinates are pushed around by another noise,
+// which folds the field into slow curtains; the result picks colours from a short palette.
+const PARAMS = { speed: 0.3, warp: 1.2 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block';
+  stage.append(canvas);
+  const gl = canvas.getContext('webgl2', { antialias: false });
+  if (!gl) { stage.textContent = 'This needs WebGL2.'; return () => canvas.remove(); }
+  const vs = `#version 300 es
+  in vec2 p; out vec2 uv; void main() { uv = p * .5 + .5; gl_Position = vec4(p, 0, 1); }`;
+  const fs = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o;
+  uniform vec2 R; uniform float T, Wp;
+  float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+  float noise(vec2 p) { vec2 i = floor(p), f = fract(p), u = f * f * (3. - 2. * f);
+    return mix(mix(hash(i), hash(i + vec2(1, 0)), u.x), mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), u.x), u.y); }
+  float fbm(vec2 p) { float s = 0., a = .5; for (int i = 0; i < 5; i++) { s += a * noise(p); p = p * 2.03 + 11.7; a *= .5; } return s; }
+  void main() {
+    vec2 p = uv * vec2(R.x / R.y, 1.) * 2.2;
+    vec2 q = vec2(fbm(p + vec2(0, T * .6)), fbm(p + vec2(5.2, 1.3) - T * .4));
+    vec2 r = vec2(fbm(p + Wp * 2.5 * q + vec2(1.7, 9.2) + T * .3), fbm(p + Wp * 2.5 * q + vec2(8.3, 2.8)));
+    float f = fbm(p + Wp * 2. * r);
+    vec3 night = vec3(.02, .05, .1), green = vec3(.2, .95, .6), teal = vec3(.08, .55, .6), rose = vec3(.95, .45, .6);
+    vec3 col = mix(night, teal, smoothstep(.2, .6, f));
+    col = mix(col, green, smoothstep(.45, .85, length(q) * f));
+    col = mix(col, rose, smoothstep(.62, .95, r.y * f * 1.4) * .8);
+    col *= .55 + .7 * smoothstep(0., 1., uv.y);                    // brighter toward the top of the sky
+    o = vec4(col, 1);
+  }`;
+  const sh = (t, s) => { const x = gl.createShader(t); gl.shaderSource(x, s); gl.compileShader(x); if (!gl.getShaderParameter(x, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(x)); return x; };
+  const prog = gl.createProgram(); gl.attachShader(prog, sh(gl.VERTEX_SHADER, vs)); gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, fs)); gl.bindAttribLocation(prog, 0, 'p'); gl.linkProgram(prog); gl.useProgram(prog);
+  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+  const uR = gl.getUniformLocation(prog, 'R'), uT = gl.getUniformLocation(prog, 'T'), uW = gl.getUniformLocation(prog, 'Wp');
+  const resize = () => { const d = Math.min(devicePixelRatio, 1.5); canvas.width = stage.clientWidth * d | 0; canvas.height = stage.clientHeight * d | 0; gl.viewport(0, 0, canvas.width, canvas.height); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let raf;
+  function frame(now) {
+    gl.uniform2f(uR, canvas.width, canvas.height); gl.uniform1f(uT, now / 1000 * PARAMS.speed); gl.uniform1f(uW, PARAMS.warp);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}