dsh-drawai 0.3.4 → 0.4.1

package/lib/motion/mgstyles/upstream/demos/22-hud/js/post.js

@@ -0,0 +1,150 @@
+// composite (bg + hex grid + hologram + HUD + alert re-ink wave) and final (CRT/CA/scanline/grain) shaders
+export const VS = `varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }`;
+
+export const COMP_FS = `
+uniform sampler2D tHolo, tHud; uniform vec2 uRes; uniform float uT, uWave, uHex, uFlash, uZoom, uScope, uGain, uHexS, uDive;
+uniform vec2 uTgt;
+varying vec2 vUv;
+float h21(vec2 p){ p = fract(p*vec2(123.34,456.21)); p += dot(p,p+45.32); return fract(p.x*p.y); }
+float hexDist(vec2 p){ p = abs(p); return max(dot(p, normalize(vec2(1.0,1.7320508))), p.x); }
+vec3 reink(vec3 c){
+  float I = max(c.r, max(c.g, c.b)); float w = min(c.r, min(c.g, c.b)) / max(I, 1e-4);
+  vec3 o = mix(vec3(1.0, 0.40, 0.0), vec3(1.0, 0.86, 0.70), smoothstep(0.3, 0.95, w));
+  return o * I * 1.05;
+}
+void main(){
+  vec2 px = vUv * vec2(1920.0, 1080.0);             // CSS px, y up
+  vec2 c = vec2(960.0, 540.0);
+  float d0 = length((px - c) / 1080.0);
+  vec3 bg = mix(vec3(0.012, 0.058, 0.070), vec3(0.004, 0.018, 0.024), smoothstep(0.0, 0.95, d0));
+  vec3 bgA = mix(vec3(0.042, 0.014, 0.006), vec3(0.012, 0.005, 0.004), smoothstep(0.0, 0.95, d0));
+  // --- hex grid, revealed by a wave from the scope centre
+  vec2 pxh = c + (px - c) / uHexS;               // far plane: hex grid parallax (moves least)
+  float S = 30.0; vec2 uv = pxh / S;
+  vec2 r = vec2(1.0, 1.7320508), hh = r * 0.5;
+  vec2 a = mod(uv, r) - hh, b = mod(uv - hh, r) - hh;
+  vec2 gv = dot(a, a) < dot(b, b) ? a : b; vec2 id = uv - gv;
+  float e = 0.5 - hexDist(gv);
+  float line = 1.0 - smoothstep(0.0, 1.1 / S, e);
+  float dc = length(id * S - c) * uHexS;
+  float rev = smoothstep(uHex, uHex - 40.0, dc);
+  float front = exp(-pow((dc - uHex) / 70.0, 2.0)) * step(1.0, uHex);
+  float cellR = h21(id + 3.1), tw = step(0.965, h21(id + floor(uT * 5.0) * 0.371));
+  float mask = mix(0.55, 1.0, smoothstep(1.0, 0.3, d0)) * mix(0.35, 1.0, smoothstep(uScope - 90.0, uScope + 10.0, length(px - c)));
+  vec3 hexc = vec3(0.05, 0.36, 0.42) * (line * (0.16 + 0.10 * step(0.8, cellR)) * rev * mask + line * front * 0.9 + tw * rev * 0.035 * mask);
+  // --- hologram, scope-masked
+  vec3 ho = texture2D(tHolo, vUv).rgb * uGain;
+  // keep-cyan marker (g x 0.55: graticule, dot land) -> decode, exempt from the orange re-ink (duotone end frame)
+  float kcO = step(ho.g, 0.7 * ho.b) * step(0.003, ho.b); ho.g = mix(ho.g, ho.g / 0.55, kcO);
+  float rr = length(px - c);
+  float sm = 1.0 - smoothstep(uScope - 18.0, uScope + 6.0, rr);
+  ho *= max(sm, max(0.07 * uZoom, 0.5 * uDive));   // dive: the coast unmasks full-frame behind the columns
+  // --- alert wave (radial from the target)
+  float dw = length(px - uTgt);
+  float inside = uWave < 0.0 ? 0.0 : 1.0 - smoothstep(uWave - 110.0, uWave, dw);
+  float wf = uWave < 0.0 ? 0.0 : exp(-pow((dw - uWave) / 9.0, 2.0)) * (1.0 - smoothstep(1100.0, 1300.0, uWave));
+  float wf2 = uWave < 0.0 ? 0.0 : exp(-pow((dw - uWave + 60.0) / 90.0, 2.0)) * (1.0 - smoothstep(1100.0, 1300.0, uWave));
+  float ann = uWave < 0.0 ? 0.0 : exp(-pow((dw - uWave + 22.0) / 40.0, 2.0)) * (1.0 - smoothstep(900.0, 1300.0, uWave));   // re-ink glow = 40 px annulus, not a disc
+  vec3 base = mix(bg, bgA, inside) + mix(hexc, reink(hexc), inside * 0.3) + mix(ho, reink(ho) * (1.1 + 0.5 * ann), inside * (1.0 - kcO));
+  vec4 hu = texture2D(tHud, vUv);
+  vec3 hc = hu.rgb;
+  float kcH = step(hc.g, 0.7 * hc.b) * step(0.02, hc.b); hc.g = mix(hc.g, hc.g / 0.55, kcH);   // keep-cyan panels
+  float keep = step(hc.g + 0.12, hc.r);             // true reds (REC) keep their colour
+  hc = mix(hc, reink(hc), inside * (1.0 - keep) * (1.0 - kcH));
+  vec3 col = mix(base, hc, hu.a);
+  col += vec3(1.0, 0.72, 0.45) * wf * 0.32 + vec3(1.0, 0.38, 0.0) * line * wf2 * 0.75;
+  col += vec3(0.85, 0.95, 1.0) * uFlash;
+  gl_FragColor = vec4(col, 1.0);
+}`;
+
+export const FINAL_FS = `
+uniform sampler2D tDiffuse; uniform vec2 uRes; uniform float uT, uOpen, uGlitch, uCA, uFrame, uRoll, uFlash, uClose;
+varying vec2 vUv;
+float h11(float p){ p = fract(p * 0.1031); p *= p + 33.33; p *= p + p; return fract(p); }
+float h21(vec2 p){ vec3 p3 = fract(vec3(p.xyx) * 0.1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); }
+void main(){
+  // CRT power-off (last 6 frames): picture squashes to a hot line, the line shrinks to a dot
+  float cz = uClose, csy = 1.0, csx = 1.0;
+  if (cz > 0.0) { csy = max(pow(1.0 - min(cz / 0.6, 1.0), 2.2), 0.003); csx = cz > 0.6 ? max(1.0 - (cz - 0.6) / 0.4, 0.0) : 1.0; }
+  vec2 uv = cz > 0.0 ? vec2(0.5 + (vUv.x - 0.5) / max(csx, 1e-3), 0.5 + (vUv.y - 0.5) / csy) : vUv; float g = uGlitch;
+  // micro-glitch: horizontal slice displacement (seeded per frame)
+  float bnd = floor(uv.y * 54.0), hb = h11(bnd * 1.7 + uFrame * 13.1);
+  float sl = step(1.0 - 0.22 * g, hb);
+  uv.x += sl * (h11(bnd * 3.1 + uFrame * 7.7) - 0.5) * 0.07 * g;
+  // radial chromatic aberration
+  vec2 dc = uv - 0.5; float r2 = dot(dc * vec2(1.78, 1.0), dc * vec2(1.78, 1.0));
+  vec2 off = dc * (uCA * (0.3 + r2 * 1.2) + 0.008 * g * sl + 0.002 * g);
+  vec3 col = vec3(texture2D(tDiffuse, uv + off).r, texture2D(tDiffuse, uv).g, texture2D(tDiffuse, uv - off).b);
+  // soft shoulder: overbright bleeds to white-hot instead of clipping hue
+  float mx = max(col.r, max(col.g, col.b));
+  col += vec3(max(mx - 1.0, 0.0) * 0.45);
+  col = col / (1.0 + max(col - 1.0, 0.0) * 0.5);
+  // scanlines (3 css px), rolling interference band
+  float yc = vUv.y * 1080.0;
+  col *= 0.90 + 0.10 * cos(yc * 6.2831853 / 3.0);
+  float band = exp(-pow((vUv.y - (1.15 - fract(uT * uRoll) * 1.3)) * 9.0, 2.0));
+  col *= 1.0 + 0.07 * band; col += vec3(0.0, 0.012, 0.014) * band;
+  // vignette
+  float v = smoothstep(1.35, 0.35, length(dc * vec2(1.25, 1.0)) * 1.25);
+  col *= mix(0.55, 1.0, v);
+  // CRT power-on aperture: hot line opens vertically
+  if (uOpen < 1.0) {
+    float ah = uOpen * 0.5, dy = abs(vUv.y - 0.5);
+    float m = smoothstep(ah + 0.002, ah - 0.002, dy);
+    float hx = exp(-pow((vUv.x - 0.5) / (0.18 + 0.9 * uOpen), 2.0));
+    float lineGlow = exp(-pow((dy - ah) * uRes.y / (3.0 + 6.0 * (1.0 - uOpen)), 2.0)) * (1.0 - uOpen) * 1.6 * hx;
+    col = col * m + vec3(0.65, 1.0, 1.0) * lineGlow;
+  }
+  // impact flash: white-hot lines on CRUSHED black (never lift the blacks)
+  if (uFlash > 0.0) {
+    float lm = max(col.r, max(col.g, col.b)), lit = smoothstep(0.40, 0.75, lm);
+    vec3 hot = min(col * 2.6 + vec3(0.3) * lit, vec3(1.6));
+    col = mix(col, mix(col * 0.25, hot, lit), uFlash);
+  }
+  if (cz > 0.0) {
+    float inb = step(abs(uv.x - 0.5), 0.5) * step(abs(uv.y - 0.5), 0.5);
+    col *= inb * (1.0 + 2.0 * cz);
+    float dyp = abs(vUv.y - 0.5) * 1080.0, dxn = abs(vUv.x - 0.5) * 2.0;
+    float lineG = exp(-dyp * dyp / (4.0 + 400.0 * csy)) * smoothstep(csx + 0.03, csx - 0.03, dxn) * smoothstep(0.15, 0.55, cz);
+    float dotG = exp(-(dxn * dxn * 900.0 + dyp * dyp / 30.0)) * smoothstep(0.55, 0.9, cz) * (1.0 - 0.6 * smoothstep(0.9, 1.0, cz));
+    col += vec3(0.8, 0.97, 1.0) * (lineG * 1.1 + dotG * 1.4);
+  }
+  // grain + dither
+  float gn = h21(vUv * uRes + uFrame * 17.13) - 0.5;
+  col += gn * 0.028 + (h21(vUv * uRes * 1.37 + uFrame) - 0.5) / 255.0;
+  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+}`;
+
+// type layer, composited AFTER bloom: crisp glyphs + 1.5 px glow + dark knock-out halo, re-inked by the same wave
+export const TEXT_FS = `
+uniform sampler2D tDiffuse, tTxt; uniform vec2 uRes; uniform float uWave; uniform vec2 uTgt;
+varying vec2 vUv;
+vec3 reink(vec3 c){
+  float I = max(c.r, max(c.g, c.b)); float w = min(c.r, min(c.g, c.b)) / max(I, 1e-4);
+  vec3 o = mix(vec3(1.0, 0.40, 0.0), vec3(1.0, 0.86, 0.70), smoothstep(0.3, 0.95, w));
+  return o * I * 1.05;
+}
+void main(){
+  vec3 col = texture2D(tDiffuse, vUv).rgb;
+  vec4 tx = texture2D(tTxt, vUv);
+  float kcT = step(tx.g, 0.7 * tx.b) * step(0.02, tx.b); tx.g = mix(tx.g, tx.g / 0.55, kcT);   // keep-cyan type
+  vec2 p1 = 1.0 / uRes;
+  vec3 gc = vec3(0.0); float halo = 0.0;
+  for (int i = 0; i < 8; i++) {
+    float an = float(i) * 0.7853982 + 0.3927;
+    vec2 d = vec2(cos(an), sin(an)) * p1;
+    vec4 a1 = texture2D(tTxt, vUv + d * 1.5), a2 = texture2D(tTxt, vUv + d * 3.0);
+    gc += a1.rgb * a1.a + a2.rgb * a2.a * 0.45; halo = max(halo, max(a1.a, a2.a * 0.8));
+  }
+  gc /= 11.6;
+  float kcG = step(gc.g, 0.7 * gc.b) * step(0.004, gc.b); gc.g = mix(gc.g, gc.g / 0.55, kcG);
+  vec2 px = vUv * vec2(1920.0, 1080.0);
+  float dw = length(px - uTgt);
+  float inside = uWave < 0.0 ? 0.0 : 1.0 - smoothstep(uWave - 110.0, uWave, dw);
+  float keep = step(tx.g + 0.12, tx.r);
+  vec3 tc = mix(tx.rgb, reink(tx.rgb), inside * (1.0 - keep) * (1.0 - kcT));
+  vec3 gcol = mix(gc, reink(gc), inside * (1.0 - kcG));
+  col *= 1.0 - 0.6 * halo;
+  col = mix(col, tc * 1.06, tx.a) + gcol * 0.6;
+  gl_FragColor = vec4(col, 1.0);
+}`;

