motion-library 0.0.0-stage → 0.1.0

package/anims/shaders/dither.js

@@ -0,0 +1,69 @@
+// Ordered dithering: a lit 3D scene (a torus knot-ish ring and a sphere over a floor, raymarched) reduced to a couple
+// of ink tones per pixel. Each screen pixel compares its brightness with a fixed threshold from an 8×8 Bayer matrix;
+// the matrix spreads thresholds so evenly that, from a distance, the on/off pattern reads as smooth grey. Pixels are
+// drawn big on purpose, and the two-colour palette is an old paper-and-ink one.
+const PARAMS = { pixel: 2, tones: 2 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated';
+  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, LV;
+  mat2 rot(float a) { float c = cos(a), s = sin(a); return mat2(c, -s, s, c); }
+  float map(vec3 p) {
+    vec3 q = p - vec3(0, 1.1, 0); q.xz *= rot(T * .5); q.xy *= rot(T * .3);
+    vec2 t = vec2(length(q.xz) - .8, q.y);
+    float a = atan(q.z, q.x); t = rot(a * 1.5 + T) * t;                     // a twisted ring with a squared section
+    float ring = length(max(abs(t) - vec2(.12, .26), 0.)) - .04;
+    float ball = length(p - vec3(sin(T * .7) * 1.6, .45 + abs(sin(T * 1.8)) * .5, cos(T * .7) * .8)) - .42;
+    return min(min(ring, ball), p.y);
+  }
+  vec3 nrm(vec3 p) { vec2 e = vec2(.001, -.001); return normalize(e.xyy * map(p + e.xyy) + e.yyx * map(p + e.yyx) + e.yxy * map(p + e.yxy) + e.xxx * map(p + e.xxx)); }
+  float shadow(vec3 ro, vec3 rd) { float r = 1., t = .03; for (int i = 0; i < 40; i++) { float h = map(ro + rd * t); r = min(r, 8. * h / t); t += clamp(h, .02, .3); if (r < .002 || t > 6.) break; } return clamp(r, 0., 1.); }
+  float bayer(vec2 p) {                                                     // the 8×8 Bayer threshold, built bit by bit
+    ivec2 i = ivec2(mod(p, 8.)); int v = 0;
+    for (int b = 0; b < 3; b++) { int x = (i.x >> b) & 1, y = (i.y >> b) & 1; v |= ((x ^ y) << (2 * (2 - b) + 1)) | (y << (2 * (2 - b))); }
+    return (float(v) + .5) / 64.;
+  }
+  void main() {
+    vec2 q = (uv * 2. - 1.) * vec2(R.x / R.y, 1.);
+    vec3 ro = vec3(sin(T * .1) * 3.3, 2.1, -cos(T * .1) * 3.3), ta = vec3(0, .85, 0);
+    vec3 f = normalize(ta - ro), r = normalize(cross(vec3(0, 1, 0), f)), u = cross(f, r), rd = normalize(f * 1.6 + r * q.x + u * q.y);
+    float t = 0., lum = .97 - .22 * uv.y;                                   // a pale backdrop: sparse dots, so the objects stand out
+    for (int i = 0; i < 120; i++) { float d = map(ro + rd * t); if (d < .001) break; t += d; if (t > 20.) { t = -1.; break; } }
+    if (t > 0.) {
+      vec3 p = ro + rd * t, n = nrm(p), L = normalize(vec3(.6, 1, -.4));
+      float dif = max(dot(n, L), 0.) * shadow(p + n * .003, L), sp = pow(max(dot(reflect(rd, n), L), 0.), 24.);
+      lum = .02 + .75 * dif * dif + .6 * sp;                                // dark shadow sides against the pale paper
+      if (p.y < .002) lum = (.45 + .5 * dif) * (.95 - .15 * step(.5, fract(p.x * .5) + fract(p.z * .5) - .5));   // a faint checker floor
+      lum = mix(lum, .97 - .22 * uv.y, smoothstep(5., 12., t));
+    }
+    lum = pow(clamp(lum, 0., 1.), .9);
+    // quantise to LV tones, letting the Bayer threshold decide which way each pixel rounds
+    float lv = max(LV - 1., 1.), v = floor(lum * lv + bayer(gl_FragCoord.xy)) / lv;
+    vec3 ink = vec3(.11, .1, .16), paper = vec3(.93, .89, .8);
+    o = vec4(mix(ink, paper, clamp(v, 0., 1.)), 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 U = {}; ['R', 'T', 'LV'].forEach(n => U[n] = gl.getUniformLocation(prog, n));
+  // the canvas is rendered at 1/pixel resolution and scaled up without smoothing: that is the chunky dither grid
+  const resize = () => { const px = Math.max(1, PARAMS.pixel); canvas.width = Math.max(1, (stage.clientWidth || 1) / px | 0); canvas.height = Math.max(1, (stage.clientHeight || 1) / px | 0); gl.viewport(0, 0, canvas.width, canvas.height); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let raf; const t0 = performance.now();
+  function frame(now) {
+    gl.uniform2f(U.R, canvas.width, canvas.height); gl.uniform1f(U.T, (now - t0) / 1000); gl.uniform1f(U.LV, Math.round(PARAMS.tones));
+    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(); };
+}

package/anims/shaders/domain-warp.js

@@ -0,0 +1,52 @@
+// Domain warping (after Inigo Quilez): instead of reading noise at p, read it at p pushed by another noise, which was
+// itself read at a pushed point: f(p + g(p + h(p))). Each layer of pushing folds the pattern into marbled, smoky
+// filaments. The intermediate warp vectors are reused for colour, so the dye follows the folds, and everything drifts
+// slowly so the marble keeps flowing.
+const PARAMS = { warp: 1, speed: 1 };
+
+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, K;
+  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); f = f * f * (3. - 2. * f); return mix(mix(hash(i), hash(i + vec2(1, 0)), f.x), mix(hash(i + vec2(0, 1)), hash(i + 1.), f.x), f.y); }
+  const mat2 M = mat2(.8, .6, -.6, .8);
+  float fbm(vec2 p) { float s = 0., a = .5; for (int i = 0; i < 6; i++) { s += a * noise(p); p = M * p * 2.02; a *= .5; } return s; }
+  void main() {
+    vec2 p = (uv * 2. - 1.) * vec2(R.x / R.y, 1.) * 1.6;
+    float t = T * .06;
+    vec2 q = vec2(fbm(p + vec2(0, t)), fbm(p + vec2(5.2, 1.3) - t));                 // first push
+    vec2 r = vec2(fbm(p + 4. * K * q + vec2(1.7, 9.2) + t * 1.5), fbm(p + 4. * K * q + vec2(8.3, 2.8) - t));   // pushed again
+    float f = fbm(p + 4. * K * r);                                                   // read at the twice-pushed point
+    vec3 col = mix(vec3(.10, .15, .32), vec3(.72, .38, .2), clamp(f * f * 3.2, 0., 1.));
+    col = mix(col, vec3(.05, .05, .13), clamp(length(q), 0., 1.) * .7);
+    col = mix(col, vec3(.95, .82, .62), clamp(abs(r.x) * r.x * 1.6, 0., 1.) * .8);
+    col = mix(col, vec3(.2, .55, .6), smoothstep(.55, .9, r.y) * .5);
+    col *= .55 + 1.1 * f;
+    col = pow(col, vec3(.95));
+    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 U = {}; ['R', 'T', 'K'].forEach(n => U[n] = gl.getUniformLocation(prog, n));
+  const resize = () => { const w = stage.clientWidth || 1, h = stage.clientHeight || 1, d = Math.min(devicePixelRatio, Math.max(1, Math.sqrt(500000 / (w * h)))); canvas.width = w * d | 0; canvas.height = h * d | 0; gl.viewport(0, 0, canvas.width, canvas.height); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let raf, last = performance.now(), t = 0;
+  function frame(now) {
+    const dt = Math.min(0.05, (now - last) / 1000); last = now; t += dt * PARAMS.speed;
+    gl.uniform2f(U.R, canvas.width, canvas.height); gl.uniform1f(U.T, t); gl.uniform1f(U.K, 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(); };
+}

package/anims/shaders/guilloche.js

@@ -0,0 +1,42 @@
+// Guilloche spirograph: a hypotrochoid (a pen on a small circle rolling inside a big one), drawn as a ribbon
+// of slightly offset lines, like the engraving on a banknote. Whole-number R and r close the loop.
+const PARAMS = { R: 7, r: 4, d: 5.2, lines: 7 };
+
+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 ctx = canvas.getContext('2d');
+  let W = 0, H = 0;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = stage.clientWidth; H = stage.clientHeight; canvas.width = W * d; canvas.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const gcd = (a, b) => b ? gcd(b, a % b) : a;
+  const R = Math.round(PARAMS.R), r = Math.max(1, Math.min(R - 1, Math.round(PARAMS.r)));
+  const turns = r / gcd(R, r);                                   // full turns until the curve closes
+  const N = 2600, lines = Math.round(PARAMS.lines);
+  const point = (t, d) => [(R - r) * Math.cos(t) + d * Math.cos(((R - r) / r) * t), (R - r) * Math.sin(t) - d * Math.sin(((R - r) / r) * t)];
+  let raf; const t0 = performance.now(), CYCLE = 6500;
+  function frame(now) {
+    const ph = ((now - t0) % CYCLE) / CYCLE;
+    const draw = Math.min(1, ph / 0.7), fade = ph > 0.85 ? 1 - (ph - 0.85) / 0.15 : 1;
+    const ease = 1 - Math.pow(1 - draw, 2.2);
+    ctx.fillStyle = '#f7f4e6'; ctx.fillRect(0, 0, W, H);
+    const scale = (Math.min(W, H) * 0.44) / (R - r + PARAMS.d + lines * 0.12);
+    ctx.save(); ctx.translate(W / 2, H / 2); ctx.rotate(now / 9000);
+    ctx.globalAlpha = fade; ctx.lineWidth = 1;
+    const upto = Math.floor(N * ease);
+    for (let l = 0; l < lines; l++) {
+      const d = PARAMS.d + (l - (lines - 1) / 2) * 0.12;
+      ctx.strokeStyle = l % 2 ? '#7b8c10' : '#3d4a08';
+      ctx.beginPath();
+      for (let i = 0; i <= upto; i++) { const [x, y] = point((i / N) * Math.PI * 2 * turns, d); i ? ctx.lineTo(x * scale, y * scale) : ctx.moveTo(x * scale, y * scale); }
+      ctx.stroke();
+    }
+    if (draw < 1) { const [x, y] = point((upto / N) * Math.PI * 2 * turns, PARAMS.d); ctx.fillStyle = '#d9480f'; ctx.beginPath(); ctx.arc(x * scale, y * scale, 4, 0, 7); ctx.fill(); }
+    ctx.restore();
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/shaders/kaleidoscope.js

@@ -0,0 +1,64 @@
+// Kaleidoscope: fold the plane into N mirrored wedges. Convert each pixel to polar coordinates, take the angle modulo
+// one wedge, and mirror every other wedge, so whatever is drawn in one slice repeats round the circle with perfect
+// symmetry. The slice holds drifting glass chips (soft-edged cells of a moving Voronoi pattern) and a light leak; the
+// whole thing slowly turns and breathes in and out, and the edges of the chips split slightly into colour fringes.
+const PARAMS = { mirrors: 8, zoom: 1 };
+
+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, N, Z;
+  vec2 hash2(vec2 p) { p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3))); return fract(sin(p) * 43758.5453); }
+  // the glass chips: nearest and second-nearest cell distance, and the cell's id
+  vec3 chips(vec2 p) {
+    vec2 i = floor(p), f = fract(p); float d1 = 8., d2 = 8.; vec2 best = vec2(0);
+    for (int y = -1; y <= 1; y++) for (int x = -1; x <= 1; x++) {
+      vec2 g = vec2(x, y), o = hash2(i + g); o = .5 + .45 * sin(T * .5 + 6.2831 * o);
+      float d = length(g + o - f); if (d < d1) { d2 = d1; d1 = d; best = i + g; } else if (d < d2) d2 = d;
+    }
+    return vec3(d2 - d1, best);
+  }
+  vec3 slice(vec2 p) {
+    vec3 c = chips(p * 2.2 + vec2(T * .15, 0));
+    vec3 tint = .55 + .45 * cos(6.2831 * (hash2(c.yz).x + vec3(0, .33, .67)));
+    float edge = smoothstep(.0, .06, c.x);
+    vec3 col = tint * edge * (.6 + .4 * hash2(c.yz + 3.).y);
+    col += vec3(1., .85, .6) * .25 * exp(-length(p - vec2(.8, .1)) * 2.);   // a warm light leak
+    return col;
+  }
+  vec3 fold(vec2 q, float k) {
+    float r = length(q), a = atan(q.y, q.x) + T * .05;
+    float w = 6.2831 / N; a = mod(a, w); a = min(a, w - a);                // one wedge, mirrored at its edges
+    vec2 p = vec2(cos(a), sin(a)) * r * k;
+    return slice(p);
+  }
+  void main() {
+    vec2 q = (uv * 2. - 1.) * vec2(R.x / R.y, 1.);
+    float k = Z * (1.4 + .25 * sin(T * .23));                             // breathing zoom
+    vec3 col = vec3(fold(q * 1.006, k).r, fold(q, k).g, fold(q * .994, k).b);   // slight colour fringing, like cheap mirrors
+    col *= smoothstep(1.35, .7, length(q));                                // the tube's dark rim
+    o = vec4(pow(col, vec3(.95)), 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 U = {}; ['R', 'T', 'N', 'Z'].forEach(n => U[n] = gl.getUniformLocation(prog, n));
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); canvas.width = (stage.clientWidth || 1) * d | 0; canvas.height = (stage.clientHeight || 1) * d | 0; gl.viewport(0, 0, canvas.width, canvas.height); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let raf; const t0 = performance.now();
+  function frame(now) {
+    gl.uniform2f(U.R, canvas.width, canvas.height); gl.uniform1f(U.T, (now - t0) / 1000); gl.uniform1f(U.N, Math.round(PARAMS.mirrors)); gl.uniform1f(U.Z, PARAMS.zoom);
+    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(); };
+}

package/anims/shaders/reaction-diffusion.js

@@ -0,0 +1,85 @@
+// Reaction–diffusion (Gray–Scott): chemical B eats A, both spread at different rates, A is fed in and B dies off.
+// The balance of feed and kill decides the pattern: spots, stripes or coral. Runs on the GPU, 12 steps a frame.
+const PARAMS = { feed: 0.037, kill: 0.06 };
+
+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 || !gl.getExtension('EXT_color_buffer_float')) { stage.textContent = 'This needs WebGL2 with float render targets.'; 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 simFs = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o;
+  uniform sampler2D S; uniform vec2 px; uniform float F, K; uniform vec3 seed;
+  void main() {
+    vec2 c = texture(S, uv).rg;
+    // 3x3 Laplacian: centre -1, edges .2, corners .05
+    vec2 lap = -c;
+    lap += .2 * (texture(S, uv + vec2(px.x, 0)).rg + texture(S, uv - vec2(px.x, 0)).rg + texture(S, uv + vec2(0, px.y)).rg + texture(S, uv - vec2(0, px.y)).rg);
+    lap += .05 * (texture(S, uv + px).rg + texture(S, uv - px).rg + texture(S, uv + vec2(px.x, -px.y)).rg + texture(S, uv + vec2(-px.x, px.y)).rg);
+    float a = c.r, b = c.g, abb = a * b * b;
+    a += 1. * lap.r - abb + F * (1. - a);
+    b += .5 * lap.g + abb - (K + F) * b;
+    if (seed.z > 0. && distance(uv / px, seed.xy / px) < seed.z) b = .9;
+    o = vec4(clamp(a, 0., 1.), clamp(b, 0., 1.), 0, 1);
+  }`;
+  const showFs = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D S;
+  void main() {
+    float b = texture(S, uv).g, t = smoothstep(.12, .32, b);
+    vec3 col = mix(vec3(.96, .94, .84), vec3(.36, .42, .05), t);
+    col = mix(col, vec3(.12, .14, .03), smoothstep(.3, .45, b));
+    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 mk = fs => { const p = gl.createProgram(); gl.attachShader(p, sh(gl.VERTEX_SHADER, vs)); gl.attachShader(p, sh(gl.FRAGMENT_SHADER, fs)); gl.bindAttribLocation(p, 0, 'p'); gl.linkProgram(p); return p; };
+  const sim = mk(simFs), show = mk(showFs);
+  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 aspect = stage.clientWidth / Math.max(1, stage.clientHeight);
+  const SH = 220, SW = Math.round(SH * aspect);
+  // start: A everywhere, a few drops of B
+  const init = new Float32Array(SW * SH * 4);
+  for (let i = 0; i < SW * SH; i++) init[i * 4] = 1;
+  for (let k = 0; k < 14; k++) {
+    const cx = Math.random() * SW, cy = Math.random() * SH, r = 2 + Math.random() * 4;
+    for (let y = -r; y <= r; y++) for (let x = -r; x <= r; x++) { const X = (cx + x) | 0, Y = (cy + y) | 0; if (X >= 0 && X < SW && Y >= 0 && Y < SH && x * x + y * y <= r * r) init[(Y * SW + X) * 4 + 1] = 0.9; }
+  }
+  const target = () => {
+    const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, SW, SH, 0, gl.RGBA, gl.FLOAT, init);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+    const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+    return { tex, fb };
+  };
+  let A = target(), B = target();
+  const su = n => gl.getUniformLocation(sim, n), uS = su('S'), uPx = su('px'), uF = su('F'), uK = su('K'), uSeed = su('seed');
+
+  const resize = () => { const d = Math.min(devicePixelRatio, 1.5); canvas.width = stage.clientWidth * d | 0; canvas.height = stage.clientHeight * d | 0; };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let seed = [0, 0, 0], lastMove = -1e9;
+  const onMove = e => { const b = canvas.getBoundingClientRect(); seed = [(e.clientX - b.left) / b.width, 1 - (e.clientY - b.top) / b.height, 3]; lastMove = performance.now(); };
+  canvas.addEventListener('pointermove', onMove);
+  let raf, acc = 0, last = performance.now();
+  function frame(now) {
+    acc += (now - last) / 1000; last = now;
+    if (now - lastMove > 1500 && acc > 0.6) { acc = 0; seed = [Math.random(), Math.random(), 3]; }
+    gl.useProgram(sim); gl.viewport(0, 0, SW, SH);
+    gl.uniform2f(uPx, 1 / SW, 1 / SH); gl.uniform1f(uF, PARAMS.feed); gl.uniform1f(uK, PARAMS.kill); gl.uniform1i(uS, 0);
+    for (let i = 0; i < 12; i++) {
+      gl.uniform3f(uSeed, seed[0], seed[1], i === 0 ? seed[2] : 0);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, B.fb); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, A.tex);
+      gl.drawArrays(gl.TRIANGLES, 0, 3); [A, B] = [B, A];
+    }
+    seed[2] = 0;
+    gl.useProgram(show); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, canvas.width, canvas.height);
+    gl.bindTexture(gl.TEXTURE_2D, A.tex); gl.drawArrays(gl.TRIANGLES, 0, 3);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener('pointermove', onMove); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}

package/anims/shaders/rgb-glitch.js

@@ -0,0 +1,56 @@
+// RGB-split glitch: the picture is split into red, green and blue copies and added back together.
+// Aligned, they rebuild the original; offset, the colour splits. In bursts, slices jump sideways.
+const PARAMS = { intensity: 1, rate: 0.8 };
+
+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 ctx = canvas.getContext('2d');
+  let W = 0, H = 0, d = 1, src, chans;
+  const build = () => {
+    // the source picture
+    src = document.createElement('canvas'); src.width = W * d; src.height = H * d;
+    const s = src.getContext('2d'); s.scale(d, d);
+    s.fillStyle = '#101205'; s.fillRect(0, 0, W, H);
+    s.fillStyle = '#e9f5a0'; s.font = `900 ${Math.min(W * 0.2, H * 0.34)}px "Mona Sans", system-ui, sans-serif`; s.textAlign = 'center'; s.textBaseline = 'middle';
+    s.fillText('GLITCH', W / 2, H * 0.46);
+    s.fillStyle = '#7b8c10'; s.fillRect(W * 0.18, H * 0.7, W * 0.64, H * 0.05);
+    s.fillStyle = '#ffffff'; s.font = `600 ${Math.max(11, H * 0.05)}px "Mona Sans", system-ui, sans-serif`; s.fillText('signal lost · retrying', W / 2, H * 0.82);
+    // one copy per channel: multiply by pure red, green or blue
+    chans = ['#ff0000', '#00ff00', '#0000ff'].map(c => {
+      const k = document.createElement('canvas'); k.width = src.width; k.height = src.height;
+      const g = k.getContext('2d'); g.drawImage(src, 0, 0); g.globalCompositeOperation = 'multiply'; g.fillStyle = c; g.fillRect(0, 0, k.width, k.height);
+      return k;
+    });
+  };
+  const resize = () => { d = Math.min(devicePixelRatio, 2); W = stage.clientWidth; H = stage.clientHeight; canvas.width = W * d; canvas.height = H * d; build(); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  let burst = 0, next = performance.now() + 600, raf;
+  function frame(now) {
+    if (now > next) { burst = 1; next = now + (400 + Math.random() * 1600) / Math.max(0.05, PARAMS.rate); }
+    burst *= 0.9;
+    const k = (0.15 + burst) * PARAMS.intensity, jitter = () => (Math.random() - 0.5) * 2;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.globalCompositeOperation = 'lighter';
+    const off = W * d * 0.012 * k;
+    ctx.drawImage(chans[0], -off + jitter() * off * 0.3, 0);
+    ctx.drawImage(chans[1], 0, jitter() * off * 0.2);
+    ctx.drawImage(chans[2], off + jitter() * off * 0.3, 0);
+    ctx.globalCompositeOperation = 'source-over';
+    if (burst > 0.2) {
+      // displaced horizontal slices
+      for (let i = 0; i < 6; i++) {
+        const y = Math.random() * canvas.height, h = (0.01 + Math.random() * 0.07) * canvas.height, dx = jitter() * canvas.width * 0.08 * k;
+        ctx.drawImage(canvas, 0, y, canvas.width, h, dx, y, canvas.width, h);
+      }
+    }
+    ctx.fillStyle = 'rgba(0,0,0,.18)';
+    for (let y = 0; y < canvas.height; y += 4 * d) ctx.fillRect(0, y, canvas.width, d);   // scanlines
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/shaders/truchet.js

@@ -0,0 +1,57 @@
+// Truchet tiles: every square holds two quarter-circle arcs joining the midpoints of its sides, in one of two
+// orientations chosen at random. Whatever the choice, the arcs always meet their neighbours', so the grid forms
+// unbroken winding paths. Dashes flow along the paths; flipping the flow direction on alternate squares (a
+// checkerboard) keeps it continuous across tiles. Now and then a tile turns a quarter, and the paths reroute.
+const PARAMS = { tiles: 9, flow: 1 };
+
+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, N, FL;
+  float hash(vec2 p) { return fract(sin(dot(p, vec2(41.3, 289.1))) * 43758.5453); }
+  void main() {
+    vec2 p = (uv - .5) * vec2(R.x / R.y, 1.) * N;
+    vec2 id = floor(p), f = fract(p) - .5;
+    // each tile's orientation: random, re-rolled now and then, with a quarter-turn animation as it changes
+    float h = hash(id), epoch = floor(T * .25 + h * 7.), h2 = hash(id + epoch * 1.7);
+    float turn = smoothstep(.0, .35, fract(T * .25 + h * 7.)) * step(.8, hash(id + (epoch - 1.) * 1.7));
+    float flip = step(.5, h2);
+    float a = (flip + turn) * 1.5708; f = mat2(cos(a), -sin(a), sin(a), cos(a)) * f;
+    // two arcs, centred on opposite corners
+    vec2 c1 = f - vec2(.5), c2 = f + vec2(.5);
+    float d1 = abs(length(c1) - .5), d2 = abs(length(c2) - .5), d = min(d1, d2);
+    vec2 c = d1 < d2 ? c1 : c2;
+    float ang = atan(c.y, c.x) * (d1 < d2 ? 1. : -1.);
+    float par = mod(id.x + id.y, 2.) * 2. - 1.;                          // checkerboard: alternate the flow direction
+    float dash = fract(ang / 1.5708 * 2. * par * (flip > .5 ? -1. : 1.) - T * FL * .8);
+    float w = .11, line = smoothstep(w, w - 2.5 * N / R.y, d);
+    float glow = exp(-d * 18.) * .5;
+    vec3 base = .5 + .5 * cos(6.2832 * (vec3(0, .33, .67) + id.x * .03 + id.y * .05 + T * .03));
+    vec3 col = vec3(.03, .03, .06) + base * glow * .5;
+    col += base * line * (.35 + .9 * smoothstep(.55, .5, abs(dash - .5)) );
+    col += vec3(1) * line * smoothstep(.05, .0, abs(dash - .5)) * .4;        // a bright head on each dash
+    o = vec4(pow(col, vec3(.9)), 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 U = {}; ['R', 'T', 'N', 'FL'].forEach(n => U[n] = gl.getUniformLocation(prog, n));
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); canvas.width = (stage.clientWidth || 1) * d | 0; canvas.height = (stage.clientHeight || 1) * d | 0; gl.viewport(0, 0, canvas.width, canvas.height); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let raf; const t0 = performance.now();
+  function frame(now) {
+    gl.uniform2f(U.R, canvas.width, canvas.height); gl.uniform1f(U.T, (now - t0) / 1000); gl.uniform1f(U.N, PARAMS.tiles); gl.uniform1f(U.FL, PARAMS.flow);
+    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(); };
+}

package/anims/shaders/voronoi.js

@@ -0,0 +1,50 @@
+// Voronoi cells: every pixel finds the nearest of a set of moving points; that point owns the cell.
+// The gap between the nearest and second-nearest distance draws the edges.
+const PARAMS = { cells: 8, speed: 0.5 };
+
+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, C;
+  vec2 hash2(vec2 p) { p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3))); return fract(sin(p) * 43758.5453); }
+  void main() {
+    vec2 p = uv * vec2(R.x / R.y, 1.) * C;
+    vec2 ip = floor(p), fp = fract(p);
+    float d1 = 8., d2 = 8.; vec2 id = vec2(0);
+    for (int y = -1; y <= 1; y++) for (int x = -1; x <= 1; x++) {
+      vec2 g = vec2(x, y), h = hash2(ip + g);
+      vec2 pt = g + .5 + .4 * sin(T + 6.2831 * h) - fp;          // each seed orbits inside its own cell
+      float d = dot(pt, pt);
+      if (d < d1) { d2 = d1; d1 = d; id = ip + g; } else if (d < d2) d2 = d;
+    }
+    float edge = sqrt(d2) - sqrt(d1);
+    vec2 h = hash2(id);
+    vec3 pal[4] = vec3[4](vec3(.48, .55, .06), vec3(.85, .82, .55), vec3(.97, .95, .86), vec3(.3, .36, .05));
+    vec3 col = pal[int(h.x * 4.)];
+    col *= .88 + .12 * (1. - sqrt(d1));                            // soft dome inside each cell
+    col = mix(vec3(.09, .1, .04), col, smoothstep(.02, .07, edge));
+    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'), uC = gl.getUniformLocation(prog, 'C');
+  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 * 2); gl.uniform1f(uC, PARAMS.cells * 0.55);
+    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(); };
+}

package/anims/springs/ball-collisions.js

@@ -0,0 +1,47 @@
+// Ball collisions: overlapping balls are separated, then exchange velocity along the line between their centres.
+const PARAMS = { count: 18, restitution: 0.95 };
+
+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 ctx = canvas.getContext('2d');
+  let W = 0, H = 0;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = stage.clientWidth; H = stage.clientHeight; canvas.width = W * d; canvas.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const colours = ['#d9601a', '#ffa94d', '#ffe8cc', '#fff', '#e8590c'];
+  const s = Math.min(W, H);
+  const balls = Array.from({ length: Math.round(PARAMS.count) }, (_, i) => {
+    const r = s * (0.03 + Math.random() * 0.05);
+    return { x: r + Math.random() * (W - 2 * r), y: r + Math.random() * (H - 2 * r), vx: (Math.random() - 0.5) * s * 1.2, vy: (Math.random() - 0.5) * s * 1.2, r, m: r * r, c: colours[i % colours.length] };
+  });
+  let last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.025, (now - last) / 1000); last = now;
+    const e = PARAMS.restitution;
+    for (const b of balls) {
+      b.x += b.vx * dt; b.y += b.vy * dt;
+      if (b.x < b.r) { b.x = b.r; b.vx = Math.abs(b.vx) * e; } if (b.x > W - b.r) { b.x = W - b.r; b.vx = -Math.abs(b.vx) * e; }
+      if (b.y < b.r) { b.y = b.r; b.vy = Math.abs(b.vy) * e; } if (b.y > H - b.r) { b.y = H - b.r; b.vy = -Math.abs(b.vy) * e; }
+    }
+    for (let i = 0; i < balls.length; i++) for (let j = i + 1; j < balls.length; j++) {
+      const a = balls[i], b = balls[j], dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy), min = a.r + b.r;
+      if (d === 0 || d >= min) continue;
+      const nx = dx / d, ny = dy / d, overlap = (min - d) / 2;
+      a.x -= nx * overlap; a.y -= ny * overlap; b.x += nx * overlap; b.y += ny * overlap;
+      const rel = (b.vx - a.vx) * nx + (b.vy - a.vy) * ny;
+      if (rel > 0) continue;                                    // already separating
+      const jImp = -(1 + e) * rel / (1 / a.m + 1 / b.m);
+      a.vx -= jImp * nx / a.m; a.vy -= jImp * ny / a.m; b.vx += jImp * nx / b.m; b.vy += jImp * ny / b.m;
+    }
+    // keep the box lively: top up energy if it drains away
+    const ke = balls.reduce((k, b) => k + b.vx * b.vx + b.vy * b.vy, 0) / balls.length;
+    if (ke < s * s * 0.08) balls.forEach(b => { b.vx *= 1.01; b.vy *= 1.01; });
+    ctx.fillStyle = '#1f130b'; ctx.fillRect(0, 0, W, H);
+    for (const b of balls) { ctx.fillStyle = b.c; ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2); ctx.fill(); }
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/springs/pendulum-wave.js

@@ -0,0 +1,35 @@
+// Pendulum wave: pendulum n swings (base + n) times per cycle, so the row drifts out of sync and back.
+const PARAMS = { count: 15, cycle: 30 };
+
+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 ctx = canvas.getContext('2d');
+  let W = 0, H = 0;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = stage.clientWidth; H = stage.clientHeight; canvas.width = W * d; canvas.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const n = Math.round(PARAMS.count), base = 16, A = 0.42;
+  let raf; const t0 = performance.now();
+  function frame(now) {
+    const t = (now - t0) / 1000;
+    ctx.fillStyle = '#1f130b'; ctx.fillRect(0, 0, W, H);
+    const top = H * 0.08;
+    ctx.fillStyle = '#5c3a1e'; ctx.fillRect(W * 0.06, top - 3, W * 0.88, 4);
+    for (let i = 0; i < n; i++) {
+      const N = base + i;                                      // swings per cycle
+      const len = H * 0.8 * Math.pow(base / N, 2) + H * 0.06;  // real pendulums: length ∝ 1 / frequency²
+      const ang = A * Math.cos(2 * Math.PI * N * t / PARAMS.cycle);
+      const ax = W * 0.1 + (W * 0.8) * (i / Math.max(1, n - 1));
+      const bx = ax + Math.sin(ang) * len, by = top + Math.cos(ang) * len;
+      ctx.strokeStyle = 'rgba(255, 216, 168, .35)'; ctx.lineWidth = 1;
+      ctx.beginPath(); ctx.moveTo(ax, top); ctx.lineTo(bx, by); ctx.stroke();
+      ctx.fillStyle = `hsl(${18 + i * (30 / n)}, 90%, ${50 + i * (18 / n)}%)`;
+      ctx.beginPath(); ctx.arc(bx, by, Math.max(3, W / n * 0.28), 0, Math.PI * 2); ctx.fill();
+    }
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/springs/rubber-band.js

@@ -0,0 +1,50 @@
+// Rubber-band drag: 1:1 inside the track, increasing resistance past the edge, spring back with the release velocity.
+const PARAMS = { constant: 0.55, stiffness: 200 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'rb-root';
+  root.innerHTML = `<style>
+    .rb-root { position: absolute; inset: 0; background: #fff4e6; container-type: size; font-family: "Mona Sans", system-ui, sans-serif; touch-action: none; }
+    .rb-track { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: #ffc078; }
+    .rb-card { position: absolute; left: 50%; top: 50%; width: 30cqmin; height: 30cqmin; margin: -15cqmin; border-radius: 6cqmin; background: #d9601a; color: #fff; display: grid; place-items: center; font-weight: 750; font-size: max(11px, 4.6cqmin); cursor: grab; user-select: none; will-change: transform; }
+    .rb-card:active { cursor: grabbing; }
+  </style><div class="rb-track"></div><div class="rb-card">Drag me</div>`;
+  stage.append(root);
+  const card = root.querySelector('.rb-card');
+  const bound = () => root.clientWidth * 0.38 - card.offsetWidth / 2;   // how far it may go freely
+  // Apple's rubber-band: the further past the bound, the less it follows
+  const rubber = (over, dim) => (over * dim * PARAMS.constant) / (dim + PARAMS.constant * Math.abs(over));
+  const clampRubber = raw => { const b = bound(), dim = root.clientWidth; if (raw > b) return b + rubber(raw - b, dim); if (raw < -b) return -b - rubber(-b - raw, dim); return raw; };
+
+  let x = 0, v = 0, dragging = false, startX = 0, raw = 0, hist = [], lastUser = -1e9, ghost = null;
+  const down = e => { dragging = true; card.setPointerCapture(e.pointerId); startX = e.clientX - raw; hist = []; lastUser = performance.now(); ghost = null; };
+  const move = e => { if (!dragging) return; raw = e.clientX - startX; x = clampRubber(raw); hist.push([performance.now(), x]); if (hist.length > 5) hist.shift(); lastUser = performance.now(); };
+  const up = () => {
+    if (!dragging) return; dragging = false;
+    if (hist.length > 1) { const [t0, x0] = hist[0], [t1, x1] = hist.at(-1); v = (x1 - x0) / Math.max(1, t1 - t0) * 1000; }
+    raw = 0;
+  };
+  card.addEventListener('pointerdown', down); card.addEventListener('pointermove', move);
+  card.addEventListener('pointerup', up); card.addEventListener('pointercancel', up);
+
+  let last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.032, (now - last) / 1000); last = now;
+    // ghost drag: pull right past the edge, let go, then left
+    if (!dragging && now - lastUser > 2000) {
+      const t = (now / 1000) % 3.2, dir = Math.floor(now / 3200) % 2 ? -1 : 1;
+      if (t < 1.4) { ghost = dir * root.clientWidth * 0.75 * Math.sin((t / 1.4) * Math.PI / 2); x = clampRubber(ghost); v = 0; }
+      else if (ghost !== null) { ghost = null; }
+    }
+    if (!dragging && ghost === null) {
+      const target = 0, k = PARAMS.stiffness, c = 2 * Math.sqrt(k) * 0.75;
+      for (let i = 0; i < 4; i++) { const h = dt / 4; v += (-k * (x - target) - c * v) * h; x += v * h; }
+    }
+    const stretch = 1 + Math.min(0.25, Math.abs(x) / root.clientWidth * 0.3);
+    card.style.transform = `translateX(${x}px) scaleX(${stretch}) scaleY(${1 / stretch})`;
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); root.remove(); };
+}