motion-library 0.0.0-stage → 0.1.0

package/anims/fluid/paint-swirl.js

@@ -0,0 +1,153 @@
+// Paint swirl: colour bands carried around several vortices. Each frame the paint is advected: every pixel
+// looks back along the velocity field (the sum of the vortices) and takes the colour that was there. Two pour
+// spouts push fresh paint outward in rings, and the pointer stirs a vortex of its own. Sampling is clamped
+// Catmull-Rom, and each pixel is nudged toward the nearest paint colour, so the bands stay crisp instead of mud.
+const PARAMS = { vortices: 4, strength: 1, pour: 1 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none';
+  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 advect = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o;
+  uniform sampler2D S; uniform vec2 A; uniform float DT, INIT; uniform int N;
+  uniform vec4 V[8];      // vortex: x, y, strength, core radius
+  uniform vec4 P[2];      // pour: x, y, radius, flow
+  uniform vec3 PC[2];     // pour colours
+  vec3 pal(float k) {
+    k = mod(k, 6.);
+    return k < 1. ? vec3(.07, .15, .25) : k < 2. ? vec3(.12, .48, .55) : k < 3. ? vec3(.96, .93, .85) : k < 4. ? vec3(.89, .34, .18) : k < 5. ? vec3(.95, .65, .25) : vec3(.91, .7, .65);
+  }
+  // the canvas is a seamless torus: each vortex and spout also acts through its 8 neighbouring copies, so there are no walls
+  vec2 vel(vec2 p) {
+    vec2 v = vec2(0);
+    for (int iy = -1; iy <= 1; iy++) for (int ix = -1; ix <= 1; ix++) {
+      vec2 sh = vec2(float(ix) * A.x, float(iy));
+      for (int i = 0; i < 8; i++) {
+        if (i >= N) break;
+        vec2 d = p - V[i].xy + sh; float r2 = dot(d, d) + 1e-6, c = V[i].w;
+        v += V[i].z * vec2(-d.y, d.x) / r2 * (1. - exp(-r2 / (c * c)));     // Lamb–Oseen vortex: solid core, 1/r outside
+      }
+      for (int i = 0; i < 2; i++) { vec2 d = p - P[i].xy + sh; float r2 = dot(d, d) + 1e-6; v += P[i].w * d / r2 * (1. - exp(-r2 / (P[i].z * P[i].z))); }   // spouts push paint outward
+    }
+    return v;
+  }
+  vec3 cr(vec2 q) {                                                       // clamped Catmull-Rom: sharp, no ringing
+    vec2 sz = vec2(textureSize(S, 0)), p = q * sz - .5, f = fract(p); ivec2 b = ivec2(floor(p));
+    vec4 wx = vec4(f.x * (-.5 + f.x * (1. - .5 * f.x)), 1. + f.x * f.x * (-2.5 + 1.5 * f.x), f.x * (.5 + f.x * (2. - 1.5 * f.x)), f.x * f.x * (-.5 + .5 * f.x));
+    vec4 wy = vec4(f.y * (-.5 + f.y * (1. - .5 * f.y)), 1. + f.y * f.y * (-2.5 + 1.5 * f.y), f.y * (.5 + f.y * (2. - 1.5 * f.y)), f.y * f.y * (-.5 + .5 * f.y));
+    vec3 c = vec3(0), mn = vec3(9), mx = vec3(-9); ivec2 n = ivec2(sz);
+    for (int y = 0; y < 4; y++) for (int x = 0; x < 4; x++) {
+      vec3 s = texelFetch(S, ((b + ivec2(x - 1, y - 1)) % n + n) % n, 0).rgb;
+      c += s * wx[x] * wy[y];
+      if (x > 0 && x < 3 && y > 0 && y < 3) { mn = min(mn, s); mx = max(mx, s); }
+    }
+    return clamp(c, mn, mx);
+  }
+  void main() {
+    vec2 p = uv * A;
+    if (INIT > .5) { float k = p.y * 9. + sin(uv.x * 6.2832 * 2.) * .35 + sin(uv.x * 6.2832 * 5. + 2.) * .08; o = vec4(pal(floor(k)), 1); return; }
+    vec2 v1 = vel(p), v2 = vel(p - v1 * DT * .5);                          // midpoint back-trace
+    vec3 c = cr(fract((p - v2 * DT) / A));
+    // acrylic paints do not mix: nudge every pixel toward the nearest palette colour, which re-sharpens the bands
+    vec3 near = pal(0.); float best = 9.;
+    for (int k = 0; k < 6; k++) { vec3 q = pal(float(k) + .5); float d = dot(c - q, c - q); if (d < best) { best = d; near = q; } }
+    c = mix(c, near, .05);
+    for (int i = 0; i < 2; i++) { vec2 dd = p - P[i].xy; dd -= A * round(dd / A); float d = length(dd); c = mix(c, PC[i], smoothstep(P[i].z * .8, P[i].z * .5, d) * step(.0001, P[i].w)); }
+    o = vec4(c, 1);
+  }`;
+  const show = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D S; uniform vec2 R;
+  void main() {
+    vec2 e = 1.5 / R;
+    vec3 c = texture(S, uv).rgb;
+    float l = dot(c, vec3(.3, .55, .15));
+    float lx = dot(texture(S, uv + vec2(e.x, 0)).rgb - texture(S, uv - vec2(e.x, 0)).rgb, vec3(.3, .55, .15));
+    float ly = dot(texture(S, uv + vec2(0, e.y)).rgb - texture(S, uv - vec2(0, e.y)).rgb, vec3(.3, .55, .15));
+    vec3 n = normalize(vec3(-lx * 2.2, -ly * 2.2, 1.));                  // the colour edges read as a slight paint ridge
+    vec3 L = normalize(vec3(-.5, .6, .8));
+    float spec = pow(max(0., dot(reflect(-L, n), vec3(0, 0, 1))), 36.) * .35;
+    c = c * (.9 + .1 * dot(n, L)) + spec;
+    c *= 1. - .18 * pow(length(uv - .5) * 1.3, 2.);
+    o = vec4(c, 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 program = src => { const p = gl.createProgram(); gl.attachShader(p, sh(gl.VERTEX_SHADER, vs)); gl.attachShader(p, sh(gl.FRAGMENT_SHADER, src)); gl.bindAttribLocation(p, 0, 'p'); gl.linkProgram(p); return p; };
+  const pA = program(advect), pS = program(show);
+  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 ua = n => gl.getUniformLocation(pA, n), uS = { S: ua('S'), A: ua('A'), DT: ua('DT'), INIT: ua('INIT'), N: ua('N'), V: ua('V'), P: ua('P'), PC: ua('PC') };
+  const uShowR = gl.getUniformLocation(pS, 'R'), uShowS = gl.getUniformLocation(pS, 'S');
+
+  let sw = 0, shh = 0, tex = [], fbo = [], cur = 0, needInit = true;
+  function makeTargets() {
+    tex.forEach(t => gl.deleteTexture(t)); fbo.forEach(f => gl.deleteFramebuffer(f));
+    tex = []; fbo = [];
+    for (let i = 0; i < 2; i++) {
+      const t = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, sw, shh, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+      const f = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, f); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0);
+      tex.push(t); fbo.push(f);
+    }
+    needInit = true;
+  }
+  const resize = () => {
+    const d = Math.min(devicePixelRatio, 1.5), w = stage.clientWidth, h = stage.clientHeight;
+    canvas.width = w * d | 0; canvas.height = h * d | 0;
+    const k = Math.min(1, 900 / Math.max(w, 1));                         // the paint lives at CSS-pixel resolution (max 900 wide)
+    const nw = Math.max(2, w * k | 0), nh = Math.max(2, h * k | 0);
+    if (nw !== sw || nh !== shh) { sw = nw; shh = nh; makeTargets(); }
+  };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  // the pointer stirs: a vortex that follows it, turning the way the pointer is circling
+  let mx = 0, my = 0, mvx = 0, mvy = 0, spin = 0, stir = 0, lastMove = -1e9;
+  const onMove = e => {
+    const b = canvas.getBoundingClientRect(), a = b.width / b.height, x = (e.clientX - b.left) / b.width * a, y = 1 - (e.clientY - b.top) / b.height;
+    const vx = x - mx, vy = y - my, cross = mvx * vy - mvy * vx;
+    spin = spin * 0.85 + Math.sign(cross || 1) * 0.15; mvx = vx; mvy = vy; mx = x; my = y;
+    stir = Math.min(1, stir + Math.hypot(vx, vy) * 6); lastMove = performance.now();
+  };
+  canvas.addEventListener('pointermove', onMove);
+  const PALETTE = [[.07, .15, .25], [.12, .48, .55], [.96, .93, .85], [.89, .34, .18], [.95, .65, .25], [.91, .7, .65]];
+  const Vf = new Float32Array(32), Pf = new Float32Array(8), PCf = new Float32Array(6);
+  const t0 = performance.now();
+  let raf, last = t0;
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now; const t = (now - t0) / 1000;
+    const a = sw / shh;
+    // base vortices drift on slow orbits with alternating spin; every ~25 s they reverse and the bands partly unwind
+    const n = Math.max(1, Math.min(6, Math.round(PARAMS.vortices)));
+    for (let i = 0; i < n; i++) {
+      const cx = a * (0.5 + 0.32 * Math.cos(i * 2.399 + 0.6)), cy = 0.5 + 0.28 * Math.sin(i * 2.399 + 0.6);
+      Vf.set([cx + 0.08 * Math.cos(t * 0.21 + i), cy + 0.08 * Math.sin(t * 0.17 + i * 2), (i % 2 ? -1 : 1) * 0.024 * PARAMS.strength * Math.cos(t * 0.125) * (0.8 + 0.2 * Math.sin(t * 0.4 + i)), 0.06 + 0.02 * (i % 3)], i * 4);
+    }
+    let N = n;
+    if (now - lastMove > 120) stir *= Math.exp(-dt * 2.5);
+    if (stir > 0.01) { Vf.set([mx, my, 0.03 * stir * Math.sign(spin || 1), 0.05], N * 4); N++; }
+    // two pour spouts, each pouring for a while, then resting; the colour steps every half second, making rings
+    for (let i = 0; i < 2; i++) {
+      const cyc = (t + i * 2.6) % 5.2, on = cyc < 3 ? 1 : 0;
+      Pf.set([a * (0.3 + 0.4 * i) + 0.1 * Math.sin(t * 0.3 + i * 3), 0.5 + 0.18 * Math.cos(t * 0.23 + i * 2), 0.035, on * 0.005 * PARAMS.pour], i * 4);
+      PCf.set(PALETTE[(Math.floor((t + i * 1.3) / 0.5) * (i ? 5 : 1)) % 6], i * 3);
+    }
+    gl.useProgram(pA); gl.viewport(0, 0, sw, shh);
+    gl.uniform2f(uS.A, a, 1); gl.uniform1f(uS.DT, dt); gl.uniform1f(uS.INIT, needInit ? 1 : 0); gl.uniform1i(uS.N, N);
+    gl.uniform4fv(uS.V, Vf); gl.uniform4fv(uS.P, Pf); gl.uniform3fv(uS.PC, PCf); gl.uniform1i(uS.S, 0);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, tex[cur]);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo[1 - cur]); gl.drawArrays(gl.TRIANGLES, 0, 3);
+    cur = 1 - cur; needInit = false;
+    gl.useProgram(pS); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, canvas.width, canvas.height);
+    gl.uniform2f(uShowR, sw, shh); gl.uniform1i(uShowS, 0); gl.bindTexture(gl.TEXTURE_2D, tex[cur]);
+    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/fluid/raindrops-glass.js

@@ -0,0 +1,60 @@
+// Rain on glass: the city behind the window is blurred, but every drop is a tiny lens that shows it sharp,
+// upside down and magnified. Heavy drops slide, wobble and leave a trail of small droplets behind them.
+const PARAMS = { rain: 1, size: 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 ctx = canvas.getContext('2d');
+  let W = 0, H = 0, sharp, blurred;
+  function paintCity() {
+    sharp = document.createElement('canvas'); sharp.width = W; sharp.height = H;
+    const g = sharp.getContext('2d');
+    const sky = g.createLinearGradient(0, 0, 0, H); sky.addColorStop(0, '#1b2238'); sky.addColorStop(1, '#3a2a3a'); g.fillStyle = sky; g.fillRect(0, 0, W, H);
+    for (let i = 0; i < 26; i++) { const x = Math.random() * W, w = 20 + Math.random() * 60, h = H * (0.25 + Math.random() * 0.5); g.fillStyle = '#121626'; g.fillRect(x, H - h, w, h);
+      for (let y = H - h + 8; y < H - 6; y += 10) for (let xx = x + 5; xx < x + w - 5; xx += 9) if (Math.random() < 0.35) { g.fillStyle = ['#ffd27a', '#ffb35c', '#9fd3ff', '#ff8aa0'][Math.random() * 4 | 0]; g.fillRect(xx, y, 4, 5); } }
+    for (let i = 0; i < 18; i++) { const x = Math.random() * W, y = H * (0.7 + Math.random() * 0.3), c = ['#ff5c5c', '#ffd27a', '#ffffff'][Math.random() * 3 | 0]; const rg = g.createRadialGradient(x, y, 0, x, y, 30); rg.addColorStop(0, c); rg.addColorStop(1, 'rgba(0,0,0,0)'); g.fillStyle = rg; g.fillRect(x - 30, y - 30, 60, 60); }
+    blurred = document.createElement('canvas'); blurred.width = W; blurred.height = H;
+    const b = blurred.getContext('2d'); b.filter = 'blur(10px) brightness(.85)'; b.drawImage(sharp, -20, -20, W + 40, H + 40);
+  }
+  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); paintCity(); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const S = () => Math.min(W, H) * 0.012 * PARAMS.size;
+  let drops = [], beads = [];
+  const newDrop = (y = Math.random() * H) => ({ x: Math.random() * W, y, r: S() * (0.6 + Math.random() * 1.8), vy: 0, wob: Math.random() * 6.28, lastTrail: 0 });
+  for (let i = 0; i < 40; i++) drops.push(newDrop());
+  for (let i = 0; i < 260; i++) beads.push({ x: Math.random() * W, y: Math.random() * H, r: S() * (0.2 + Math.random() * 0.5) });
+  function lens(x, y, r) {
+    // a drop flips and magnifies what is behind it: draw the sharp city through a clipped, inverted window
+    ctx.save(); ctx.beginPath(); ctx.ellipse(x, y, r, r * 1.08, 0, 0, Math.PI * 2); ctx.clip();
+    ctx.translate(x, y); ctx.scale(-0.35, -0.35); ctx.translate(-x, -y);
+    ctx.drawImage(sharp, x - W / 2 + (x - W / 2) * 0.3, y - H / 2 + (y - H / 2) * 0.3, W, H);
+    ctx.restore();
+    ctx.strokeStyle = 'rgba(0,0,0,.35)'; ctx.lineWidth = Math.max(1, r * 0.12); ctx.beginPath(); ctx.ellipse(x, y + r * 0.04, r, r * 1.08, 0, 0, Math.PI * 2); ctx.stroke();
+    ctx.fillStyle = 'rgba(255,255,255,.55)'; ctx.beginPath(); ctx.ellipse(x - r * 0.3, y - r * 0.38, r * 0.22, r * 0.14, -0.6, 0, Math.PI * 2); ctx.fill();
+  }
+  let last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now;
+    if (Math.random() < dt * 14 * PARAMS.rain) beads.push({ x: Math.random() * W, y: Math.random() * H, r: S() * (0.2 + Math.random() * 0.5) });
+    if (Math.random() < dt * 3 * PARAMS.rain) drops.push(newDrop(-10));
+    if (beads.length > 420) beads.splice(0, beads.length - 420);
+    ctx.drawImage(blurred, 0, 0, W, H);
+    for (const b of beads) lens(b.x, b.y, b.r);
+    for (const d of drops) {
+      // big drops overcome surface tension and slide, in fits and starts
+      const heavy = d.r > S() * 1.4;
+      if (heavy) { d.vy += (Math.random() < 0.05 ? 0 : 900 * dt) * (d.r / S()) * 0.4; d.vy *= 0.92; d.y += d.vy * dt; d.wob += dt * 6; d.x += Math.sin(d.wob) * 0.3; }
+      if (heavy && d.y - d.lastTrail > d.r * 1.2) { beads.push({ x: d.x + (Math.random() - 0.5) * d.r * 0.4, y: d.y - d.r, r: d.r * (0.2 + Math.random() * 0.25) }); d.lastTrail = d.y; d.r *= 0.985; }
+      // absorb beads in the path
+      for (let i = beads.length - 1; i >= 0; i--) { const b = beads[i]; if (Math.abs(b.x - d.x) < d.r && b.y > d.y - d.r && b.y < d.y + d.r) { d.r = Math.min(S() * 3.5, Math.hypot(d.r, b.r)); beads.splice(i, 1); } }
+      lens(d.x, d.y, d.r);
+    }
+    drops = drops.filter(d => d.y < H + 30);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/fluid/ripples.js

@@ -0,0 +1,57 @@
+// Water ripples: two height buffers and the wave equation. Each cell becomes the average of its neighbours
+// minus its own previous height; the surface slope bends the tiles underneath and catches the light.
+const PARAMS = { damping: 0.985, dropRate: 1 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto';
+  stage.append(canvas);
+  const ctx = canvas.getContext('2d');
+  const sim = document.createElement('canvas'), sctx = sim.getContext('2d');
+  let W = 0, H = 0, w = 0, h = 0, a, b, img, tiles;
+  const CELL = 2;
+  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);
+    w = Math.max(8, Math.ceil(W / CELL)); h = Math.max(8, Math.ceil(H / CELL)); sim.width = w; sim.height = h;
+    a = new Float32Array(w * h); b = new Float32Array(w * h); img = sctx.createImageData(w, h);
+    // the pool floor: blue tiles with lighter grout, precomputed once
+    tiles = new Uint8ClampedArray(w * h * 3);
+    for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
+      const grout = (x % 16 < 1) || (y % 16 < 1), i = (y * w + x) * 3, v = ((x >> 4) + (y >> 4)) % 2 ? 8 : 0;
+      tiles[i] = grout ? 96 : 24 + v; tiles[i + 1] = grout ? 176 : 122 + v; tiles[i + 2] = grout ? 205 : 170 + v;
+    }
+  };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const drop = (x, y, r = 2, s = 260) => {
+    for (let j = -r; j <= r; j++) for (let i = -r; i <= r; i++) {
+      const X = (x | 0) + i, Y = (y | 0) + j; if (X > 0 && X < w - 1 && Y > 0 && Y < h - 1 && i * i + j * j <= r * r) a[Y * w + X] += s;
+    }
+  };
+  let lastMove = -1e9;
+  const onMove = e => { const r = canvas.getBoundingClientRect(); drop((e.clientX - r.left) / CELL, (e.clientY - r.top) / CELL, 1, 90); lastMove = performance.now(); };
+  canvas.addEventListener('pointermove', onMove);
+  let acc = 0, last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now;
+    acc += dt * PARAMS.dropRate * (now - lastMove > 1500 ? 1.5 : 0.4);
+    while (acc > 1) { acc -= 1; drop(2 + Math.random() * (w - 4), 2 + Math.random() * (h - 4), 2 + (Math.random() * 2 | 0), 420); }
+    for (let y = 1; y < h - 1; y++) for (let x = 1; x < w - 1; x++) {
+      const i = y * w + x;
+      b[i] = ((a[i - 1] + a[i + 1] + a[i - w] + a[i + w]) / 2 - b[i]) * PARAMS.damping;
+    }
+    [a, b] = [b, a];
+    const px = img.data;
+    for (let y = 1; y < h - 1; y++) for (let x = 1; x < w - 1; x++) {
+      const i = y * w + x, dx = a[i - 1] - a[i + 1], dy = a[i - w] - a[i + w];
+      const sx = Math.min(w - 1, Math.max(0, x + Math.round(dx * 0.03))), sy = Math.min(h - 1, Math.max(0, y + Math.round(dy * 0.03)));
+      const t = (sy * w + sx) * 3, light = (dx + dy) * 0.22, o = i * 4;
+      px[o] = tiles[t] + light; px[o + 1] = tiles[t + 1] + light; px[o + 2] = tiles[t + 2] + light; px[o + 3] = 255;
+    }
+    sctx.putImageData(img, 0, 0);
+    ctx.imageSmoothingEnabled = true; ctx.drawImage(sim, 0, 0, W, H);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener('pointermove', onMove); canvas.remove(); };
+}

package/anims/fluid/sph-water.js

@@ -0,0 +1,75 @@
+// SPH water: smoothed-particle hydrodynamics. Each particle's density comes from its neighbours; pressure pushes
+// crowded particles apart and viscosity evens out their velocities. Gravity swings to slosh the tank.
+// Rendered by splatting soft blobs and thresholding them into one liquid surface.
+const PARAMS = { particles: 600, slosh: 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 ctx = canvas.getContext('2d');
+  const buf = document.createElement('canvas'), bctx = buf.getContext('2d', { willReadFrequently: true });
+  let W = 0, H = 0, bw = 0, bh = 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); bw = Math.ceil(W / 2); bh = Math.ceil(H / 2); buf.width = bw; buf.height = bh; };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const N = Math.round(PARAMS.particles), h = 16, h2 = h * h, mass = 1, k = 8000, mu = 2.2;
+  let rho0 = 0;   // measured from the starting packing, so the water keeps its volume
+  const POLY6 = 4 / (Math.PI * h2 ** 4), SPIKY = -10 / (Math.PI * h ** 5), VISC = 40 / (Math.PI * h ** 5);
+  const P = Array.from({ length: N }, (_, i) => ({ x: W * 0.15 + (i % 30) * h * 0.55, y: H * 0.2 + Math.floor(i / 30) * h * 0.55, vx: 0, vy: 0, fx: 0, fy: 0, rho: 0, p: 0 }));
+  const grid = new Map(), key = (x, y) => (x << 16) | (y & 0xffff);
+  let raf, last = performance.now();
+  function step(dt, gx, gy) {
+    grid.clear();
+    for (const a of P) { const kk = key(a.x / h | 0, a.y / h | 0); let c = grid.get(kk); if (!c) grid.set(kk, c = []); c.push(a); }
+    const near = a => { const out = [], cx = a.x / h | 0, cy = a.y / h | 0; for (let j = -1; j <= 1; j++) for (let i = -1; i <= 1; i++) { const c = grid.get(key(cx + i, cy + j)); if (c) out.push(...c); } return out; };
+    const lists = P.map(near);
+    P.forEach((a, n) => { a.rho = 0; for (const b of lists[n]) { const r2 = (a.x - b.x) ** 2 + (a.y - b.y) ** 2; if (r2 < h2) a.rho += mass * POLY6 * (h2 - r2) ** 3; } });
+    if (!rho0) rho0 = P.reduce((sum, a) => sum + a.rho, 0) / P.length;
+    for (const a of P) a.p = k * (a.rho - rho0) / rho0;
+    P.forEach((a, n) => {
+      let fx = 0, fy = 0;
+      for (const b of lists[n]) {
+        if (a === b) continue;
+        const dx = b.x - a.x, dy = b.y - a.y, r = Math.hypot(dx, dy);
+        if (r >= h || r === 0) continue;
+        const press = -mass * (a.p + b.p) / (2 * b.rho) * SPIKY * (h - r) ** 3 / r;   // pressure pushes apart
+        fx -= press * dx; fy -= press * dy;
+        const vis = mu * mass / b.rho * VISC * (h - r);                               // viscosity evens velocities
+        fx += vis * (b.vx - a.vx); fy += vis * (b.vy - a.vy);
+      }
+      a.fx = fx + gx * a.rho; a.fy = fy + gy * a.rho;
+    });
+    for (const a of P) {
+      a.vx += dt * a.fx / a.rho; a.vy += dt * a.fy / a.rho;
+      const sp = Math.hypot(a.vx, a.vy); if (sp > 700) { a.vx *= 700 / sp; a.vy *= 700 / sp; }   // keep the stiff solver stable
+      a.x += dt * a.vx; a.y += dt * a.vy;
+      const m = 4, damp = -0.4;
+      if (a.x < m) { a.x = m; a.vx *= damp; } if (a.x > W - m) { a.x = W - m; a.vx *= damp; }
+      if (a.y < m) { a.y = m; a.vy *= damp; } if (a.y > H - m) { a.y = H - m; a.vy *= damp; }
+    }
+  }
+  function frame(now) {
+    const real = Math.min(0.033, (now - last) / 1000); last = now; const t = now / 1000;
+    const ang = Math.sin(t * 0.7) * 0.6 * PARAMS.slosh, g = 1600;
+    for (let s = 0; s < 8; s++) step(Math.min(real, 0.02) / 8, Math.sin(ang) * g, Math.cos(ang) * g);
+    // splat soft blobs at half resolution, then threshold alpha into a liquid surface
+    bctx.clearRect(0, 0, bw, bh);
+    for (const a of P) { const x = a.x / 2, y = a.y / 2, r = h * 0.8; const g2 = bctx.createRadialGradient(x, y, 0, x, y, r); g2.addColorStop(0, 'rgba(0,0,0,1)'); g2.addColorStop(1, 'rgba(0,0,0,0)'); bctx.fillStyle = g2; bctx.fillRect(x - r, y - r, r * 2, r * 2); }
+    const img = bctx.getImageData(0, 0, bw, bh), d = img.data;
+    for (let y = 0; y < bh; y++) for (let x = 0; x < bw; x++) {
+      const i = (y * bw + x) * 4, a = d[i + 3];
+      if (a > 150) { const edge = a < 200 ? 1 : 0, depth = y / bh; d[i] = edge ? 190 : 30 + 20 * depth; d[i + 1] = edge ? 230 : 110 - 40 * depth; d[i + 2] = edge ? 255 : 200 - 50 * depth; d[i + 3] = 255; }
+      else { d[i] = 236; d[i + 1] = 241; d[i + 2] = 246; d[i + 3] = 255; }
+    }
+    bctx.putImageData(img, 0, 0);
+    ctx.fillStyle = '#dfe5ea'; ctx.fillRect(0, 0, W, H);            // clear behind the tilted tank so its corners never smear
+    ctx.save(); ctx.translate(W / 2, H / 2); ctx.rotate(-ang * 0.35); ctx.scale(0.86, 0.86); ctx.translate(-W / 2, -H / 2);
+    ctx.imageSmoothingEnabled = true; ctx.drawImage(buf, 0, 0, W, H);
+    ctx.strokeStyle = '#9aa6b4'; ctx.lineWidth = 3; ctx.strokeRect(1.5, 1.5, W - 3, H - 3);
+    ctx.restore();
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/fluid/underwater.js

@@ -0,0 +1,55 @@
+// Underwater: god rays slanting down from the surface, caustic light rippling on the sand, depth fog, kelp
+// swaying in the current and bubbles rising, all in one fragment shader.
+const PARAMS = { rays: 1, bubbles: 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, RY, BU;
+  float h(float n) { return fract(sin(n) * 43758.5453); }
+  float h2(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(h2(i), h2(i + vec2(1, 0)), u.x), mix(h2(i + vec2(0, 1)), h2(i + vec2(1, 1)), u.x), u.y); }
+  float caustic(vec2 p, float t) { float c = 0.; for (int i = 0; i < 3; i++) { p += vec2(sin(p.y * 1.7 + t), cos(p.x * 1.3 - t * .8)) * .4; c += abs(sin(p.x * 3.) * sin(p.y * 3.)); } return pow(1. - c / 3., 6.); }
+  void main() {
+    vec2 a = vec2(R.x / R.y, 1.), q = uv * a;
+    vec3 deep = vec3(.01, .08, .16), shallow = vec3(.05, .42, .55);
+    vec3 col = mix(deep, shallow, pow(uv.y, 1.4));
+    // god rays: bright bands slanting from the surface, flickering with the waves
+    float x = q.x + (1. - uv.y) * .35;
+    float rays = noise(vec2(x * 7., T * .3)) * noise(vec2(x * 15. + 4., T * .5));
+    col += vec3(.45, .75, .8) * pow(rays, 2.) * pow(uv.y, 1.5) * 1.6 * RY;
+    // sand with caustics
+    float sand = smoothstep(.22, .18, uv.y + .03 * sin(q.x * 3.));
+    vec3 sandC = vec3(.55, .5, .38) * (.6 + .4 * noise(q * 40.)) + vec3(.6, .9, .9) * caustic(q * 6., T * .9) * .7;
+    col = mix(col, mix(sandC, deep, .35), sand);
+    // kelp: a few swaying ribbons
+    for (int i = 0; i < 7; i++) { float fi = float(i), kx = (fi + .5) / 7. * a.x + (h(fi) - .5) * .2;
+      float sway = sin(T * .8 + fi + uv.y * 4.) * .04 * uv.y; float w = .012 * (1. - uv.y * .6);
+      float k = smoothstep(w, w * .3, abs(q.x - kx - sway)) * step(uv.y, .45 + h(fi + 3.) * .35);
+      col = mix(col, vec3(.04, .2, .12) * (.6 + .4 * uv.y), k * .9); }
+    // bubbles rising in columns
+    for (int i = 0; i < 18; i++) { float fi = float(i); if (fi > 18. * BU) break;
+      float bx = h(fi * 3.1) * a.x, sp = .08 + h(fi) * .12, by = fract(T * sp + h(fi * 7.)) * 1.2 - .1;
+      vec2 c = vec2(bx + sin(T * 2. + fi) * .01, by); float r = .006 + h(fi * 9.) * .01, d = length(q - c);
+      col += vec3(.7, .95, 1.) * (smoothstep(r, r * .7, d) - smoothstep(r * .7, r * .3, d) * .7) * .8; }
+    col = mix(col, deep, (1. - uv.y) * .25);                                      // depth fog
+    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 = n => gl.getUniformLocation(prog, n), uR = u('R'), uT = u('T'), uRY = u('RY'), uBU = u('BU');
+  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); gl.uniform1f(uRY, PARAMS.rays); gl.uniform1f(uBU, PARAMS.bubbles); 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/fluid/water-surface-3d.js

@@ -0,0 +1,98 @@
+// Ocean at sunset: a raymarched heightfield. The surface is a stack of sharp-crested waves, each one dragging
+// the next along its slope so crests bunch up like real swell. Every pixel reflects the sky with Fresnel,
+// lets the low sun glow through thin crests, and catches the sun's glint on its facets.
+const PARAMS = { waves: 1, sun: 0.5, 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, D, SY;
+  vec3 SUN;
+  // sharp-crested waves; each one drags the sample point along its slope (that bunches the crests)
+  float waves(vec2 p, int it) {
+    float w = 1., ws = 0., sum = 0., f = 1., t = T, a = 0.;
+    for (int i = 0; i < 40; i++) {
+      if (i >= it) break;
+      vec2 d = vec2(sin(a), cos(a));
+      float x = dot(d, p) * f + t, wave = exp(sin(x) - 1.), dx = wave * cos(x);
+      sum += wave * w; ws += w; p -= d * dx * w * .38;
+      a += 1232.399963; w = mix(w, 0., .2); f *= 1.18; t *= 1.07;
+    }
+    return sum / ws;
+  }
+  float hgt(vec2 p, int it) { return waves(p * .55, it) * D - D; }
+  float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 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); }
+  float fbm(vec2 p) { float s = 0., a = .5; for (int i = 0; i < 5; i++) { s += a * noise(p); p = p * 2.03 + 7.1; a *= .5; } return s; }
+  vec3 sky(vec3 d) {
+    float y = max(d.y, 0.), sd = max(dot(d, SUN), 0.), low = 1. - smoothstep(.02, .3, SY);
+    vec3 top = mix(vec3(.1, .2, .5), vec3(.04, .05, .18), low), mid = mix(vec3(.8, .5, .45), vec3(.62, .2, .26), low), hor = mix(vec3(1., .7, .45), vec3(1., .42, .14), low);
+    vec3 c = mix(hor, mid, smoothstep(0., .06, y)); c = mix(c, top, smoothstep(.04, .3, y));
+    c += vec3(1., .38, .1) * pow(sd, 4.) * .22 + vec3(1., .55, .22) * pow(sd, 18.) * .35 + vec3(1., .78, .5) * pow(sd, 160.) * 1.4;
+    c += vec3(1., .9, .7) * smoothstep(.99935, .9997, sd) * 12.;                       // the sun's disc (HDR, tonemapped later)
+    vec2 q = d.xz / (y + .06) * .6 + vec2(T * .01, 0);                                   // streaky clouds lit from below
+    float cl = smoothstep(.42, .75, fbm(q * vec2(.6, 2.2))) * smoothstep(.0, .08, y) * (1. - smoothstep(.25, .6, y));
+    c = mix(c, mix(vec3(.3, .12, .22), vec3(1., .55, .3), pow(sd, 4.)), cl * .8);
+    return c;
+  }
+  vec3 normalAt(vec2 p, float e) {
+    float h = hgt(p, 34);
+    return normalize(cross(vec3(e, hgt(p + vec2(e, 0), 34) - h, 0), vec3(0, hgt(p + vec2(0, -e), 34) - h, -e)) * vec3(1, 1, 1));
+  }
+  vec3 aces(vec3 x) { return clamp((x * (2.51 * x + .03)) / (x * (2.43 * x + .59) + .14), 0., 1.); }
+  void main() {
+    SUN = normalize(vec3(-.18, SY, 1.));
+    vec2 q = (uv - .5) * vec2(R.x / R.y, 1.);
+    vec3 ro = vec3(0, 2.1 + .12 * sin(T * .4), T * .9);
+    float roll = .025 * sin(T * .33);
+    vec3 rd = normalize(vec3(q.x * cos(roll) - q.y * sin(roll), q.x * sin(roll) + q.y * cos(roll) - .1, 1.15));
+    vec3 col;
+    if (rd.y >= 0.) col = sky(rd);
+    else {
+      // march between the top (y = 0) and bottom (y = -D) planes of the wave slab
+      vec3 pos = ro + rd * (ro.y / -rd.y), end = ro + rd * ((ro.y + D) / -rd.y);
+      vec3 dir = normalize(end - pos);
+      for (int i = 0; i < 56; i++) {
+        float h = hgt(pos.xz, 12);
+        if (h + .01 > pos.y) break;
+        pos += dir * (pos.y - h);
+      }
+      float dist = length(pos - ro);
+      vec3 n = normalAt(pos.xz, .01);
+      n = normalize(mix(n, vec3(0, 1, 0), min(1., sqrt(dist * .012) * 1.1)));          // calm the far field so it does not shimmer
+      float fr = .04 + .96 * pow(1. - max(0., dot(n, -rd)), 5.);
+      vec3 rf = reflect(rd, n); rf.y = abs(rf.y);
+      vec3 refl = sky(rf);
+      float crest = clamp((pos.y + D) / D, 0., 1.);
+      vec3 deep = vec3(.01, .035, .06) + vec3(.02, .14, .16) * pow(crest, 3.) * pow(max(0., dot(rd, SUN)), 2.) * 2.5;   // low sun glows through thin crests
+      vec3 c = mix(deep, refl, fr);
+      c += vec3(1., .8, .55) * pow(max(0., dot(rf, SUN)), 900.) * 30. * (1. - smoothstep(.0, .15, SY - .1));             // glint
+      col = mix(c, sky(normalize(vec3(rd.x, .001, rd.z))), 1. - exp(-dist * .0028));
+    }
+    col = aces(col * .72);
+    col *= 1. - .25 * pow(length(uv - .5) * 1.25, 2.);
+    o = vec4(pow(col, vec3(1. / 2.2)), 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 = n => gl.getUniformLocation(prog, n), uR = u('R'), uT = u('T'), uD = u('D'), uSY = u('SY');
+  // a heavy shader: render at 1x pixels at most and let the browser scale
+  const resize = () => { const d = Math.min(devicePixelRatio, 1); 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; const t0 = performance.now();
+  function frame(now) {
+    gl.uniform2f(uR, canvas.width, canvas.height); gl.uniform1f(uT, (now - t0) / 1000 * PARAMS.speed + 40);
+    gl.uniform1f(uD, 0.55 * PARAMS.waves); gl.uniform1f(uSY, 0.005 + 0.1 * PARAMS.sun);
+    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/hover/cursor-trail.js

@@ -0,0 +1,37 @@
+// Cursor trail: the head follows the pointer, every other point eases toward the one ahead of it.
+const PARAMS = { points: 24, ease: 0.35 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block;cursor:none';
+  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();
+
+  let px = W / 2, py = H / 2, lastMove = -1e9;
+  const onMove = e => { const b = canvas.getBoundingClientRect(); px = e.clientX - b.left; py = e.clientY - b.top; lastMove = performance.now(); };
+  canvas.addEventListener('pointermove', onMove);
+  const n = Math.round(PARAMS.points);
+  const pts = Array.from({ length: n }, () => ({ x: W / 2, y: H / 2 }));
+  let raf;
+  function frame(now) {
+    let x = px, y = py;
+    if (now - lastMove > 1500) { const t = now / 1000; x = W / 2 + Math.sin(t * 1.6) * W * 0.34; y = H / 2 + Math.sin(t * 2.3 + 1) * H * 0.3; }
+    pts[0].x += (x - pts[0].x) * 0.6; pts[0].y += (y - pts[0].y) * 0.6;
+    for (let i = 1; i < n; i++) { pts[i].x += (pts[i - 1].x - pts[i].x) * PARAMS.ease; pts[i].y += (pts[i - 1].y - pts[i].y) * PARAMS.ease; }
+    ctx.fillStyle = '#1d1a12'; ctx.fillRect(0, 0, W, H);
+    ctx.lineCap = 'round';
+    for (let i = n - 1; i > 0; i--) {
+      const k = 1 - i / n;
+      ctx.strokeStyle = `hsl(${38 - 60 * (1 - k)}, 95%, ${55 + 10 * k}%)`;
+      ctx.lineWidth = 2 + 22 * k;
+      ctx.beginPath(); ctx.moveTo(pts[i].x, pts[i].y); ctx.lineTo(pts[i - 1].x, pts[i - 1].y); ctx.stroke();
+    }
+    ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(pts[0].x, pts[0].y, 5, 0, Math.PI * 2); ctx.fill();
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener('pointermove', onMove); canvas.remove(); };
+}

package/anims/hover/magnetic.js

@@ -0,0 +1,41 @@
+// Magnetic button: within a radius the button leans toward the pointer and its label leans further.
+// When the pointer is idle, a ghost cursor circles so the effect is always visible.
+const PARAMS = { strength: 0.4, radius: 140 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'mg-root';
+  root.innerHTML = `<style>
+    .mg-root { position: absolute; inset: 0; display: grid; place-items: center; background: #fff8e6; font-family: "Mona Sans", system-ui, sans-serif; }
+    .mg-btn { width: 132px; height: 132px; border-radius: 50%; border: 0; background: #15171a; color: #fff; font: 650 15px "Mona Sans", system-ui, sans-serif; display: grid; place-items: center; cursor: pointer; will-change: transform; }
+    .mg-btn span { display: block; will-change: transform; }
+    .mg-ghost { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #b07a00; opacity: 0; transition: opacity .3s; pointer-events: none; }
+  </style><button class="mg-btn" type="button"><span>Hover me</span></button><div class="mg-ghost"></div>`;
+  stage.append(root);
+  const btn = root.querySelector('.mg-btn'), label = btn.firstChild, ghost = root.querySelector('.mg-ghost');
+  let px = 0, py = 0, lastMove = -1e9;
+  const onMove = e => { const b = root.getBoundingClientRect(); px = e.clientX - b.left; py = e.clientY - b.top; lastMove = performance.now(); };
+  root.addEventListener('pointermove', onMove);
+
+  const S = { x: 0, y: 0, vx: 0, vy: 0 }, L = { x: 0, y: 0, vx: 0, vy: 0 };
+  const step = (s, tx, ty, k, c, dt) => { s.vx += (-k * (s.x - tx) - c * s.vx) * dt; s.vy += (-k * (s.y - ty) - c * s.vy) * dt; s.x += s.vx * dt; s.y += s.vy * dt; };
+  let last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.032, (now - last) / 1000); last = now;
+    const idle = now - lastMove > 1500;
+    let x = px, y = py;
+    if (idle) { const t = now / 1000, w = root.clientWidth, h = root.clientHeight; x = w / 2 + Math.cos(t * 1.1) * w * 0.26; y = h / 2 + Math.sin(t * 1.7) * h * 0.22; }
+    ghost.style.opacity = idle ? 0.8 : 0;
+    ghost.style.transform = `translate(${x}px, ${y}px)`;
+    const b = btn.getBoundingClientRect(), r = root.getBoundingClientRect();
+    const cx = b.left - r.left + b.width / 2 - S.x, cy = b.top - r.top + b.height / 2 - S.y;
+    const dx = x - cx, dy = y - cy, inside = Math.hypot(dx, dy) < PARAMS.radius;
+    const tx = inside ? dx * PARAMS.strength : 0, ty = inside ? dy * PARAMS.strength : 0;
+    step(S, tx, ty, 170, 16, dt); step(L, tx * 0.6, ty * 0.6, 220, 18, dt);
+    btn.style.transform = `translate(${S.x}px, ${S.y}px)`;
+    label.style.transform = `translate(${L.x}px, ${L.y}px)`;
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); root.removeEventListener('pointermove', onMove); root.remove(); };
+}

package/anims/hover/ripple.js

@@ -0,0 +1,31 @@
+// Click ripple: a circle grows from the exact press point to the farthest corner, then fades.
+const PARAMS = { duration: 650 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'rp-root';
+  root.innerHTML = `<style>
+    .rp-root { position: absolute; inset: 0; display: grid; place-items: center; background: #15171a; font-family: "Mona Sans", system-ui, sans-serif; }
+    .rp-btn { position: relative; overflow: hidden; width: 66%; height: 42%; border: 0; border-radius: 18px; background: #fab005; color: #2b1d00; font: 750 clamp(14px, 6vmin, 34px) "Mona Sans", system-ui, sans-serif; cursor: pointer; transition: transform .16s cubic-bezier(.23,1,.32,1); }
+    .rp-btn:active { transform: scale(0.97); }
+    .rp-wave { position: absolute; border-radius: 50%; background: #fff; pointer-events: none; }
+  </style><button class="rp-btn" type="button">Press anywhere</button>`;
+  stage.append(root);
+  const btn = root.querySelector('.rp-btn');
+  function ripple(x, y) {
+    const w = btn.clientWidth, h = btn.clientHeight, r = Math.hypot(Math.max(x, w - x), Math.max(y, h - y));
+    const el = document.createElement('span'); el.className = 'rp-wave';
+    el.style.cssText = `left:${x - r}px;top:${y - r}px;width:${r * 2}px;height:${r * 2}px`;
+    btn.append(el);
+    el.animate([{ transform: 'scale(0)', opacity: 0.45 }, { transform: 'scale(1)', opacity: 0.32, offset: 0.7 }, { transform: 'scale(1)', opacity: 0 }],
+      { duration: PARAMS.duration, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' }).onfinish = () => el.remove();
+  }
+  let manual = -1e9;
+  const onDown = e => { const b = btn.getBoundingClientRect(); ripple(e.clientX - b.left, e.clientY - b.top); manual = performance.now(); };
+  btn.addEventListener('pointerdown', onDown);
+  const auto = setInterval(() => {
+    if (performance.now() - manual < 2500) return;
+    ripple(btn.clientWidth * (0.15 + Math.random() * 0.7), btn.clientHeight * (0.2 + Math.random() * 0.6));
+  }, 900);
+  return () => { clearInterval(auto); btn.removeEventListener('pointerdown', onDown); root.remove(); };
+}