package/lib/motion/mgstyles/upstream/demos/22-hud/js/util.js

@@ -0,0 +1,65 @@
+// deterministic helpers — everything is a pure function of t
+export const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
+export const lerp = (a, b, k) => a + (b - a) * k;
+export const prog = (t, t0, d) => clamp((t - t0) / d);
+export const E = {
+  lin: (x) => x,
+  inQ: (x) => x * x,
+  outC: (x) => 1 - Math.pow(1 - x, 3),
+  outQ: (x) => 1 - Math.pow(1 - x, 4),
+  outE: (x) => (x >= 1 ? 1 : 1 - Math.pow(2, -10 * x)),
+  inOutC: (x) => (x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2),
+  inOutQ: (x) => (x < 0.5 ? 8 * x ** 4 : 1 - Math.pow(-2 * x + 2, 4) / 2),
+  outBack: (x, s = 1.70158) => 1 + (s + 1) * Math.pow(x - 1, 3) + s * Math.pow(x - 1, 2),
+};
+// integer hash -> [0,1)
+export function hash(...a) {
+  let h = 2166136261 >>> 0;
+  for (const v of a) {
+    h ^= (v * 2654435761) >>> 0; h = Math.imul(h ^ (h >>> 15), 2246822507) >>> 0;
+    h = Math.imul(h ^ (h >>> 13), 3266489909) >>> 0; h ^= h >>> 16;
+  }
+  return (h >>> 0) / 4294967296;
+}
+export function mulberry(seed) {
+  let a = seed >>> 0;
+  return () => { a = (a + 0x6D2B79F5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
+}
+export const FPS = 30;
+// nearest frame: motion-blur sub-samples (±0.19 frame) of frame f all map to f, so per-frame states never smear across frames
+export const frameOf = (t) => Math.floor(t * FPS + 0.5);
+// rolling digits: before t0 -> placeholder, t0..t0+n frames -> random glyphs (same length), then final
+const DIG = '0123456789';
+export function roll(t, t0, final, id = 0, nFrames = 4) {
+  if (t < t0) return null;
+  const f = frameOf(t) - frameOf(t0);
+  if (f >= nFrames) return final;
+  let s = '';
+  for (let i = 0; i < final.length; i++) {
+    const c = final[i];
+    s += /[0-9]/.test(c) ? DIG[Math.floor(hash(id, i, f + 7) * 10)] : c;
+  }
+  return s;
+}
+// typewriter: returns visible substring
+export function typed(t, t0, str, cps = 90) {
+  if (t < t0) return '';
+  return str.slice(0, Math.floor((t - t0) * cps + 1e-6));
+}
+// hermite
+export function hermite(s, p0, p1, m0, m1) {
+  const s2 = s * s, s3 = s2 * s;
+  return (2 * s3 - 3 * s2 + 1) * p0 + (s3 - 2 * s2 + s) * m0 + (-2 * s3 + 3 * s2) * p1 + (s3 - s2) * m1;
+}
+export const DEG = Math.PI / 180;
+// ?reel=1 (showreel cut): a neutral sci-fi signal hunt in Antarctica instead of real cities (Antarctic Treaty territory, no populated targets)
+const QS = new URLSearchParams(typeof location !== 'undefined' ? location.search : '');
+// ?v5=1 (reel v5): style-name title + link elements (window.linkAt); implies the reel=1 content. ?nolink=dot,reticle,… hides link elements
+export const V5 = QS.get('v5') === '1';
+export const NOLINK = new Set((QS.get('nolink') || '').split(',').map((s) => s.trim()).filter(Boolean));
+export const REEL = QS.get('reel') === '1' || V5;
+export const TARGET = REEL ? { lat: -(77 + 32 / 60), lon: 167 + 9 / 60 } : { lat: 31 + 14 / 60, lon: 121 + 29 / 60 };
+export const CND = REEL ? [ { lat: -70.5, lon: 20.0 }, { lat: -66.3, lon: 110.5 } ] : [ { lat: 13.75, lon: 100.5 }, { lat: 43.8, lon: 87.6 } ];
+export const HUB = { x: 960, y: 540 };
+export const LOCK = 6.4;

package/lib/motion/mgstyles/upstream/demos/22-hud/js/v5.js

@@ -0,0 +1,142 @@
+// reel v5 (?v5=1): the style-name title 「赛博朋克」 ● HUD, drawn on its own post-bloom canvas so its cyberpunk yellow is
+// never re-inked by the alert wave. Everything is a pure function of the (frame-centre) time t.
+// Beat: impact 6.40 = white-hot outline slam (the lock) → 6.433–6.733 a scan line fills the glyphs top-down with a
+// magenta/cyan glitch split that decays to a 2.5 px chromatic ghost; flicker-in on frames +1…+4; 1-frame slice glitches
+// on the alert pulses 7.40 / 8.40. Band ends carry yellow hazard stripes; thin corner brackets snap onto the lockup.
+import { clamp, lerp, prog, E, hash, frameOf, LOCK, NOLINK } from './util.js';
+
+const W = 1920, CX = 960, CY = 540;
+export const BH = 128, BW = 880, BG = 120;      // band half-height, band half-width, title gap from the centre (the reticle sits in it)
+export const PLATE_T0 = LOCK + 1 / 30;           // band plate wipes open right after the impact frame
+const CN = '赛博朋克', EN = 'HUD';
+export const FONT_CN = '900 168px "HarmonyOS Sans SC"', FONT_EN = '700 206px "Chakra Petch"';
+const LS_CN = 8, LS_EN = 6, BASE = 616;
+const YEL = '#FCEE0A', YHOT = '#FFFBD6', MAG = '#FF2A8A', CYN = '#00E5FF', INK = 'rgba(2,10,13,';
+const F = (t) => frameOf(t);
+let c, A, B, dpr = 1, M = null;
+
+export function initTitle(canvas, pr) {
+  const mk = () => { const q = document.createElement('canvas'); q.width = canvas.width; q.height = canvas.height; return q.getContext('2d'); };
+  c = canvas.getContext('2d'); A = mk(); B = mk(); dpr = pr;
+}
+// glyph metrics (ink boxes), measured once the fonts are loaded
+export function titleMetrics() {
+  if (M) return M;
+  const q = c || document.createElement('canvas').getContext('2d');
+  q.save(); q.setTransform(1, 0, 0, 1, 0, 0);
+  q.font = FONT_CN; q.letterSpacing = `${LS_CN}px`; const m1 = q.measureText(CN);
+  q.font = FONT_EN; q.letterSpacing = `${LS_EN}px`; const m2 = q.measureText(EN);
+  q.restore();
+  const xCn = CX - BG - m1.actualBoundingBoxRight, xEn = CX + BG + m2.actualBoundingBoxLeft;
+  const top = BASE - Math.max(m1.actualBoundingBoxAscent, m2.actualBoundingBoxAscent), bot = BASE + Math.max(m1.actualBoundingBoxDescent, m2.actualBoundingBoxDescent);
+  M = { xCn, xEn, l: xCn - m1.actualBoundingBoxLeft, r: xEn + m2.actualBoundingBoxRight, top, bot, cnL: xCn - m1.actualBoundingBoxLeft, enR: xEn + m2.actualBoundingBoxRight,
+    cnTop: BASE - m1.actualBoundingBoxAscent, enTop: BASE - m2.actualBoundingBoxAscent };
+  return M;
+}
+// shared timing (also used by linkAt)
+export const slamScale = (t) => lerp(1.15, 1, E.outE(prog(t, LOCK, 0.1)));
+export const scanP = (t) => E.outC(prog(t, LOCK + 1 / 30, 0.3));
+export const plateW = (t) => E.outE(prog(t, PLATE_T0, 0.3)) * BW;
+const PULSE_GL = [7.4, 8.4];
+
+function glyphs(q, mode, col, a, dx = 0, lw = 2) {
+  const m = titleMetrics();
+  q.globalAlpha = clamp(a); q.textBaseline = 'alphabetic'; q.textAlign = 'left';
+  q.font = FONT_CN; q.letterSpacing = `${LS_CN}px`;
+  if (mode === 'fill') { q.fillStyle = col; q.fillText(CN, m.xCn + dx, BASE); } else { q.strokeStyle = col; q.lineWidth = lw; q.strokeText(CN, m.xCn + dx, BASE); }
+  q.font = FONT_EN; q.letterSpacing = `${LS_EN}px`;
+  if (mode === 'fill') { q.fillStyle = col; q.fillText(EN, m.xEn + dx, BASE); } else { q.strokeStyle = col; q.lineWidth = lw; q.strokeText(EN, m.xEn + dx, BASE); }
+  q.letterSpacing = '0px';
+}
+const reset = (q) => { q.setTransform(1, 0, 0, 1, 0, 0); q.globalAlpha = 1; q.globalCompositeOperation = 'source-over'; q.filter = 'none'; q.shadowBlur = 0; q.shadowColor = 'rgba(0,0,0,0)'; q.clearRect(0, 0, q.canvas.width, q.canvas.height); };
+
+export function drawTitle(t) {
+  reset(c); if (t < LOCK) return;
+  const m = titleMetrics(), f = F(t) - F(LOCK), d = t - LOCK;
+  const sc = slamScale(t), p = scanP(t);
+  const y0 = m.top - 14, y1 = m.bot + 14, sy = f <= 0 ? y0 : lerp(y0, y1, p);
+  // glitch split: 16 px on the first frame after the impact, decays to a permanent 2.5 px chromatic ghost; kicks on pulses
+  let sp = f <= 0 ? 0 : 2.5 + 16 * Math.exp(-(d - 1 / 30) / 0.07);
+  let gl = f === 1 || f === 2 ? 1 - 0.4 * (f - 1) : 0;
+  for (const pt of PULSE_GL) if (F(t) === F(pt)) { sp = Math.max(sp, 9); gl = 0.45; }
+  const fk = [1, 0.9, 0.35, 1, 0.7][f] ?? 1;   // flicker-in (frames 0…4 after the impact)
+  const S = (q) => { q.setTransform(dpr * sc, 0, 0, dpr * sc, dpr * (CX - CX * sc), dpr * (CY - CY * sc)); };
+  const show = !NOLINK.has('title');
+
+  // ---- A: the filled title (dark halo, cyan + magenta split ghosts, yellow core with glow), clipped above the scan line
+  reset(A);
+  if (show && f >= 1) {
+    S(A); A.save(); A.beginPath(); A.rect(0, 0, W, sy); A.clip();
+    A.shadowColor = INK + '0.95)'; A.shadowBlur = 38 * dpr; glyphs(A, 'fill', INK + '0.7)', 1);
+    A.shadowBlur = 0;
+    glyphs(A, 'fill', CYN, 0.8 * fk, sp); glyphs(A, 'fill', MAG, 0.85 * fk, -sp);
+    A.shadowColor = 'rgba(252,238,10,0.55)'; A.shadowBlur = 26 * dpr; glyphs(A, 'fill', YEL, fk);
+    A.shadowBlur = 0; glyphs(A, 'fill', YEL, fk);
+    // HUD word: hollow core (thin glowing line inside the fill) — reads as a HUD wireframe inside the yellow
+    A.restore();
+  }
+  // ---- B: the outline title below the scan line (the impact frame is all outline, white-hot)
+  reset(B);
+  if (show && p < 1) {
+    S(B); B.save(); B.beginPath(); B.rect(0, f <= 0 ? 0 : sy, W, 2000); B.clip();
+    B.shadowColor = INK + '0.9)'; B.shadowBlur = 30 * dpr; glyphs(B, 'fill', INK + '0.45)', 1); B.shadowBlur = 0;
+    B.shadowColor = 'rgba(255,251,214,0.7)'; B.shadowBlur = 10 * dpr; glyphs(B, 'stroke', f <= 0 ? YHOT : '#BFF7FF', f <= 0 ? 1 : 0.9, 0, f <= 0 ? 3 : 2);
+    B.restore();
+  }
+  // ---- composite A (with horizontal slice glitch) + B onto the title canvas
+  reset(c);
+  c.drawImage(B.canvas, 0, 0);
+  c.drawImage(A.canvas, 0, 0);
+  if (gl > 0 && show) {
+    const fr = F(t);
+    for (let k = 0; k < 4; k++) {
+      const yy = m.top - 4 + hash(fr, k, 1) * (m.bot - m.top), hh = 6 + hash(fr, k, 2) * 24, ox = (hash(fr, k, 3) - 0.5) * 2 * 30 * gl;
+      const Y = Math.round(yy * dpr), Hh = Math.round(hh * dpr);
+      c.clearRect(0, Y, c.canvas.width, Hh); c.drawImage(A.canvas, 0, Y, A.canvas.width, Hh, Math.round(ox * dpr), Y, A.canvas.width, Hh);
+      c.drawImage(B.canvas, 0, Y, B.canvas.width, Hh, Math.round(ox * dpr), Y, B.canvas.width, Hh);
+    }
+  }
+  c.setTransform(dpr, 0, 0, dpr, 0, 0);
+  // scan line (+ a short phosphor trail above it)
+  if (show && f >= 1 && p < 1) {
+    const xl = m.l - 40, xr = m.r + 40;
+    const g = c.createLinearGradient(0, sy - 46, 0, sy); g.addColorStop(0, 'rgba(252,238,10,0)'); g.addColorStop(1, 'rgba(252,238,10,0.22)');
+    c.globalAlpha = 1; c.fillStyle = g; c.fillRect(xl, sy - 46, xr - xl, 46);
+    c.shadowColor = 'rgba(252,238,10,0.9)'; c.shadowBlur = 14 * dpr; c.fillStyle = YHOT; c.fillRect(xl, sy - 1, xr - xl, 2); c.shadowBlur = 0;
+  }
+  // hazard stripes at the band ends (ride the plate wipe)
+  const wp = plateW(t);
+  if (wp > 40) {
+    c.save(); c.beginPath(); c.rect(CX - wp, CY - BH, 30, BH * 2); c.rect(CX + wp - 30, CY - BH, 30, BH * 2); c.clip();
+    c.globalAlpha = 0.9; c.strokeStyle = YEL; c.lineWidth = 6;
+    for (let k = -2; k < 24; k++) { for (const x0 of [CX - wp, CX + wp - 30]) { const xx = x0 + k * 16 - 2 * BH; c.beginPath(); c.moveTo(xx, CY + BH); c.lineTo(xx + 2 * BH, CY - BH); c.stroke(); } }
+    c.restore();
+  }
+  // thin corner brackets snap onto the lockup (1-frame overshoot, like the lock brackets)
+  if (show && f >= 1) {
+    const fr = (t - PLATE_T0) * 30, KF = [1.3, 1.06, 0.97, 1.0];
+    const k = fr >= 3 ? 1 : lerp(KF[Math.floor(fr)], KF[Math.floor(fr) + 1], E.outC(fr - Math.floor(fr)));
+    const bx = (m.r - m.l) / 2 + 26, by = (m.bot - m.top) / 2 + 14, mx = (m.l + m.r) / 2, my = (m.top + m.bot) / 2, arm = 30;
+    c.globalAlpha = f === 1 ? 0.6 : 0.95; c.strokeStyle = YEL; c.lineWidth = 2; c.lineCap = 'square';
+    for (const [sx, sy2] of [[-1, -1], [1, -1], [1, 1], [-1, 1]]) {
+      const x = mx + sx * bx * k, y = my + sy2 * by * k;
+      c.beginPath(); c.moveTo(x, y - sy2 * arm); c.lineTo(x, y); c.lineTo(x - sx * arm, y); c.stroke();
+    }
+    c.lineCap = 'butt';
+  }
+  c.globalAlpha = 1;
+}
+
+// post-bloom title composite (straight alpha over; CRT/CA/grain of the final pass still apply on top)
+export const TITLE_FS = `
+uniform sampler2D tDiffuse, tTtl; varying vec2 vUv;
+void main(){ vec3 col = texture2D(tDiffuse, vUv).rgb; vec4 tx = texture2D(tTtl, vUv); gl_FragColor = vec4(mix(col, tx.rgb, tx.a), 1.0); }`;
+// v5 alert ink: the lock wave re-inks the HUD hot magenta instead of amber (cyan → magenta flip reads cyberpunk). ?ink=amber keeps v4's orange.
+export function magentaInk(src) {
+  const R = [['vec3(1.0, 0.40, 0.0), vec3(1.0, 0.86, 0.70)', 'vec3(1.0, 0.10, 0.50), vec3(1.0, 0.80, 0.94)'],
+    ['vec3(0.042, 0.014, 0.006)', 'vec3(0.034, 0.005, 0.028)'], ['vec3(0.012, 0.005, 0.004)', 'vec3(0.010, 0.003, 0.009)'],
+    ['vec3(1.0, 0.72, 0.45) * wf', 'vec3(1.0, 0.60, 0.90) * wf'], ['vec3(1.0, 0.38, 0.0) * line', 'vec3(1.0, 0.12, 0.55) * line'],
+    ['return o * I * 1.05;', 'return o * I * 1.2;']];   // magenta is darker than amber at equal intensity → +15 %
+  for (const [a, b] of R) src = src.split(a).join(b);
+  return src;
+}