dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/mgstyles/upstream/demos/03-isometric/js/title5.js

@@ -0,0 +1,294 @@
+// Reel v5 only (?v5=1): the style-name title 「等轴 2.5D」 + the link dot.
+// Title: extruded glyphs standing upright on the lavender iso floor (bg group, parallax 0.6), reading along +X (screen
+// down-right 30°, the sun-lit +Z face), parallel to the island's front-left edge. The letters grow like the city's walls
+// (scaleY spring 14.8/0.61, ~9 % overshoot, 32nd-note stagger, cyan fresh-wall edge that fades). "ISOMETRIC" is a printed
+// floor decal in front of them. 等轴 = AlimamaShuHeiTi Bold, 2.5D = Unbounded 800 (the film's wordmark face).
+// Dot: a glossy coral ball. It falls in from above onto the CORE base as it lands, rides the telescoping CORE up to the
+// antenna tip (it replaces the tiny cyan beacon; the hero light column fires from it), then on the pull-back it hops off
+// and lands as the decimal point of "2.5D".
+import * as THREE from 'three';
+import { parse } from 'opentype';
+import * as A from './anim.js';
+import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
+import { LAYER_GLOW } from './render.js';
+
+function glyphShapes(font, ch, size) {
+  const path = font.getPath(ch, 0, 0, size);
+  const sp = new THREE.ShapePath();
+  for (const c of path.commands) {
+    if (c.type === 'M') sp.moveTo(c.x, -c.y);
+    else if (c.type === 'L') sp.lineTo(c.x, -c.y);
+    else if (c.type === 'Q') sp.quadraticCurveTo(c.x1, -c.y1, c.x, -c.y);
+    else if (c.type === 'C') sp.bezierCurveTo(c.x1, -c.y1, c.x2, -c.y2, c.x, -c.y);
+  }
+  return sp.toShapes(false);
+}
+
+export async function buildTitle5(world, cues, o) {
+  const { bgGroup, onUpdate, PAL, scene, camera } = world;
+  const [bufC, bufL] = await Promise.all([
+    fetch('/assets/fonts/cjk/alimamashuheiti/AlimamaShuHeiTi-Bold.ttf').then((r) => r.arrayBuffer()),
+    fetch('/demos/03-isometric/assets/fonts/Unbounded-800-static.ttf').then((r) => r.arrayBuffer()),
+  ]);
+  const fC = parse(bufC), fL = parse(bufL);
+  const FLOOR = o.floorY;
+  const SC = o.sizeC, SL = o.sizeL, DEPTH = o.depth;
+
+  // plane basis: reading direction +X, letter-up +Y, extrusion toward the camera-left along +Z (front cap = lit +Z face)
+  const root = new THREE.Group();
+  root.matrixAutoUpdate = false;
+  bgGroup.add(root);
+
+  const faceMat = new THREE.MeshStandardMaterial({ color: new THREE.Color(o.face || PAL.ink), roughness: 0.5, metalness: 0, envMapIntensity: 0.5 });
+  const items = [
+    { ch: '等', f: fC, s: SC }, { ch: '轴', f: fC, s: SC }, { gap: o.gap },
+    { ch: '2', f: fL, s: SL }, { ch: '.', f: fL, s: SL, dot: true }, { ch: '5', f: fL, s: SL }, { ch: 'D', f: fL, s: SL },
+  ];
+  // ink floor offset per font: lift so the lowest ink of that font's glyphs rests on the floor (the floor is a bg quad
+  // without depth, anything below it would show through)
+  const minY = new Map();
+  for (const it of items) {
+    if (!it.ch || it.dot) continue;
+    const bb = it.f.getPath(it.ch, 0, 0, it.s).getBoundingBox();
+    minY.set(it.f, Math.max(minY.get(it.f) ?? -1e9, bb.y2)); // opentype y is down: y2 = lowest ink
+  }
+  let x = 0;
+  const letters = [];
+  let dotSlot = null, k = 0;
+  for (let i = 0; i < items.length; i++) {
+    const it = items[i];
+    if (it.gap) { x += it.gap; continue; }
+    const g = it.f.charToGlyph(it.ch);
+    const adv = g.advanceWidth * it.s / it.f.unitsPerEm;
+    const lift = minY.get(it.f) ?? 0;
+    if (it.dot) {
+      const bb = it.f.getPath('.', 0, 0, it.s).getBoundingBox();
+      const r = (bb.x2 - bb.x1) / 2;
+      dotSlot = { x: x + (bb.x1 + bb.x2) / 2, r, bottom: -bb.y2 + lift };
+      x += adv + o.tracking * it.s;
+      continue;
+    }
+    const geo = new THREE.ExtrudeGeometry(glyphShapes(it.f, it.ch, it.s),
+      { depth: DEPTH, bevelEnabled: true, bevelThickness: o.bevel, bevelSize: o.bevel * 0.9, bevelSegments: 3, curveSegments: 12 });
+    geo.translate(0, lift, -DEPTH / 2);
+    geo.computeBoundingBox();
+    const bb = geo.boundingBox;
+    const cx = (bb.min.x + bb.max.x) / 2;
+    geo.translate(-cx, -bb.min.y, 0); // pivot: glyph centre, on the floor
+    const sideMat = new THREE.MeshStandardMaterial({ color: new THREE.Color(o.side), roughness: 0.6, metalness: 0, envMapIntensity: 0.4,
+      emissive: new THREE.Color(PAL.data), emissiveIntensity: 0 });
+    const fm = o.faceEmit ? faceMat.clone() : faceMat; // v5.1 night: each letter's face lights up on its own
+    if (o.faceEmit) { fm.emissive = new THREE.Color(o.faceEmit); fm.emissiveIntensity = 0; }
+    const m = new THREE.Mesh(geo, [fm, sideMat]);
+    m.castShadow = true; m.receiveShadow = true;
+    const pivot = new THREE.Group();
+    pivot.position.set(x + cx, o.plinthH + bb.min.y, 0);
+    pivot.add(m);
+    root.add(pivot);
+    letters.push({ pivot, m, sideMat, fm, t: o.t0 + k * o.step, h: bb.max.y - bb.min.y });
+    k++;
+    x += adv + o.tracking * it.s;
+  }
+  const width = x - o.tracking * SL;
+  const hC = letters[0].h;
+
+  // anchor = floor point under the middle of the baseline
+  const anchor = o.anchor;
+  root.matrix.makeTranslation(anchor.x - width / 2, FLOOR, anchor.z);
+  root.matrixWorldNeedsUpdate = true;
+
+  // shadow catcher under the title (the floor itself is a screen quad)
+  const catcher = new THREE.Mesh(new THREE.PlaneGeometry(1, 1).rotateX(-Math.PI / 2), new THREE.ShadowMaterial({ color: new THREE.Color(o.catcherCol || '#3A2F8F'), opacity: o.catcherOp ?? 0.3 }));
+  catcher.receiveShadow = true;
+  catcher.scale.set(width + 10, 1, 14);
+  catcher.position.set(anchor.x + 1.5, FLOOR + 0.001, anchor.z - 3);
+  bgGroup.add(catcher);
+
+  // plinth: a low white-clay slab the letters stand on (drops in like the island's tiles); "ISOMETRIC" is printed on its
+  // sun-lit front (+Z) face
+  const PH = o.plinthH, PD = DEPTH + o.plinthD, PM = o.plinthM;
+  const plinth = new THREE.Group(); root.add(plinth);
+  const slabGeo = new RoundedBoxGeometry(width + 2 * PM, PH, PD, 3, 0.06); slabGeo.translate(width / 2, PH / 2, 0);
+  const slab = new THREE.Mesh(slabGeo, new THREE.MeshStandardMaterial({ color: new THREE.Color(o.plinthCol), roughness: 0.62, envMapIntensity: 0.45 }));
+  slab.castShadow = true; slab.receiveShadow = true; plinth.add(slab);
+  const cw = 4096, chh = 256;
+  const cv = document.createElement('canvas'); cv.width = cw; cv.height = chh;
+  const ctx = cv.getContext('2d');
+  ctx.clearRect(0, 0, cw, chh);
+  ctx.textBaseline = 'middle';
+  ctx.fillStyle = PAL.data;
+  ctx.beginPath(); ctx.arc(60, 128, 34, 0, Math.PI * 2); ctx.fill();
+  ctx.fillStyle = o.enCol || '#4A4394';
+  ctx.font = `500 ${o.enPx}px 'JetBrains Mono'`;
+  let mx = 140;
+  for (const c of o.en) { ctx.fillText(c, mx, 136); mx += ctx.measureText(c).width + o.enPx * 0.32; }
+  const decalUsed = mx / cw;
+  const tex = new THREE.CanvasTexture(cv);
+  tex.colorSpace = THREE.SRGBColorSpace; tex.anisotropy = 16;
+  const decalU = { map: { value: tex }, uReveal: { value: 0 } };
+  const decalMat = new THREE.ShaderMaterial({
+    uniforms: decalU, transparent: true, depthWrite: false,
+    vertexShader: 'varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.); }',
+    fragmentShader: 'uniform sampler2D map; uniform float uReveal; varying vec2 vUv; void main(){ vec4 c = texture2D(map, vUv); float m = 1.0 - smoothstep(uReveal - 0.02, uReveal, vUv.x); gl_FragColor = vec4(c.rgb, c.a * m); }',
+  });
+  const dH = PH * 0.9, dW = dH * cw / chh;
+  const decal = new THREE.Mesh(new THREE.PlaneGeometry(dW, dH), decalMat);
+  decal.position.set(-PM + 0.25 + dW / 2, PH / 2, PD / 2 + 0.004);
+  decal.layers.set(LAYER_GLOW);
+  plinth.add(decal);
+
+  onUpdate((T) => {
+    for (const L of letters) {
+      const tau = T - L.t;
+      const s = A.spring(tau, 14.8, 0.61);
+      L.pivot.visible = tau > 0 && s > 0.004;
+      L.pivot.scale.set(1, Math.max(s, 1e-4), 1);
+      // fresh-wall cyan edge: on while growing, gone ~0.4 s after the letter starts
+      L.sideMat.emissiveIntensity = tau > 0 ? 0.45 * Math.exp(-Math.max(0, tau - 0.16) / 0.12) : 0;
+      if (o.faceEmit) { // neon-style switch-on once the letter stands: blink, blink, on (done ~0.2 s after the growth peak)
+        const v = tau - 0.1;
+        const on = v < 0 ? 0 : v < 0.035 ? 0.7 : v < 0.07 ? 0.08 : v < 0.1 ? 0.85 : v < 0.125 ? 0.25 : 1;
+        L.fm.emissiveIntensity = o.faceEI * on * (v > 0.125 ? 1 + 0.35 * Math.exp(-(v - 0.125) / 0.12) : 1);
+      }
+    }
+    decalU.uReveal.value = A.easeInOutCubic(A.inv(o.enT, o.enT + 0.45, T)) * Math.min(1.03, decalUsed + 0.03);
+    decal.visible = T > o.enT - 0.01;
+    // plinth drops in (tile drop: gravity fall, squash, two micro bounces)
+    const pd = A.drop(T - o.plinthT, 0.24, 2.2, 0, 0.05);
+    plinth.visible = pd.vis > 0;
+    plinth.position.y = pd.y; plinth.scale.set(1, pd.sy, 1); // long slab: squash in Y only
+  });
+
+  // ------------------------------------------------------------------------------------------ the dot (coral ball)
+  const V = world.v5;
+  const R0 = o.dotR0, R1 = dotSlot.r * o.dotScale;
+  const ballMat = new THREE.MeshStandardMaterial({ color: new THREE.Color(o.dotCol), roughness: 0.26, metalness: 0, envMapIntensity: 1.0,
+    emissive: new THREE.Color(o.dotEmit || o.dotCol), emissiveIntensity: 0 });
+  const ball = new THREE.Mesh(new THREE.SphereGeometry(1, 64, 40), ballMat);
+  ball.castShadow = true; ball.receiveShadow = true;
+  ball.visible = false;
+  scene.add(ball);
+  let halo = null; // v5.1 night: a soft additive coral glow around the ball (glow layer: no depth/AO, hidden with nolink=dot)
+  if (o.dotHalo) {
+    const hc = document.createElement('canvas'); hc.width = hc.height = 128;
+    const hx = hc.getContext('2d'); const gr = hx.createRadialGradient(64, 64, 0, 64, 64, 64);
+    gr.addColorStop(0, 'rgba(255,255,255,1)'); gr.addColorStop(0.3, 'rgba(255,255,255,0.55)'); gr.addColorStop(1, 'rgba(255,255,255,0)');
+    hx.fillStyle = gr; hx.fillRect(0, 0, 128, 128);
+    const ht = new THREE.CanvasTexture(hc);
+    halo = new THREE.Sprite(new THREE.SpriteMaterial({ map: ht, color: new THREE.Color(o.dotHalo), transparent: true, depthWrite: false, depthTest: true, blending: THREE.AdditiveBlending, opacity: 0 }));
+    halo.layers.set(LAYER_GLOW); halo.renderOrder = 5; halo.visible = false; scene.add(halo);
+  }
+  const hideDot = o.nolink.has('dot');
+  const D = o.dot; // times: in0 (fall start), land (on the CORE base), hop0 (leaves the antenna), hop1 (lands as the period)
+  const tmp = new THREE.Vector3(), pA = new THREE.Vector3(), pB = new THREE.Vector3();
+  const state = { vis: false, p: new THREE.Vector3(), r: R0, sq: 1, glow: 0 };
+  const slotLocal = () => new THREE.Vector3(dotSlot.x, PH + dotSlot.bottom, 0); // ball bottom touches the floor; centre added below
+
+  function towerPoint(T, r, out) { // ball centre resting on the CORE stack top (world)
+    V.core.updateWorldMatrix(true, false);
+    const h = V.coreStackTop();
+    out.set(0, h, 0);
+    V.core.localToWorld(out);
+    out.y += r * 0.92;
+    return out;
+  }
+  function slotPoint(r, out) { // ball centre in the period slot (world)
+    root.updateWorldMatrix(true, false);
+    out.copy(slotLocal());
+    root.localToWorld(out);
+    out.y += r;
+    return out;
+  }
+  // settle: squash on contact then two micro bounces (the film's tile/letter landing), returns [dy, sy]
+  function land(tau, amp) {
+    if (tau < 0) return [0, 1];
+    const b1 = 0.14;
+    const dy = tau < b1 ? amp * Math.sin(Math.PI * tau / b1) : (tau < b1 + 0.09 ? amp * 0.25 * Math.sin(Math.PI * (tau - b1) / 0.09) : 0);
+    const sq = 1 - 0.3 * Math.exp(-tau / 0.045) * Math.cos(tau * 40);
+    return [dy, sq];
+  }
+  // pose the ball for time T. Call AFTER world.update(T) (needs the CORE pose + bg group offset for this T).
+  function post(T) {
+    V.beacon.visible = false; // the ball is the beacon in v5
+    let vis = T >= D.in0, r = R0, sq = 1;
+    const p = state.p;
+    if (T < D.land) {
+      const u = A.clamp((T - D.in0) / (D.land - D.in0));
+      towerPoint(T, r, p);
+      p.y += D.h0 * (1 - u * u);
+    } else if (T < D.hop0) {
+      towerPoint(T, r, p);
+      const [dy, s] = land(T - D.land, 0.16);
+      p.y += dy; sq = s;
+    } else if (T < D.hop1) {
+      const u = (T - D.hop0) / (D.hop1 - D.hop0);
+      r = A.lerp(R0, R1, A.smooth(u));
+      towerPoint(T, R0, pA); slotPoint(r, pB);
+      p.copy(pA).lerp(pB, u);
+      p.y += 4 * D.arc * u * (1 - u);
+    } else {
+      r = R1;
+      slotPoint(r, p);
+      const [dy, s] = land(T - D.hop1, 0.35);
+      p.y += dy; sq = s;
+    }
+    // glow: pre-blinks like the old beacon, flash on the hit, soft idle glow while it crowns the CORE
+    const PT = V.PULSE_T;
+    let glow = 0;
+    if (T > cues.tower.antenna && T < PT) glow = 0.9 * Math.max(Math.exp(-Math.pow((T - 5.625) * 30, 2)), Math.exp(-Math.pow((T - 5.875) * 30, 2)));
+    else if (T >= PT) glow = 0.12 + 1.6 * Math.exp(-(T - PT) * 3.0);
+    if (T >= D.hop0) glow *= 1 - A.smooth(A.inv(D.hop0, D.hop1, T));
+    ballMat.emissiveIntensity = Math.max(glow * (o.dotGlowK ?? 1), o.dotGlow0 || 0);
+    ball.visible = vis && !hideDot;
+    ball.position.copy(p);
+    if (halo) {
+      halo.visible = ball.visible; halo.position.copy(p); halo.scale.setScalar(r * (o.dotHaloS || 4.2));
+      halo.material.opacity = (o.dotHaloA || 0.3) * (1 + 0.8 * Math.min(1, Math.max(glow * (o.dotGlowK ?? 1) - (o.dotGlow0 || 0), 0)));
+    }
+    ball.scale.set(r * (1 + (1 - sq) * 0.5), r * sq, r * (1 + (1 - sq) * 0.5));
+    Object.assign(state, { vis, r, sq, glow });
+  }
+
+  // ------------------------------------------------------------------------------------------ linkAt helpers
+  const toPx = (v) => { tmp.copy(v).project(camera); return [(tmp.x + 1) * 960, (1 - tmp.y) * 540]; };
+  function links(T) {
+    const out = [];
+    const ppu = 60 * camera.zoom;
+    // dot: sphere under ortho projection = circle of radius r * px/unit; on-screen check
+    const [x, y] = toPx(state.p);
+    const rr = state.r * ppu * (1 + (1 - state.sq) * 0.25);
+    const on = state.vis && x > -rr && x < 1920 + rr && y > -rr && y < 1080 + rr;
+    out.push({ id: 'dot', type: 'circle', x: +x.toFixed(1), y: +y.toFixed(1), r: +rr.toFixed(1), a: on ? 1 : 0, look: 'sphere',
+      ...(() => { // measured rendered pixels; v5.1 night: the ball reads deeper before the hit, lighter under the sign's glow
+        const lk = o.dotLooks ? (o.dotLooks.find((l) => T < l[0]) || o.dotLooks[o.dotLooks.length - 1]) : null;
+        const fill = lk ? lk[1] : (o.dotFill || o.dotCol);
+        return { fill, stroke: fill, sw: 0, grad: lk ? lk[2] : o.dotGrad };
+      })(),
+      note: T < D.hop0 ? 'glossy coral ball: CORE beacon orb (rides the telescoping tower, light column fires from it)'
+        : 'glossy coral ball: the decimal point of the 3D title "2.5D"' });
+    // light column (hero beam) as a line from the ball up out of frame
+    const PT = V.PULSE_T, u = T - PT;
+    const colA = o.colA ? o.colA(T) : null; // v5.1 night: the column keeps burning until the pull-back (night5.js)
+    if (u > 0 && (colA != null ? colA > 0.01 : u < 0.6)) {
+      const env = colA != null ? colA / 1.5 : (u < 0.012 ? u / 0.012 : Math.exp(-(u - 0.012) * 5.0));
+      const top = state.p.clone(); top.y += 16;
+      const [x1, y1] = toPx(top);
+      out.push({ id: 'column', type: 'line', x0: +x.toFixed(1), y0: +y.toFixed(1), x1: +x1.toFixed(1), y1: +y1.toFixed(1),
+        w: +(0.26 * ppu).toFixed(1), a: +Math.min(1, env * 1.5).toFixed(3), note: 'hero light column (white core, cyan rim)' });
+    }
+    // title block: parallelogram (baseline at -30°, verticals vertical); rect = its screen bounding box, poly = corners
+    const vis = letters.filter((L) => L.pivot.visible);
+    if (vis.length) {
+      root.updateWorldMatrix(true, false);
+      const hT = hC * Math.min(1, A.spring(T - letters[0].t, 14.8, 0.61));
+      const c = [[0, PH], [width, PH], [width, PH + hT], [0, PH + hT]].map(([lx, ly]) => toPx(root.localToWorld(new THREE.Vector3(lx, ly, DEPTH / 2))));
+      const xs = c.map((q) => q[0]), ys = c.map((q) => q[1]);
+      const x0 = Math.min(...xs), x1 = Math.max(...xs), y0 = Math.min(...ys), y1 = Math.max(...ys);
+      const allUp = letters.every((L) => T - L.t > 0.25);
+      out.push({ id: 'title', type: 'rect', x: +((x0 + x1) / 2).toFixed(1), y: +((y0 + y1) / 2).toFixed(1), w: +(x1 - x0).toFixed(1), h: +(y1 - y0).toFixed(1), rot: 0,
+        poly: c.map((q) => q.map((v) => +v.toFixed(1))), a: allUp ? 1 : 0.5, note: '3D title 等轴 2.5D, a -30° parallelogram (poly = baseline-left, baseline-right, top-right, top-left)' });
+    }
+    return out;
+  }
+  return { root, letters, width, hC, decal, ball, post, links, dotSlot, state };
+}

