nodality 1.0.180 → 1.0.182

package/lib/raster-ops.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.180
+ * nodality v1.0.182
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -44,6 +44,8 @@
 // Ops execute in nodes-array order within their stage. Uniforms are
 // namespaced per node index so the same op can appear twice.
 
+const MAX_BLOBS = 12;
+
 const REGISTRY = {
     hexalize: {
         stage: "cell",
@@ -124,6 +126,622 @@ const REGISTRY = {
             strength: ["1f", node.strength != null ? node.strength : 1.0],
         }),
     },
+
+    // Stirred liquid: the content swirls as if it were paint being
+    // stirred with a spoon. Unlike every other op here this one is
+    // STATEFUL — it owns a low-res vector field (a ping-pong pair of
+    // render targets) that evolves frame to frame; the main pass just
+    // samples the finished field. See the `field` descriptor below and
+    // the field-simulation block in applyRasterPipeline().
+    //
+    // Formulation (deliberately not the usual Stable-Fluids solver):
+    // the classic GPU fluid pipeline is advect + vorticity confinement +
+    // a divergence/pressure Jacobi solve (Stam 1999; Harris, GPU Gems
+    // 2003) — roughly ten passes. This op instead advects momentum along
+    // its own flow (semi-Lagrangian backtrace, the one genuinely
+    // universal piece) and then ROTATES each momentum vector by the
+    // local curl angle. Rotation preserves magnitude, so eddies keep
+    // spinning instead of being pushed around, and because it cannot
+    // inject divergence energy the field stays stable with no pressure
+    // projection at all — the whole simulation is a single pass.
+    //
+    //   { op: "stir", strength: 26, swirl: 2.4, decay: 0.985 }
+    // Stirred liquid: an incompressible fluid whose velocity field warps
+    // the content and whose dye field colours it.
+    //
+    // Implemented from the published algorithm, not from any particular
+    // existing codebase:
+    //   J. Stam, "Stable Fluids", SIGGRAPH '99, 121-128 - the
+    //     unconditionally stable operator splitting used here: add
+    //     forces, advect by a backward particle trace, then project the
+    //     velocity onto its divergence-free part via a Poisson solve.
+    //   M. Harris, "Fast Fluid Dynamics Simulation on the GPU", GPU Gems
+    //     ch. 38 (2003) - mapping each operator onto a fragment program
+    //     over ping-ponged textures, Jacobi iterations for the pressure.
+    //   R. Fedkiw, J. Stam, H. Jensen, "Visual Simulation of Smoke",
+    //     SIGGRAPH '01 - vorticity confinement, which restores the
+    //     small-scale swirl that a coarse grid numerically damps away.
+    //
+    // Per frame: splat -> curl -> confine -> divergence -> pressure
+    // (Jacobi) -> subtract gradient -> advect velocity -> advect dye.
+    // The projection step is what distinguishes this from a plain
+    // velocity-texture smear: enforcing div(v)=0 is what makes the flow
+    // roll into persistent vortices instead of piling up and dissipating.
+    //
+    // Needs WebGL2 with float render targets; without them the op
+    // disables itself and the rest of the chain still renders.
+    stir: {
+        stage: ["warp", "color"],
+        decl: (p) => `
+            uniform sampler2D ${p}vel;
+            uniform sampler2D ${p}dye;
+            uniform float ${p}strength;
+            uniform float ${p}dyemix;
+            uniform float ${p}intensity;
+            uniform float ${p}sheen;
+            uniform vec3 ${p}tint;`,
+        code: (p, node, stage) => stage === "warp" ? `
+        {
+            // frag/warped are top-down pixels, the field is bottom-up
+            // [0,1]: flip y going in, and flip the y of the vector coming
+            // out so the content drags WITH the pointer.
+            vec2 fuv = vec2(warped.x / u_res.x, 1.0 - warped.y / u_res.y);
+            vec2 v = texture2D(${p}vel, clamp(fuv, 0.001, 0.999)).xy;
+            warped += vec2(v.x, -v.y) * ${p}strength;
+        }` : `
+        {
+            // Sampled at the CONTINUOUS warped position, never at the
+            // cell centre: a cell op upstream (hexalize) snaps the cell
+            // centre to one point per tile, which would quantise the
+            // liquid into flat per-hex patches instead of smooth swirls.
+            vec2 suv = vec2(warped.x / u_res.x, 1.0 - warped.y / u_res.y);
+            vec3 dc = texture2D(${p}dye, clamp(suv, 0.001, 0.999)).rgb;
+            float mag = length(dc);
+            // Colour is carried IN the dye field and advected with it, so
+            // a ribbon keeps its hue while the flow folds it. Deriving
+            // colour from the local flow direction instead would make
+            // neighbouring pixels jump hue and read as confetti.
+            vec3 liquid = mag > 1e-4 ? clamp(dc / mag * 1.25, 0.0, 1.0) : ${p}tint;
+            float amt = clamp((1.0 - exp(-mag * ${p}intensity)) * ${p}dyemix, 0.0, 1.0);
+            // Straight-alpha OVER so a later overlay op (blobs) still
+            // composites correctly on top of the liquid.
+            float na = amt + ovA * (1.0 - amt);
+            ovCol = (liquid * amt + ovCol * ovA * (1.0 - amt)) / max(na, 1e-4);
+            ovA = na;
+
+            // Faint sheen on the content itself where the flow is fast.
+            float sp = length(texture2D(${p}vel, clamp(suv, 0.001, 0.999)).xy);
+            col = mix(col, ${p}tint, (1.0 - exp(-sp * 0.7)) * ${p}sheen);
+        }`,
+        uniforms: (node, dpr) => ({
+            strength: ["1f", (node.strength != null ? node.strength : 26) * dpr],
+            sheen: ["1f", node.sheen != null ? node.sheen : 0.15],
+            tint: ["3fv", hexToRgb(node.tint || "#7FD4FF")],
+            dyemix: ["1f", node.dye != null ? node.dye : 0.85],
+            intensity: ["1f", node.intensity != null ? node.intensity : 1.6],
+        }),
+
+        // ── The simulation ────────────────────────────────────────────
+        // Declared as data: the pipeline allocates the targets, compiles
+        // the programs, and calls step() once per frame.
+        solver: {
+            resolutions: (node) => ({
+                sim: Math.max(32, Math.min(node.resolution || 128, 512)),
+                dye: Math.max(64, Math.min(node.dyeResolution || 512, 1024)),
+            }),
+            // read/write pairs ping-pong; single targets are scratch.
+            targets: {
+                velocity: { double: true, res: "sim", fmt: "rg", smooth: true },
+                dye: { double: true, res: "dye", fmt: "rgba", smooth: true },
+                pressure: { double: true, res: "sim", fmt: "r", smooth: false },
+                divergence: { double: false, res: "sim", fmt: "r", smooth: false },
+                vorticity: { double: false, res: "sim", fmt: "r", smooth: false },
+            },
+            // Which target each main-pass sampler reads.
+            samplers: { vel: "velocity", dye: "dye" },
+
+            programs: {
+                // Gaussian source term. Distance is measured as a
+                // fraction of the element's LONGER side so the radius
+                // means the same thing whatever the element's shape.
+                splat: `
+precision highp float;
+uniform sampler2D u_src;
+uniform vec2 u_texel;
+uniform vec2 u_point;
+uniform vec3 u_amount;
+uniform float u_radius;
+uniform float u_aspect;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    vec2 d = uv - u_point;
+    if (u_aspect >= 1.0) d.y /= u_aspect; else d.x *= u_aspect;
+    float g = exp(-dot(d, d) / max(u_radius * u_radius, 1e-6));
+    gl_FragColor = vec4(texture2D(u_src, uv).xyz + u_amount * g, 1.0);
+}`,
+
+                // Semi-Lagrangian advection (Stam 1999): trace the
+                // characteristic backwards and resample. Unconditionally
+                // stable for any timestep, which is the whole point.
+                advect: `
+precision highp float;
+uniform sampler2D u_vel;
+uniform sampler2D u_src;
+uniform vec2 u_texel;
+uniform float u_dt;
+uniform float u_diss;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    vec2 back = uv - texture2D(u_vel, uv).xy * u_dt;
+    gl_FragColor = vec4(texture2D(u_src, clamp(back, 0.0, 1.0)).xyz * u_diss, 1.0);
+}`,
+
+                // Scalar vorticity of a 2D field: d(vy)/dx - d(vx)/dy.
+                curl: `
+precision highp float;
+uniform sampler2D u_vel;
+uniform vec2 u_texel;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    float r = texture2D(u_vel, uv + vec2(u_texel.x, 0.0)).y;
+    float l = texture2D(u_vel, uv - vec2(u_texel.x, 0.0)).y;
+    float t = texture2D(u_vel, uv + vec2(0.0, u_texel.y)).x;
+    float b = texture2D(u_vel, uv - vec2(0.0, u_texel.y)).x;
+    gl_FragColor = vec4(0.5 * ((r - l) - (t - b)), 0.0, 0.0, 1.0);
+}`,
+
+                // Vorticity confinement (Fedkiw et al. 2001): push the
+                // velocity along N x omega, where N is the unit gradient
+                // of |omega|, i.e. toward the centre of each eddy. This
+                // feeds energy back into swirl the grid would otherwise
+                // smooth out.
+                confine: `
+precision highp float;
+uniform sampler2D u_vel;
+uniform sampler2D u_curl;
+uniform vec2 u_texel;
+uniform float u_eps;
+uniform float u_dt;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    float r = texture2D(u_curl, uv + vec2(u_texel.x, 0.0)).x;
+    float l = texture2D(u_curl, uv - vec2(u_texel.x, 0.0)).x;
+    float t = texture2D(u_curl, uv + vec2(0.0, u_texel.y)).x;
+    float b = texture2D(u_curl, uv - vec2(0.0, u_texel.y)).x;
+    float c = texture2D(u_curl, uv).x;
+    vec2 grad = 0.5 * vec2(abs(r) - abs(l), abs(t) - abs(b));
+    vec2 n = grad / (length(grad) + 1e-5);
+    vec2 force = u_eps * c * vec2(n.y, -n.x);
+    vec2 v = texture2D(u_vel, uv).xy + force * u_dt;
+    gl_FragColor = vec4(clamp(v, -64.0, 64.0), 0.0, 1.0);
+}`,
+
+                // div(v). The walls reflect, so the fluid stays in the box.
+                divergence: `
+precision highp float;
+uniform sampler2D u_vel;
+uniform vec2 u_texel;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    float r = texture2D(u_vel, uv + vec2(u_texel.x, 0.0)).x;
+    float l = texture2D(u_vel, uv - vec2(u_texel.x, 0.0)).x;
+    float t = texture2D(u_vel, uv + vec2(0.0, u_texel.y)).y;
+    float b = texture2D(u_vel, uv - vec2(0.0, u_texel.y)).y;
+    vec2 c = texture2D(u_vel, uv).xy;
+    if (uv.x - u_texel.x < 0.0) l = -c.x;
+    if (uv.x + u_texel.x > 1.0) r = -c.x;
+    if (uv.y - u_texel.y < 0.0) b = -c.y;
+    if (uv.y + u_texel.y > 1.0) t = -c.y;
+    gl_FragColor = vec4(0.5 * ((r - l) + (t - b)), 0.0, 0.0, 1.0);
+}`,
+
+                // One Jacobi sweep of the Poisson equation lap(p) = div(v)
+                // (Harris 2003). Run a handful of these per frame.
+                jacobi: `
+precision highp float;
+uniform sampler2D u_p;
+uniform sampler2D u_div;
+uniform vec2 u_texel;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    float r = texture2D(u_p, uv + vec2(u_texel.x, 0.0)).x;
+    float l = texture2D(u_p, uv - vec2(u_texel.x, 0.0)).x;
+    float t = texture2D(u_p, uv + vec2(0.0, u_texel.y)).x;
+    float b = texture2D(u_p, uv - vec2(0.0, u_texel.y)).x;
+    float d = texture2D(u_div, uv).x;
+    gl_FragColor = vec4((r + l + t + b - d) * 0.25, 0.0, 0.0, 1.0);
+}`,
+
+                // v <- v - grad(p): the projection itself. After this the
+                // velocity is (discretely) divergence free.
+                subtract: `
+precision highp float;
+uniform sampler2D u_p;
+uniform sampler2D u_vel;
+uniform vec2 u_texel;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    float r = texture2D(u_p, uv + vec2(u_texel.x, 0.0)).x;
+    float l = texture2D(u_p, uv - vec2(u_texel.x, 0.0)).x;
+    float t = texture2D(u_p, uv + vec2(0.0, u_texel.y)).x;
+    float b = texture2D(u_p, uv - vec2(0.0, u_texel.y)).x;
+    vec2 v = texture2D(u_vel, uv).xy - 0.5 * vec2(r - l, t - b);
+    gl_FragColor = vec4(v, 0.0, 1.0);
+}`,
+
+                // Scale a target in place (used to carry a fraction of
+                // the previous pressure into the next solve).
+                decay: `
+precision highp float;
+uniform sampler2D u_tex;
+uniform vec2 u_texel;
+uniform float u_value;
+void main() {
+    gl_FragColor = texture2D(u_tex, gl_FragCoord.xy * u_texel) * u_value;
+}`,
+            },
+
+            // Colour dropped in by the spoon. With rainbow on, the hue
+            // comes from the stroke direction at the moment of injection
+            // and is then carried by the dye, so it stays coherent as the
+            // flow folds it.
+            splatColor: (node, dx, dy) => {
+                const amt = node.dyeAmount != null ? node.dyeAmount : 0.6;
+                if (!node.rainbow) {
+                    const c = hexToRgb(node.tint || "#7FD4FF");
+                    return [c[0] * amt, c[1] * amt, c[2] * amt];
+                }
+                const a = Math.atan2(dy, dx);
+                return [
+                    (0.5 + 0.5 * Math.cos(a)) * amt,
+                    (0.5 + 0.5 * Math.cos(a + 2.0944)) * amt,
+                    (0.5 + 0.5 * Math.cos(a + 4.1888)) * amt,
+                ];
+            },
+
+            step: (S, node, ctx) => {
+                const dt = Math.min(ctx.dt, 1 / 30);
+                const simT = 1 / S.res.sim;
+                const dyeT = 1 / S.res.dye;
+                const pow = (base, d) => Math.pow(base, d * 60);
+
+                // 1. Forces: splat momentum and dye at the pointer.
+                if (ctx.moving) {
+                    const f = node.force != null ? node.force : 1.0;
+                    S.use("splat");
+                    S.f1("u_radius", node.radius != null ? node.radius : 0.1);
+                    S.f1("u_aspect", ctx.aspect);
+                    S.f2("u_point", ctx.px, ctx.py);
+
+                    S.f2("u_texel", simT, simT);
+                    S.smp("u_src", S.read("velocity"), 0);
+                    S.f3("u_amount", ctx.dx * f, ctx.dy * f, 0);
+                    S.blit(S.write("velocity"));
+                    S.swap("velocity");
+
+                    S.f2("u_texel", dyeT, dyeT);
+                    S.smp("u_src", S.read("dye"), 0);
+                    S.f3("u_amount", ctx.col[0], ctx.col[1], ctx.col[2]);
+                    S.blit(S.write("dye"));
+                    S.swap("dye");
+                }
+
+                // 2. Vorticity confinement.
+                S.use("curl");
+                S.f2("u_texel", simT, simT);
+                S.smp("u_vel", S.read("velocity"), 0);
+                S.blit(S.single("vorticity"));
+
+                S.use("confine");
+                S.f2("u_texel", simT, simT);
+                S.f1("u_eps", node.curl != null ? node.curl : 2.2);
+                S.f1("u_dt", dt);
+                S.smp("u_vel", S.read("velocity"), 0);
+                S.smp("u_curl", S.single("vorticity"), 1);
+                S.blit(S.write("velocity"));
+                S.swap("velocity");
+
+                // 3. Projection: divergence -> pressure -> subtract.
+                S.use("divergence");
+                S.f2("u_texel", simT, simT);
+                S.smp("u_vel", S.read("velocity"), 0);
+                S.blit(S.single("divergence"));
+
+                S.use("decay");
+                S.f2("u_texel", simT, simT);
+                S.f1("u_value", pow(node.pressure != null ? node.pressure : 0.8, dt));
+                S.smp("u_tex", S.read("pressure"), 0);
+                S.blit(S.write("pressure"));
+                S.swap("pressure");
+
+                S.use("jacobi");
+                S.f2("u_texel", simT, simT);
+                S.smp("u_div", S.single("divergence"), 1);
+                const iters = Math.max(1, Math.min(node.pressureIterations || 6, 40));
+                for (let k = 0; k < iters; k++) {
+                    S.smp("u_p", S.read("pressure"), 0);
+                    S.blit(S.write("pressure"));
+                    S.swap("pressure");
+                }
+
+                S.use("subtract");
+                S.f2("u_texel", simT, simT);
+                S.smp("u_p", S.read("pressure"), 0);
+                S.smp("u_vel", S.read("velocity"), 1);
+                S.blit(S.write("velocity"));
+                S.swap("velocity");
+
+                // 4. Advection: velocity by itself, then dye by velocity.
+                S.use("advect");
+                S.f1("u_dt", dt);
+                S.f2("u_texel", simT, simT);
+                S.smp("u_vel", S.read("velocity"), 0);
+                S.smp("u_src", S.read("velocity"), 0);
+                S.f1("u_diss", pow(node.decay != null ? node.decay : 0.985, dt));
+                S.blit(S.write("velocity"));
+                S.swap("velocity");
+
+                S.f2("u_texel", dyeT, dyeT);
+                S.smp("u_vel", S.read("velocity"), 0);
+                S.smp("u_src", S.read("dye"), 1);
+                S.f1("u_diss", pow(node.dyeFade != null ? node.dyeFade : 0.97, dt));
+                S.blit(S.write("dye"));
+                S.swap("dye");
+            },
+        },
+    },
+
+    // Liquid metaballs: a set of moving circles summed into a scalar
+    // field; where the field crosses a threshold is "inside" a blob, and
+    // neighbouring blobs fuse smoothly (the gooey / liquid look). One
+    // blob tracks the pointer; the rest float freely and bounce off the
+    // edges. Rendered as a refractive glassy overlay (lens distortion of
+    // the content beneath + a rim light + a soft specular glint).
+    //
+    // Own implementation of the classic metaball technique: the field is
+    // Sum(r_i^2 / |p - c_i|^2), and the surface normal is its analytic
+    // gradient. init()/tick() run the particle sim on the CPU and feed
+    // the positions in as a per-frame uniform array.
+    blobs: {
+        stage: "color",
+        overlay: true,
+        mips: true,
+        decl: (p) => `
+            uniform vec3 ${p}blobs[${MAX_BLOBS}];
+            uniform int ${p}count;
+            uniform vec3 ${p}tint;
+            uniform float ${p}refract;
+            uniform float ${p}rim;
+            uniform float ${p}alpha;
+            uniform float ${p}irid;
+            uniform float ${p}disp;
+            uniform float ${p}frost;
+            float ${p}hash(vec3 v) {
+                return fract(sin(dot(v, vec3(21.9898, 63.233, 41.719))) * 41739.317);
+            }
+            float ${p}noise(vec3 v) {
+                vec3 f = floor(v);
+                vec3 r = v - f;
+                r = r * r * (3.0 - 2.0 * r);
+                float c000 = ${p}hash(f);
+                float c100 = ${p}hash(f + vec3(1.0, 0.0, 0.0));
+                float c010 = ${p}hash(f + vec3(0.0, 1.0, 0.0));
+                float c110 = ${p}hash(f + vec3(1.0, 1.0, 0.0));
+                float c001 = ${p}hash(f + vec3(0.0, 0.0, 1.0));
+                float c101 = ${p}hash(f + vec3(1.0, 0.0, 1.0));
+                float c011 = ${p}hash(f + vec3(0.0, 1.0, 1.0));
+                float c111 = ${p}hash(f + vec3(1.0, 1.0, 1.0));
+                return mix(
+                    mix(mix(c000, c100, r.x), mix(c010, c110, r.x), r.y),
+                    mix(mix(c001, c101, r.x), mix(c011, c111, r.x), r.y), r.z);
+            }`,
+        code: (p) => `
+        {
+            float field = 0.0;
+            vec2 grad = vec2(0.0);
+            for (int bi = 0; bi < ${MAX_BLOBS}; bi++) {
+                if (bi >= ${p}count) break;
+                vec2 bd = frag - ${p}blobs[bi].xy;
+                float br = ${p}blobs[bi].z;
+                float dd = max(dot(bd, bd), 1.0);
+                field += (br * br) / dd;
+                grad += (-2.0 * (br * br) / (dd * dd)) * bd;
+            }
+            float bmask = smoothstep(0.6, 1.0, field);
+            if (bmask > 0.003) {
+                float gmag = length(grad);
+                vec2 g2 = gmag > 1e-6 ? -grad / gmag : vec2(0.0);
+                // Pseudo-3D surface normal from the 2D field. For a
+                // metaball field (sum of r^2/d^2), 1/sqrt(field) IS the
+                // normalized radial position: 0 at the centre, 1 at the
+                // surface. That yields a true hemisphere profile — the
+                // curvature (and therefore refraction) varies smoothly
+                // across the WHOLE disc, not just an edge annulus.
+                float s = clamp(inversesqrt(max(field, 1e-4)), 0.0, 1.0);
+                vec3 n = normalize(vec3(g2 * s, sqrt(max(1.0 - s * s, 0.004))));
+                vec3 rd = vec3(0.0, 0.0, -1.0);
+
+                // Dispersion: refract each channel with a slightly
+                // different index (water-glass ~1.33). Near the rim the
+                // exit direction flattens (|z| -> 0), so the sampling
+                // offsets stretch — producing the smooth concentric
+                // colour-fringed bands of a thick lens.
+                float ca = 0.03 * ${p}disp;
+                vec3 tR = refract(rd, n, 1.0 / (1.33 - ca));
+                vec3 tG = refract(rd, n, 1.0 / 1.33);
+                vec3 tB = refract(rd, n, 1.0 / (1.33 + ca));
+                vec2 oR = tR.xy * (${p}refract / max(abs(tR.z), 0.3));
+                vec2 oG = tG.xy * (${p}refract / max(abs(tG.z), 0.3));
+                vec2 oB = tB.xy * (${p}refract / max(abs(tB.z), 0.3));
+
+                // Blur grows with how far the ray was bent (mip bias), so
+                // strongly-refracted regions smear smoothly instead of
+                // showing sharp displaced copies. frost adds a base blur.
+                float lod = ${p}frost * 5.0 + log2(1.0 + length(oG) * 0.035);
+                vec2 px = 1.0 / u_res;
+                vec4 sG = texture2D(u_tex, clamp(uv + oG * px, 0.002, 0.998), lod);
+                vec3 refr;
+                refr.r = texture2D(u_tex, clamp(uv + oR * px, 0.002, 0.998), lod).r;
+                refr.g = sG.g;
+                refr.b = texture2D(u_tex, clamp(uv + oB * px, 0.002, 0.998), lod).b;
+                // Blend in (approximately) linear light for clean fringes.
+                refr = pow(max(refr, 0.0), vec3(2.2));
+
+                vec3 tintLin = pow(${p}tint, vec3(2.2));
+                vec3 bodyLin = mix(tintLin * 0.35, refr, sG.a);
+
+                // Glass darkens toward the silhouette (absorption), the
+                // opposite of an additive glow ring.
+                float edge = pow(1.0 - clamp(n.z, 0.0, 1.0), 1.5);
+                bodyLin *= 1.0 - 0.35 * ${p}rim * edge;
+                vec3 body = pow(max(bodyLin, 0.0), vec3(1.0 / 2.2));
+
+                // Sparse iridescent glints: two drifting value-noise
+                // fields sampled on the reflection direction, one warm
+                // one cool, sharpened hard so only sparkles survive.
+                vec3 rf = reflect(rd, n);
+                float nA = ${p}noise(rf * 2.3 + u_time * 0.5);
+                float nB = ${p}noise(rf * 2.3 - u_time * 0.5);
+                vec3 glint = pow(max(vec3(0.30, 0.52, 0.86) * nA +
+                                     vec3(0.80, 0.56, 0.34) * nB, 0.0), vec3(6.0));
+                body += glint * ${p}irid;
+
+                // Small hard specular from a fixed key light.
+                vec3 L = normalize(vec3(-0.5, 0.7, 0.6));
+                float spec = pow(max(dot(reflect(-L, n), vec3(0.0, 0.0, 1.0)), 0.0), 60.0);
+                body += spec * 0.35;
+
+                ovCol = body;
+                ovA = max(ovA, bmask * ${p}alpha);
+            }
+        }`,
+        uniforms: (node, dpr) => ({
+            tint: ["3fv", hexToRgb(node.color || "#EAF4EE")],
+            refract: ["1f", (node.refract != null ? node.refract : 70) * dpr],
+            rim: ["1f", node.rim != null ? node.rim : 0.6],
+            alpha: ["1f", node.alpha != null ? node.alpha : 1.0],
+            irid: ["1f", node.iridescence != null ? node.iridescence : 0.8],
+            disp: ["1f", node.dispersion != null ? node.dispersion : 1.0],
+            frost: ["1f", node.frost != null ? node.frost : 0.25],
+        }),
+        // CPU particle sim. The cursor blob is a TRAIL of shrinking
+        // spheres laid along recent pointer positions: when the pointer
+        // rests they coincide (radii normalized so the union is exactly
+        // the base circle), when it moves they spread into a gooey
+        // teardrop — the kinetic deformation. Extra blobs float freely.
+        init: (node, dpr, w, h) => {
+            const R = (node.radius || 46) * dpr;
+            const nTrail = Math.max(1, Math.min(node.trail != null ? node.trail : 7, MAX_BLOBS));
+            // Two radius profiles per trail slot, blended by how stretched
+            // the chain currently is:
+            //   idle    — normalized so coincident spheres union to exactly R
+            //   moving  — near-full-size spheres, so the spread chain reads
+            //             as a fat elastic tube instead of a bead string
+            const idleW = [];
+            let s2 = 0;
+            for (let i = 0; i < nTrail; i++) {
+                const wgt = Math.pow(0.86, i);
+                idleW.push(wgt);
+                s2 += wgt * wgt;
+            }
+            const norm = Math.sqrt(s2);
+            const trailIdleR = idleW.map((wgt) => (R * wgt) / norm);
+            const trailMoveR = idleW.map((_, i) => R * 0.85 * Math.pow(0.955, i));
+
+            const rand = (a, b) => a + Math.random() * (b - a);
+            const nDrift = Math.max(0, Math.min((node.count || 1) - 1, MAX_BLOBS - nTrail));
+            const drifters = [];
+            for (let i = 0; i < nDrift; i++) {
+                const ang = rand(0, Math.PI * 2);
+                const spd = rand(30, 80) * dpr;
+                drifters.push({
+                    x: rand(R, w - R), y: rand(R, h - R),
+                    r: R * rand(0.45, 0.8),
+                    vx: Math.cos(ang) * spd, vy: Math.sin(ang) * spd,
+                    phase: rand(0, Math.PI * 2),
+                });
+            }
+            const head = { x: w * 0.5, y: h * 0.55 };
+            // The chain: one node per trail sphere, all seeded on the head
+            // so it starts as a single collapsed circle. seg is the rest
+            // gap the tail relaxes toward the leader over.
+            const chain = [];
+            for (let i = 0; i < nTrail; i++) chain.push({ x: head.x, y: head.y });
+            return {
+                head, chain, nTrail, drifters,
+                trailIdleR, trailMoveR,
+                stretch: 0, seg: R * 0.9,
+            };
+        },
+        tick: (state, ctx) => {
+            const dt = Math.min(ctx.dt, 0.05);
+            const w = ctx.w, h = ctx.h;
+            const k = 1 - Math.exp(-dt * 9);
+            state.head.x += (ctx.mouseX - state.head.x) * k;
+            state.head.y += (ctx.mouseY - state.head.y) * k;
+
+            // Follow-the-leader: node 0 pins to the head, each following
+            // node eases toward the one ahead. At rest the whole chain
+            // relaxes onto the head (a single circle); while the pointer
+            // moves the tail lags behind and the chain spreads out — that
+            // spread is the stretch we measure below.
+            const chain = state.chain;
+            chain[0].x = state.head.x;
+            chain[0].y = state.head.y;
+            const follow = 1 - Math.exp(-dt * 16);
+            for (let i = 1; i < chain.length; i++) {
+                const lead = chain[i - 1], node = chain[i];
+                let dx = lead.x - node.x, dy = lead.y - node.y;
+                const d = Math.hypot(dx, dy) || 1e-4;
+                // Cap the lag so a fast flick can't tear the tube apart,
+                // then ease the remainder — gives an elastic pull.
+                const maxLag = state.seg;
+                if (d > maxLag) { node.x += dx * (1 - maxLag / d); node.y += dy * (1 - maxLag / d); }
+                node.x += (lead.x - node.x) * follow;
+                node.y += (lead.y - node.y) * follow;
+            }
+
+            // Stretch = how far the tail trails the head, normalised by the
+            // chain's natural reach. Smoothed so radii swell/settle softly.
+            const tail = chain[chain.length - 1];
+            const spread = Math.hypot(tail.x - state.head.x, tail.y - state.head.y);
+            const reach = Math.max(1, state.seg * (state.nTrail - 1));
+            const target = Math.min(1, spread / reach);
+            state.stretch += (target - state.stretch) * (1 - Math.exp(-dt * 8));
+
+            for (const b of state.drifters) {
+                b.x += b.vx * dt;
+                b.y += b.vy * dt;
+                if (b.x < b.r) { b.x = b.r; b.vx = Math.abs(b.vx); }
+                else if (b.x > w - b.r) { b.x = w - b.r; b.vx = -Math.abs(b.vx); }
+                if (b.y < b.r) { b.y = b.r; b.vy = Math.abs(b.vy); }
+                else if (b.y > h - b.r) { b.y = h - b.r; b.vy = -Math.abs(b.vy); }
+                b.phase += dt * 1.6;
+            }
+
+            const arr = new Float32Array(MAX_BLOBS * 3);
+            const st = state.stretch;
+            for (let i = 0; i < state.nTrail; i++) {
+                const p = chain[i];
+                arr[i * 3] = p.x;
+                arr[i * 3 + 1] = p.y;
+                // Idle → normalised radii (spheres union to exactly R);
+                // stretched → near-full radii so the spread reads as a fat
+                // elastic tube rather than a string of shrinking beads.
+                arr[i * 3 + 2] = state.trailIdleR[i] + (state.trailMoveR[i] - state.trailIdleR[i]) * st;
+            }
+            state.drifters.forEach((b, j) => {
+                const i = state.nTrail + j;
+                arr[i * 3] = b.x;
+                arr[i * 3 + 1] = b.y;
+                arr[i * 3 + 2] = b.r * (1.0 + 0.12 * Math.sin(b.phase));
+            });
+            return [
+                { name: "blobs", kind: "3fv", value: arr },
+                { name: "count", kind: "1i", value: state.nTrail + state.drifters.length },
+            ];
+        },
+    },
 };
 
 function hexToRgb(c) {
@@ -157,30 +775,34 @@ function buildFragmentShader(nodes) {
         const def = REGISTRY[node.op];
         if (!def) return;
         const p = `u${i}_`;
-        decls += def.decl(p) + "\n";
-        const snippet = def.code(p, node) + "\n";
-        if (def.stage === "warp") warp += snippet;
-        else if (def.stage === "cell") cell += snippet;
-        else if (def.stage === "displace") displace += snippet;
-        else color += snippet;
+        decls += def.decl(p, node) + "\n";
+        // An op may contribute to more than one stage (stage: ["warp",
+        // "color"]) — code() then receives the stage it is emitting for.
+        // A plain string stage keeps the original single-snippet form.
+        const stages = Array.isArray(def.stage) ? def.stage : [def.stage];
+        stages.forEach((st) => {
+            const snippet = def.code(p, node, st) + "\n";
+            if (st === "warp") warp += snippet;
+            else if (st === "cell") cell += snippet;
+            else if (st === "displace") displace += snippet;
+            else color += snippet;
+        });
     });
