dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/mgstyles/upstream/demos/07-liquid/cues.json

@@ -0,0 +1,100 @@
+{
+  "fps": 30,
+  "bpm": 150,
+  "beat": 0.4,
+  "key": "D major",
+  "sections": {
+    "pour": 0.0,
+    "rain": 0.4,
+    "fuse": 2.0,
+    "leap": 3.2,
+    "flood": 4.0,
+    "immersed": 4.42,
+    "reveal": 4.85,
+    "gather": 5.75,
+    "gap": 6.2,
+    "drop": 6.4,
+    "glint": 7.1,
+    "drip": 7.6,
+    "ripple": 8.4,
+    "end": 10.0
+  },
+  "pour_snap": 0.167,
+  "landings": [
+    {
+      "id": "P1",
+      "t": 0.4,
+      "x": 640,
+      "size": 1.0,
+      "u": 0.05
+    },
+    {
+      "id": "P2",
+      "t": 0.8,
+      "x": 1250,
+      "size": 0.85,
+      "u": 0.62
+    },
+    {
+      "id": "P3",
+      "t": 1.2,
+      "x": 405,
+      "size": 0.8,
+      "u": 0.95
+    },
+    {
+      "id": "P4",
+      "t": 1.6,
+      "x": 960,
+      "size": 1.35,
+      "u": 0.36
+    }
+  ],
+  "merges": [
+    2.0,
+    2.4,
+    2.8
+  ],
+  "leap": 3.2,
+  "thread_snap": 3.433,
+  "apex": 3.6,
+  "flood_in": 4.035,
+  "flood_full": 4.42,
+  "reveal_start": 4.55,
+  "reveal_end": 5.35,
+  "logo_snap": 6.4,
+  "letter_bridge_snap": 6.417,
+  "glint": 7.2,
+  "drip_snap": 8.567,
+  "drip_land": 8.4,
+  "tagline_start": 8.42,
+  "hop_takeoffs": [
+    1.66,
+    2.06,
+    2.46
+  ],
+  "sheets_in": [
+    4.035,
+    4.105,
+    4.175
+  ],
+  "sheets_out": [
+    4.55,
+    4.62,
+    4.69
+  ],
+  "impact": 4.0,
+  "flood_hits_in": [
+    4.133,
+    4.267,
+    4.333
+  ],
+  "flood_hits_out": [
+    4.867,
+    4.967,
+    5.033
+  ],
+  "_note_flood_hits": "round 1: sheetCross (front/back edge crossing frame centre) from out/cues_derived.json, snapped to frames",
+  "outro": 8.8,
+  "_note_r2": "round 2: hero drip lands one beat earlier (8.40) so the flush-right tagline is complete by ~8.95; necks snap 6.417/6.45/6.483; music outro stays 8.8"
+}

package/lib/motion/mgstyles/upstream/demos/07-liquid/index.html

