@3driseai/3drise-viewer 0.1.28 → 0.1.29

package/dist/components/text/engine/looks/liquidMetal.js

@@ -0,0 +1,655 @@
+import * as THREE from 'three';
+import { prepare, applyAnim, DRAW_METHODS, ERASE_METHODS } from '../methods.js';
+import { setReveal, uniformsBase } from '../ribbon.js';
+import { buildField, fieldFrag } from '../fieldkit.js';
+// =========================================================================================
+// liquidMetal — mercury / chrome lettering.
+//
+// THE MATHS
+//  * Height field. Every letter is a puddle of liquid metal held by surface tension. With d = inside distance (-signed
+//    distance of the field kit) the free surface is a circular arc meeting the substrate at 90 degrees:
+//        h(d) = sqrt(R^2 - (R - min(d,R))^2)          (R = thickness knob; shrinks with the metal when it is thinner than R)
+//    so the interior is flat-topped and the rim is a rounded meniscus. The normal of that arc is analytic:
+//        n = ( (min(d,R) - R)/R * grad d ,  h/R )     (grad d = unit gradient of the distance field)
+//    A tiny broad crown (~ (w-d)/w) and slow surface waves (three travelling swells + a few capillary ring-wave packets
+//    that spread from seeded points, all closed form in time) tilt the normal: that is the idle life of the metal.
+//  * Shading is a pure mirror: the normal reflects the view ray into a procedural studio environment (horizon gradient,
+//    warm key softbox, cool fill softbox, top strip, a thin strip light that slowly sweeps = the travelling streak, back
+//    rims). Colour comes from physics: Schlick Fresnel between the metal's own normal-incidence reflectance (colour) and
+//    its grazing tint (colour2), never from a diffuse colour. Grazing pixels blur the environment along the contour
+//    (anisotropic taps), and the metal meets the surface with a dark contact line.
+//  * Geometry that is not in the distance field (where the stroke runs, how wide it is locally) is baked once into a
+//    second texture: a geodesic (eikonal) distance s along each glyph from one end, its normalised value, and the local
+//    half width w. Draw 'flow' uses it to run a bulb of metal along each stroke; erase 'beads' uses it for a
+//    Rayleigh-Plateau jet: radius r(s) = w (1 - m (1 - cos(2 pi s/lambda))/2), lambda = 9 w, m grows until the necks
+//    pinch, the beads relax into round drops that evaporate.
+// =========================================================================================
+const hex = (h) => new THREE.Color(h);
+function mulberry32(a) { return function () { a |= 0; a = (a + 0x6D2B79F5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; }
+// ---- bake: geodesic coordinate s, local half width w, u = s/smax, component phase -------------------------------------
+function bakeAux(field) {
+    const f0 = field.f0.image.data, [W, H] = field.size, fh = THREE.DataUtils.fromHalfFloat;
+    const w2 = Math.ceil(W / 2), h2 = Math.ceil(H / 2), N = w2 * h2, cell = field.ext.z / w2;
+    const hf = THREE.DataUtils.toHalfFloat;
+    const dIn = new Float32Array(N), mask = new Uint8Array(N);
+    for (let j = 0; j < h2; j++)
+        for (let i = 0; i < w2; i++) {
+            const k = j * w2 + i;
+            const x = Math.min(W - 1, 2 * i), y = Math.min(H - 1, 2 * j);
+            const d = -fh(f0[(y * W + x) * 4]);
+            dIn[k] = d;
+            mask[k] = d > 0 ? 1 : 0;
+        }
+    // connected components (4-neighbourhood)
+    const comp = new Int32Array(N).fill(-1);
+    let nc = 0;
+    const stack = [];
+    const firstOf = [];
+    for (let k0 = 0; k0 < N; k0++) {
+        if (!mask[k0] || comp[k0] >= 0)
+            continue;
+        comp[k0] = nc;
+        firstOf.push(k0);
+        stack.push(k0);
+        while (stack.length) {
+            const k = stack.pop(), i = k % w2, j = (k - i) / w2;
+            if (i > 0 && mask[k - 1] && comp[k - 1] < 0) {
+                comp[k - 1] = nc;
+                stack.push(k - 1);
+            }
+            if (i < w2 - 1 && mask[k + 1] && comp[k + 1] < 0) {
+                comp[k + 1] = nc;
+                stack.push(k + 1);
+            }
+            if (j > 0 && mask[k - w2] && comp[k - w2] < 0) {
+                comp[k - w2] = nc;
+                stack.push(k - w2);
+            }
+            if (j < h2 - 1 && mask[k + w2] && comp[k + w2] < 0) {
+                comp[k + w2] = nc;
+                stack.push(k + w2);
+            }
+        }
+        nc++;
+    }
+    // fast-sweeping eikonal solver |grad u| = 1 inside the mask (geodesic distance from the seeds)
+    const INF = 1e9, u = new Float32Array(N);
+    const solve = () => {
+        for (let it = 0; it < 14; it++) {
+            let ch = false;
+            for (let sw = 0; sw < 4; sw++) {
+                const j0 = sw & 1 ? h2 - 1 : 0, j1 = sw & 1 ? -1 : h2, dj = sw & 1 ? -1 : 1, i0 = sw & 2 ? w2 - 1 : 0, i1 = sw & 2 ? -1 : w2, di = sw & 2 ? -1 : 1;
+                for (let j = j0; j !== j1; j += dj)
+                    for (let i = i0; i !== i1; i += di) {
+                        const k = j * w2 + i;
+                        if (!mask[k])
+                            continue;
+                        let a = INF, b = INF;
+                        if (i > 0)
+                            a = u[k - 1];
+                        if (i < w2 - 1 && u[k + 1] < a)
+                            a = u[k + 1];
+                        if (j > 0)
+                            b = u[k - w2];
+                        if (j < h2 - 1 && u[k + w2] < b)
+                            b = u[k + w2];
+                        if (a >= INF && b >= INF)
+                            continue;
+                        let nu;
+                        if (a >= INF)
+                            nu = b + cell;
+                        else if (b >= INF)
+                            nu = a + cell;
+                        else if (Math.abs(a - b) >= cell)
+                            nu = Math.min(a, b) + cell;
+                        else
+                            nu = (a + b + Math.sqrt(2 * cell * cell - (a - b) * (a - b))) / 2;
+                        if (nu < u[k] - 1e-6) {
+                            u[k] = nu;
+                            ch = true;
+                        }
+                    }
+            }
+            if (!ch)
+                break;
+        }
+    };
+    u.fill(INF);
+    for (const k of firstOf)
+        u[k] = 0;
+    solve();
+    const far = new Int32Array(nc).fill(-1);
+    for (let k = 0; k < N; k++)
+        if (mask[k] && u[k] < INF && (far[comp[k]] < 0 || u[k] > u[far[comp[k]]]))
+            far[comp[k]] = k;
+    u.fill(INF);
+    for (let c = 0; c < nc; c++)
+        if (far[c] >= 0)
+            u[far[c]] = 0;
+    solve();
+    const smax = new Float32Array(nc).fill(1e-3);
+    for (let k = 0; k < N; k++)
+        if (mask[k] && u[k] < INF)
+            smax[comp[k]] = Math.max(smax[comp[k]], u[k]);
+    // local half width: max inside distance in each slice of constant s (binned), dilated and blurred along s
+    const BIN = 0.02, nb = new Int32Array(nc), off = new Int32Array(nc + 1);
+    for (let c = 0; c < nc; c++) {
+        nb[c] = Math.floor(smax[c] / BIN) + 3;
+        off[c + 1] = off[c] + nb[c];
+    }
+    const bm = new Float32Array(off[nc] + 1);
+    for (let k = 0; k < N; k++)
+        if (mask[k] && u[k] < INF) {
+            const c = comp[k], b = off[c] + Math.floor(u[k] / BIN);
+            if (dIn[k] > bm[b])
+                bm[b] = dIn[k];
+        }
+    const bs = new Float32Array(bm.length), bt = new Float32Array(bm.length);
+    for (let c = 0; c < nc; c++) {
+        const o = off[c], n = nb[c];
+        for (let b = 0; b < n; b++) {
+            let m = 0;
+            for (let q = -3; q <= 3; q++) {
+                const bb = b + q;
+                if (bb >= 0 && bb < n)
+                    m = Math.max(m, bm[o + bb]);
+            }
+            bs[o + b] = m;
+        }
+        for (let b = 0; b < n; b++) {
+            let a = 0, cnt = 0;
+            for (let q = -3; q <= 3; q++) {
+                const bb = b + q;
+                if (bb >= 0 && bb < n) {
+                    a += bs[o + bb];
+                    cnt++;
+                }
+            }
+            bt[o + b] = a / cnt;
+        }
+    }
+    const rnd = mulberry32(7);
+    const phase = [];
+    for (let c = 0; c < nc; c++)
+        phase.push(rnd() * Math.PI * 2);
+    const S = new Float32Array(N), Wd = new Float32Array(N), U = new Float32Array(N), P = new Float32Array(N), has = new Uint8Array(N);
+    for (let k = 0; k < N; k++)
+        if (mask[k] && u[k] < INF) {
+            const c = comp[k], f = u[k] / BIN, b0 = Math.floor(f), fr = f - b0, o = off[c];
+            S[k] = u[k];
+            Wd[k] = Math.max(0.006, bt[o + b0] * (1 - fr) + bt[o + Math.min(nb[c] - 1, b0 + 1)] * fr);
+            U[k] = u[k] / smax[c];
+            P[k] = phase[c];
+            has[k] = 1;
+        }
+    // dilate outward a few texels so bilinear sampling at and just beyond the contour stays valid
+    for (let it = 0; it < 8; it++) {
+        const add = [];
+        for (let j = 0; j < h2; j++)
+            for (let i = 0; i < w2; i++) {
+                const k = j * w2 + i;
+                if (has[k])
+                    continue;
+                let q = -1;
+                if (i > 0 && has[k - 1])
+                    q = k - 1;
+                else if (i < w2 - 1 && has[k + 1])
+                    q = k + 1;
+                else if (j > 0 && has[k - w2])
+                    q = k - w2;
+                else if (j < h2 - 1 && has[k + w2])
+                    q = k + w2;
+                if (q >= 0)
+                    add.push(k, q);
+            }
+        for (let a = 0; a < add.length; a += 2) {
+            const k = add[a], q = add[a + 1];
+            S[k] = S[q];
+            Wd[k] = Wd[q];
+            U[k] = U[q];
+            P[k] = P[q];
+        }
+        for (let a = 0; a < add.length; a += 2)
+            has[add[a]] = 1;
+    }
+    // gradients: of a Gaussian-smoothed distance (soft mitres at corners, ridge-fade on the medial axis) and of s (stroke direction)
+    const sg = 0.022 / cell, rad = Math.ceil(3 * sg), ker = [];
+    let ksum = 0;
+    for (let q = -rad; q <= rad; q++) {
+        const v = Math.exp(-0.5 * q * q / (sg * sg));
+        ker.push(v);
+        ksum += v;
+    }
+    for (let q = 0; q < ker.length; q++)
+        ker[q] /= ksum;
+    const tmp = new Float32Array(N), bl = new Float32Array(N);
+    for (let j = 0; j < h2; j++)
+        for (let i = 0; i < w2; i++) {
+            let a = 0;
+            for (let q = -rad; q <= rad; q++)
+                a += ker[q + rad] * dIn[j * w2 + Math.min(w2 - 1, Math.max(0, i + q))];
+            tmp[j * w2 + i] = a;
+        }
+    for (let j = 0; j < h2; j++)
+        for (let i = 0; i < w2; i++) {
+            let a = 0;
+            for (let q = -rad; q <= rad; q++)
+                a += ker[q + rad] * tmp[Math.min(h2 - 1, Math.max(0, j + q)) * w2 + i];
+            bl[j * w2 + i] = a;
+        }
+    const GD = new Uint16Array(N * 4), at = (a, i, j) => a[Math.min(h2 - 1, Math.max(0, j)) * w2 + Math.min(w2 - 1, Math.max(0, i))];
+    for (let j = 0; j < h2; j++)
+        for (let i = 0; i < w2; i++) {
+            const k = j * w2 + i, o = 4 * k;
+            GD[o] = hf((at(bl, i + 1, j) - at(bl, i - 1, j)) / (2 * cell));
+            GD[o + 1] = hf((at(bl, i, j + 1) - at(bl, i, j - 1)) / (2 * cell));
+            GD[o + 2] = hf((at(S, i + 1, j) - at(S, i - 1, j)) / (2 * cell));
+            GD[o + 3] = hf((at(S, i, j + 1) - at(S, i, j - 1)) / (2 * cell));
+        }
+    const gtex = new THREE.DataTexture(GD, w2, h2, THREE.RGBAFormat, THREE.HalfFloatType);
+    gtex.minFilter = gtex.magFilter = THREE.LinearFilter;
+    gtex.wrapS = gtex.wrapT = THREE.ClampToEdgeWrapping;
+    gtex.generateMipmaps = false;
+    gtex.needsUpdate = true;
+    // drip sources: for every texel, the y of the bottom edge of the metal run at or above it (outside texels only within 0.9 em
+    // below the run), so a pixel anywhere under a stroke knows where gravity-fed rivulets start. Sampled with NEAREST.
+    const DRD = new Uint16Array(N * 4), cy = field.ext.w / h2, MAXD = 0.9;
+    for (let i = 0; i < w2; i++) {
+        let bottom = -99, last = -1;
+        for (let j = h2 - 1; j >= 0; j--) {
+            const k = j * w2 + i;
+            if (mask[k]) {
+                let jb = j;
+                while (jb > 0 && mask[(jb - 1) * w2 + i])
+                    jb--;
+                const yb = field.ext.y + jb * cy;
+                for (let q = j; q >= jb; q--) {
+                    DRD[4 * (q * w2 + i)] = hf(yb);
+                }
+                bottom = yb;
+                last = jb;
+                j = jb;
+            }
+            else if (last >= 0 && (field.ext.y + (j + 0.5) * cy) > bottom - MAXD)
+                DRD[4 * k] = hf(bottom);
+            else
+                DRD[4 * k] = hf(-99);
+        }
+    }
+    const drtex = new THREE.DataTexture(DRD, w2, h2, THREE.RGBAFormat, THREE.HalfFloatType);
+    drtex.minFilter = drtex.magFilter = THREE.NearestFilter;
+    drtex.wrapS = drtex.wrapT = THREE.ClampToEdgeWrapping;
+    drtex.generateMipmaps = false;
+    drtex.needsUpdate = true;
+    const D = new Uint16Array(N * 4);
+    for (let k = 0; k < N; k++) {
+        D[4 * k] = hf(S[k]);
+        D[4 * k + 1] = hf(Wd[k]);
+        D[4 * k + 2] = hf(U[k]);
+        D[4 * k + 3] = hf(P[k]);
+    }
+    const tex = new THREE.DataTexture(D, w2, h2, THREE.RGBAFormat, THREE.HalfFloatType);
+    tex.minFilter = tex.magFilter = THREE.LinearFilter;
+    tex.wrapS = tex.wrapT = THREE.ClampToEdgeWrapping;
+    tex.generateMipmaps = false;
+    tex.needsUpdate = true;
+    // seeds for the capillary ripple sources: points well inside the metal
+    const cand = [];
+    for (const thr of [0.035, 0.02, 0.008]) {
+        for (let k = 0; k < N; k++)
+            if (dIn[k] > thr)
+                cand.push(k);
+        if (cand.length > 40)
+            break;
+    }
+    const r2 = mulberry32(31), src = [];
+    for (let i = 0; i < 6; i++) {
+        const k = cand.length ? cand[Math.floor(r2() * cand.length)] : 0, ix = k % w2, iy = (k - ix) / w2;
+        src.push(new THREE.Vector4(field.ext.x + (ix + 0.5) * cell, field.ext.y + (iy + 0.5) * (field.ext.w / h2), r2(), 10 + 6 * r2()));
+    }
+    return { tex, gtex, drtex, src, dispose() { tex.dispose(); gtex.dispose(); drtex.dispose(); } };
+}
+// ---- shader -----------------------------------------------------------------------------------------------------------
+const VERT = /* glsl */ `varying vec2 vPos; varying vec3 vView; varying vec3 vE0; varying vec3 vE1; varying vec3 vE2;
+void main(){ vPos = position.xy; vec4 mv = modelViewMatrix*vec4(position, 1.0); vView = mv.xyz;
+  vE0 = mat3(modelViewMatrix)[0]; vE1 = mat3(modelViewMatrix)[1]; vE2 = mat3(modelViewMatrix)[2];
+  gl_Position = projectionMatrix*mv; }`;
+const FRAG = /* glsl */ `
+uniform sampler2D uM; uniform sampler2D uGt; uniform sampler2D uDr; uniform float uTexel; uniform float uMeltOn; uniform float uMelt; uniform float uDrips;
+uniform float uOxide; uniform float uSpike;
+uniform float uR; uniform float uRough; uniform float uRefl; uniform float uEnv; uniform float uTint; uniform float uSpeed; uniform float uOpacity;
+uniform vec3 uCol; uniform vec3 uCol2;
+uniform float uFlow; uniform float uBeads; uniform float uNG; uniform float uSt; uniform float uWin;
+uniform vec4 uSrc[6]; uniform vec4 uWv[3];
+varying vec3 vView; varying vec3 vE0; varying vec3 vE1; varying vec3 vE2;
+const float PI = 3.14159265;
+float dIn(vec2 p){ return -fieldA(p).x; }
+vec4 mtex(vec2 p){ return texture2D(uM, fieldUV(p)); }
+
+// --- procedural studio (view space: +z towards the viewer, +y up). Features get softer with 'blur' (rough / grazing) ---
+float boxM(vec2 q, vec2 c, vec2 hs, float soft){ vec2 d = abs(q - c) - hs; float sd = length(max(d, 0.0)) + min(max(d.x, d.y), 0.0); return 1.0 - smoothstep(-soft, soft, sd); }
+float wrapA(float a){ return mod(a + PI, 2.0*PI) - PI; }
+vec3 studio(vec3 r, float blur, float te){
+  float az = atan(r.x, r.z) + 0.30*sin(te*0.043);                       // the whole studio slowly swings: the light moves, not the text
+  float el = asin(clamp(r.y, -1.0, 1.0));
+  float hz = el + 0.07 - 0.05*sin(te*0.061);
+  float wd = 0.03 + 0.7*blur;
+  vec3 sky = mix(vec3(0.52, 0.56, 0.62), vec3(0.025, 0.032, 0.055), smoothstep(0.0, 0.85, hz));
+  vec3 gnd = mix(vec3(0.17, 0.13, 0.10), vec3(0.008, 0.009, 0.012), smoothstep(0.0, 0.55, -hz));
+  vec3 c = mix(gnd, sky, smoothstep(-wd, wd, hz));
+  c += vec3(0.20, 0.19, 0.17)*exp(-hz*hz/(wd*wd + 0.002))*0.55;           // bright horizon line
+  float bs = blur;
+  c = mix(c, vec3(1.00, 0.80, 0.58)*0.92, boxM(vec2(wrapA(az + 0.62), el), vec2(0.0, 0.40), vec2(0.20, 0.17), 0.12 + bs)*0.95);   // warm key
+  c = mix(c, vec3(0.66, 0.82, 1.00)*0.82, boxM(vec2(wrapA(az - 0.66), el), vec2(0.0, 0.24), vec2(0.17, 0.30), 0.12 + bs)*0.92);   // cool fill
+  c = mix(c, vec3(0.92, 0.94, 1.00)*0.88, boxM(vec2(wrapA(az), el), vec2(0.0, 1.02), vec2(1.1, 0.07), 0.07 + bs)*0.9);              // top strip
+  float sa = 0.65*sin(te*0.115 + 0.8);                                      // the strip light sweeping across
+  c = mix(c, vec3(1.0, 0.98, 0.94)*1.15, boxM(vec2(wrapA(az - sa), el), vec2(0.0, 0.25), vec2(0.02, 0.85), 0.03 + 0.6*bs)*0.95);
+  c = mix(c, vec3(0.85, 0.88, 0.95)*0.60, boxM(vec2(wrapA(az - PI), el), vec2(0.0, 0.10), vec2(0.55, 0.28), 0.2 + bs)*0.85);        // back rim
+  c = mix(c, vec3(1.00, 0.86, 0.70)*0.55, boxM(vec2(wrapA(az + 2.3), el), vec2(0.0, -0.05), vec2(0.15, 0.35), 0.15 + bs)*0.8);
+  return c;
+}
+
+// --- slow surface motion: slope (gradient of the free-surface height) of three travelling swells + capillary ring packets ---
+vec2 surfSlope(vec2 p, float t){
+  vec2 sl = vec2(0.0);
+  for (int i = 0; i < 3; i++) { vec4 w = uWv[i]; float th = w.z*dot(w.xy, p) - w.w*t + float(i)*2.1; sl += w.xy*(-0.032*sin(th)); }
+  for (int i = 0; i < 6; i++) {
+    vec4 sc = uSrc[i]; vec2 dv = p - sc.xy; float r = length(dv) + 1e-3; float T = sc.w; float tau = mod(t + sc.z*T, T);
+    float rf = 0.05*tau, sg = 0.09, q = (r - rf)/sg, env = exp(-q*q);
+    float life = smoothstep(0.0, 1.5, tau)*(1.0 - smoothstep(0.5*T, T, tau));
+    float k = 2.0*PI/0.07, ph = k*(r - rf);
+    float dU = env*(-2.0*q/sg*cos(ph)/k - sin(ph));                          // d/dr of (env cos(ph)/k)
+    sl += (dv/r)*(0.045*life*dU);
+  }
+  return sl;
+}
+float vnz(vec2 q){ vec2 i = floor(q), f = fract(q); f = f*f*(3.0 - 2.0*f);
+  return mix(mix(h21(i), h21(i + vec2(1.0, 0.0)), f.x), mix(h21(i + vec2(0.0, 1.0)), h21(i + vec2(1.0, 1.0)), f.x), f.y); }
+// smooth min / max of two signed-distance fields together with their inward gradients (liquids merge with a meniscus)
+void smin2(inout float a, inout vec2 ga, float b, vec2 gb, float k){ float h = clamp(0.5 + 0.5*(b - a)/k, 0.0, 1.0); float r = mix(b, a, h) - k*h*(1.0 - h); ga = mix(gb, ga, h); a = r; }
+void smax2(inout float a, inout vec2 ga, float b, vec2 gb, float k){ float h = clamp(0.5 + 0.5*(a - b)/k, 0.0, 1.0); float r = mix(b, a, h) + k*h*(1.0 - h); ga = mix(gb, ga, h); a = r; }
+float fillAge(float a){ return a <= 0.0 ? 0.0 : (1.0 - exp(-a/0.05))*(1.0 + 0.34*exp(-a/0.5)*cos(6.2832*a/0.75)); }   // bead overshoot, damped settling
+
+void main(){
+  vec2 p = vPos;
+  vec4 A = fieldA(p); vec4 B = fieldB(p); vec4 M = mtex(p);
+  float d = -A.x, s = M.x, w = max(M.y, 0.006), un = M.z, ph0 = M.w;
+  vec4 GT = texture2D(uGt, fieldUV(p));
+  vec2 gv = GT.xy; vec2 g = gv/max(length(gv), 1e-4); float gm = min(length(gv), 1.0);
+  vec2 gs = GT.zw; vec2 ts = gs/max(length(gs), 1e-4);
+
+  // --- reveal: how much of the local half width is filled (gIn) and whether the erase has taken it (visOut)
+  float gIn, visOut = 1.0;
+  float gh = floor(B.x*max(uNG - 1.0, 0.0) + 0.5);
+  if (uFlow > 0.5) { float ga = gh*uSt + uWin*un; gIn = fillAge((uHead - ga)*uDur + uSince); }
+  else gIn = revealInG(A.y);
+  if (uBeads < 0.5 && uMeltOn < 0.5) visOut = revealOutG(A.z);
+  float gT = gIn*visOut;
+  float eIn = w*(1.0 - gT);
+
+  // --- beads (Rayleigh-Plateau): lambda = 9 w, growth m, pinch-off then round drops that evaporate
+  float phi = 0.0;
+  if (uBeads > 0.5) phi = clamp((uE - 0.25*h21(vec2(gh, 3.7)))/0.75, 0.0, 1.0);
+  float m = 1.15*pow(clamp((phi - 0.04)/0.36, 0.0, 1.0), 1.6);
+  float Phi = 2.0*PI*s/(9.0*w) + ph0;
+  float eB = w*m*(0.5 - 0.5*cos(Phi));
+  float dStr = d - eIn - eB, wStr = w - eIn - eB;
+  vec2 gStr = gv - (m*PI/9.0*sin(Phi))*ts;
+  float pm0 = 0.0; float dEff = dStr, wEff = wStr; vec2 gEff = gStr; float kill = 1.0;
+  if (uBeads > 0.5 && phi > 0.0) {
+    float kk = floor(Phi/(2.0*PI) + 0.5), ds = (Phi - 2.0*PI*kk)*9.0*w/(2.0*PI);
+    vec2 rel = ts*ds + g*(d - w); float rr = length(rel);
+    float Rd = w*1.05*sqrt(clamp(1.0 - smoothstep(0.56, 1.0, phi), 0.0, 1.0));
+    float pm = smoothstep(0.36, 0.5, phi); pm0 = pm;
+    dEff = mix(dStr, Rd - rr, pm); wEff = mix(wStr, Rd, pm); gEff = mix(gStr, -rel/max(rr, 1e-4), pm);
+    kill = smoothstep(0.0, 0.07, 1.0 - phi);
+  }
+
+  // --- MELT (erase): liquefy -> gravity-fed rivulets and drops -> dewetting holes -> evaporating beads. All closed form in (p, e).
+  float Lm = 0.0, thin = 0.0, uEv = 0.0, dripWin = 0.0, dripMask = 0.0, sagE = 0.0;
+  if (uMeltOn > 0.5) {
+    float tL = 0.18 + 0.2*uMelt, tD0 = 0.2 + 0.2*uMelt;
+    Lm = smoothstep(0.0, tL, uE);
+    float eEv = 0.7 + 0.08*h21(vec2(gh, 9.1));
+    uEv = clamp((uE - eEv)/(1.0 - eEv), 0.0, 1.0);
+    float evap = w*(1.0 - sqrt(1.0 - uEv));                                  // radius^2 falls linearly: ends exactly at e = 1
+    // slump: the contact line at lower edges thickens and sags, upper edges drain (local flow, not a transform)
+    float lump = 0.55 + 0.9*vnz(vec2(p.x*16.0, 4.2));
+    sagE = 0.024*Lm*lump*(1.0 - uEv);
+    dEff += sagE*max(g.y, 0.0) - 0.35*sagE*max(-g.y, 0.0) - evap;
+    wEff += 0.5*sagE - evap;
+    thin = smoothstep(tD0, 1.0, uE);
+    // dewetting: a hole opens in each Voronoi cell of the film and grows radially; the metal left between holes is a network
+    // of strips that breaks into beads
+    float cD = 0.15; vec2 ci = floor(p/cD);
+    float dHole = 1e3; vec2 gHole = vec2(0.0, 1.0);
+    for (int j = -1; j <= 1; j++) for (int i = -1; i <= 1; i++) {
+      vec2 cc = ci + vec2(float(i), float(j));
+      vec2 c = (cc + 0.15 + 0.7*vec2(h21(cc + 11.0), h21(cc + 37.0)))*cD;
+      float tn = tD0 + 0.55*(1.0 - tD0)*h21(cc + 5.0);
+      float rad = 0.18*max(uE - tn, 0.0)/(1.0 - tD0);
+      vec2 rv = p - c; float rl = max(length(rv), 1e-4);
+      float dd = uE > tn ? rl - rad : 1e3;
+      smin2(dHole, gHole, dd, rv/rl, 0.01);
+    }
+    smin2(dEff, gEff, dHole, gHole, 0.012);
+    // rivulets: a hashed column cell under a bottom edge may feed a drip: thread with a bead at its head (accelerates, slows),
+    // necks and pinches (Plateau-Rayleigh), the bead falls as y = 0.5 g t^2 and evaporates, the thread recoils into the edge
+    float cw = 0.075, kx = floor(p.x/cw);
+    float x0 = (kx + 0.5 + 0.3*(h21(vec2(kx, 7.7)) - 0.5))*cw;
+    float ye = texture2D(uDr, fieldUV(vec2(x0, p.y))).x;
+    float hk = h21(vec2(kx*1.37 + floor(ye/0.06)*7.1, 2.9));
+    if (ye > -50.0 && hk < uDrips*0.55 && uE > 0.04) {
+      float h1 = h21(vec2(hk*91.7, 1.0)), h2 = h21(vec2(hk*91.7, 2.0)), h3 = h21(vec2(hk*91.7, 3.0)), h4 = h21(vec2(hk*91.7, 4.0));
+      float e0 = 0.05 + 0.30*h1, Tr = 0.14 + 0.12*h2, ep = e0 + Tr;
+      float Lmax = 0.12 + 0.36*h3*h3, rt = 0.010 + 0.006*h4, rb = 1.75*rt + 0.004;
+      float q = ye - p.y;
+      float tau = clamp((uE - e0)/Tr, 0.0, 1.0);
+      float att = uE < ep ? 1.0 : 0.0, tf = max(uE - ep, 0.0);
+      float hq = Lmax*tau*tau*(3.0 - 2.0*tau)*mix(1.0 - smoothstep(0.0, 0.07, tf), 1.0, att);
+      float neck = smoothstep(ep - 0.07, ep, uE)*att;
+      float dx = p.x - (x0 + 0.003*sin(q*45.0 + hk*30.0));
+      float nq = (q - 0.85*hq)/0.035;
+      float rth = rt*(1.0 + 1.3*exp(-max(q, 0.0)/0.04))*(1.0 - 0.95*neck*exp(-nq*nq));
+      float on = step(e0, uE);
+      float dT = min(rth - abs(dx), min(q + 0.02, hq - q + rb*0.5));
+      dT = (att > 0.5 || tf < 0.085) ? dT : -1.0;
+      vec2 gT = vec2(-sign(dx), 0.0);
+      float rH = att > 0.5 ? rb*(0.4 + 0.6*smoothstep(0.0, 0.2, tau)) : 0.6*rb*(1.0 - smoothstep(0.03, 0.09, tf));
+      vec2 cH = vec2(x0, ye - hq), rvH = p - cH; float lH = max(length(rvH), 1e-4);
+      float dB = rH - lH; vec2 gB = -rvH/lH;
+      float dD = dT; vec2 gD = gT;
+      smax2(dD, gD, dB, gB, 0.008);
+      float rd = rb*sqrt(max(0.0, 1.0 - tf/0.2));                          // falling drop evaporates before it leaves the extent
+      vec2 cF = vec2(x0, ye - Lmax - 0.5*25.0*tf*tf); vec2 rvF = p - cF; rvF.y /= 1.0 + 5.0*min(tf, 0.1);
+      float lF = max(length(rvF), 1e-4);
+      float dF = att > 0.5 ? -1.0 : rd - lF; vec2 gF = -rvF/lF;
+      smax2(dD, gD, dF, gF, 0.008);
+      dD = on > 0.5 ? dD : -1.0;
+      float dBefore = dEff;
+      smax2(dEff, gEff, dD, gD, 0.012);
+      dripWin = smoothstep(-0.004, 0.004, dD - dBefore);
+      dripMask = smoothstep(-0.03, -0.01, dD);
+      wEff = mix(wEff, 0.014, dripWin);
+    }
+  }
+
+  // --- free surface: circular-arc meniscus, analytic normal
+  float fw = max(fwidth(dEff), 1e-5);
+  float shr = max(clamp((eIn + eB)/w, 0.0, 1.0), pm0);
+  shr = max(shr, uEv);
+  float Re = max(mix(uR, min(uR, max(wEff, 0.004)), smoothstep(0.0, 0.2, shr)), 1e-3);
+  Re = mix(Re, min(Re, 0.016), dripWin);
+  Re *= 1.0 + 0.8*Lm;                                                      // meniscus relaxes: a wider, rounder rim
+  float dC = clamp(dEff, 0.0, Re);
+  vec2 nxy = -pow(1.0 - dC/Re, mix(1.6, 1.15, Lm))*gEff;
+  float nz = sqrt(max(0.0, 1.0 - dot(nxy, nxy)));
+  float crown = 0.30*clamp((wEff - dEff)/max(wEff, 1e-3), 0.0, 1.0);
+  nxy -= gEff*crown;
+  float te = uTime*uIdleSpeed;
+  nxy -= surfSlope(p, te*uSpeed)*(uRough*uIdle*(1.0 + 2.2*Lm));
+  float rimE = clamp(length(nxy)*1.4, 0.0, 1.0);                          // how fast the thickness changes here
+  vec2 tg = vec2(-gEff.y, gEff.x);
+
+  // --- oxide skin: the film is stiff, so where the metal is compressed (rim, fast thickness change) it creases in folds
+  //     parallel to the contour (slow value-noise warp keeps them from being a regular grating)
+  float dcl = max(dEff, 0.0);
+  float vnA = vnz(p*23.0), vnB = vnz(p*9.0 + 7.3);
+  float wph = 6.2832*dcl/0.028 + 5.0*vnA + 3.0*vnB;
+  float wph2 = 6.2832*dot(p, tg)/0.045 + 6.0*vnB;
+  float aaW = (1.0 - smoothstep(0.30, 0.60, fwidth(wph)/6.2832))*(1.0 - smoothstep(0.30, 0.60, fwidth(wph2)/6.2832));
+  float envW = (0.25 + 0.75*rimE)*exp(-dcl/(1.3*Re + 0.01))*aaW*uOxide;
+  nxy -= gEff*(cos(wph)*0.04*envW) + tg*(sin(wph2)*0.015*envW);
+
+  // --- ferrofluid (Rosensweig): hexagonal lattice of cones, anchored to the page (three plane waves at 120 degrees).
+  //     cone height h = 1 - sqrt(1 - c), c = (cos+cos+cos+1.5)/4.5: linear flanks, sharp tips; amplitude swells along the strokes
+  float Lam = 0.03 + 0.3*uR, kS = 4.0*PI/(1.7320508*Lam);
+  vec2 q2 = vec2(-0.5, 0.8660254), q3 = vec2(-0.5, -0.8660254);
+  float f1 = kS*p.x, f2 = kS*dot(q2, p), f3 = kS*dot(q3, p);
+  float cs = clamp((cos(f1) + cos(f2) + cos(f3) + 1.5)/4.5, 0.0, 1.0);
+  vec2 gcs = -kS*(vec2(1.0, 0.0)*sin(f1) + q2*sin(f2) + q3*sin(f3))/4.5;
+  vec2 gsp = gcs/(2.0*sqrt(max(1.0 - cs, 2e-3)));
+  float swell = 0.62 + 0.38*sin(6.2832*s/0.8 - te*0.9*uSpeed + ph0);
+  float envS = smoothstep(0.08*wEff, 0.4*wEff, dEff)*uSpike*swell;
+  nxy -= gsp*(0.2*Lam)*envS*(0.3 + 0.7*nz);
+  float aoS = mix(1.0, 0.62 + 0.38*pow(cs, 0.6), clamp(envS*1.4, 0.0, 1.0));
+  vec3 n = normalize(vec3(nxy, nz + 0.02));
+  vec3 nV = normalize(vE0*n.x + vE1*n.y + vE2*n.z);
+  vec3 V = normalize(-vView);
+  float ndv = clamp(dot(nV, V), 0.0, 1.0);
+  vec3 r = reflect(-V, nV);
+
+  // --- environment with anisotropic blur along the contour at grazing angles
+  vec3 T = normalize(vE0*tg.x + vE1*tg.y + vec3(1e-5));
+  float gz = pow(1.0 - ndv, 2.0);
+  float rw = length(fwidth(r));                                            // screen-space footprint of the reflection: no sub-pixel highlights
+  float matt = smoothstep(0.0, 0.8, uEv);
+  float dl = 0.012 + 0.016*uRough + 0.22*gz + 0.05*Lm + 0.25*matt;
+  vec3 env = vec3(0.0); float ws = 0.0;
+  for (int i = -2; i <= 2; i++) { float f = float(i); float wk = exp(-0.5*f*f/1.3); vec3 rk = normalize(r + T*(f*dl*0.55)); env += studio(rk, 0.02 + 0.5*dl + 0.8*rw, te)*wk; ws += wk; }
+  env /= ws;
+  env = max(mix(vec3(0.20), env, uEnv), 0.0);
+
+  // --- Fresnel (Schlick) between the metal's own reflectance and its grazing tint
+  vec3 c1 = uCol/max(max(uCol.r, uCol.g), max(uCol.b, 1e-3)), c2 = uCol2/max(max(uCol2.r, uCol2.g), max(uCol2.b, 1e-3));
+  vec3 F0 = uRefl*mix(vec3(1.0), c1, uTint), F90 = mix(vec3(1.0), c2, uTint);
+  float f5 = pow(1.0 - ndv, 5.0), edgeT = 1.0 - smoothstep(0.0, Re, dEff);
+  vec3 F = mix(F0, F90*0.97, clamp(f5 + 0.22*edgeT, 0.0, 1.0))*(1.0 - 0.35*thin);   // a thinning film reflects less
+  // thin-film interference of the oxide: phase = 4 pi n t cos(theta_t)/lambda for three wavelengths; film thickness follows
+  // the height (dC/Re), the rim and a slow patchiness. Only the deviation from the mean is applied: hue shift, no brightening.
+  float hN = dC/Re;
+  float tnm = (140.0 + 420.0*hN + 160.0*vnz(p*2.7 + te*0.02) + 200.0*rimE)*(1.0 - 0.6*thin);   // thinner film: fringes sweep
+  float ct = sqrt(max(1.0 - (1.0 - ndv*ndv)/3.24, 0.0));
+  vec3 mo = cos(4.0*PI*1.8*tnm*ct/vec3(650.0, 550.0, 450.0));
+  vec3 col = env*F*(1.0 + 0.13*(uOxide + 1.6*thin)*(mo - vec3((mo.x + mo.y + mo.z)/3.0)))*aoS*(1.0 + 1.1*clamp(envS*1.4, 0.0, 1.0)*pow(cs, 9.0));   // sharp tips catch a pin-point of the sky
+  col *= mix(vec3(1.0), vec3(1.07, 0.93, 0.80)*0.8, 0.9*thin);                  // warms and darkens as it thins
+  col = mix(col, vec3(dot(col, vec3(0.3333)))*0.55*vec3(1.0, 0.95, 0.9), 0.8*matt);   // last beads go matte
+  col *= mix(0.10, 1.0, smoothstep(0.0, 1.0, dEff/(0.006 + 1.8*fw)));            // dark contact line where metal meets the surface
+
+  float cov = clamp(0.5 + dEff/fw, 0.0, 1.0)*max(1.0 - smoothstep(0.30*w + 0.03*Lm, 0.36*w + 0.004 + 0.03*Lm, -d), dripMask);   // metal never strays beyond the bead overshoot
+  float tiny = uBeads > 0.5 ? mix(1.0, smoothstep(0.8, 2.2, wEff/fw), pm0) : 1.0;     // drops under ~2 px dissolve instead of speckling
+  float tinyM = uMeltOn > 0.5 ? mix(1.0, smoothstep(0.8, 2.2, wEff/fw), smoothstep(0.0, 0.3, uEv)) : 1.0;
+  float melta = uMeltOn > 0.5 ? mix(1.0, 0.75, 0.8*thin)*(1.0 - smoothstep(0.985, 1.0, uE)) : 1.0;
+  float a = cov*uOpacity*kill*tiny*tinyM*melta*smoothstep(0.0, 0.06, gT);
+  vec3 outc = col*a;
+  gl_FragColor = vec4(outc, a);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+  float nz2 = fract(52.9829189*fract(dot(gl_FragCoord.xy, vec2(0.06711056, 0.00583715))));
+  gl_FragColor.rgb += (nz2 - 0.5)*(1.0/255.0)*a;                                   // static dither: no banding in the gradients
+}`;
+// ---- variant ------------------------------------------------------------------------------------------------------------
+const ROWS = {
+    thickness: { name: 'thickness', label: 'Thickness', description: 'Puddle depth: the radius of the rounded meniscus at the rim of every letter.', type: 'number', min: 0.01, max: 0.2, step: 0.005, unit: 'em' },
+    reflectivity: { name: 'reflectivity', label: 'Reflectivity', description: 'Normal-incidence reflectance of the metal (mercury and chrome are ~0.6-0.9).', type: 'number', min: 0.3, max: 1, step: 0.01 },
+    environment: { name: 'environment', label: 'Environment', description: 'Contrast and brightness of the studio the metal mirrors.', type: 'number', min: 0.2, max: 1.5, step: 0.01 },
+    tint: { name: 'tint', label: 'Metal tint', description: 'How strongly the metal colours its reflection (0 = neutral chrome, 1 = full colour).', type: 'number', min: 0, max: 1, step: 0.01 },
+    color: { name: 'color', label: 'Metal colour', description: 'Colour of the metal at normal incidence (silver, gold, copper, blue-steel).', type: 'color' },
+    color2: { name: 'color2', label: 'Edge tint', description: 'Colour of the reflection at grazing angles and on the rim.', type: 'color' },
+    roughness: { name: 'roughness', label: 'Ripples', description: 'Amplitude of the surface swells and capillary ripples that tilt the mirror.', type: 'number', min: 0, max: 2, step: 0.01 },
+    rippleSpeed: { name: 'rippleSpeed', label: 'Ripple speed', description: 'Speed of the travelling surface waves.', type: 'number', min: 0, max: 3, step: 0.01 },
+    oxide: { name: 'oxide', label: 'Oxide skin', description: 'Nanometre oxide film: thin-film interference tint and fine creases where the skin is compressed.', type: 'number', min: 0, max: 1, step: 0.01 },
+    spikes: { name: 'spikes', label: 'Spikes', description: 'Magnetic field: the pool breaks into a hexagonal lattice of sharp cones (Rosensweig instability).', type: 'number', min: 0, max: 1, step: 0.01 },
+    melt: { name: 'melt', label: 'Melt', description: 'Erase: how long the metal stays liquid and runs before it dewets (0 = dewets early, 1 = long liquid phase).', type: 'number', min: 0, max: 1, step: 0.01 },
+    drips: { name: 'drips', label: 'Drips', description: 'Erase: density of gravity-fed rivulets and falling drops under the strokes.', type: 'number', min: 0, max: 1, step: 0.01 },
+    opacity: { name: 'opacity', label: 'Opacity', description: 'Overall opacity.', type: 'number', min: 0, max: 1, step: 0.01 },
+};
+export default {
+    key: 'liquidMetal', source: 'outline',
+    drawMethods: ['flow', ...DRAW_METHODS], eraseMethods: ['melt', 'beads', ...ERASE_METHODS], drawDefault: 'flow', eraseDefault: 'melt',
+    animDefaults: { eraseDuration: 4.5, eraseEase: 'linear' },
+    methodInfo: {
+        melt: { label: 'Melt', hint: 'The metal liquefies, runs down in drips, dewets into beads and evaporates.' },
+        flow: { label: 'Flow', hint: 'Metal runs along each stroke with a bulbous head that overshoots and settles.' },
+        beads: { label: 'Beads', hint: 'Strokes break into drops (Rayleigh-Plateau) that shrink away.' },
+    },
+    catalog: { name: 'Liquid Metal', description: 'Letters as puddles of mercury: a surface-tension meniscus mirrors a drifting studio with Fresnel chrome reflections and slow ripples. Use for premium logos, tech and product titles.', tags: ['metal', 'chrome', 'mercury', 'liquid', 'reflection', 'fresnel', 'luxury'] },
+    defaults: { thickness: 0.06, roughness: 1, reflectivity: 0.8, environment: 1.15, tint: 0.7, rippleSpeed: 1, oxide: 0.4, spikes: 0, melt: 0.5, drips: 0.6, color: '#cdd5df', color2: '#f4f7ff', opacity: 1 },
+    ui: {
+        main: [ROWS.thickness, ROWS.environment, ROWS.color, ROWS.tint],
+        more: [ROWS.melt, ROWS.drips, ROWS.spikes, ROWS.oxide, ROWS.reflectivity, ROWS.roughness, ROWS.rippleSpeed, ROWS.color2, ROWS.opacity],
+    },
+    structural: [],
+    presets: [
+        { name: 'Mercury', description: 'Cold silver chrome.', patch: {} },
+        { name: 'Gold', description: 'Warm polished gold.', patch: { color: '#e0a93a', color2: '#fff1c4', tint: 0.9, reflectivity: 0.85 } },
+        { name: 'Copper', description: 'Burnished copper.', patch: { color: '#d9774a', color2: '#ffd9bd', tint: 0.9, reflectivity: 0.75, environment: 1.1 } },
+        { name: 'Blue steel', description: 'Dark blue steel, calm surface.', patch: { color: '#7d9cc4', color2: '#d4e6ff', tint: 1, reflectivity: 0.7, roughness: 0.5, environment: 0.9 } },
+        { name: 'Ferrofluid', description: 'Black magnetic fluid pulled into a lattice of spikes.', patch: { color: '#58606c', color2: '#b8c8e0', tint: 0.6, reflectivity: 0.62, environment: 1.35, spikes: 0.9, oxide: 0.2, thickness: 0.07 } },
+    ],
+    build(layout, cfg, anim) {
+        const strokes = layout.strokes;
+        prepare(strokes, 'outline');
+        const G = layout.glyphs.length;
+        strokes.forEach((s) => { s.glyphN = s.glyph / Math.max(1, G - 1); });
+        const flow = anim.draw.method === 'flow', beads = anim.erase.method === 'beads', melt = anim.erase.method === 'melt';
+        const a2 = { ...anim, draw: { ...anim.draw, method: flow ? 'trace' : anim.draw.method }, erase: { ...anim.erase, method: beads || melt ? 'fade' : anim.erase.method } };
+        const { infoD, infoE } = applyAnim(strokes, a2, G);
+        const field = buildField(strokes, { source: 'outline', texels: 1024, pad: 0.3, maxDist: 0.4 });
+        const aux = bakeAux(field);
+        const st = (anim.draw.stagger ?? 0.6) / Math.max(1, G);
+        const wv = [[0.5, 1.4, 0.34], [2.3, 0.95, 0.43], [3.9, 1.9, 0.27]].map(([a, lam, om]) => new THREE.Vector4(Math.cos(a), Math.sin(a), (2 * Math.PI) / lam, om));
+        const uniforms = {
+            ...uniformsBase(), uF0: { value: field.f0 }, uF1: { value: field.f1 }, uFExt: { value: field.ext }, uFMax: { value: field.maxDist },
+            uM: { value: aux.tex }, uDr: { value: aux.drtex }, uMeltOn: { value: melt ? 1 : 0 }, uMelt: { value: 0.5 }, uDrips: { value: 0.6 }, uGt: { value: aux.gtex }, uTexel: { value: field.texel }, uR: { value: cfg.thickness }, uRough: { value: 1 }, uRefl: { value: 0.8 }, uEnv: { value: 1 }, uTint: { value: 0.7 }, uSpeed: { value: 1 }, uOpacity: { value: 1 }, uOxide: { value: 0.4 }, uSpike: { value: 0 },
+            uCol: { value: hex(cfg.color) }, uCol2: { value: hex(cfg.color2) },
+            uFlow: { value: flow ? 1 : 0 }, uBeads: { value: beads ? 1 : 0 }, uNG: { value: G }, uSt: { value: st }, uWin: { value: 1 - (G - 1) * st },
+            uSrc: { value: aux.src }, uWv: { value: wv },
+        };
+        const mat = new THREE.ShaderMaterial({
+            uniforms, vertexShader: VERT, fragmentShader: fieldFrag(FRAG), transparent: true, depthWrite: false, side: THREE.DoubleSide,
+            blending: THREE.CustomBlending, blendEquation: THREE.AddEquation, blendSrc: THREE.OneFactor, blendDst: THREE.OneMinusSrcAlphaFactor,
+        });
+        const e = field.ext;
+        const geo = new THREE.PlaneGeometry(e.z, e.w);
+        geo.translate(e.x + e.z / 2, e.y + e.w / 2, 0);
+        const mesh = new THREE.Mesh(geo, mat);
+        mesh.frustumCulled = false;
+        const group = new THREE.Group();
+        group.add(mesh);
+        const api = {
+            object: group,
+            apply(c) {
+                const u = mat.uniforms;
+                u.uR.value = c.thickness;
+                u.uRough.value = c.roughness;
+                u.uRefl.value = c.reflectivity;
+                u.uEnv.value = c.environment;
+                u.uTint.value = c.tint;
+                u.uSpeed.value = c.rippleSpeed;
+                u.uOpacity.value = c.opacity;
+                u.uOxide.value = c.oxide;
+                u.uMelt.value = c.melt;
+                u.uDrips.value = c.drips;
+                u.uSpike.value = c.spikes;
+                u.uCol.value.set(c.color);
+                u.uCol2.value.set(c.color2);
+                api.c = c;
+            },
+            update(S, time) { setReveal(mat.uniforms, S, infoD, infoE, anim.draw.duration, time); },
+            dispose() { geo.dispose(); mat.dispose(); field.dispose(); aux.dispose(); },
+        };
+        api.apply(cfg);
+        return api;
+    },
+};