@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/webgl/field/field.js

@@ -0,0 +1,1063 @@
+/**
+ * Assembly field — a WebGL2 point cloud that assembles into targets.
+ *
+ * Every point is a particle with position and velocity, integrated on the
+ * CPU each frame and uploaded as one packed buffer; the GPU only draws. That
+ * is what lets the field carry momentum: each particle is held to its home
+ * (its place in the current target) by a damped spring, orbits that home on
+ * a small local path so the assembled shape is never frozen, and answers the
+ * cursor the way the FlowerOfLife canvas does — a spring-lagged pointer with
+ * a vortex that swirls parts around it as it passes, and ripples spawned by
+ * movement and clicks that lift the surface like water.
+ *
+ * The cursor acts through MOMENTUM ONLY. Every cursor term — the local stir,
+ * the drag along the stroke, the ripples it sheds, the bulk flow of the tank,
+ * and even the light on stirred parts — is multiplied by how fast the lagged
+ * pointer is travelling. A hand held on the surface, however long, changes
+ * nothing: what the reader sees is the float, the breath and the camera the
+ * field would have had anyway. Falsifier: `probe-still.mjs` in home-web.
+ *
+ * Homes morph between targets with a per-point stagger, so a structure
+ * assembles the way a scan resolves. Framework-free: a Svelte wrapper owns
+ * the DOM, the motion policy, and the theme colours.
+ */
+const DEFAULT_DYNAMICS = {
+    float: 1,
+    swirl: 1,
+    ripple: 1,
+    stiffness: 1,
+    momentum: 1,
+    current: 1
+};
+const VERT = `#version 300 es
+precision highp float;
+in vec4 a_pos;      // xyz world position, w agitation 0..1
+in float a_seed;
+in float a_intFrom;
+in float a_intTo;
+
+uniform mat4 u_viewProj;
+uniform float u_t;        // morph progress 0..1
+uniform float u_stagger;  // portion of u_t spent staggering
+uniform float u_size;     // point size scale (px * dpr)
+
+out float v_int;
+out float v_depth;
+out float v_agit;
+
+float easeInOut(float x) { return x * x * (3.0 - 2.0 * x); }
+
+void main() {
+	float start = a_seed * u_stagger;
+	float local = clamp((u_t - start) / max(0.0001, 1.0 - u_stagger), 0.0, 1.0);
+	float e = easeInOut(local);
+	vec4 clip = u_viewProj * vec4(a_pos.xyz, 1.0);
+	gl_Position = clip;
+	v_depth = clip.z / clip.w;
+	v_agit = a_pos.w;
+	v_int = mix(a_intFrom, a_intTo, e);
+	float size = u_size * (0.85 + v_int * 0.45 + a_pos.w * 0.35) / max(0.5, clip.w);
+	gl_PointSize = clamp(size, 1.0, 5.0);
+}`;
+const FRAG = `#version 300 es
+precision highp float;
+in float v_int;
+in float v_depth;
+in float v_agit;
+uniform vec3 u_signal;
+uniform vec3 u_accent;
+uniform vec3 u_fog;
+uniform float u_time;
+uniform float u_sweep;
+uniform vec2 u_viewport;  // device px
+out vec4 outColor;
+
+// Sunlight through a water surface. Three drifting sine bands of different
+// scale are summed and then clipped near their crests, which is what turns a
+// smooth wave into separated shafts; the bands lean with height so the rays
+// converge downward the way refracted light does, and they fade with depth
+// because the water eats the light on the way down.
+float shafts(vec2 uv, float t) {
+	float x = uv.x * 6.2;
+	float y = uv.y * 2.4;
+	// the bands lean with depth, so the shafts splay downward
+	float s = sin(x + y * 0.85 + t * 0.34);
+	s += 0.74 * sin(x * 1.63 - y * 0.52 + t * 0.51 + 1.3);
+	s += 0.52 * sin(x * 3.07 + y * 1.15 - t * 0.42 + 2.7);
+	// only the crests carry light; the rest of the surface is dark water
+	float ray = smoothstep(0.42, 1.62, s);
+	// brightest where the light enters, gone by the floor
+	float depth = smoothstep(1.08, -0.15, uv.y);
+	return ray * depth;
+}
+
+void main() {
+	vec2 d = gl_PointCoord - 0.5;
+	float r = dot(d, d) * 4.0;
+	if (r > 1.0) discard;
+	float disc = 1.0 - smoothstep(0.45, 1.0, r);
+	// depth fog: far points sink a little toward the ground colour; never vanish
+	float fog = smoothstep(1.0, 0.2, v_depth);
+	// the light in the room, in screen space so it stays put while the figure
+	// turns under it
+	vec2 uv = gl_FragCoord.xy / max(u_viewport, vec2(1.0));
+	uv.y = 1.0 - uv.y;
+	float ray = u_sweep * shafts(uv, u_time);
+	// a part catches more of it while it is moving, the way disturbed water does
+	float sheen = ray * (0.7 + v_agit * 0.8) * (0.35 + v_int * 0.65);
+	// Crisp, saturated colors: electric chartreuse base, zero muddy gray fog
+	vec3 col = mix(u_signal * 0.8, u_signal, v_int);
+	// stirred parts warm toward the accent, like light catching a moving surface
+	col = mix(col, u_accent, clamp(v_agit * 0.8, 0.0, 1.0) * (0.35 + v_int * 0.65));
+	// Light shafts shimmer with golden electric radiance — NEVER washing out to white or gray
+	vec3 shimmer = mix(u_signal, u_accent, 0.65);
+	col = mix(col, shimmer, clamp(sheen * 0.8, 0.0, 0.85));
+	col = mix(col, vec3(1.0, 0.98, 0.9), clamp(sheen * 0.35, 0.0, 0.35));
+	float a = disc * (0.65 + v_int * 0.35) * (0.75 + fog * 0.25) * (1.0 + v_agit * 0.35 + sheen * 0.45);
+	outColor = vec4(col * a, min(a, 1.0));
+}`;
+function compile(gl, type, src) {
+    const sh = gl.createShader(type);
+    if (!sh)
+        throw new Error('shader alloc failed');
+    gl.shaderSource(sh, src);
+    gl.compileShader(sh);
+    if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+        const log = gl.getShaderInfoLog(sh);
+        gl.deleteShader(sh);
+        throw new Error('shader compile failed: ' + log);
+    }
+    return sh;
+}
+function perspective(out, fovy, aspect, near, far) {
+    const f = 1 / Math.tan(fovy / 2);
+    out.fill(0);
+    out[0] = f / aspect;
+    out[5] = f;
+    out[10] = (far + near) / (near - far);
+    out[11] = -1;
+    out[14] = (2 * far * near) / (near - far);
+}
+function lookAt(out, eye, target, up) {
+    let zx = eye[0] - target[0], zy = eye[1] - target[1], zz = eye[2] - target[2];
+    let l = Math.hypot(zx, zy, zz) || 1;
+    zx /= l;
+    zy /= l;
+    zz /= l;
+    let xx = up[1] * zz - up[2] * zy, xy = up[2] * zx - up[0] * zz, xz = up[0] * zy - up[1] * zx;
+    l = Math.hypot(xx, xy, xz) || 1;
+    xx /= l;
+    xy /= l;
+    xz /= l;
+    const yx = zy * xz - zz * xy, yy = zz * xx - zx * xz, yz = zx * xy - zy * xx;
+    out[0] = xx;
+    out[1] = yx;
+    out[2] = zx;
+    out[3] = 0;
+    out[4] = xy;
+    out[5] = yy;
+    out[6] = zy;
+    out[7] = 0;
+    out[8] = xz;
+    out[9] = yz;
+    out[10] = zz;
+    out[11] = 0;
+    out[12] = -(xx * eye[0] + xy * eye[1] + xz * eye[2]);
+    out[13] = -(yx * eye[0] + yy * eye[1] + yz * eye[2]);
+    out[14] = -(zx * eye[0] + zy * eye[1] + zz * eye[2]);
+    out[15] = 1;
+}
+function mul(out, a, b) {
+    for (let i = 0; i < 4; i++) {
+        for (let j = 0; j < 4; j++) {
+            out[j * 4 + i] =
+                a[i] * b[j * 4] +
+                    a[4 + i] * b[j * 4 + 1] +
+                    a[8 + i] * b[j * 4 + 2] +
+                    a[12 + i] * b[j * 4 + 3];
+        }
+    }
+}
+const FOV = 0.9;
+const TAU = Math.PI * 2;
+export function createField(canvas, opts) {
+    const context = canvas.getContext('webgl2', {
+        alpha: true,
+        antialias: false,
+        depth: false,
+        stencil: false,
+        premultipliedAlpha: true,
+        powerPreference: 'low-power'
+    });
+    if (!context)
+        throw new Error('webgl2 unavailable');
+    const gl = context;
+    const count = opts.count;
+    const maxDpr = opts.maxDpr ?? 1.5;
+    const morphMs = (opts.morphSeconds ?? 9) * 1000;
+    const stagger = opts.stagger ?? 0.55;
+    const pointSize = opts.pointSize ?? 1.8;
+    let autoRotate = opts.autoRotate ?? 0.08;
+    let colors = opts.colors;
+    const dynamics = { ...DEFAULT_DYNAMICS, ...opts.dynamics };
+    const program = gl.createProgram();
+    gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, VERT));
+    gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, FRAG));
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        throw new Error('program link failed: ' + gl.getProgramInfoLog(program));
+    }
+    gl.useProgram(program);
+    const U = (n) => gl.getUniformLocation(program, n);
+    const u = {
+        viewProj: U('u_viewProj'),
+        t: U('u_t'),
+        stagger: U('u_stagger'),
+        time: U('u_time'),
+        size: U('u_size'),
+        signal: U('u_signal'),
+        accent: U('u_accent'),
+        fog: U('u_fog'),
+        sweep: U('u_sweep'),
+        viewport: U('u_viewport')
+    };
+    // ---- buffers: one packed dynamic vec4 (xyz + agitation), static seed, per-target intensities
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    const bufPos = gl.createBuffer(), bufSeed = gl.createBuffer();
+    const bufIntFrom = gl.createBuffer(), bufIntTo = gl.createBuffer();
+    const attr = (name, buf, size) => {
+        const loc = gl.getAttribLocation(program, name);
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        gl.enableVertexAttribArray(loc);
+        gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0);
+    };
+    const seeds = new Float32Array(count);
+    for (let i = 0; i < count; i++)
+        seeds[i] = (i * 0.6180339887) % 1; // golden-ratio spread, no clumps
+    const packed = new Float32Array(count * 4);
+    const pos = new Float32Array(count * 3);
+    const vel = new Float32Array(count * 3);
+    // per-particle orbit character, fixed for the life of the field
+    const orbitPhase = new Float32Array(count);
+    const orbitRate = new Float32Array(count);
+    const orbitRadius = new Float32Array(count);
+    // How eagerly each part returns home. A single stiffness makes a disturbed
+    // patch float back as one sheet; a spread makes it come back the way a
+    // handful of suspended matter does, some parts settling while others are
+    // still drifting.
+    const springScale = new Float32Array(count);
+    for (let i = 0; i < count; i++) {
+        const s = seeds[i];
+        orbitPhase[i] = s * TAU;
+        orbitRate[i] = 0.12 + ((i * 0.7548776662) % 1) * 0.33;
+        orbitRadius[i] = 0.0018 + ((i * 0.5698402909) % 1) * 0.0045;
+        springScale[i] = 0.62 + ((i * 0.4335633244) % 1) * 0.78;
+    }
+    // ---- wanderers: parts whose home is not a fixed place in the structure but
+    // a walk along it. Each hop is to a neighbour drawn from a spatial hash of
+    // the CURRENT target, so a wanderer travels the figure's own lines — around
+    // a circle of the flower, up a column of the temple — instead of cutting
+    // across the middle of it. `wanderOf[i]` is the slot for particle i, or -1.
+    const wanderShare = Math.max(0, Math.min(1, opts.wander ?? 0.08));
+    const wanderCount = Math.floor(count * wanderShare);
+    const wanderOf = new Int32Array(count).fill(-1);
+    const wanderIdx = new Int32Array(wanderCount); // which particle owns the slot
+    const wanderFrom = new Int32Array(wanderCount);
+    const wanderTo = new Int32Array(wanderCount);
+    const wanderPhase = new Float32Array(wanderCount);
+    const wanderRate = new Float32Array(wanderCount);
+    for (let sIdx = 0; sIdx < wanderCount; sIdx++) {
+        // spread the wanderers evenly through the cloud rather than clumping
+        // them at the start of the buffer
+        const i = Math.floor((sIdx + 0.5) * (count / Math.max(1, wanderCount)));
+        wanderIdx[sIdx] = i;
+        wanderOf[i] = sIdx;
+        wanderPhase[sIdx] = (i * 0.6180339887) % 1;
+        wanderRate[sIdx] = 1.6 + ((i * 0.2371 + 0.11) % 1) * 2.8; // hops per second
+    }
+    // A spatial hash over the current target, rebuilt on every assembly. CSR
+    // layout: `hashStart` indexes into `hashItems`.
+    const HASH_BITS = 14;
+    const HASH_SIZE = 1 << HASH_BITS;
+    const CELL = 0.08;
+    const hashCount = new Int32Array(HASH_SIZE + 1);
+    const hashStart = new Int32Array(HASH_SIZE + 1);
+    const hashItems = new Int32Array(count);
+    let hashBuilt = false;
+    function cellKey(x, y, z) {
+        const ix = Math.floor(x / CELL) | 0;
+        const iy = Math.floor(y / CELL) | 0;
+        const iz = Math.floor(z / CELL) | 0;
+        return ((ix * 73856093) ^ (iy * 19349663) ^ (iz * 83492791)) & (HASH_SIZE - 1);
+    }
+    function buildHash(set) {
+        hashCount.fill(0);
+        const P = set.positions;
+        for (let i = 0; i < count; i++) {
+            hashCount[cellKey(P[i * 3], P[i * 3 + 1], P[i * 3 + 2])]++;
+        }
+        let acc = 0;
+        for (let b = 0; b < HASH_SIZE; b++) {
+            hashStart[b] = acc;
+            acc += hashCount[b];
+            hashCount[b] = hashStart[b];
+        }
+        hashStart[HASH_SIZE] = acc;
+        for (let i = 0; i < count; i++) {
+            hashItems[hashCount[cellKey(P[i * 3], P[i * 3 + 1], P[i * 3 + 2])]++] = i;
+        }
+        hashBuilt = true;
+    }
+    /** A point near `idx` in `set`, or `idx` itself if the cell is a dead end.
+     *  Hash collisions can put a far point in the same bucket, so candidates are
+     *  range-checked; that is what keeps a hop on the structure.
+     *
+     *  The choice among valid candidates is biased toward whichever continues
+     *  the direction of the last hop. A pure random walk over near neighbours
+     *  goes nowhere — it jitters in place — while a walk that prefers to keep
+     *  going traces the figure's own lines: around a circle of the flower, up a
+     *  column of the temple, out along a branch of the mind map.
+     */
+    function neighbourOf(idx, set, rnd, dirX = 0, dirY = 0, dirZ = 0) {
+        if (!hashBuilt)
+            return idx;
+        const P = set.positions;
+        const x = P[idx * 3], y = P[idx * 3 + 1], z = P[idx * 3 + 2];
+        const b = cellKey(x, y, z);
+        const lo = hashStart[b], hi = hashStart[b + 1];
+        const n = hi - lo;
+        if (n < 2)
+            return idx;
+        const minHop = CELL * 0.45;
+        const maxHop = CELL * 2.2;
+        const directed = dirX !== 0 || dirY !== 0 || dirZ !== 0;
+        let best = idx;
+        let bestScore = -Infinity;
+        let seed = ((rnd * 2147483647) | 0) >>> 0;
+        for (let attempt = 0; attempt < 14; attempt++) {
+            seed = (seed * 1103515245 + 12345) >>> 0;
+            const cand = hashItems[lo + (seed % n)];
+            if (cand === idx)
+                continue;
+            const dx = P[cand * 3] - x, dy = P[cand * 3 + 1] - y, dz = P[cand * 3 + 2] - z;
+            const d2 = dx * dx + dy * dy + dz * dz;
+            if (d2 > maxHop * maxHop)
+                continue;
+            const d = Math.sqrt(d2);
+            // a hop has to cover ground, or the walk stalls on its own doorstep
+            let score = d < minHop ? d / minHop - 1 : 0.35 + d / maxHop;
+            if (directed && d > 1e-6) {
+                score += 1.6 * ((dx * dirX + dy * dirY + dz * dirZ) / d);
+            }
+            if (score > bestScore) {
+                bestScore = score;
+                best = cand;
+            }
+        }
+        return best;
+    }
+    /** Reseat every wanderer on the structure it is about to belong to. */
+    function reseatWanderers(set) {
+        buildHash(set);
+        for (let sIdx = 0; sIdx < wanderCount; sIdx++) {
+            const i = wanderIdx[sIdx];
+            wanderFrom[sIdx] = i;
+            wanderTo[sIdx] = neighbourOf(i, set, (i * 0.7548776662) % 1);
+            wanderPhase[sIdx] = (i * 0.6180339887) % 1;
+        }
+    }
+    /** Advance every walk; called once per frame. */
+    function stepWanderers(set, dt) {
+        for (let sIdx = 0; sIdx < wanderCount; sIdx++) {
+            let ph = wanderPhase[sIdx] + wanderRate[sIdx] * dt;
+            while (ph >= 1) {
+                ph -= 1;
+                const prev = wanderFrom[sIdx], here = wanderTo[sIdx];
+                const P = set.positions;
+                let dx = P[here * 3] - P[prev * 3], dy = P[here * 3 + 1] - P[prev * 3 + 1], dz = P[here * 3 + 2] - P[prev * 3 + 2];
+                const l = Math.hypot(dx, dy, dz);
+                if (l > 1e-6) {
+                    dx /= l;
+                    dy /= l;
+                    dz /= l;
+                }
+                else {
+                    dx = dy = dz = 0;
+                }
+                wanderFrom[sIdx] = here;
+                wanderTo[sIdx] = neighbourOf(here, set, Math.random(), dx, dy, dz);
+            }
+            wanderPhase[sIdx] = ph;
+        }
+    }
+    let from = {
+        positions: new Float32Array(count * 3),
+        intensity: new Float32Array(count),
+        count
+    };
+    let to = from;
+    gl.bindBuffer(gl.ARRAY_BUFFER, bufSeed);
+    gl.bufferData(gl.ARRAY_BUFFER, seeds, gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, bufPos);
+    gl.bufferData(gl.ARRAY_BUFFER, packed, gl.DYNAMIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, bufIntFrom);
+    gl.bufferData(gl.ARRAY_BUFFER, from.intensity, gl.DYNAMIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, bufIntTo);
+    gl.bufferData(gl.ARRAY_BUFFER, to.intensity, gl.DYNAMIC_DRAW);
+    attr('a_pos', bufPos, 4);
+    attr('a_seed', bufSeed, 1);
+    attr('a_intFrom', bufIntFrom, 1);
+    attr('a_intTo', bufIntTo, 1);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // premultiplied
+    gl.disable(gl.DEPTH_TEST);
+    // ---- clock, morph, camera
+    let morphStart = -1;
+    let progress = 1;
+    let lastNow = 0;
+    let dpr = 1, w = 1, h = 1;
+    // The camera sways about a base angle instead of orbiting fully: a planar
+    // target (the flower, the mark, the rose window) would otherwise turn
+    // edge-on and collapse to a line. The swing is deliberately small — the
+    // motion in this piece belongs to the water, not to the camera.
+    let thetaBase = 0.28, phi = 0.2, sway = 0, theta = thetaBase;
+    const SWAY = 0.22;
+    const dist = opts.distance ?? 2.6;
+    const eye = [0, 0, 0], fwd = [0, 0, 1], right = [1, 0, 0], upv = [0, 1, 0];
+    const proj = new Float32Array(16), view = new Float32Array(16), viewProj = new Float32Array(16);
+    // ---- pointer, ripples, breath: the FlowerOfLife mandala's water, verbatim.
+    // The mandala keeps its mouse in normalised screen space, spring-smoothed
+    // per frame (stiffness 0.06, damping 0.85), spawns ripples from travel
+    // distance, and displaces every circle point RADIALLY by a scalar field
+    // (`getDisplacement`) summed from expanding rings plus an ambient breathing
+    // wave. Here the same field runs in surface-plane pixels — the plane
+    // through the origin facing the camera, with `pxToWorld` converting the
+    // mandala's pixel constants to world units — and displaces each particle
+    // radially from the figure's centre, which is what makes rings wobble.
+    const SPRING_STIFFNESS = 0.06;
+    const SPRING_DAMPING = 0.85;
+    const ENERGY_DECAY = 0.985;
+    const RIPPLE_SPEED = 300; // px / s
+    const RIPPLE_LIFETIME = 3.0; // s
+    const RIPPLE_AMPLITUDE = 12; // px
+    const BREATH_CYCLE = 5.5; // s
+    const BREATH_DEPTH = 0.03;
+    const FLOWER_RADIUS = 0.28; // world: the flower target's circle radius, the mandala's baseRadius
+    /** our figure's circle radius over the hero mandala's (min(w,h)·0.175): the
+     *  field runs in the mandala's own pixels so its constants mean the same */
+    function mandalaScale() {
+        return FLOWER_RADIUS / pxToWorld() / (Math.min(w, h) * 0.175);
+    }
+    let ptrActive = false;
+    let ptrSettled = true;
+    const targetMouse = [0.5, 0.5]; // normalised, y down, like the mandala
+    const mouse = [0.5, 0.5];
+    const mouseVel = [0, 0]; // normalised units per (60 fps) frame
+    const ptr = [0, 0, 0]; // lagged pointer on the surface plane, world
+    const ptrVel = [0, 0, 0]; // world units / s
+    let energy = 0;
+    /** The lagged pointer's speed in mandala px/s, and its unit direction. */
+    let ptrSpeed = 0;
+    const ptrDir = [0, 0];
+    /** The speed at which the cursor is dragging the medium as hard as it can.
+     *  Measured against a real stroke: a hand crossing the hero at a reading
+     *  pace runs 1400-2000, a flick runs past 4000. Set high enough that the
+     *  ordinary pace has somewhere left to go — if a normal drag already
+     *  saturates, momentum has no dynamic range and every stroke looks alike. */
+    const SPEED_REF = 2600; // mandala px / s
+    /** How hard the finger hands its momentum on, in px/s² of acceleration at
+     *  full drag right under the cursor. Sized so a hand-pace stroke carries the
+     *  parts it passes about a quarter of the figure's radius before the spring
+     *  takes them back. */
+    const FURROW_ACCEL = 2600;
+    let ripples = [];
+    let lastRippleX = 0.5, lastRippleY = 0.5;
+    // ---- the tank. The viewport is a box of water and the parts are suspended
+    // in it, so a stroke does not only ring the surface: it moves the whole body
+    // of liquid. Momentum from the cursor is handed to a bulk flow that the walls
+    // of the box push back on, which is why it sloshes for a few seconds and
+    // then goes still rather than stopping when the hand does.
+    const flow = [0, 0]; // bulk displacement of the liquid, mandala px
+    const flowVel = [0, 0]; // mandala px / s
+    const SLOSH_K = 2.1; // spring back to level: the walls of the box
+    const SLOSH_DAMP = 0.62; // viscosity; well under critical, so it rocks
+    /** How much cursor momentum the liquid takes up. The coupling is quadratic
+     *  in speed, the way drag through a fluid is: a slow hand slides through
+     *  and barely moves the body of water, a fast one throws it. */
+    const FLOW_GAIN = 0.42;
+    const FLOW_MAX = 190; // mandala px; the tank cannot overflow
+    /** world units per CSS px on the surface plane */
+    function pxToWorld() {
+        const aspect = w / h;
+        const fitDist = aspect < 1 ? dist / Math.max(0.42, aspect * 1.08) : dist;
+        return (2 * Math.tan(FOV / 2) * fitDist) / h;
+    }
+    /** the lagged mouse in surface-plane px from the origin, y up */
+    function mousePx() {
+        return [(mouse[0] - 0.5) * w, (0.5 - mouse[1]) * h];
+    }
+    // The mandala's breath: a 5.5 s cycle, a quick inhale and a long exhale.
+    function getBreath(time) {
+        const phase = (time % BREATH_CYCLE) / BREATH_CYCLE;
+        const inhaleRatio = 0.35;
+        if (phase < inhaleRatio) {
+            const x = phase / inhaleRatio;
+            return Math.sin(x * Math.PI * 0.5);
+        }
+        const x = (phase - inhaleRatio) / (1 - inhaleRatio);
+        return Math.cos(x * Math.PI * 0.5);
+    }
+    // The mandala's displacement field, in px. `depth` is the ring index of
+    // the circle a point belongs to (0 centre .. 3 outer); here it is the
+    // point's distance from the centre in flower radii.
+    // Per-frame ripple constants (the mandala recomputes these per sampled
+    // point; with 24k+ points they are hoisted so only the distance stays inside
+    // the loop, and a ripple whose ring cannot reach a point is skipped before
+    // the square root).
+    const rippleCache = [];
+    function prepareRipples(time) {
+        rippleCache.length = 0;
+        for (const ripple of ripples) {
+            const age = time - ripple.time;
+            const radius = age * RIPPLE_SPEED;
+            const width = 80 + age * 30;
+            const radiusDecay = 1 / Math.sqrt(1 + radius / 80);
+            const ageFalloff = Math.exp(-age * 0.8);
+            // The ring is carried by the water it was shed into. The drift
+            // saturates, so a fast stroke smears its wake downstream and then lets
+            // it stand, the way a wake behind a hand does.
+            const drift = (1 - Math.exp(-age * 1.7)) / 1.7;
+            const cx = ripple.x + ripple.dx * drift;
+            const cy = ripple.y + ripple.dy * drift;
+            // and it is stretched along the stroke: a wake, not a bullseye
+            const shed = Math.hypot(ripple.dx, ripple.dy);
+            const stretch = Math.min(1.6, shed / 420) * Math.exp(-age * 0.5);
+            const reach = radius * (1 + stretch) + width + shed * drift;
+            rippleCache.push({
+                x: cx,
+                y: cy,
+                radius,
+                width,
+                gain: radiusDecay * ageFalloff * ripple.strength * RIPPLE_AMPLITUDE,
+                age,
+                near2: 0,
+                far2: reach * reach,
+                ax: shed > 1e-3 ? ripple.dx / shed : 0,
+                ay: shed > 1e-3 ? ripple.dy / shed : 0,
+                stretch
+            });
+        }
+    }
+    // The mandala's displacement field, in px. `depth` is the ring index of
+    // the circle a point belongs to (0 centre .. 3 outer); here it is the
+    // point's distance from the centre in flower radii.
+    function getDisplacement(x, y, depth, time) {
+        let displacement = 0;
+        for (let r = 0; r < rippleCache.length; r++) {
+            const rp = rippleCache[r];
+            const dx = x - rp.x, dy = y - rp.y;
+            const d2 = dx * dx + dy * dy;
+            if (d2 > rp.far2)
+                continue;
+            let d;
+            if (rp.stretch > 0.01) {
+                // measure in the wake's own frame: the ring is an ellipse whose long
+                // axis lies along the stroke
+                const along = (dx * rp.ax + dy * rp.ay) / (1 + rp.stretch);
+                const across = dx * -rp.ay + dy * rp.ax;
+                d = Math.sqrt(along * along + across * across);
+            }
+            else {
+                d = Math.sqrt(d2);
+            }
+            const distFromRing = Math.abs(d - rp.radius);
+            if (distFromRing < rp.width) {
+                const ringFalloff = 1 - distFromRing / rp.width;
+                const wave = Math.sin(d * 0.05 - rp.age * 10);
+                displacement += wave * ringFalloff * rp.gain;
+            }
+        }
+        // Ambient breathing wave - propagates outward from center
+        const distFromCenter = Math.sqrt(x * x + y * y);
+        const breathSpeed = 0.8 - depth * 0.1; // Outer layers slightly slower
+        const ambientWave = Math.sin(distFromCenter * 0.008 - time * breathSpeed);
+        const ambientIntensity = Math.max(0.25, 1 - energy * 0.5); // Keep minimum movement
+        const depthFactor = Math.max(0.4, 1 - depth * 0.2); // Outer layers still move, just less
+        displacement += ambientWave * ambientIntensity * 3.5 * depthFactor;
+        return displacement;
+    }
+    function updateCamera() {
+        const cp = Math.cos(phi), sp = Math.sin(phi), st = Math.sin(theta), ct = Math.cos(theta);
+        const aspect = w / h;
+        // On portrait viewports (mobile), horizontal FOV narrows if fovy is fixed.
+        // Scale the camera distance so the point cloud structures fit horizontally.
+        const fitDist = aspect < 1 ? dist / Math.max(0.42, aspect * 1.08) : dist;
+        eye[0] = st * cp * fitDist;
+        eye[1] = sp * fitDist;
+        eye[2] = ct * cp * fitDist;
+        const l = Math.hypot(eye[0], eye[1], eye[2]) || 1;
+        fwd[0] = -eye[0] / l;
+        fwd[1] = -eye[1] / l;
+        fwd[2] = -eye[2] / l;
+        // right = normalize(cross(fwd, up)) with up = (0, 1, 0), up' = cross(right, fwd)
+        let rx = -fwd[2], ry = 0, rz = fwd[0];
+        const rl = Math.hypot(rx, ry, rz) || 1;
+        rx /= rl;
+        ry /= rl;
+        rz /= rl;
+        right[0] = rx;
+        right[1] = ry;
+        right[2] = rz;
+        upv[0] = ry * fwd[2] - rz * fwd[1];
+        upv[1] = rz * fwd[0] - rx * fwd[2];
+        upv[2] = rx * fwd[1] - ry * fwd[0];
+        perspective(proj, FOV, aspect, 0.1, 30);
+        lookAt(view, eye, [0, 0, 0], [0, 1, 0]);
+        mul(viewProj, proj, view);
+    }
+    function resize() {
+        const r = canvas.getBoundingClientRect();
+        dpr = Math.min(window.devicePixelRatio || 1, maxDpr);
+        w = Math.max(1, Math.floor(r.width));
+        h = Math.max(1, Math.floor(r.height));
+        canvas.width = Math.floor(w * dpr);
+        canvas.height = Math.floor(h * dpr);
+        gl.viewport(0, 0, canvas.width, canvas.height);
+    }
+    function uploadIntensity(set, buf) {
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, set.intensity);
+    }
+    function spawnRipple(strength, time, shed = 0) {
+        const [x, y] = mousePx();
+        const ms = mandalaScale();
+        ripples.push({
+            x: x / ms,
+            y: y / ms,
+            time,
+            strength,
+            dx: ptrDir[0] * ptrSpeed * shed,
+            dy: ptrDir[1] * ptrSpeed * shed
+        });
+        lastRippleX = mouse[0];
+        lastRippleY = mouse[1];
+    }
+    // The mandala's updatePhysics, made frame-rate independent by scaling its
+    // per-frame constants to 60 fps frames.
+    function updatePhysics(time, dt) {
+        const f = Math.min(2, dt * 60);
+        if (ptrActive || !ptrSettled) {
+            const dx = targetMouse[0] - mouse[0];
+            const dy = targetMouse[1] - mouse[1];
+            mouseVel[0] += dx * SPRING_STIFFNESS * f;
+            mouseVel[1] += dy * SPRING_STIFFNESS * f;
+            const dampK = Math.pow(SPRING_DAMPING, f);
+            mouseVel[0] *= dampK;
+            mouseVel[1] *= dampK;
+            mouse[0] += mouseVel[0] * f;
+            mouse[1] += mouseVel[1] * f;
+            ptrSettled = !ptrActive && Math.hypot(mouseVel[0], mouseVel[1]) < 1e-4;
+        }
+        energy *= Math.pow(ENERGY_DECAY, f);
+        // The cursor's momentum, in the mandala's own pixels per second. This is
+        // what the wake is made of: a hand that stops moving stops making water,
+        // even while it is still on the surface.
+        const ms = mandalaScale();
+        const vxMs = (mouseVel[0] * w * 60) / ms;
+        const vyMs = (-mouseVel[1] * h * 60) / ms;
+        ptrSpeed = Math.hypot(vxMs, vyMs);
+        if (ptrSpeed > 1e-3) {
+            ptrDir[0] = vxMs / ptrSpeed;
+            ptrDir[1] = vyMs / ptrSpeed;
+        }
+        if (ptrActive) {
+            // Ripples are shed by momentum. Distance still sets the spacing so the
+            // rings do not pile up, but the strength — and how far the ring is
+            // carried — comes from how fast the hand is going.
+            const mouseDelta = Math.sqrt(Math.pow((mouse[0] - lastRippleX) * w, 2) + Math.pow((mouse[1] - lastRippleY) * h, 2));
+            const spawnThreshold = 14 + ptrSpeed * ms * 0.012;
+            if (mouseDelta > spawnThreshold) {
+                const drive = Math.min(1.6, ptrSpeed / SPEED_REF) * dynamics.momentum;
+                const rippleStrength = Math.min(1.6, drive * 1.4);
+                spawnRipple(rippleStrength, time, 0.34 * dynamics.momentum);
+                energy = Math.min(1.4, energy + 0.1 * rippleStrength);
+            }
+        }
+        // Clean old ripples
+        ripples = ripples.filter((r) => time - r.time < RIPPLE_LIFETIME);
+        // The tank. Momentum from the hand goes into the body of the liquid; the
+        // walls of the box spring it back, and viscosity takes it out over a few
+        // seconds. Nothing here is driven by the cursor's position, only by how
+        // hard it pushed — so the water keeps rocking after the hand has gone.
+        const q = Math.min(2.2, ptrSpeed / SPEED_REF); // quadratic drag coupling
+        const drive = ptrActive ? dynamics.current * dynamics.momentum * FLOW_GAIN * q : 0;
+        flowVel[0] += (vxMs * drive - flow[0] * SLOSH_K) * dt;
+        flowVel[1] += (vyMs * drive - flow[1] * SLOSH_K) * dt;
+        const visc = Math.exp(-SLOSH_DAMP * dt);
+        flowVel[0] *= visc;
+        flowVel[1] *= visc;
+        flow[0] += flowVel[0] * dt;
+        flow[1] += flowVel[1] * dt;
+        const swell = Math.hypot(flow[0], flow[1]);
+        if (swell > FLOW_MAX) {
+            // the box is full: the liquid piles against the wall instead of leaving
+            flow[0] *= FLOW_MAX / swell;
+            flow[1] *= FLOW_MAX / swell;
+            flowVel[0] *= 0.4;
+            flowVel[1] *= 0.4;
+        }
+        // The lagged pointer and its velocity in world units, for the vortex.
+        const k = pxToWorld();
+        const [mx, my] = mousePx();
+        ptr[0] = right[0] * mx * k + upv[0] * my * k;
+        ptr[1] = right[1] * mx * k + upv[1] * my * k;
+        ptr[2] = right[2] * mx * k + upv[2] * my * k;
+        const vxPx = mouseVel[0] * w * 60, vyPx = -mouseVel[1] * h * 60;
+        ptrVel[0] = (right[0] * vxPx + upv[0] * vyPx) * k;
+        ptrVel[1] = (right[1] * vxPx + upv[1] * vyPx) * k;
+        ptrVel[2] = (right[2] * vxPx + upv[2] * vyPx) * k;
+    }
+    /** One simulation step: the mandala's water, springs, orbits, the cursor vortex. */
+    function step(t, dt) {
+        updatePhysics(t, dt);
+        prepareRipples(t);
+        stepWanderers(to, dt);
+        const k = pxToWorld();
+        const breath = getBreath(t);
+        const baseRadiusPx = FLOWER_RADIUS / k;
+        // A soft spring, near critically damped: a displaced particle glides back
+        // over a second or two and barely overshoots — settling, not snapping.
+        const stiff = 3 * dynamics.stiffness;
+        const damp = 2 * Math.sqrt(stiff) * 0.85;
+        // One damping for the whole field against a spread of stiffnesses: the
+        // stiffer parts come home nearly critically damped, the softer ones ring
+        // once on the way. That difference is the point.
+        const dampK = Math.exp(-damp * dt);
+        const floatAmp = dynamics.float * (1 + energy * 0.9);
+        const orbitSpeedK = 1 + energy * 0.5; // the mandala's energy particles speed up with energy
+        const ms = mandalaScale();
+        const rippleK = dynamics.ripple * k * ms; // mandala px of displacement → world
+        const swirlK = dynamics.swirl;
+        const lightRadius = Math.min(w, h) * 0.32; // the mandala's mouse light, widened
+        // so a hand crossing the hero reaches the figure, not just the point under it
+        // The furrow: a much tighter kernel than the light. A finger dragged
+        // through water carries the water it touches far more than the water a
+        // hand-width away, and the falloff is what makes it read as a finger
+        // rather than a wide pressure field. Half strength at `coreRadius`, a
+        // tenth of it at twice that.
+        const coreRadius = Math.min(w, h) * 0.11;
+        const [mxPx, myPx] = mousePx();
+        const inv = 1 / Math.max(0.0001, 1 - stagger);
+        const useVortex = ptrActive || !ptrSettled;
+        // The tank's bulk flow, in world units, and the shear across its depth:
+        // the parts nearer the glass are carried further than the ones behind, so
+        // the body reads as suspended in a volume rather than painted on a sheet.
+        const flowX = flow[0] * ms * k * dynamics.current;
+        const flowY = flow[1] * ms * k * dynamics.current;
+        const flowSwirl = Math.hypot(flow[0], flow[1]) / FLOW_MAX;
+        // How hard the cursor is dragging the medium right now, 0..~1.6.
+        const drag = Math.min(1.6, ptrSpeed / SPEED_REF) * dynamics.momentum;
+        const dragDirX = ptrDir[0], dragDirY = ptrDir[1];
+        // the stroke direction in world space, for the impulse below
+        const ddx = right[0] * dragDirX + upv[0] * dragDirY;
+        const ddy = right[1] * dragDirX + upv[1] * dragDirY;
+        const ddz = right[2] * dragDirX + upv[2] * dragDirY;
+        // Buoyancy: the whole assembled object hangs in water — a slow bob and
+        // sway in the view plane, a slow roll about the view axis, and a long
+        // low current that bends it gently. All scaled by `float`.
+        const buoy = dynamics.float;
+        const bobX = Math.sin(t * 0.21 + 1.3) * 0.014 * buoy;
+        const bobY = Math.sin(t * 0.34) * 0.022 * buoy;
+        const roll = Math.sin(t * 0.17) * 0.045 * buoy;
+        const cosR = Math.cos(roll), sinR = Math.sin(roll);
+        const currentK = 0.012 * buoy;
+        for (let i = 0; i < count; i++) {
+            const i3 = i * 3;
+            // home: staggered morph between the two targets
+            const local = Math.min(1, Math.max(0, (progress - seeds[i] * stagger) * inv));
+            // Quintic smootherstep for velvet-smooth assembly
+            const e = local * local * local * (local * (local * 6 - 15) + 10);
+            // A wanderer's destination is not its own place in the structure but
+            // wherever its walk has reached, so it keeps travelling once the
+            // assembly has settled. The walk is between two points of the target
+            // itself, so the path never leaves the figure.
+            let tx = to.positions[i3], ty = to.positions[i3 + 1], tz = to.positions[i3 + 2];
+            const slot = wanderOf[i];
+            if (slot >= 0) {
+                const a3 = wanderFrom[slot] * 3, b3 = wanderTo[slot] * 3;
+                const ph = wanderPhase[slot];
+                const w = ph * ph * (3 - 2 * ph); // ease each hop in and out
+                tx = to.positions[a3] + (to.positions[b3] - to.positions[a3]) * w;
+                ty = to.positions[a3 + 1] + (to.positions[b3 + 1] - to.positions[a3 + 1]) * w;
+                tz = to.positions[a3 + 2] + (to.positions[b3 + 2] - to.positions[a3 + 2]) * w;
+            }
+            let hx = from.positions[i3] + (tx - from.positions[i3]) * e;
+            let hy = from.positions[i3 + 1] + (ty - from.positions[i3 + 1]) * e;
+            let hz = from.positions[i3 + 2] + (tz - from.positions[i3 + 2]) * e;
+            // into the view plane: (vx, vy) across the surface, vz toward the eye
+            let vx = hx * right[0] + hy * right[1] + hz * right[2];
+            let vy = hx * upv[0] + hy * upv[1] + hz * upv[2];
+            const vz = hx * fwd[0] + hy * fwd[1] + hz * fwd[2];
+            // buoyancy: roll, bob, sway, current
+            {
+                const rx = vx * cosR - vy * sinR + bobX + Math.sin(vy * 2.6 + t * 0.45) * currentK;
+                const ry = vx * sinR + vy * cosR + bobY + Math.sin(vx * 2.2 - t * 0.38) * currentK * 0.6;
+                vx = rx;
+                vy = ry;
+            }
+            // the tank's current: the whole body of liquid is carried, sheared
+            // across its depth so the near parts lead and the far parts lag
+            {
+                const carry = 0.62 + 0.55 * (vz / 0.9);
+                vx += flowX * carry;
+                vy += flowY * carry;
+                // a moving body of water does not translate rigidly; it rolls
+                vx += flowY * flowSwirl * 0.28 * Math.sin(vy * 2.4 + t * 0.7);
+                vy -= flowX * flowSwirl * 0.28 * Math.sin(vx * 2.1 - t * 0.6);
+            }
+            // the mandala's water: breath scales the figure about its centre, and
+            // the displacement field moves every point radially from the centre
+            {
+                const r = Math.sqrt(vx * vx + vy * vy);
+                const rPx = r / k;
+                const depth = Math.min(3, rPx / baseRadiusPx);
+                const breathScale = 1 + breath * BREATH_DEPTH * (1 - depth * 0.15);
+                const displacement = getDisplacement(vx / k / ms, vy / k / ms, depth, t) * rippleK;
+                // A radial scale is how the mandala warps its rings, but near the
+                // centre `displacement / r` runs away and would fling the middle of
+                // the figure inside out. Hold the divisor off zero and cap the scale.
+                const s = Math.min(1.7, Math.max(0.35, breathScale + displacement / Math.max(r, 0.06)));
+                vx *= s;
+                vy *= s;
+            }
+            // the mandala's mouse light: parts near the cursor read brighter
+            const ldx = vx / k - mxPx, ldy = vy / k - myPx;
+            const ldist = Math.sqrt(ldx * ldx + ldy * ldy) || 1;
+            const proximity = useVortex ? Math.max(0, 1 - ldist / lightRadius) : 0;
+            // the furrow kernel: sharp, so the part under the cursor is carried
+            // several times further than one a hand-width out
+            const q = ldist / coreRadius;
+            const nearK = proximity > 0 && q < 3.2 ? 1 / (1 + q * q * q) : 0;
+            // The distortion IS the momentum. Proximity only says which parts of
+            // the water the hand is in; `drag` says whether the hand is doing
+            // anything to it. A cursor held still has no momentum, so this term is
+            // exactly zero and the field is left alone — the parts go on with the
+            // float and the breath they would have had if the hand were not there.
+            const stir = proximity * proximity * swirlK * drag;
+            // stir: near the cursor the dance widens and the home drifts sideways
+            // around it — a displacement the spring follows, never a force, so
+            // nothing is ever pushed away.
+            let furrow = 0;
+            const share = 0.62 + 1.05 * ((i * 0.7548776662) % 1);
+            if (stir > 0) {
+                const drift = stir * 10 * k * (0.5 + 0.5 * Math.sin(t * 0.6 + seeds[i] * TAU));
+                vx += (-ldy / ldist) * drift;
+                vy += (ldx / ldist) * drift;
+                if (nearK > 0) {
+                    const ahead = (ldx * dragDirX + ldy * dragDirY) / ldist;
+                    // strongest just behind the hand, where the water closes back in
+                    const wake = 0.4 + 0.6 * Math.max(0, -ahead);
+                    // How much of the finger's momentum this part takes up. It is handed
+                    // to the particle's VELOCITY further down, not to its home: a home
+                    // that darts past in a tenth of a second is invisible to a spring
+                    // with a multi-second period, which is why a displacement alone moved
+                    // nothing. An impulse is also what actually happens — the finger gives
+                    // its momentum to the water it touches, and that water coasts on after
+                    // the hand has gone.
+                    furrow = nearK * drag * wake * share * swirlK;
+                    // a shallow home offset too, so the furrow has a shape and not only a kick
+                    const carry = furrow * 30 * k;
+                    vx += dragDirX * carry;
+                    vy += dragDirY * carry;
+                    // and a little of it sideways, so the furrow has width
+                    const spill = nearK * drag * share * 22 * k * Math.sin(seeds[i] * TAU + t * 0.9);
+                    vx += -dragDirY * spill;
+                    vy += dragDirX * spill;
+                }
+            }
+            // back to world
+            hx = right[0] * vx + upv[0] * vy + fwd[0] * vz;
+            hy = right[1] * vx + upv[1] * vy + fwd[1] * vz;
+            hz = right[2] * vx + upv[2] * vy + fwd[2] * vz;
+            // local orbit in the view plane, plus a slow lift along the view axis
+            const ph = orbitPhase[i] + t * orbitRate[i] * orbitSpeedK;
+            const rad = orbitRadius[i] * floatAmp * (1 + 2.5 * stir);
+            const cx = Math.cos(ph) * rad, sy = Math.sin(ph) * rad, lz = Math.sin(ph * 0.5 + seeds[i] * 7) * rad * 0.6;
+            hx += right[0] * cx + upv[0] * sy + fwd[0] * lz;
+            hy += right[1] * cx + upv[1] * sy + fwd[1] * lz;
+            hz += right[2] * cx + upv[2] * sy + fwd[2] * lz;
+            // spring to home, damping
+            let px = pos[i3], py = pos[i3 + 1], pz = pos[i3 + 2];
+            let pvx = vel[i3], pvy = vel[i3 + 1], pvz = vel[i3 + 2];
+            const ks = stiff * springScale[i];
+            pvx += (hx - px) * ks * dt;
+            pvy += (hy - py) * ks * dt;
+            pvz += (hz - pz) * ks * dt;
+            // The finger's momentum, handed straight to the parts it is passing
+            // through. The spring above is what brings them home afterwards, at
+            // each part's own rate, so a stroke leaves a furrow that closes over
+            // a second or two rather than snapping shut behind the cursor.
+            if (furrow > 0) {
+                const kick = furrow * FURROW_ACCEL * k * dt;
+                pvx += ddx * kick;
+                pvy += ddy * kick;
+                pvz += ddz * kick;
+            }
+            pvx *= dampK;
+            pvy *= dampK;
+            pvz *= dampK;
+            px += pvx * dt;
+            py += pvy * dt;
+            pz += pvz * dt;
+            pos[i3] = px;
+            pos[i3 + 1] = py;
+            pos[i3 + 2] = pz;
+            vel[i3] = pvx;
+            vel[i3 + 1] = pvy;
+            vel[i3 + 2] = pvz;
+            const i4 = i * 4;
+            packed[i4] = px;
+            packed[i4 + 1] = py;
+            packed[i4 + 2] = pz;
+            // The light marks stirred water, not the cursor's address: it rides the
+            // same momentum term, low-passed so it glows rather than flickers and
+            // so it fades out a beat after the hand stops rather than snapping off.
+            const lit = (proximity * proximity * 0.45 + nearK * 0.75) * Math.min(1, drag * 1.2);
+            packed[i4 + 3] += (lit - packed[i4 + 3]) * Math.min(1, dt * 4);
+        }
+    }
+    function draw(now, t) {
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.useProgram(program);
+        gl.bindVertexArray(vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, bufPos);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, packed);
+        gl.uniformMatrix4fv(u.viewProj, false, viewProj);
+        gl.uniform1f(u.t, t);
+        gl.uniform1f(u.stagger, stagger);
+        gl.uniform1f(u.time, now / 1000);
+        const aspect = w / h;
+        // On portrait screens where the camera pulls back to frame the shape,
+        // scale point size proportionally so points remain dense and legible.
+        const pointScale = aspect < 1 ? pointSize * Math.min(2.0, Math.sqrt(1 / aspect)) : pointSize;
+        gl.uniform1f(u.size, pointScale * dpr);
+        gl.uniform3fv(u.signal, colors.signal);
+        gl.uniform3fv(u.accent, colors.accent);
+        gl.uniform3fv(u.fog, colors.fog);
+        gl.uniform1f(u.sweep, opts.sweep === false ? 0 : 1);
+        gl.uniform2f(u.viewport, canvas.width, canvas.height);
+        gl.drawArrays(gl.POINTS, 0, count);
+    }
+    function settle(set) {
+        pos.set(set.positions);
+        vel.fill(0);
+        for (let i = 0; i < count; i++) {
+            const i3 = i * 3, i4 = i * 4;
+            packed[i4] = pos[i3];
+            packed[i4 + 1] = pos[i3 + 1];
+            packed[i4 + 2] = pos[i3 + 2];
+            packed[i4 + 3] = 0;
+        }
+    }
+    const handle = {
+        assemble(target) {
+            // New homes start from where the particles are now, not from the old target.
+            const current = {
+                positions: pos.slice(),
+                intensity: new Float32Array(count),
+                count
+            };
+            const inv = 1 / Math.max(0.0001, 1 - stagger);
+            for (let i = 0; i < count; i++) {
+                const local = Math.min(1, Math.max(0, (progress - seeds[i] * stagger) * inv));
+                const e = local * local * local * (local * (local * 6 - 15) + 10);
+                current.intensity[i] = from.intensity[i] + (to.intensity[i] - from.intensity[i]) * e;
+            }
+            from = current;
+            to = target;
+            reseatWanderers(to);
+            uploadIntensity(from, bufIntFrom);
+            uploadIntensity(to, bufIntTo);
+            morphStart = lastNow || performance.now();
+            progress = 0;
+        },
+        frame(now) {
+            const dt = lastNow ? Math.min(0.05, (now - lastNow) / 1000) : 1 / 60;
+            lastNow = now;
+            sway += autoRotate * 1.6 * dt;
+            theta = thetaBase + Math.sin(sway) * SWAY;
+            updateCamera();
+            if (morphStart >= 0)
+                progress = Math.min(1, (now - morphStart) / morphMs);
+            step(now / 1000, dt);
+            draw(now, progress);
+        },
+        still() {
+            progress = 1;
+            morphStart = -1;
+            from = to;
+            uploadIntensity(from, bufIntFrom);
+            uploadIntensity(to, bufIntTo);
+            ripples = [];
+            energy = 0;
+            flow[0] = flow[1] = flowVel[0] = flowVel[1] = 0;
+            settle(to);
+            updateCamera();
+            draw(4000, 1);
+        },
+        resize,
+        setPointer(x, y, active) {
+            targetMouse[0] = (x + 1) / 2;
+            targetMouse[1] = (1 - y) / 2;
+            if (active && !ptrActive) {
+                // arriving: start the smoothed mouse at the cursor so nothing lurches
+                mouse[0] = targetMouse[0];
+                mouse[1] = targetMouse[1];
+                mouseVel[0] = mouseVel[1] = 0;
+                lastRippleX = mouse[0];
+                lastRippleY = mouse[1];
+            }
+            ptrActive = active;
+            if (active)
+                ptrSettled = false;
+        },
+        tap() {
+            // the mandala's click: a strong ripple and a jolt of energy
+            spawnRipple(1.5, lastNow / 1000);
+            energy = Math.min(1.2, energy + 0.3);
+        },
+        setColors(c) {
+            colors = c;
+        },
+        setAutoRotate(rps) {
+            autoRotate = rps;
+        },
+        setDynamics(d) {
+            Object.assign(dynamics, d);
+        },
+        orbit(dTheta, dPhi) {
+            thetaBase += dTheta;
+            phi = Math.max(-1.2, Math.min(1.2, phi + dPhi));
+        },
+        get progress() {
+            return progress;
+        },
+        get energy() {
+            return Math.min(1, energy);
+        },
+        destroy() {
+            gl.deleteBuffer(bufPos);
+            gl.deleteBuffer(bufSeed);
+            gl.deleteBuffer(bufIntFrom);
+            gl.deleteBuffer(bufIntTo);
+            gl.deleteVertexArray(vao);
+            gl.deleteProgram(program);
+            gl.getExtension('WEBGL_lose_context')?.loseContext();
+        }
+    };
+    resize();
+    updateCamera();
+    return handle;
+}