@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>07 · 液态流动 Liquid Motion — drop</title>
+<link rel="stylesheet" href="/assets/fonts/fonts.css">
+<style>
+@font-face { font-family: 'Fraunces Liquid'; src: url('/demos/07-liquid/assets/Fraunces-Liquid-72-900-Soft.ttf') format('truetype'); font-weight: 1 1000; font-display: block; }
+html, body { margin: 0; background: #000; overflow: hidden; width: 1920px; height: 1080px; }
+canvas#c { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
+</style>
+</head>
+<body>
+<canvas id="c" width="1920" height="1080"></canvas>
+<script type="module">
+import { createEngine } from './js/engine.js';
+import { buildLetterSDF } from './js/textsdf.js';
+import { lookdev } from './js/lookdev.js';
+import { createFilm } from './js/scene.js';
+import { createType } from './js/type.js';
+import { linkElements } from './js/links.js';
+
+const W = 1920, H = 1080, FPS = 30;
+window.DEMO = { width: W, height: H, fps: FPS, duration: 10, motionBlur: { samples: 1, shutter: 0.5 } };
+const qs = new URLSearchParams(location.search);
+const LOOK = qs.has('look') ? +qs.get('look') : null;
+// reel v5 (?v5=1): the hero word becomes the style name 「液态流动」 (same liquid SDF engine), window.linkAt(t), ?nolink=ids
+const V5 = qs.get('v5') === '1';
+const NOLINK = new Set(V5 ? (qs.get('nolink') || '').split(',').map((x) => x.trim()).filter(Boolean) : []);
+const V5WORD = { word: '液态流动', family: '"Resource Han Rounded"', weight: 900, size: 300, tracking: 40, pad: 170, sigma: 6 };
+
+async function init() {
+  await document.fonts.load('900 100px "Fraunces Liquid"');
+  await document.fonts.load('400 40px "Instrument Serif"');
+  await document.fonts.load('italic 400 40px "Instrument Serif"');
+  await document.fonts.load('500 40px "Noto Serif SC"', '万物始于一滴');
+  await document.fonts.load('600 20px "Inter"');
+  if (V5) await document.fonts.load('900 300px "Resource Han Rounded"', V5WORD.word);
+  await document.fonts.ready;
+  const cues = await (await fetch('/demos/07-liquid/cues.json')).json();
+  const eng = V5 ? createEngine(document.getElementById('c'), W, H, { v5: true }) : createEngine(document.getElementById('c'), W, H);
+  // wordmark SDF
+  const sdf = V5 ? buildLetterSDF(V5WORD) : buildLetterSDF({ word: 'drop', family: '"Fraunces Liquid"', weight: 900, size: 400, tracking: 10, pad: 170, sigma: 10 });
+  eng.setSDF(sdf);
+  // place wordmark: centre of ink bbox at (960, 468)
+  let x0 = 1e9, y0 = 1e9, x1 = -1e9, y1 = -1e9;
+  for (const l of sdf.letters) { x0 = Math.min(x0, l.bbox[0]); y0 = Math.min(y0, l.bbox[1]); x1 = Math.max(x1, l.bbox[2]); y1 = Math.max(y1, l.bbox[3]); }
+  // optical centre: x-height band dominates → centre between ascender top and baseline, shifted
+  const offX = 960 - (x0 + x1) / 2, offY = V5 ? 470 - (y0 + y1) / 2 : 452 - (y0 + sdf.baseY) / 2;   // v5: CJK ink box centred
+  const word = {
+    offX, offY, baseY: sdf.baseY + offY, bbox: [x0 + offX, y0 + offY, x1 + offX, y1 + offY],
+    letters: sdf.letters.map((l) => ({ ch: l.ch, px: l.pivot[0], py: l.pivot[1], sx0: l.pivot[0] + offX, sy0: l.pivot[1] + offY,
+      bbox: [l.bbox[0] + offX, l.bbox[1] + offY, l.bbox[2] + offX, l.bbox[3] + offY] })),
+  };
+  // query helpers on the letter SDFs (screen coords, rest pose)
+  word.sd = (i, x, y) => {
+    const tx = Math.round(x - offX), ty = Math.round(y - offY);
+    if (tx < 0 || ty < 0 || tx >= sdf.W || ty >= sdf.H) return 200;
+    return sdf.data[(ty * sdf.W + tx) * 4 + i];
+  };
+  word.bottomAt = (i, x) => { // lowest ink y in column x
+    for (let y = Math.round(word.letters[i].bbox[3]) + 4; y > word.letters[i].bbox[1]; y--) if (word.sd(i, x, y) < 0) return y;
+    return null;
+  };
+  if (V5) word.massY = (word.bbox[1] + word.bbox[3]) / 2;   // v5: the bar sits on the glyphs' vertical centre
+  window.__word = word;
+  const film = createFilm(cues, word, { v5: V5 });
+  window.__stateAt = (t) => film(t);
+  const type = createType(W, H, cues, word, { v5: V5 });
+  // v5 link elements: everything tagged with a hidden id (plus its '~' accessories) is dropped from the render state;
+  // the shadow and the floor reflection come from the same field, so they go with it
+  const hid = (e) => e.lk && e.lk.some((id) => NOLINK.has(id.replace('~', '')));
+  const strip = (S) => {
+    if (!NOLINK.size) return S;
+    S.balls = S.balls.filter((b) => !hid(b)); S.segs = S.segs.filter((b) => !hid(b));
+    if (NOLINK.has('dot') && S.ripDot) S.rip = { ...S.rip, amp: 0 };   // the drip's floor ripple rings go with it
+    return S;
+  };
+  if (V5) window.linkAt = (t) => linkElements(film(t), word);
+  // adaptive in-page motion blur: sub-shutter samples per frame (shutter 0.5 = 180 deg), more on the fast ranges
+  const SHUT = 0.5, FAST = [[0.12, 0.3, 20], [0.33, 1.05, 24], [1.2, 1.3, 16], [1.55, 2.95, 20], [3.1, 3.55, 20], [3.85, 4.75, 24],
+    [4.9, 5.7, 20], [6.18, 6.8, 24], [8.5, 9.0, 20]];
+  const MBQ = qs.has('mb') ? +qs.get('mb') : null;
+  window.__samplesAt = (t) => { if (MBQ !== null) return MBQ; for (const [a, b, n] of FAST) if (t >= a && t <= b) return n; return 10; };
+  window.renderAt = async (t) => {
+    const N = LOOK !== null ? 1 : Math.max(1, window.__samplesAt(t));
+    const Ss = [];
+    for (let s = 0; s < N; s++) {
+      // round 1: shorter shutter on the macro P1 contact frames so the fall and the squash don't double-expose
+      const sh = t > 0.345 && t < 0.445 ? 0.2 : (t > 6.385 && t < 6.585 ? 0.25 : SHUT);   // r2: crisp split on frames 192-197
+      const off = t > 0.39 && t < 0.41 ? 0.0 : -0.5;   // contact frame: shutter opens AT contact -> the squash, no ghost egg
+      const ts = N > 1 ? Math.max(0, t + sh / FPS * ((s + 0.5) / N + off)) : t;
+      const S = LOOK !== null ? lookdev(ts, LOOK, word) : (V5 ? strip(film(ts)) : film(ts));
+      if (qs.has('dbg')) S.dbg = +qs.get('dbg');
+      S.frame = Math.round(t * FPS); S.mbw = N > 1 ? sh / N : 0;   // shutter fraction between samples (edge blur)
+      Ss.push(S);
+    }
+    const Sc = N > 1 ? film(t) : (V5 ? film(t) : Ss[0]);
+    type.draw(t, Sc, LOOK);
+    Ss[Math.floor(N / 2)] = Object.assign(Ss[Math.floor(N / 2)], { frame: Math.round(t * FPS), bloom: Sc.bloom, flash: Sc.flash });
+    eng.render(Ss, type.canvas);
+  };
+  window.__ready = true;
+}
+init().catch((e) => { console.error(e.stack || String(e)); document.title = 'ERR'; });
+</script>
+</body>
+</html>

package/lib/motion/mgstyles/upstream/demos/07-liquid/js/engine.js

@@ -0,0 +1,153 @@
+import { VS, FS_SCENE, FS_BRIGHT, FS_POST } from './shaders.js';
+import { toHalf } from './textsdf.js';
+
+export const NB = 72, NS = 20;
+
+function sh(gl, type, src) {
+  const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s);
+  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(s);
+    const lines = src.split('\n');
+    const m = /ERROR: 0:(\d+)/.exec(log);
+    const ctx = m ? lines.slice(Math.max(0, +m[1] - 3), +m[1] + 2).join('\n') : '';
+    throw new Error('shader: ' + log + '\n' + ctx);
+  }
+  return s;
+}
+function prog(gl, fs) {
+  const p = gl.createProgram();
+  gl.attachShader(p, sh(gl, gl.VERTEX_SHADER, VS)); gl.attachShader(p, sh(gl, gl.FRAGMENT_SHADER, fs));
+  gl.bindAttribLocation(p, 0, 'aPos'); gl.linkProgram(p);
+  if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error('link: ' + gl.getProgramInfoLog(p));
+  const n = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS), u = {};
+  for (let i = 0; i < n; i++) { const info = gl.getActiveUniform(p, i); const name = info.name.replace(/\[0\]$/, ''); u[name] = gl.getUniformLocation(p, info.name); }
+  return { p, u };
+}
+function tex(gl, w, h, ifmt, fmt, type, filter, data = null, mips = false) {
+  const t = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t);
+  gl.texImage2D(gl.TEXTURE_2D, 0, ifmt, w, h, 0, fmt, type, data);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, mips ? gl.LINEAR_MIPMAP_LINEAR : filter);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+  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);
+  return t;
+}
+function fbo(gl, t) { const f = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, f); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0); return f; }
+
+export function createEngine(canvas, W, H, opts = {}) {
+  const gl = canvas.getContext('webgl2', { preserveDrawingBuffer: true, antialias: false, alpha: false, premultipliedAlpha: false });
+  if (!gl) throw new Error('no webgl2');
+  if (!gl.getExtension('EXT_color_buffer_float')) throw new Error('no EXT_color_buffer_float');
+  gl.getExtension('OES_texture_float_linear');
+  const vb = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vb);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+
+  // reel v5.1: the v5 grade (dark plum set, lifted jelly title) is compiled in with #define V5; the default shader source is untouched
+  const FSS = opts.v5 ? FS_SCENE.replace('precision highp float;\n', 'precision highp float;\n#define V5 1\n') : FS_SCENE;
+  const P = { scene: prog(gl, FSS), bright: prog(gl, FS_BRIGHT), post: prog(gl, FS_POST) };
+  const hdrT = tex(gl, W, H, gl.RGBA16F, gl.RGBA, gl.HALF_FLOAT, gl.LINEAR), hdrF = fbo(gl, hdrT);
+  const bw = W / 2, bh = H / 2;
+  const brT = tex(gl, bw, bh, gl.RGBA16F, gl.RGBA, gl.HALF_FLOAT, gl.LINEAR, null, true), brF = fbo(gl, brT);
+  gl.bindTexture(gl.TEXTURE_2D, brT); gl.generateMipmap(gl.TEXTURE_2D);
+  const typeT = tex(gl, W, H, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, gl.LINEAR);
+  const backT = tex(gl, 4, 4, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, gl.LINEAR);
+  let sdfT = null, sdfSize = [1, 1];
+
+  const bufB = new Float32Array(NB * 4), bufBX = new Float32Array(NB * 4);
+  const bufS = new Float32Array(NS * 4), bufSX = new Float32Array(NS * 4);
+
+  function setSDF(sdf) {
+    const h = toHalf(); const n = sdf.W * sdf.H * 4; const hd = new Uint16Array(n);
+    for (let i = 0; i < n; i++) hd[i] = h(sdf.data[i]);
+    sdfT = tex(gl, sdf.W, sdf.H, gl.RGBA16F, gl.RGBA, gl.HALF_FLOAT, gl.LINEAR, hd);
+    sdfSize = [sdf.W, sdf.H];
+  }
+
+  // In-page temporal supersampling: every sub-shutter state is rendered into the HDR target and averaged with
+  // constant-colour blending (pre-bloom, pre-grain), so fast highlights streak continuously instead of ghosting.
+  function render(Ss, typeCanvas) {
+    if (!Array.isArray(Ss)) Ss = [Ss];
+    const S = Ss[Math.floor(Ss.length / 2)];
+    gl.bindFramebuffer(gl.FRAMEBUFFER, hdrF); gl.viewport(0, 0, W, H);
+    gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.enable(gl.BLEND); gl.blendEquation(gl.FUNC_ADD); gl.blendFunc(gl.CONSTANT_COLOR, gl.ONE);
+    const w = 1 / Ss.length; gl.blendColor(w, w, w, w);
+    for (const Si of Ss) drawScene(Si);
+    gl.disable(gl.BLEND);
+    post(S, typeCanvas);
+  }
+  function drawScene(S) {
+    // ---------- scene ----------
+    const { p, u } = P.scene; gl.useProgram(p);
+    gl.uniform2f(u.uRes, W, H); gl.uniform1f(u.uT, S.t);
+    gl.uniform4f(u.uCam, S.cam.zoom, S.cam.px, S.cam.py, 0); gl.uniform2f(u.uCam2, S.cam.ox, S.cam.oy);
+    gl.uniform1f(u.uK, S.k); gl.uniform1i(u.uDbg, S.dbg || 0); gl.uniform2f(u.uSpot, S.spot ?? 1, S.halo || 0);
+    if (u.uV5) { const v = S.v5 || [0, 0, 0, 0], w = S.v5b || [0, 1, 0, 0]; gl.uniform4f(u.uV5, v[0], v[1], v[2], v[3]); gl.uniform4f(u.uV5b, w[0], w[1], w[2], w[3]); }   // v5.1 grade: set dark, title lift, violet lift
+    bufB.fill(0); bufBX.fill(0); bufS.fill(0); bufSX.fill(0);
+    const nb = Math.min(NB, S.balls.length);
+    for (let i = 0; i < nb; i++) {
+      const b = S.balls[i];
+      bufB.set([b.x, b.y, Math.max(0.01, b.r), b.u], i * 4); bufBX.set([b.s || 1, b.a || 0, b.ghost ? 1 : 0, b.amt ?? 1], i * 4);
+    }
+    const ns = Math.min(NS, S.segs.length);
+    for (let i = 0; i < ns; i++) {
+      const s = S.segs[i];
+      bufS.set([s.ax, s.ay, s.bx, s.by], i * 4); bufSX.set([s.ra, s.rb, s.u, 0], i * 4);
+    }
+    gl.uniform1i(u.uNB, nb); gl.uniform4fv(u.uB, bufB); gl.uniform4fv(u.uBX, bufBX);
+    gl.uniform1i(u.uNS, ns); gl.uniform4fv(u.uS, bufS); gl.uniform4fv(u.uSX, bufSX);
+    const L = new Float32Array(16), LX = new Float32Array(16), LP = new Float32Array(16), LM = new Float32Array(16);
+    for (let i = 0; i < 4; i++) {
+      const l = S.letters[i];
+      if (!l) continue;
+      L.set([l.x, l.y, l.grow, l.u], i * 4); LX.set([l.sx, l.sy, l.a || 0, l.on ? (l.m ?? 1) : 0], i * 4); LM.set(l.ell || [0, 0, 1, 1], i * 4); LP.set([l.px, l.py, l.wob || 0, l.wph || 0], i * 4);
+    }
+    gl.uniform4fv(u.uL, L); gl.uniform4fv(u.uLM, LM); gl.uniform4fv(u.uLX, LX); gl.uniform4fv(u.uLP, LP);
+    gl.uniform2f(u.uTexSize, sdfSize[0], sdfSize[1]);
+    const fl = S.flood;
+    gl.uniform4f(u.uFl, fl.front, fl.back, fl.phase, fl.on ? 1 : 0); gl.uniform4f(u.uFlA, fl.amp, fl.freq, fl.lean, fl.u); gl.uniform4f(u.uFlB, fl.dx ?? 1, fl.dy ?? 0, fl.bump || 0, fl.bumpC || 0);
+    const ov = new Float32Array(12), ova = new Float32Array(12), ovb = new Float32Array(12), ovv = [0, 0, 0];
+    S.overlays.forEach((o, i) => { ov.set([o.front, o.back, o.phase, o.on ? 1 : 0], i * 4); ova.set([o.amp, o.freq, o.lean, o.u], i * 4); ovb.set([o.dx ?? 1, o.dy ?? 0, o.bump || 0, o.bumpC || 0], i * 4); ovv[i] = o.vel || 0; });
+    gl.uniform4fv(u.uOv, ov); gl.uniform4fv(u.uOvA, ova); gl.uniform4fv(u.uOvB, ovb); gl.uniform3f(u.uOvV, ovv[0], ovv[1], ovv[2]);
+    const bb = new Float32Array(32 * 4); const nbb = Math.min(32, (S.bubbles || []).length);
+    for (let i = 0; i < nbb; i++) bb.set(S.bubbles[i], i * 4);
+    gl.uniform4fv(u.uBub, bb); gl.uniform1i(u.uNBub, nbb);
+    gl.uniform1f(u.uFloorY, S.floorY); gl.uniform1f(u.uHorizon, S.horizon);
+    gl.uniform4f(u.uRip, S.rip.x, S.rip.y, S.rip.age, S.rip.amp);
+    if (u.uMbw) gl.uniform1f(u.uMbw, S.mbw || 0);
+    const ln = S.lens || [0, 0, 1, 1, 0, 0, 1, 0];
+    if (u.uLens) { gl.uniform4f(u.uLens, ln[0], ln[1], ln[2], ln[3]); gl.uniform4f(u.uLens2, ln[4], ln[5], ln[6], ln[7]); }
+    const sw = S.sw || [0, 0, 1, 0]; if (u.uSw) gl.uniform4f(u.uSw, sw[0], sw[1], sw[2], sw[3]);
+    { const r = S.ring || [0, 0, 0, 0]; if (u.uRing) gl.uniform4f(u.uRing, r[0], r[1], r[2], r[3]);
+      const c = S.crown || [0, 0, 0, 0]; if (u.uCrown) gl.uniform4f(u.uCrown, c[0], c[1], c[2], c[3]);
+      const q = S.par || [0, 0, 0, 0]; if (u.uPar) gl.uniform4f(u.uPar, q[0], q[1], q[2], q[3]);
+      if (u.uCaus) gl.uniform1f(u.uCaus, S.caus || 0); }   // r2
+    gl.uniform4f(u.uKey, S.key.x, S.key.y, S.key.glint, S.key.glintAmp);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, sdfT); gl.uniform1i(u.uTex, 0);
+    gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, backT); gl.uniform1i(u.uBack, 1);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+  }
+  function post(S, typeCanvas) {
+    // ---------- bright pass ----------
+    gl.bindFramebuffer(gl.FRAMEBUFFER, brF); gl.viewport(0, 0, bw, bh);
+    gl.useProgram(P.bright.p);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, hdrT); gl.uniform1i(P.bright.u.uSrc, 0);
+    gl.uniform2f(P.bright.u.uTexel, 1 / W, 1 / H);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.bindTexture(gl.TEXTURE_2D, brT); gl.generateMipmap(gl.TEXTURE_2D);
+    // ---------- post ----------
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, W, H);
+    const pp = P.post; gl.useProgram(pp.p);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, hdrT); gl.uniform1i(pp.u.uHdr, 0);
+    gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, brT); gl.uniform1i(pp.u.uBloom, 1);
+    gl.activeTexture(gl.TEXTURE2); gl.bindTexture(gl.TEXTURE_2D, typeT);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, typeCanvas);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+    gl.uniform1i(pp.u.uType, 2);
+    gl.uniform2f(pp.u.uRes, W, H); gl.uniform1f(pp.u.uFrame, S.frame); gl.uniform1f(pp.u.uBloomAmt, S.bloom); gl.uniform1f(pp.u.uFlash, S.flash || 0);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.finish();
+  }
+  return { gl, setSDF, render };
+}