-    // When an edges op is present it emits a border layer (edgeCol /
-    // edgeCov) and the content (text) is composited OVER it, so borders
-    // sit below the glyphs. Otherwise cells get the default subtle
-    // darkening so the tiling still reads.
+    // Compositing, in three layers (all straight-alpha):
+    //   1. border layer (edgeCol/edgeCov, from an edges op) UNDER
+    //   2. content layer (col over tex.a)                    then
+    //   3. overlay layer (ovCol/ovA, from an overlay op e.g. blobs) ON TOP
+    // Absent ops leave their contribution at zero, so this reduces to
+    // the plain content for every prior combination. The default seam
+    // darkening only applies when a cell op runs without an edges op.
     const hasEdges = nodes.some((n) => n.op === "edges");
-    const finalBlock = hasEdges
-        ? `    // text (col, tex.a) OVER border (edgeCol, edgeCov): straight alpha
-    float outA = tex.a + edgeCov * (1.0 - tex.a);
-    vec3 outRGB = (col * tex.a + edgeCol * edgeCov * (1.0 - tex.a)) / max(outA, 1e-4);
-    gl_FragColor = vec4(outRGB, outA);`
-        : `    col *= 1.0 - edge * 0.55;
-    gl_FragColor = vec4(col, tex.a);`;
+    const defaultSeam = hasEdges ? "" : "    col *= 1.0 - edge * 0.55;";
     return `
 precision highp float;
 uniform sampler2D u_tex;
 uniform vec2 u_res;
 uniform vec2 u_mouse;
+uniform float u_time;
 ${decls}
 void main() {
     vec2 frag = vec2(gl_FragCoord.x, u_res.y - gl_FragCoord.y);
@@ -196,8 +818,17 @@ ${displace}
     vec3 col = tex.rgb;
     vec3 edgeCol = vec3(1.0);
     float edgeCov = 0.0;
+    vec3 ovCol = vec3(0.0);
+    float ovA = 0.0;
 ${color}
-${finalBlock}
+${defaultSeam}
+    // content OVER border
+    float baseA = tex.a + edgeCov * (1.0 - tex.a);
+    vec3 baseRGB = (col * tex.a + edgeCol * edgeCov * (1.0 - tex.a)) / max(baseA, 1e-4);
+    // overlay OVER (content+border)
+    float outA = ovA + baseA * (1.0 - ovA);
+    vec3 outRGB = (ovCol * ovA + baseRGB * baseA * (1.0 - ovA)) / max(outA, 1e-4);
+    gl_FragColor = vec4(outRGB, outA);
 }`;
 }
 