package/lib/motion/mgstyles/upstream/demos/03-isometric/js/ui.js

@@ -0,0 +1,141 @@
+// Iso callout tags as DOM layers, built with the literal SSR matrices:
+//   right face : rotate(-30deg) skewX(-30deg) scaleY(0.86602)   (card x-axis runs up-right  = world -Z)
+//   left face  : rotate(30deg)  skewX(30deg)  scaleY(0.86602)   (card x-axis runs down-right = world +X)
+//   top face   : rotate(-30deg) skewX(30deg)  scaleY(0.86602)
+// (times a uniform 0.8165 · px-per-unit factor, identical to the orthographic projection of the 3D scene).
+// Round 1: leaders are world-space polylines (vertical stub + one iso-axis run) projected every frame, so a card can
+// fly into the void on true 30-degree lines and its bottom-left corner sits on the leader end. Tags z-sort by screen y.
+import * as THREE from 'three';
+import * as A from './anim.js';
+
+const SSR = {
+  right: 'rotate(-30deg) skewX(-30deg) scaleY(0.86602)',
+  left: 'rotate(30deg) skewX(30deg) scaleY(0.86602)',
+  top: 'rotate(-30deg) skewX(30deg) scaleY(0.86602)',
+};
+const CW = 360, CH = 210;            // card px
+const SPX = 160, SPY = 20, SPW = 180, SPH = 72; // spark-bar box (card px), right half of the card
+// Bars, not a polyline: on a skewed iso face a card-space line under ~27 deg reads with the wrong sign on screen,
+// while bar heights stay vertical (the SSR matrices keep card-y vertical), so the trend reads the same on either face.
+
+const bh = (v) => 8 + v * (SPH - 14);
+
+export function buildTags(world, cues, defs) {
+  const ui = document.getElementById('ui');
+  const style = document.createElement('style');
+  style.textContent = `
+    .tg { position:absolute; left:0; top:0; width:0; height:0; }
+    .tg .ring { position:absolute; left:0; top:0; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
+      border:3px solid var(--ac); box-sizing:border-box; transform-origin:50% 50%; }
+    .tg .dot { position:absolute; left:0; top:0; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--ac);
+      transform-origin:50% 50%; box-shadow: 0 0 0 3px rgba(255,255,255,0.92); }
+    .tg svg.lead { position:absolute; left:0; top:0; width:1px; height:1px; overflow:visible; }
+    .tg .card { position:absolute; left:0; top:0; width:${CW}px; height:${CH}px; transform-origin:0 0; }
+    .tg .face { position:absolute; left:0; top:0; width:${CW}px; height:${CH}px; border-radius:16px; background:rgba(255,255,255,0.965);
+      box-shadow: 0 0 0 1.5px rgba(44,41,96,0.07), 0 10px 0 -4px rgba(44,41,96,0.10); overflow:hidden; transform-origin: 0 50%; }
+    .tg .bar { position:absolute; left:0; top:0; width:10px; height:${CH}px; background:var(--ac); }
+    .tg .lab { position:absolute; left:32px; top:24px; font: 500 28px/1 'HarmonyOS Sans SC'; color:#2C2960; letter-spacing:0.04em; white-space:nowrap; }
+    .tg .en { position:absolute; left:33px; top:62px; font: 500 23px/1 'JetBrains Mono'; color:#6B64B8; letter-spacing:0.12em; white-space:nowrap; }
+    .tg .val { position:absolute; left:28px; top:108px; font: 800 76px/1 'Unbounded'; color:#2C2960; letter-spacing:-0.02em; white-space:nowrap; }
+    .tg .unit { font: 500 31px/1 'JetBrains Mono'; color:rgba(44,41,96,0.66); margin-left:8px; letter-spacing:0.04em; }
+    .tg svg.spark { position:absolute; left:${SPX}px; top:${SPY}px; width:${SPW}px; height:${SPH}px; overflow:visible; }
+  `;
+  document.head.appendChild(style);
+  const tags = defs.map((d, di) => {
+    const el = document.createElement('div'); el.className = 'tg'; el.style.setProperty('--ac', d.color);
+    const n = d.spark.length, slot = SPW / n;
+    const bars = d.spark.map((v, i) => `<rect class="b" x="${(i * slot + 2).toFixed(1)}" width="${(slot - 5).toFixed(1)}" rx="2.5" y="${SPH}" height="0" fill="${d.color}" fill-opacity="${i === n - 1 ? 1 : 0.24 + 0.36 * i / (n - 1)}"/>`).join('');
+    const ex = (n - 1 + 0.5) * slot - 0.5, ey = SPH - bh(d.spark[n - 1]) - 11;
+    el.innerHTML = `<svg class="lead"><polyline class="ln" fill="none" stroke="rgba(44,41,96,0.62)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+        <circle class="kn" r="4.5" fill="#fff" stroke="rgba(44,41,96,0.62)" stroke-width="2"/></svg>
+      <div class="ring"></div><div class="dot"></div>
+      <div class="card"><div class="face"><div class="bar"></div>
+        <div class="lab">${d.label}</div><div class="en">${d.en}</div>
+        <div class="val"><span class="num">0</span><span class="unit">${d.unit}</span></div>
+        <svg class="spark" viewBox="0 0 ${SPW} ${SPH}">
+          <line x1="0" y1="${SPH + 1}" x2="${SPW}" y2="${SPH + 1}" stroke="rgba(44,41,96,0.16)" stroke-width="2"/>
+          ${bars}
+          <circle class="halo" cx="${ex}" cy="${ey}" r="7" fill="none" stroke="${d.color}" stroke-width="2"/>
+          <circle class="end" cx="${ex}" cy="${ey}" r="6.5" fill="${d.color}" stroke="#fff" stroke-width="2.5"/>
+        </svg>
+      </div></div>`;
+    ui.appendChild(el);
+    const q = (s) => el.querySelector(s);
+    return { d, el, ring: q('.ring'), dot: q('.dot'), ln: q('.ln'), kn: q('.kn'), card: q('.card'), face: q('.face'), num: q('.num'),
+      bars: [...el.querySelectorAll('.b')], end: q('.end'), halo: q('.halo'), ex, ey };
+  });
+
+  const v = new THREE.Vector3();
+  const toPx = (p, cam) => { v.copy(p).project(cam); return [(v.x * 0.5 + 0.5) * 1920, (1 - (v.y * 0.5 + 0.5)) * 1080]; };
+  const org = (el, x, y) => { el.style.transformOrigin = `${x}px ${y}px`; el.style.transformBox = 'view-box'; };
+  tags.forEach((t) => { org(t.end, t.ex, t.ey); org(t.halo, t.ex, t.ey); });
+
+  return function update(T, camera, zoom) {
+    const S = 0.8165 * 60 * zoom * 0.01;    // 1 card px = 0.01 world units, then the iso foreshortening
+    const order = [];
+    for (const t of tags) {
+      const d = t.d;
+      const tau = T - d.t;
+      const out = A.easeInCubic(A.inv(d.tOut, d.tOut + 0.22, T));
+      const vis = tau > -0.2 && out < 1; // leader pre-rolls 0.2 s so the card unfolds ON the cue (UI notify)
+      t.el.style.display = vis ? 'block' : 'none';
+      if (!vis) continue;
+      // world polyline: anchor -> +stub (vertical) -> +run (iso axis); projected every frame
+      const P = [d.anchor.clone()];
+      for (const s of d.path) P.push(P[P.length - 1].clone().add(s));
+      const S2 = P.map((p) => toPx(p, camera));
+      const [ax, ay] = S2[0];
+      const rel = S2.map(([x, y]) => [x - ax, y - ay]);
+      const seg = []; let L = 0;
+      for (let i = 1; i < rel.length; i++) { const l = Math.hypot(rel[i][0] - rel[i - 1][0], rel[i][1] - rel[i - 1][1]); seg.push(l); L += l; }
+      const lu = A.easeOutCubic(A.inv(-0.2, 0.0, tau)) * (1 - out);
+      let rem = lu * L; const pts = [rel[0]]; let tip = rel[0];
+      for (let i = 1; i < rel.length && rem > 0; i++) {
+        const f = Math.min(1, rem / seg[i - 1]);
+        tip = [rel[i - 1][0] + (rel[i][0] - rel[i - 1][0]) * f, rel[i - 1][1] + (rel[i][1] - rel[i - 1][1]) * f];
+        pts.push(tip); rem -= seg[i - 1];
+      }
+      t.el.style.transform = `translate(${ax.toFixed(2)}px, ${ay.toFixed(2)}px)`;
+      t.ln.setAttribute('points', pts.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`).join(' '));
+      // round 2: hidden-line break where the run passes behind a mast (technical-illustration convention)
+      let dash = 'none';
+      if (d.gap && rel.length > 2) {
+        const gx = toPx(d.gap, camera)[0] - ax;
+        const f = (gx - rel[1][0]) / (rel[2][0] - rel[1][0]);
+        if (f > 0 && f < 1) { const at = seg[0] + f * seg[1]; dash = `${(at - 9).toFixed(2)} 18 99999`; }
+      }
+      t.ln.style.strokeDasharray = dash;
+      const kn = rel[1], knOn = lu * L > seg[0] + 1;
+      t.kn.setAttribute('cx', kn[0].toFixed(2)); t.kn.setAttribute('cy', kn[1].toFixed(2));
+      t.kn.style.opacity = knOn ? '1' : '0';
+      // ground ring (top-face SSR) pulses
+      const rp = (((tau + 0.2) * 1.2) % 1 + 1) % 1;
+      const rs = (0.4 + rp * 1.1) * S * 1.6;
+      t.ring.style.transform = `scale(${rs.toFixed(4)}) ${SSR.top}`;
+      t.ring.style.opacity = ((1 - rp) * 0.9 * (1 - out)).toFixed(3);
+      const dp = A.spring(tau + 0.2, 24, 0.5, 10) * (1 - out);
+      t.dot.style.transform = `scale(${(Math.max(dp, 0) * S * 1.4).toFixed(4)}) ${SSR.top}`;
+      // card: bottom-left corner on the leader end, unfolds along its face plane once the leader arrives
+      const [lx, ly] = rel[rel.length - 1];
+      const cu = Math.max(0, A.spring(tau, 20, 0.55, 8)) * (1 - out);
+      t.card.style.transform = `translate(${lx.toFixed(2)}px, ${ly.toFixed(2)}px) scale(${S.toFixed(4)}) ${SSR[d.face]} translate(0px, -${CH}px)`;
+      t.face.style.transform = `scaleX(${Math.max(cu, 0.0001).toFixed(4)})`;
+      t.card.style.opacity = cu > 0.001 ? '1' : '0';
+      // count-up, sparkline draw (+ area wipe), end dot pops when the draw completes
+      const cnt = A.easeOutCubic(A.inv(0.04, 0.46, tau));
+      t.num.textContent = d.fmt(d.value * cnt);
+      t.bars.forEach((r, i) => {
+        const g = A.easeOutBack(A.inv(0.06 + i * 0.035, 0.28 + i * 0.035, tau), 1.6);
+        const hh = Math.max(0, bh(d.spark[i]) * g);
+        r.setAttribute('y', (SPH - hh).toFixed(2)); r.setAttribute('height', hh.toFixed(2));
+      });
+      const es = Math.max(0, A.spring(tau - 0.6, 26, 0.45, 10));
+      t.end.style.transform = `scale(${es.toFixed(4)})`;
+      const hp = A.inv(0.62, 1.22, tau);
+      t.halo.style.transform = `scale(${(1 + hp * 1.8).toFixed(3)})`;
+      t.halo.style.opacity = hp > 0 && hp < 1 ? ((1 - hp) * 0.8).toFixed(3) : '0';
+      order.push([ay, t.el]);
+    }
+    order.sort((a, b) => a[0] - b[0]).forEach(([, el], i) => { el.style.zIndex = String(10 + i); });
+  };
+}