package/lib/motion/mgstyles/upstream/demos/07-liquid/js/links.js

@@ -0,0 +1,64 @@
+// reel v5: link elements of the film state S (pure: S = film(t)), in 1920x1080 output-frame px.
+// The film tags its primitives (scene.js tag()): lk = ids the primitive belongs to (hidden together by ?nolink=id),
+// main = the principal body of that id (the one reported). Look: glossy liquid (tangerine -> hot pink -> violet palette).
+const W = 1920, H = 1080;
+// sRGB approximations of the shader palette at the body's u (palMid = mid-thickness body, palThin = thin rim / lit core)
+const PM = [[1.00, 0.36, 0.06], [1.00, 0.10, 0.44], [0.56, 0.12, 1.00]], PT = [[1.00, 0.74, 0.30], [1.00, 0.50, 0.66], [0.84, 0.52, 1.00]];
+const mixv = (a, b, k) => a.map((c, i) => c + (b[i] - c) * k);
+const palv = (P, u) => { u = Math.min(1, Math.max(0, u)); const [a, b] = u < 0.5 ? [P[0], P[1]] : [P[1], P[2]], k = u < 0.5 ? u * 2 : u * 2 - 1; return mixv(a, b, k); };
+const hex = (v) => '#' + v.map((c) => Math.round(255 * Math.min(1, Math.max(0, c))).toString(16).padStart(2, '0')).join('');
+const pal = (P, u) => hex(palv(P, u));
+// v5.1 grade (S.v5 = [set, lift, violet lift, refl]): the violet end lifts to pink-violet, the title liquid gets lighter
+const PM5 = [0.88, 0.36, 1.00], PT5 = [0.98, 0.74, 1.00];
+function cols(S, u) {
+  const g = S.v5 || [0, 0, 0, 0];
+  const pm = [PM[0], PM[1], mixv(PM[2], PM5, g[2])], pt = [PT[0], PT[1], mixv(PT[2], PT5, g[2])];
+  const fill = mixv(palv(pm, u), palv(pt, u), 0.3 * g[1]), rim = palv(pt, u);
+  return { fill: hex(fill), stroke: hex(rim), grad: [hex(rim), hex(fill)] };
+}
+
+export function linkElements(S, word) {
+  const c = S.cam, z = c.zoom;
+  const X = (x) => (x - c.px - c.ox) * z + W / 2, Y = (y) => (y - c.py - c.oy) * z + H / 2;
+  // fraction of a box that is inside the frame
+  const vis = (x0, y0, x1, y1) => Math.max(0, Math.min(1, (Math.min(x1, W) - Math.max(x0, 0)) / Math.max(1, x1 - x0))) *
+    Math.max(0, Math.min(1, (Math.min(y1, H) - Math.max(y0, 0)) / Math.max(1, y1 - y0)));
+  const out = [];
+  const info = S.lnk || {};
+  for (const id of ['dot', 'hop']) {
+    let b = null;   // principal body; if two phases overlap in one state, the more visible one wins
+    for (const q of S.balls) if (q.main === id && (!b || q.la > b.la || (q.la === b.la && q.r > b.r))) b = q;
+    if (!b) continue;
+    // shader ellipse: semi-axis r*s along angle a, r/s across; equal-area circle radius = r
+    const ca = Math.cos(b.a), sa = Math.sin(b.a), A = b.r * b.s * z, B = b.r / b.s * z;
+    const rx = Math.hypot(A * ca, B * sa), ry = Math.hypot(A * sa, B * ca);   // axis-aligned half extents
+    const x = X(b.x), y = Y(b.y), r = b.r * z;
+    const a = +(b.la * vis(x - rx, y - ry, x + rx, y + ry)).toFixed(3);
+    const cc = cols(S, b.u);
+    out.push({ id, type: 'circle', x: +x.toFixed(1), y: +y.toFixed(1), r: +r.toFixed(1), a, look: 'glossy',
+      fill: cc.fill, stroke: cc.stroke, sw: 0, grad: cc.grad, hi: '#fff7f0',
+      rx: +rx.toFixed(1), ry: +ry.toFixed(1), note: b.note });
+  }
+  if (info.bar) {   // the fused bar (6.1-6.4): union of the four slot ellipses -> a thick liquid line
+    const bs = S.balls.filter((q) => q.lk && q.lk.includes('bar'));
+    if (bs.length) {
+      let x0 = 1e9, x1 = -1e9, ys = 0, hs = 0;
+      for (const b of bs) { const hx = b.r / b.s, vy = b.r * b.s; x0 = Math.min(x0, b.x - hx); x1 = Math.max(x1, b.x + hx); ys += b.y; hs += vy; }
+      const y = Y(ys / bs.length), w = 2 * hs / bs.length * z;
+      out.push({ id: 'bar', type: 'line', x0: +X(x0).toFixed(1), y0: +y.toFixed(1), x1: +X(x1).toFixed(1), y1: +y.toFixed(1), w: +w.toFixed(1),
+        a: +info.bar.a.toFixed(3), look: 'glossy', fill: '#ff1f73', note: info.bar.note });
+    }
+  }
+  if (S.letters.length) {   // the title 「液态流动」 as a text block (ink box of the four liquid glyphs)
+    let x0 = 1e9, y0 = 1e9, x1 = -1e9, y1 = -1e9, m = 1;
+    S.letters.forEach((l, i) => {
+      const L = word.letters[i], bb = L.bbox;
+      x0 = Math.min(x0, l.x + (bb[0] - L.sx0) * l.sx); x1 = Math.max(x1, l.x + (bb[2] - L.sx0) * l.sx);
+      y0 = Math.min(y0, l.y + (bb[1] - L.sy0) * l.sy); y1 = Math.max(y1, l.y + (bb[3] - L.sy0) * l.sy);
+      m = Math.min(m, l.m ?? 1);
+    });
+    out.push({ id: 'title', type: 'rect', x: +((X(x0) + X(x1)) / 2).toFixed(1), y: +((Y(y0) + Y(y1)) / 2).toFixed(1),
+      w: +((x1 - x0) * z).toFixed(1), h: +((y1 - y0) * z).toFixed(1), rot: 0, a: +m.toFixed(3), text: '液态流动', note: 'liquid title block' });
+  }
+  return out;
+}