@@ -247,7 +878,25 @@ function applyRasterPipeline(el, rasterNodes) {
     if (rect.width < 2 || rect.height < 2) return null;
 
     const dpr = Math.min(window.devicePixelRatio || 1, 2);
-    const wantLive = rasterNodes.some((n) => n.live === true);
+    const isOverlay = rasterNodes.some((n) => (REGISTRY[n.op] || {}).overlay);
+    // Stacking: a pipeline may mix in-place ops (hexalize/offset/duotone/
+    // edges) with an overlay op (blobs). The single shader composites them
+    // in one pass, but the HOST visibility differs — only a PURELY overlay
+    // chain leaves the host visible (the lens refracts untouched content).
+    // The moment an in-place op joins, the canvas fully carries the look,
+    // so the host must be hidden or the original content ghosts through.
+    const pureOverlay = rasterNodes.every((n) => (REGISTRY[n.op] || {}).overlay);
+    // Live-first (HTML-in-Canvas). The live backend captures content that
+    // lives INSIDE the canvas (texElementImage2D over the restructured
+    // subtree) — the same model canvasUI's bubble uses: content in the
+    // canvas, the lens drawn over that live capture. So live is viable
+    // whenever the host is hidden and its content moves into the canvas,
+    // i.e. every chain EXCEPT a pure-overlay one (blobs alone floating
+    // over untouched DOM — nothing is restructured, so there is no live
+    // subtree to sample; that case stays snapshot). A combined chain
+    // (blobs + hexalize/offset/…) hides the host and therefore runs live,
+    // lens included. Opt out per pipeline with `live: false` on any node.
+    const wantLive = !pureOverlay && !rasterNodes.some((n) => n.live === false);
     const apiAvailable =
         (typeof WebGL2RenderingContext !== "undefined" &&
             "texElementImage2D" in WebGL2RenderingContext.prototype) ||
@@ -263,11 +912,15 @@ function applyRasterPipeline(el, rasterNodes) {
     // browser prepares the canvas for laid-out children (origin trial).
     if (live) canvas.setAttribute("layoutsubtree", "");
     const ctxOpts = { alpha: true, premultipliedAlpha: false };
-    // The origin trial wires texElementImage2D primarily on WebGL2 —
-    // prefer it in live mode, fall back to WebGL1 (same GLSL either way).
-    const gl = (live && canvas.getContext("webgl2", ctxOpts)) ||
+    // WebGL2-first everywhere: NPOT mipmaps (offset-scaled blur for the
+    // glassy ops) and texElementImage2D both need it; WebGL1 remains as
+    // a sharp-rendering fallback (mip blur simply disables).
+    const gl = canvas.getContext("webgl2", ctxOpts) ||
         canvas.getContext("webgl", ctxOpts);
     if (!gl) return null;
+    const isGL2 = (typeof WebGL2RenderingContext !== "undefined") &&
+        (gl instanceof WebGL2RenderingContext);
+    const needMips = isGL2 && rasterNodes.some((n) => (REGISTRY[n.op] || {}).mips);
     if (live && !("texElementImage2D" in gl)) {
         console.info("[nodality] texElementImage2D missing on the created context - snapshot fallback.");
         canvas.removeAttribute("layoutsubtree");
@@ -324,45 +977,266 @@ function applyRasterPipeline(el, rasterNodes) {
     const prog = gl.createProgram();
     gl.attachShader(prog, compile(gl.VERTEX_SHADER, VS));
     gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, buildFragmentShader(rasterNodes)));
+    // Pin "a" to location 0 so a field-simulation program (which shares
+    // this vertex buffer and attribute array) can be swapped in without
+    // respecifying the pointer.
+    gl.bindAttribLocation(prog, 0, "a");
     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);
-    const aLoc = gl.getAttribLocation(prog, "a");
-    gl.enableVertexAttribArray(aLoc);
-    gl.vertexAttribPointer(aLoc, 2, gl.FLOAT, false, 0, 0);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
     const U = (n) => gl.getUniformLocation(prog, n);
 
+    const setUniform = (loc, kind, value) => {
+        if (kind === "1f") gl.uniform1f(loc, value);
+        else if (kind === "1i") gl.uniform1i(loc, value);
+        else if (kind === "2fv") gl.uniform2fv(loc, value);
+        else if (kind === "3fv") gl.uniform3fv(loc, value);
+    };
+
     // Static uniforms from the node data.
     rasterNodes.forEach((node, i) => {
         const def = REGISTRY[node.op];
         if (!def || !def.uniforms) return;
         const us = def.uniforms(node, dpr);
         for (const key in us) {
-            const [kind, value] = us[key];
-            const loc = U(`u${i}_${key}`);
-            if (kind === "1f") gl.uniform1f(loc, value);
-            else if (kind === "2fv") gl.uniform2fv(loc, value);
-            else if (kind === "3fv") gl.uniform3fv(loc, value);
+            setUniform(U(`u${i}_${key}`), us[key][0], us[key][1]);
+        }
+    });
+
+    // Ops with a CPU simulation (e.g. blobs) get per-frame state and
+    // feed dynamic uniforms each draw (see the render loop below).
+    const dynamicOps = [];
+    rasterNodes.forEach((node, i) => {
+        const def = REGISTRY[node.op];
+        if (def && typeof def.init === "function") {
+            dynamicOps.push({ i, def, state: def.init(node, dpr, canvas.width, canvas.height) });
+        }
+    });
+    let lastFrame = (typeof performance !== "undefined") ? performance.now() : 0;
+
+    // ── Fluid solvers (ops with a `solver` descriptor, e.g. stir) ─────
+    // An op may declare a set of render targets and fragment programs
+    // plus a step() that sequences the passes. The pipeline allocates
+    // everything here, runs step() once per frame, and binds the named
+    // result textures into the main composite pass.
+    //
+    // Float render targets are required (velocity and pressure are
+    // signed and need range well outside [0,1]). Without them the op
+    // disables itself rather than rendering something wrong.
+    const solverOps = [];
+    const makeSolver = (node, i) => {
+        const def = REGISTRY[node.op];
+        if (!isGL2 || !gl.getExtension("EXT_color_buffer_float")) {
+            console.info("[nodality] '" + node.op +
+                "' needs WebGL2 float render targets - op skipped.");
+            return null;
+        }
+        gl.getExtension("OES_texture_float_linear");
+        const res = def.solver.resolutions(node);
+        const FMT = {
+            r: [gl.R16F, gl.RED],
+            rg: [gl.RG16F, gl.RG],
+            rgba: [gl.RGBA16F, gl.RGBA],
+        };
+
+        const made = [];
+        const mkTarget = (size, fmt, smooth) => {
+            const [internal, format] = FMT[fmt];
+            const t = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, t);
+            const flt = smooth ? gl.LINEAR : gl.NEAREST;
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, flt);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, flt);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+            gl.texImage2D(gl.TEXTURE_2D, 0, internal, size, size, 0,
+                format, gl.HALF_FLOAT, null);
+            const fbo = gl.createFramebuffer();
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
+                gl.TEXTURE_2D, t, 0);
+            const ok = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
+            gl.viewport(0, 0, size, size);
+            gl.clearColor(0, 0, 0, 1);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            const rec = { tex: t, fbo, size, ok };
+            made.push(rec);
+            return rec;
+        };
+
+        const targets = {};
+        let allOk = true;
+        for (const name in def.solver.targets) {
+            const spec = def.solver.targets[name];
+            const size = res[spec.res];
+            if (spec.double) {
+                targets[name] = {
+                    a: mkTarget(size, spec.fmt, spec.smooth),
+                    b: mkTarget(size, spec.fmt, spec.smooth),
+                };
+                allOk = allOk && targets[name].a.ok && targets[name].b.ok;
+            } else {
+                targets[name] = { a: mkTarget(size, spec.fmt, spec.smooth) };
+                allOk = allOk && targets[name].a.ok;
+            }
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+        const cleanup = () => made.forEach((t) => {
+            gl.deleteFramebuffer(t.fbo);
+            gl.deleteTexture(t.tex);
+        });
+
+        if (!allOk) {
+            console.info("[nodality] '" + node.op +
+                "' float targets incomplete - op skipped.");
+            cleanup();
+            return null;
+        }
+
+        const progs = {};
+        try {
+            for (const name in def.solver.programs) {
+                const pr = gl.createProgram();
+                gl.attachShader(pr, compile(gl.VERTEX_SHADER, VS));
+                gl.attachShader(pr, compile(gl.FRAGMENT_SHADER, def.solver.programs[name]));
+                gl.bindAttribLocation(pr, 0, "a");
+                gl.linkProgram(pr);
+                if (!gl.getProgramParameter(pr, gl.LINK_STATUS)) {
+                    throw new Error(name + ": " + gl.getProgramInfoLog(pr));
+                }
+                progs[name] = { prog: pr, loc: {} };
+            }
+        } catch (e) {
+            console.warn("[nodality] '" + node.op + "' solver programs failed:", e);
+            cleanup();
+            for (const n in progs) gl.deleteProgram(progs[n].prog);
+            return null;
         }
+
+        gl.useProgram(prog);
+        return {
+            i, node, def, res, targets, progs, cleanup,
+            prevX: 0.5, prevY: 0.5, primed: false,
+        };
+    };
+    rasterNodes.forEach((node, i) => {
+        const def = REGISTRY[node.op];
+        if (!def || !def.solver) return;
+        const s = makeSolver(node, i);
+        if (s) solverOps.push(s);
     });
 
+    // One frame of a solver. `S` is the small API the op's step() drives.
+    const stepSolver = (s, dt) => {
+        let cur = null;
+        const S = {
+            res: s.res,
+            use(name) {
+                cur = s.progs[name];
+                gl.useProgram(cur.prog);
+            },
+            u(name) {
+                if (!(name in cur.loc)) cur.loc[name] = gl.getUniformLocation(cur.prog, name);
+                return cur.loc[name];
+            },
+            f1(n, v) { gl.uniform1f(S.u(n), v); },
+            f2(n, x, y) { gl.uniform2f(S.u(n), x, y); },
+            f3(n, x, y, z) { gl.uniform3f(S.u(n), x, y, z); },
+            smp(n, target, unit) {
+                gl.activeTexture(gl.TEXTURE0 + unit);
+                gl.bindTexture(gl.TEXTURE_2D, target.tex);
+                gl.uniform1i(S.u(n), unit);
+            },
+            read: (name) => s.targets[name].a,
+            write: (name) => s.targets[name].b,
+            single: (name) => s.targets[name].a,
+            swap(name) {
+                const t = s.targets[name];
+                const tmp = t.a; t.a = t.b; t.b = tmp;
+            },
+            blit(target) {
+                gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo);
+                gl.viewport(0, 0, target.size, target.size);
+                gl.drawArrays(gl.TRIANGLES, 0, 3);
+            },
+        };
+
+        // Pointer in field space (bottom-up [0,1]) and the velocity it
+        // picked up since the previous frame - the spoon.
+        const px = mouse[0] / canvas.width;
+        const py = 1 - mouse[1] / canvas.height;
+        let dx = 0, dy = 0;
+        if (s.primed) {
+            dx = (px - s.prevX) / Math.max(dt, 1e-3);
+            dy = (py - s.prevY) / Math.max(dt, 1e-3);
+        }
+        s.prevX = px; s.prevY = py; s.primed = true;
+        const moving = Math.abs(dx) + Math.abs(dy) > 1e-3;
+
+        s.def.solver.step(S, s.node, {
+            dt, px, py, dx, dy, moving,
+            aspect: canvas.width / Math.max(canvas.height, 1),
+            col: s.def.solver.splatColor(s.node, dx, dy),
+        });
+    };
+
     const tex = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, tex);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