package/lib/motion/mgstyles/upstream/demos/07-liquid/js/lookdev.js

@@ -0,0 +1,46 @@
+// Static look-development arrangements (used with ?look=N)
+export function lookdev(t, look, W) {
+  const S = baseState(t);
+  const floorY = S.floorY;
+  if (look === 0) {
+    // end card
+    W.letters.forEach((l, i) => S.letters.push({ ...l, x: l.sx0, y: l.sy0, grow: 0, u: [0.05, 0.3, 0.55, 0.85][i], sx: 1, sy: 1, on: true }));
+    S.balls.push({ x: 1180, y: floorY - 9, r: 26, u: 0.8, s: 2.2, a: 0 });
+    S.segs.push({ ax: 830, ay: 560, bx: 830, by: 600, ra: 9, rb: 5, u: 0.3 });
+    S.balls.push({ x: 830, y: 604, r: 12, u: 0.3 });
+    S.rip = { x: 1180, y: floorY, age: 0.45, amp: 1 };
+  } else if (look === 1) {
+    S.balls.push({ x: 420, y: floorY - 22, r: 52, u: 0.95, s: 2.0, a: 0 });
+    S.balls.push({ x: 700, y: floorY - 28, r: 60, u: 0.05, s: 1.9, a: 0 });
+    S.balls.push({ x: 1000, y: 470, r: 140, u: 0.4, s: 1.0, a: 0 });
+    S.balls.push({ x: 1330, y: 300, r: 48, u: 0.55, s: 1.35, a: Math.PI / 2 });
+    S.balls.push({ x: 1330, y: 238, r: 22, u: 0.55, s: 1.0, a: 0 });
+    for (let i = 0; i < 7; i++) S.balls.push({ x: 560 + i * 34, y: floorY - 120 - 60 * Math.sin(i * 0.9), r: 7 + (i % 3) * 4, u: 0.1 + 0.1 * i, s: 1, a: 0 });
+    S.balls.push({ x: 1185, y: 560, r: 55, u: 0.5 }); // neck with sphere
+    S.segs.push({ ax: 700, ay: -40, bx: 700, by: 250, ra: 26, rb: 9, u: 0.1 });
+    S.balls.push({ x: 700, y: 300, r: 50, u: 0.1, s: 1.15, a: Math.PI / 2 });
+  } else if (look === 2) {
+    S.balls.push({ x: 1200, y: 470, r: 140, u: 0.4 });
+    S.flood = { on: true, front: 900, back: -400, phase: 1.3, amp: 110, freq: 0.0062, lean: 0.12, u: 0.9 };
+    S.overlays = [
+      { on: true, front: 620, back: -600, phase: 2.2, amp: 120, freq: 0.0055, lean: 0.10, u: 0.05 },
+      { on: true, front: 330, back: -700, phase: 0.4, amp: 130, freq: 0.0058, lean: 0.08, u: 0.45 },
+    ];
+  } else if (look === 3) {
+    S.flood = { on: true, front: 3000, back: -3000, phase: 1.3, amp: 110, freq: 0.0062, lean: 0.0, u: 0.5 };
+  }
+  return S;
+}
+
+export function baseState(t) {
+  return {
+    t, frame: Math.round(t * 30), k: 0.1, floorY: 872, horizon: 786,
+    cam: { zoom: 1, px: 960, py: 540, ox: 0, oy: 0 },
+    balls: [], segs: [], letters: [],
+    flood: { on: false, front: 0, back: 0, phase: 0, amp: 0, freq: 0, lean: 0, u: 0 },
+    overlays: [{ on: false, front: 0, back: 0, phase: 0, amp: 0, freq: 0, lean: 0, u: 0 }, { on: false, front: 0, back: 0, phase: 0, amp: 0, freq: 0, lean: 0, u: 0 }, { on: false, front: 0, back: 0, phase: 0, amp: 0, freq: 0, lean: 0, u: 0 }],
+    rip: { x: 0, y: 0, age: 0, amp: 0 },
+    key: { x: -0.78, y: -0.95, glint: -9999, glintAmp: 0 },
+    bloom: 0.55, flash: 0,
+  };
+}