+        needMips ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    // Regenerate the mip chain after every content upload so the
+    // offset-scaled blur (texture2D bias) has levels to sample.
+    const finishUpload = () => { if (needMips) gl.generateMipmap(gl.TEXTURE_2D); };
 
     let textureReady = false;
     let destroyed = false;
     let mode = live ? "live" : "snapshot";
 
+    // For an overlay effect whose content is (or contains) a same-origin
+    // image, upload that image straight into the texture. This bypasses
+    // the foreignObject snapshot (which can't rasterise <img>) and gives
+    // the lens a real photo to refract — the glassy, distorting look.
+    const contentImg = () => {
+        const im = (el.tagName === "IMG") ? el
+            : (el.querySelector ? el.querySelector("img") : null);
+        return (im && im.complete && im.naturalWidth > 0) ? im : null;
+    };
+    let imgListenerBound = false;
+
     // Snapshot the host's children (excluding our own canvas). Once the
     // texture is live, the host's own painting is hidden via the
     // visibility trick (the canvas child re-shows itself) so transparent
     // hosts — e.g. a bare headline — don't ghost-double under the effect.
     const snapshotCapture = () => {
+        // Overlay + image content: use the image directly as the texture.
+        if (isOverlay) {
+            const im = contentImg();
+            if (im) {
+                try {
+                    gl.bindTexture(gl.TEXTURE_2D, tex);
+                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, im);
+                    finishUpload();
+                    textureReady = true;
+                    return Promise.resolve();
+                } catch (e) {
+                    // Cross-origin taint -> fall through to snapshot.
+                }
+            } else if (!imgListenerBound) {
+                // Image not decoded yet: recapture once it loads.
+                const im2 = (el.tagName === "IMG") ? el : (el.querySelector && el.querySelector("img"));
+                if (im2) {
+                    imgListenerBound = true;
+                    im2.addEventListener("load", () => { if (!destroyed) snapshotCapture(); }, { once: true });
+                }
+            }
+        }
         canvas.style.display = "none";
         const prevVisibility = el.style.visibility;
         el.style.visibility = "";
@@ -371,8 +1245,13 @@ function applyRasterPipeline(el, rasterNodes) {
                 if (destroyed) return;
                 gl.bindTexture(gl.TEXTURE_2D, tex);
                 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
+                finishUpload();
                 textureReady = true;
-                el.style.visibility = "hidden";
+                // In-place transforms hide the host (the canvas replaces
+                // its look). A pure-overlay chain keeps it visible so the
+                // real content shows through the bubble; a mixed chain
+                // (in-place + overlay) hides it — the canvas carries all.
+                el.style.visibility = pureOverlay ? "" : "hidden";
                 canvas.style.visibility = "visible";
             })
             .catch((e) => {
@@ -422,6 +1301,7 @@ function applyRasterPipeline(el, rasterNodes) {
         for (const i of order) {
             try {
                 gl.texElementImage2D.apply(gl, forms[i]);
+                finishUpload();
                 if (liveForm < 0) {
                     liveForm = i;
                     console.info("[nodality] texElementImage2D signature discovered: form",
@@ -484,11 +1364,47 @@ function applyRasterPipeline(el, rasterNodes) {
     const draw = () => {
         if (destroyed) return;
         if (visible && textureReady) {
+            const now = (typeof performance !== "undefined") ? performance.now() : lastFrame + 16;
+            const dt = Math.max(0, (now - lastFrame) / 1000);
+
+            // 1. Advance stateful fluid solvers into their own off-screen
+            //    targets (this rebinds framebuffer/program/textures).
+            for (const s of solverOps) stepSolver(s, dt);
+
+            // 2. Composite pass, back on the visible framebuffer.
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.useProgram(prog);
             gl.viewport(0, 0, canvas.width, canvas.height);
             gl.clearColor(0, 0, 0, 0);
             gl.clear(gl.COLOR_BUFFER_BIT);
             gl.uniform2f(U("u_res"), canvas.width, canvas.height);
             gl.uniform2f(U("u_mouse"), mouse[0], mouse[1]);
+            gl.uniform1f(U("u_time"), now / 1000);
+            // Advance and upload per-frame CPU simulations.
+            if (dynamicOps.length > 0) {
+                const ctx = { w: canvas.width, h: canvas.height, mouseX: mouse[0], mouseY: mouse[1], dt: dt, t: now / 1000 };
+                for (const d of dynamicOps) {
+                    const ups = d.def.tick(d.state, ctx);
+                    for (const u of ups) setUniform(U(`u${d.i}_${u.name}`), u.kind, u.value);
+                }
+            }
+            // Content on unit 0, then each solver's named result
+            // textures (velocity, dye, ...) on units above it.
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, tex);
+            gl.uniform1i(U("u_tex"), 0);
+            let unit = 1;
+            for (const s of solverOps) {
+                const smps = s.def.solver.samplers;
+                for (const key in smps) {
+                    gl.activeTexture(gl.TEXTURE0 + unit);
+                    gl.bindTexture(gl.TEXTURE_2D, s.targets[smps[key]].a.tex);
+                    gl.uniform1i(U(`u${s.i}_${key}`), unit);
+                    unit++;
+                }
+            }
+            gl.activeTexture(gl.TEXTURE0); // texture uploads assume unit 0
+            lastFrame = now;
             gl.drawArrays(gl.TRIANGLES, 0, 3);
         }
         raf = requestAnimationFrame(draw);
@@ -583,6 +1499,11 @@ function applyRasterPipeline(el, rasterNodes) {
             el.removeEventListener("mousemove", onMove);
             el.removeEventListener("touchmove", onMove);
             canvas.removeEventListener("paint", onPaint);
+            for (const s of solverOps) {
+                s.cleanup();
+                for (const n in s.progs) gl.deleteProgram(s.progs[n].prog);
+            }
+            solverOps.length = 0;
             while (sourceEl !== el && sourceEl.firstChild) el.appendChild(sourceEl.firstChild);
             el.style.visibility = "";
             canvas.remove();