primocode 10.0.0 → 10.0.9

package/lib/estudio/kit/gerativo.jsx

@@ -0,0 +1,980 @@
+/* kit/gerativo.jsx — o motion gerativo: UM componente que desenha a
+ * partitura inteira (lib/estudio/gerativo.js), quadro a quadro.
+ *
+ * Não há cena, não há template: há a linha do tempo. Em cada quadro este
+ * componente pergunta à partitura que batidas estão no ar, onde está a
+ * câmera, em que forma está o acento — e desenha. Tudo é função do tempo:
+ * nada de Math.random, Date.now nem transição CSS.
+ *
+ * A letra é a unidade: cada uma é um <span> com o próprio transform e os
+ * próprios EIXOS da fonte variável (font-variation-settings) — o peso que vai
+ * de 100 a 900, a largura que estica, o grau que respira. Antes do primeiro
+ * quadro as fontes carregam e cada linha é MEDIDA no navegador (delayRender):
+ * o que não cabe encolhe, e o acento sabe onde fica cada palavra. */
+import React, { useState, useEffect, useMemo } from 'react';
+import { delayRender, continueRender } from 'remotion';
+import { SNAPPY, CURVAS_KIT, acaso, suave, alfa, mistura } from './base';
+import { Produto3D, Icone3D } from './tres';
+
+const ed = CURVAS_KIT.editorial, curvaCam = CURVAS_KIT.camera, arrasto = CURVAS_KIT.arrasto, acelera = CURVAS_KIT.acelera;
+const c01 = (x) => (x < 0 ? 0 : x > 1 ? 1 : x);
+const lerp = (a, b, k) => a + (b - a) * k;
+const entradaC = (t) => t * t * t;
+const saidaC = (t) => 1 - Math.pow(1 - t, 3);
+
+/* A mola SNAPPY do guia em forma fechada (o spring() do Remotion simula
+   quadro a quadro; aqui são milhares de letras por quadro). Amortecimento
+   26 com massa 0,65: um pouco acima do crítico — ataque rápido, sem quique. */
+const MOLA = (() => {
+  const { damping: c, stiffness: k, mass: m } = SNAPPY;
+  const w0 = Math.sqrt(k / m), z = c / (2 * Math.sqrt(k * m));
+  if (z > 1.0001) {
+    const s = Math.sqrt(z * z - 1), r1 = -w0 * (z - s), r2 = -w0 * (z + s);
+    const A = r2 / (r1 - r2), B = -r1 / (r1 - r2);
+    return (t) => (t <= 0 ? 0 : 1 + A * Math.exp(r1 * t) + B * Math.exp(r2 * t));
+  }
+  return (t) => (t <= 0 ? 0 : 1 - Math.exp(-w0 * t) * (1 + w0 * t));
+})();
+
+const EMBARALHA = 'ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#%&*+=/<>';
+const embaralha = (n) => EMBARALHA[Math.floor(acaso(n) * EMBARALHA.length) % EMBARALHA.length];
+
+// ── os eixos ────────────────────────────────────────────────────────────
+function fvs(eixosFonte, valores) {
+  const partes = [];
+  for (const tag of Object.keys(valores)) {
+    const faixa = eixosFonte && eixosFonte[tag];
+    if (!faixa) continue;
+    const v = Math.max(faixa[0], Math.min(faixa[1], valores[tag]));
+    partes.push('"' + tag + '" ' + Math.round(v * 10) / 10);
+  }
+  return partes.join(', ') || 'normal';
+}
+const textoDaLinha = (l) => (l.maiusc ? l.texto.toUpperCase() : l.texto);
+const palavrasDaLinha = (l) => {
+  const ws = textoDaLinha(l).split(/\s+/).filter(Boolean);
+  return l.palavras.map((p, j) => ({ ...p, texto: ws[j] != null ? ws[j] : p.texto }));
+};
+const pesoDaPalavra = (l, p) => (p.wght != null ? p.wght : l.eixos.wght);
+const familia = (f) => '"' + f + '", system-ui, sans-serif';
+
+/* A marcação de uma linha: a MESMA na medida e no desenho — é assim que a
+   medida vale para o que aparece. */
+function Marcacao({ l, eixosFonte, estiloLetra, estiloPalavra, extraLetra }) {
+  const ps = palavrasDaLinha(l);
+  let k = 0;
+  return ps.map((p, j) => {
+    const letras = Array.from(p.texto);
+    const ep = estiloPalavra ? estiloPalavra(p, j) : {};
+    const out = (
+      <span key={j} style={{ display: 'inline-block', fontSize: (p.escala || 1) + 'em',
+        fontVariationSettings: fvs(eixosFonte, { ...l.eixos, wght: pesoDaPalavra(l, p) }), ...ep }}>
+        {letras.map((ch, i) => {
+          const idx = k++;
+          const e = estiloLetra ? estiloLetra(p, j, ch, i, idx) : null;
+          return (
+            <span key={i} style={{ display: 'inline-block', position: 'relative', ...(e && e.estilo) }}>
+              {e && e.char != null ? e.char : ch}
+              {extraLetra ? extraLetra(p, j, i, idx) : null}
+            </span>
+          );
+        })}
+      </span>
+    );
+    return j < ps.length - 1 ? [out, <span key={'s' + j}>{' '}</span>] : out;
+  });
+}
+
+// ── a medida (uma vez por aba do render) ─────────────────────────────────
+function medir(P) {
+  const caixa = document.createElement('div');
+  caixa.style.cssText = 'position:absolute;left:-99999px;top:0;visibility:hidden;';
+  document.body.appendChild(caixa);
+  const out = {};
+  const linha = (id, l, fonteForcada) => {
+    const d = document.createElement('div');
+    d.style.cssText = 'position:absolute;white-space:pre;line-height:1;font-size:100px;';
+    d.style.fontFamily = familia(fonteForcada || l.fonte);
+    d.style.letterSpacing = (l.tracking || 0) + 'em';
+    d.style.fontFeatureSettings = '"tnum" 1';
+    const eixos = P.eixos[l.fonte] || {};
+    const ps = palavrasDaLinha(l);
+    ps.forEach((p, j) => {
+      const w = document.createElement('span');
+      w.style.display = 'inline-block';
+      w.style.fontSize = (p.escala || 1) + 'em';
+      w.style.fontVariationSettings = fvs(eixos, { ...l.eixos, wght: pesoDaPalavra(l, p) });
+      for (const ch of Array.from(p.texto)) {
+        const s = document.createElement('span');
+        s.style.display = 'inline-block';
+        s.textContent = ch;
+        w.appendChild(s);
+      }
+      d.appendChild(w);
+      if (j < ps.length - 1) d.appendChild(document.createTextNode(' '));
+    });
+    caixa.appendChild(d);
+    const r0 = d.getBoundingClientRect();
+    const palavras = [], letras = [];
+    for (const w of d.querySelectorAll(':scope > span')) {
+      const r = w.getBoundingClientRect();
+      palavras.push({ x: (r.left - r0.left) / 100, w: r.width / 100 });
+      for (const s of w.querySelectorAll('span')) { const q = s.getBoundingClientRect(); letras.push({ x: (q.left - r0.left) / 100, w: q.width / 100 }); }
+    }
+    out[id] = { w: r0.width / 100, h: r0.height / 100, palavras, letras };
+  };
+  for (const b of P.batidas) {
+    for (const l of b.linhas) linha(l.id, l);
+    if (b.textura) linha(b.id + '-textura', { ...b.linhas[0], texto: b.textura.texto + '  ·  ', maiusc: false, palavras: (b.textura.texto + ' ·').split(/\s+/).map((t) => ({ texto: t })) });
+  }
+  document.body.removeChild(caixa);
+  return out;
+}
+
+function useMedidas(P) {
+  const [medidas, setMedidas] = useState(null);
+  const [alca] = useState(() => delayRender('gerativo: carregar as fontes e medir as linhas'));
+  useEffect(() => {
+    let vivo = true;
+    const texto = Array.from(new Set(P.batidas.flatMap((b) => b.linhas.map((l) => textoDaLinha(l) + l.texto)).join('') + '0123456789 ·—“”')).join('');
+    const fams = Array.from(new Set(Object.values(P.fontes)));
+    const carregar = () => Promise.all(fams.flatMap((f) => [100, 400, 900].map((w) => document.fonts.load(w + ' 100px "' + f + '"', texto).catch(() => null))));
+    carregar().then(() => document.fonts.ready).then(() => { if (vivo) setMedidas(medir(P)); })
+      .catch(() => { if (vivo) setMedidas(medir(P)); });
+    return () => { vivo = false; };
+  }, []);
+  useEffect(() => { if (medidas) continueRender(alca); }, [medidas]);
+  return medidas;
+}
+
+// ── o leiaute: da medida às caixas no mundo ─────────────────────────────
+function leiaute(P, med) {
+  const W = P.largura, H = P.altura;
+  const porBatida = {};
+  for (const b of P.batidas) {
+    const bl = b.bloco;
+    const caixas = {};
+    /* O tamanho final: o que não cabe encolhe; o grupo que ENCHE cresce até a
+       largura do bloco (todas as linhas dele no mesmo tamanho), com teto. */
+    const grupo = {};
+    for (const l of b.linhas) {
+      if (!l.encher || !med[l.id]) continue;
+      const k = l.encher + (l.coluna != null ? l.coluna : '');
+      // O grid manda: a tese ocupa até ~74% da largura do bloco; só a sangria vai a 97%.
+      const s = Math.min(l.max || l.tamanho, (bl.largura * (b.cheio ? 0.97 : 0.74)) / med[l.id].w);
+      grupo[k] = grupo[k] == null ? s : Math.min(grupo[k], s);
+    }
+    const tam = (l) => {
+      const m = med[l.id];
+      if (l.encher && grupo[l.encher + (l.coluna != null ? l.coluna : '')] != null) return grupo[l.encher + (l.coluna != null ? l.coluna : '')];
+      let s = l.tamanho;
+      if (m && m.w * s > bl.largura) s = (bl.largura / m.w) * 0.985;
+      return s;
+    };
+    const gapEntre = (a, c) => {
+      if (c.continua) return 0.1 * tam(a);
+      if (a.papel === c.papel) return a.papel === 'item' ? bl.gap * tam(a) : a.papel === 'tese' || a.papel === 'numero' ? 0.02 * tam(a) : 0.14 * tam(a);
+      return Math.max(0.32 * Math.min(tam(a), tam(c)), 0.12 * Math.max(tam(a), tam(c)));
+    };
+    const pilha = (ls, x0, yCentro, alinha) => {
+      const vis = ls.filter((l) => l.papel !== 'aspas');
+      let total = 0;
+      vis.forEach((l, i) => { total += (med[l.id] ? med[l.id].h : 1) * tam(l); if (i) total += gapEntre(vis[i - 1], l); });
+      let y = yCentro - (bl.vert === 'meio' ? total / 2 : 0);
+      vis.forEach((l, i) => {
+        if (i) y += gapEntre(vis[i - 1], l);
+        const s = tam(l), m = med[l.id] || { w: 1, h: 1, palavras: [], letras: [] };
+        const w = m.w * s, h = m.h * s;
+        const x = alinha === 'centro' ? x0 - w / 2 : x0;
+        caixas[l.id] = { x, y, w, h, s, palavras: m.palavras.map((p) => ({ x: x + p.x * s, w: p.w * s })), letras: m.letras.map((q) => ({ x: x + q.x * s, w: q.w * s })) };
+        y += h;
+      });
+      return total;
+    };
+    if (bl.colunas) {
+      pilha(b.linhas.filter((l) => l.coluna === 0), bl.colunas[0], bl.y, 'esq');
+      pilha(b.linhas.filter((l) => l.coluna === 1), bl.colunas[1], bl.y, 'esq');
+    } else if (bl.blocos === 2) {
+      const a = b.linhas.filter((l) => l.coluna === 0), c = b.linhas.filter((l) => l.coluna === 1);
+      const alt = (ls) => ls.reduce((n, l, i) => n + (med[l.id] ? med[l.id].h : 1) * tam(l) + (i ? gapEntre(ls[i - 1], l) : 0), 0);
+      const hA = alt(a), hC = alt(c), vao = 0.9 * tam(a[0] || c[0]);
+      const topo = bl.y - (hA + vao + hC) / 2;
+      pilha(a, bl.x, topo + hA / 2, 'esq');
+      pilha(c, bl.x, topo + hA + vao + hC / 2, 'esq');
+    } else pilha(b.linhas, bl.x, bl.y, bl.alinha);
+    // As aspas penduradas acima da primeira linha da citação.
+    const aspas = b.linhas.find((l) => l.papel === 'aspas');
+    if (aspas) {
+      const prim = b.linhas.find((l) => l.papel !== 'aspas');
+      const cp = caixas[prim.id];
+      const s = aspas.tamanho;
+      caixas[aspas.id] = { x: cp.x - s * 0.04, y: cp.y - s * 0.62, w: s * 0.5, h: s, s, palavras: [{ x: cp.x, w: s * 0.5 }], letras: [{ x: cp.x, w: s * 0.5 }] };
+    }
+    // O bloco inteiro (para a barra e a moldura).
+    const cs = Object.values(caixas);
+    const bx = { x: Math.min(...cs.map((c) => c.x)), y: Math.min(...cs.map((c) => c.y)), x1: Math.max(...cs.map((c) => c.x + c.w)), y1: Math.max(...cs.map((c) => c.y + c.h)) };
+    porBatida[b.id] = { caixas, bloco: bx, textura: b.textura && med[b.id + '-textura'] ? med[b.id + '-textura'].w * b.textura.tamanho : 0 };
+  }
+  return porBatida;
+}
+
+// ── o acento: um traço de N pontos que muda de forma ─────────────────────
+const N = 36;
+function geometria(a, b, L, P) {
+  const lay = L[b.id];
+  const base = Math.min(P.largura, P.altura) / 1080;
+  const cx = lay.caixas[a.alvo && a.alvo.linha] || null;
+  const alvoPalavra = () => {
+    if (!cx) return { x: lay.bloco.x, w: lay.bloco.x1 - lay.bloco.x };
+    const i = a.alvo.palavra, f = a.alvo.ate != null ? a.alvo.ate : i;
+    if (i == null || i < 0 || !cx.palavras[i]) return { x: cx.x, w: cx.w };
+    const p0 = cx.palavras[i], p1 = cx.palavras[Math.max(i, Math.min(f, cx.palavras.length - 1))];
+    return { x: p0.x, w: p1.x + p1.w - p0.x };
+  };
+  const pts = [];
+  const f = a.forma;
+  if (f === 'ponto' || f === 'bala' || f === 'viagem') {
+    let x, y, r;
+    if (f === 'viagem') { x = a.x; y = a.y; r = a.r; }
+    else if (f === 'bala' && cx) { r = Math.max(7 * base, cx.s * 0.13); x = cx.x - r * 2.6; y = cx.y + cx.h * 0.52; }
+    else if (cx && a.alvo.antes) { r = cx.s * 0.2; x = cx.x - r * 2.2; y = cx.y + cx.h * 0.5; }
+    else if (cx) { r = Math.max(8 * base, cx.s * 0.085); x = cx.x + cx.w + r * 1.6; y = cx.y + cx.h * 0.74; }
+    else { r = 14 * base; x = P.largura / 2; y = P.altura / 2; }
+    for (let i = 0; i < N; i++) { const q = (i / (N - 1)) * Math.PI * 2; pts.push([x + Math.cos(q) * r * 0.35, y + Math.sin(q) * r * 0.35]); }
+    return { pts, larg: r * 1.35, alfa: 1, frente: true, cx: x, cy: y };
+  }
+  if (!cx && f !== 'barra') return geometria({ forma: 'ponto', alvo: {} }, b, L, P);
+  if (f === 'sublinha' || f === 'risco' || f === 'marca') {
+    const pw = alvoPalavra();
+    const s = cx.s;
+    const y = f === 'sublinha' ? cx.y + cx.h * 0.96 : f === 'risco' ? cx.y + cx.h * 0.56 : cx.y + cx.h * 0.6;
+    const x0 = pw.x - (f === 'marca' ? s * 0.06 : 0), x1 = pw.x + pw.w + (f === 'marca' ? s * 0.06 : 0);
+    for (let i = 0; i < N; i++) { const k = i / (N - 1); pts.push([lerp(x0, x1, k), y + Math.sin(k * 3.1 + 1) * s * 0.012 - (f === 'risco' ? (k - 0.5) * s * 0.08 : k * k * s * 0.02)]); }
+    return { pts, larg: f === 'marca' ? s * 0.6 : f === 'risco' ? Math.max(5 * base, s * 0.07) : Math.max(5 * base, s * 0.055), alfa: f === 'marca' ? 0.34 : 1, frente: f !== 'marca', tampa: f === 'marca' ? 'butt' : 'round', cx: (x0 + x1) / 2, cy: y };
+  }
+  if (f === 'anel') {
+    const pw = alvoPalavra();
+    const ccx = pw.x + pw.w / 2, ccy = cx.y + cx.h * 0.52;
+    const rx = Math.min(pw.w / 2 + cx.s * 0.14, P.largura / 2 - 24 * base), ry = cx.h * 0.6;
+    for (let i = 0; i < N; i++) { const q = -2.3 + (i / (N - 1)) * Math.PI * 2 * 1.1; const e = 1 + (i / N) * 0.07; pts.push([ccx + Math.cos(q) * rx * e, ccy + Math.sin(q) * ry * e]); }
+    return { pts, larg: Math.max(4 * base, cx.s * 0.03), alfa: 1, frente: true, cx: ccx, cy: ccy };
+  }
+  if (f === 'barra') {
+    const x = lay.bloco.x - Math.max(18 * base, (lay.bloco.y1 - lay.bloco.y) * 0.08);
+    for (let i = 0; i < N; i++) { const k = i / (N - 1); pts.push([x, lerp(lay.bloco.y + 4, lay.bloco.y1 - 4, k)]); }
+    return { pts, larg: Math.max(8 * base, 10 * base), alfa: 1, frente: true, cx: x, cy: (lay.bloco.y + lay.bloco.y1) / 2 };
+  }
+  if (f === 'moldura') {
+    const pad = cx.s * 0.14;
+    const x0 = cx.x - pad, y0 = cx.y - pad * 0.5, x1 = cx.x + cx.w + pad, y1 = cx.y + cx.h + pad * 0.5;
+    const per = 2 * (x1 - x0) + 2 * (y1 - y0);
+    for (let i = 0; i < N; i++) {
+      let d = (i / (N - 1)) * per;
+      if (d < x1 - x0) { pts.push([x0 + d, y0]); continue; } d -= x1 - x0;
+      if (d < y1 - y0) { pts.push([x1, y0 + d]); continue; } d -= y1 - y0;
+      if (d < x1 - x0) { pts.push([x1 - d, y1]); continue; } d -= x1 - x0;
+      pts.push([x0, y1 - d]);
+    }
+    return { pts, larg: Math.max(3 * base, cx.s * 0.02), alfa: 1, frente: true, tampa: 'square', cx: (x0 + x1) / 2, cy: (y0 + y1) / 2 };
+  }
+  return geometria({ forma: 'ponto', alvo: a.alvo }, b, L, P);
+}
+
+/* A linha do tempo do acento: a semente, e em cada batida a VIAGEM (vira
+   ponto e anda até onde o próximo traço começa) e os estados dela. */
+function estadosDoAcento(P, L) {
+  const base = Math.min(P.largura, P.altura) / 1080;
+  const out = [{ t: 0, dur: 0.35, g: (() => { const r = 16 * base; const pts = []; for (let i = 0; i < N; i++) { const q = (i / (N - 1)) * Math.PI * 2; pts.push([P.largura / 2 + Math.cos(q) * r * 0.35, P.altura / 2 + Math.sin(q) * r * 0.35]); } return { pts, larg: r * 1.35, alfa: 1, frente: true, cx: P.largura / 2, cy: P.altura / 2 }; })(), cor: P.batidas[0].cores.acento, batida: 0 }];
+  P.batidas.forEach((b, bi) => {
+    b.acento.forEach((a, k) => {
+      const g = geometria(a, b, L, P);
+      if (k === 0 && a.forma !== 'bala' && a.forma !== 'ponto') {
+        const r = Math.max(7 * base, g.larg * 0.8);
+        const tv = Math.min(b.de + 0.05, a.t - 0.12);
+        out.push({ t: tv, dur: Math.max(0.12, Math.min(0.5, a.t - tv)), g: geometria({ forma: 'viagem', x: g.pts[0][0], y: g.pts[0][1], r }, b, L, P), cor: b.cores.acento, batida: bi });
+      }
+      out.push({ t: a.t, dur: a.dur, g, cor: b.cores.acento, batida: bi, forma: a.forma });
+    });
+  });
+  out.sort((a, b) => a.t - b.t);
+  return out;
+}
+
+function acentoEm(t, estados) {
+  let k = 0;
+  while (k < estados.length - 1 && estados[k + 1].t <= t) k++;
+  const cur = estados[k], prev = estados[Math.max(0, k - 1)];
+  const p = k === 0 ? saidaC(c01(t / cur.dur)) : arrasto(c01((t - cur.t) / Math.max(0.01, cur.dur)));
+  if (k === 0) {
+    const g = cur.g;
+    return { pts: g.pts, larg: g.larg * p, alfa: 1, frente: true, cor: cur.cor, cx: g.cx, cy: g.cy };
+  }
+  const a = prev.g, b = cur.g;
+  return {
+    pts: b.pts.map((q, i) => [lerp(a.pts[i][0], q[0], p), lerp(a.pts[i][1], q[1], p)]),
+    larg: lerp(a.larg, b.larg, p), alfa: lerp(a.alfa, b.alfa, p), frente: p > 0.5 ? b.frente : a.frente, tampa: p > 0.5 ? b.tampa : a.tampa,
+    cor: p > 0.5 ? cur.cor : prev.cor, cx: lerp(a.cx, b.cx, p), cy: lerp(a.cy, b.cy, p),
+  };
+}
+
+// ── a câmera ────────────────────────────────────────────────────────────
+function cameraEm(t, ks) {
+  if (t <= ks[0].t) return ks[0];
+  for (let i = 0; i < ks.length - 1; i++) {
+    const a = ks[i], b = ks[i + 1];
+    if (t >= a.t && t < b.t) {
+      if (b.e === 'degrau' || b.t - a.t < 0.001) return b;
+      const u = (t - a.t) / (b.t - a.t);
+      const k = b.e === 'acelera' ? acelera(u) : b.e === 'editorial' ? ed(u) : curvaCam(u);
+      return { x: lerp(a.x, b.x, k), y: lerp(a.y, b.y, k), zoom: lerp(a.zoom, b.zoom, k), rot: lerp(a.rot, b.rot, k) };
+    }
+  }
+  return ks[ks.length - 1];
+}
+
+// ── as saídas: quanto tempo cada uma leva ───────────────────────────────
+const DUR_SAIDA = { pontos: 0.5, evapora: 0.42, atravessa: 0.36, desliza: 0.36, comprime: 0.42, explode: 0.46, chicote: 0.3, inunda: 0.24, corte: 0, fim: 0 };
+
+// ── a letra: entrada, vida, saída ───────────────────────────────────────
+function letra({ t, fps, l, p, j, ch, i, idx, n, b, cx, cores, eixosF, alvoSaida, frame, folga, centroBloco }) {
+  const est = {};
+  let char = null;
+  const c = l.comportamento;
+  const passo = { carimbo: 0, desfoque: 0, tracking: 0, peso: 1.6, largura: 1.2, onda: 1.3, decodifica: 1, flap: 1.5, mascara: 1, pontos: 1.2, contorno: 1.6, monta: 0.8 }[c] || 1;
+  const t0 = p.t + (passo * idx) / fps * (l.papel === 'item' || l.papel === 'apoio' || l.papel === 'rotulo' ? 0.6 : 1);
+  const tl = t - t0;
+  if (tl < 0 && c !== 'decodifica' && c !== 'flap') return { estilo: { opacity: 0 } };
+  const m = MOLA(tl);
+  const tr = [];
+  let op = 1, blur = 0;
+  const eixos = { ...l.eixos, wght: pesoDaPalavra(l, p) };
+  const wMin = eixosF.wght ? eixosF.wght[0] : eixos.wght;
+  const semente = (l.id.length * 31 + idx * 7 + j * 13) % 997;
+  const caixaL = cx && cx.letras[idx];
+  const centroL = caixaL ? caixaL.x + caixaL.w / 2 : 0;
+  const centroLinha = cx ? cx.x + cx.w / 2 : 0;
+  switch (c) {
+    case 'carimbo': {
+      const r0 = (acaso(semente) - 0.5) * 8;
+      tr.push('rotate(' + (r0 * (1 - m)).toFixed(2) + 'deg)', 'scale(' + (1 + 0.32 * (1 - m)).toFixed(4) + ')');
+      const f = tl * fps;
+      blur = f < 2 ? 1.4 : Math.max(0, 0.7 * (1 - (f - 2) / 7));
+      break;
+    }
+    case 'mascara': tr.push('translateY(' + ((1 - m) * 105).toFixed(1) + '%)'); break;
+    case 'onda':
+      tr.push('translateY(' + ((1 - m) * 0.55 + Math.sin(tl * 15) * 0.08 * (1 - m)).toFixed(3) + 'em)', 'rotate(' + ((1 - m) * 10).toFixed(2) + 'deg)');
+      op = c01(tl * fps / 4); break;
+    case 'decodifica': {
+      if (t < p.t + (idx * 1) / fps - 0.001) return { estilo: { opacity: 0 } };
+      const resolve = p.t + 0.26 + (idx % 4) * 0.035 + idx * 0.012;
+      if (t < resolve && ch.trim()) { char = embaralha(semente + Math.floor(frame / 2) * 17); est.color = cores.fraco; }
+      else tr.push('scale(' + (1 + 0.1 * (1 - MOLA(t - resolve))).toFixed(3) + ')');
+      break;
+    }
+    case 'flap': {
+      if (t < p.t + (idx * 1.2) / fps) return { estilo: { opacity: 0 } };
+      const nf = 3 + (idx % 3), dur = (nf * 2) / fps, tf = t - (p.t + (idx * 1.2) / fps);
+      if (tf < dur && ch.trim()) { char = embaralha(semente + Math.floor(tf * fps / 2) * 29); const fase = (tf * fps / 2) % 1; tr.push('rotateX(' + (fase * 80).toFixed(1) + 'deg)'); est.color = cores.fraco; }
+      else tr.push('rotateX(' + ((1 - MOLA(tf - dur)) * 50).toFixed(1) + 'deg)');
+      break;
+    }
+    case 'peso': {
+      /* O peso BALANÇA: do fio (wght mínimo) ao mais pesado que a fonte tem,
+         e assenta no peso dele — a própria fonte se mexe. */
+      const u = c01(tl / 0.8), wMax = eixosF.wght ? eixosF.wght[1] : eixos.wght, alvo = eixos.wght;
+      eixos.wght = u < 0.5 ? lerp(wMin, wMax, ed(u / 0.5)) : lerp(wMax, alvo, ed((u - 0.5) / 0.5));
+      tr.push('scaleY(' + (0.9 + 0.1 * ed(c01(tl / 0.4))).toFixed(3) + ')');
+      op = c01(tl * fps / 3); break;
+    }
+    case 'largura': {
+      // A largura estica até onde o quadro deixa e volta (wdth 25 → pico → normal).
+      const u = c01(tl / 0.8), base0 = l.eixos.wdth || 100;
+      if (eixosF.wdth) {
+        const pico = Math.min(eixosF.wdth[1], base0 + (folga || 0) * 100 * 0.9);
+        eixos.wdth = u < 0.5 ? lerp(eixosF.wdth[0], pico, ed(u / 0.5)) : lerp(pico, base0, ed((u - 0.5) / 0.5));
+      }
+      eixos.wght = lerp(Math.max(wMin, eixos.wght - 450), eixos.wght, ed(u));
+      op = c01(tl * fps / 3); break;
+    }
+    case 'monta': {
+      // As letras chegam dos estilhaços da palavra que explodiu e se montam.
+      // A letra volta numa curva (arco), assenta com a mola, sem pião.
+      const k = MOLA(tl * 0.85);
+      const a = acaso(semente + 3) * Math.PI * 2, d = (160 + acaso(semente + 5) * 260) * (1 - k);
+      tr.push('translate(' + (Math.cos(a) * d).toFixed(1) + 'px,' + (Math.sin(a) * d - 120 * (1 - k) * k * 4).toFixed(1) + 'px)',
+        'rotate(' + ((acaso(semente + 9) - 0.5) * 60 * (1 - k)).toFixed(1) + 'deg)', 'scale(' + (0.6 + 0.4 * k).toFixed(3) + ')');
+      blur = (1 - k) * 10; op = c01(tl * fps / 2);
+      eixos.wght = lerp(wMin, eixos.wght, k);
+      break;
+    }
+    case 'tracking': tr.push('translateX(' + ((centroLinha - centroL) * (1 - m)).toFixed(1) + 'px)'); op = c01(m * 1.4); break;
+    case 'desfoque': blur = (1 - m) * 16; tr.push('translateY(' + ((1 - m) * 0.3).toFixed(3) + 'em)', 'scale(' + (1 + 0.05 * (1 - m)).toFixed(3) + ')'); op = c01(m * 1.2); break;
+    case 'pontos': {
+      const k = MOLA(tl - 4 / fps);
+      tr.push('scale(' + k.toFixed(3) + ')');
+      break;
+    }
+    case 'contorno': {
+      // O contorno se desenha, e a tinta enche por dentro.
+      const k = c01((tl - 0.3) / 0.4);
+      est.WebkitTextStroke = (0.018 * (1 - k) + 0.0001).toFixed(4) + 'em currentColor';
+      if (k < 1) est.WebkitTextFillColor = alfaCor(cores, l, p, k);
+      op = c01(tl * fps / 3); break;
+    }
+    default: break;
+  }
+  // A VIDA no repouso: a fonte continua se mexendo enquanto a gente lê.
+  const principal = l.papel === 'tese' || l.papel === 'numero';
+  const repouso = principal ? c01((t - (l.t + 0.7)) / 0.6) : 0;
+  if (repouso > 0 && !l.riscado) {
+    const fase = t * (Math.PI * 2) / 2.8 - idx * 0.45;
+    if (b.vida === 'respira') {
+      if (eixosF.GRAD) eixos.GRAD = (l.eixos.GRAD || 0) - 200 * (0.5 + 0.5 * Math.sin(fase)) * repouso;
+      else eixos.wght = eixos.wght - 280 * (0.5 + 0.5 * Math.sin(fase)) * repouso;
+    } else if (b.vida === 'onda') tr.push('translateY(' + (-0.06 * Math.sin(fase) * repouso).toFixed(4) + 'em)');
+    else if (b.vida === 'deriva') tr.push('translateX(' + ((centroL - centroLinha) * 0.03 * repouso * c01((t - l.t) / 3)).toFixed(2) + 'px)');
+    else if (b.vida === 'estica' && eixosF.wdth) eixos.wdth = (l.eixos.wdth || 100) - 30 * (0.5 + 0.5 * Math.sin(fase)) * repouso;
+  }
+  // A letra treme de leve no pulso (a cada meio segundo), e nunca fica parada de vez.
+  /* (O tremor de letra no pulso saiu: lia como defeito, não como vida.) */
+  // A SAÍDA: a letra se transforma no que vem.
+  const ds = DUR_SAIDA[b.saida] || 0;
+  if (ds > 0) {
+    const ordem = idx / Math.max(1, n);
+    const te = c01((t - (b.ate - ds) - ordem * ds * 0.35) / (ds * 0.65));
+    if (te > 0) {
+      if (b.saida === 'pontos') {
+        tr.push('scale(' + (1 - saidaC(c01(te / 0.4))).toFixed(3) + ')');
+      } else if (b.saida === 'evapora') {
+        eixos.wght = lerp(eixos.wght, wMin, ed(te));
+        tr.push('translate(' + ((centroL - centroLinha) * 0.25 * te).toFixed(1) + 'px,' + (-0.15 * te).toFixed(3) + 'em)');
+        op *= 1 - te; blur += te * 6;
+      } else if (b.saida === 'explode') {
+        // A palavra EXPLODE: cada letra voa para fora do centro do bloco, girando.
+        const lay = cx && cx.letras[idx];
+        const ox = lay ? lay.x + lay.w / 2 - centroBloco.x : 0, oy = cx ? cx.y + cx.h / 2 - centroBloco.y : 0;
+        // Em arco (a gravidade puxa um pouco para baixo), com giro contido — física, não glitch.
+        const a = Math.atan2(oy, ox || 0.001) + (acaso(semente + 11) - 0.5) * 0.7;
+        const e2 = entradaC(te), d = (220 + acaso(semente + 13) * 360) * e2;
+        tr.push('translate(' + (Math.cos(a) * d).toFixed(1) + 'px,' + (Math.sin(a) * d + 180 * e2 * e2).toFixed(1) + 'px)',
+          'rotate(' + ((acaso(semente + 17) - 0.5) * 90 * e2).toFixed(1) + 'deg)', 'scale(' + (1 + 0.25 * e2).toFixed(3) + ')');
+        op *= 1 - te * te; blur += te * 9;
+        if (eixosF.wght) eixos.wght = lerp(eixos.wght, eixosF.wght[1], te);
+      } else if (b.saida === 'comprime') {
+        tr.push('translateX(' + ((centroLinha - centroL) * ed(te)).toFixed(1) + 'px)', 'scaleX(' + (1 - 0.9 * te).toFixed(3) + ')');
+        if (eixosF.wdth) eixos.wdth = lerp(eixos.wdth || 100, eixosF.wdth[0], te);
+        op *= 1 - c01((te - 0.7) / 0.3);
+      }
+    }
+  }
+  if (tr.length) est.transform = tr.join(' ');
+  if (op < 1) est.opacity = op;
+  if (blur > 0.05) est.filter = 'blur(' + blur.toFixed(2) + 'px)';
+  est.fontVariationSettings = fvs(eixosF, eixos);
+  est.transformOrigin = '50% 60%';
+  return { estilo: est, char };
+}
+function alfaCor(cores, l, p, k) {
+  const base = p.cor === 'acento' ? cores.acento : l.cor === 'acento' ? cores.acento : l.cor === 'fraco' ? cores.fraco : cores.texto;
+  return alfa(base, k);
+}
+
+/* O ponto que nasce ou em que a letra vira (entrada e saída "pontos"). */
+function pontoDaLetra({ t, fps, l, p, idx, n, b, cx, cores, alvoSaida }) {
+  const tamPonto = 0.17;
+  const c = l.comportamento;
+  const t0 = p.t + (1.2 * idx) / fps;
+  let escala = 0, dx = 0, dy = 0, op = 1;
+  if (c === 'pontos' && t >= t0 && t < t0 + 0.5) {
+    const tl = t - t0;
+    escala = tl < 4 / fps ? saidaC(tl * fps / 4) : 1 - MOLA(tl - 4 / fps);
+  }
+  const ds = DUR_SAIDA[b.saida] || 0;
+  if (b.saida === 'pontos' && ds > 0 && cx && cx.letras[idx]) {
+    const ordem = idx / Math.max(1, n);
+    const te = c01((t - (b.ate - ds) - ordem * ds * 0.35) / (ds * 0.65));
+    if (te > 0) {
+      escala = Math.max(escala, saidaC(c01(te / 0.3)));
+      if (alvoSaida) {
+        const q = cx.letras[idx];
+        const k = entradaC(c01((te - 0.3) / 0.7));
+        dx = (alvoSaida.x - (q.x + q.w / 2)) * k;
+        dy = (alvoSaida.y - (cx.y + cx.h * 0.55)) * k;
+        escala *= 1 - 0.5 * k;
+        op = 1 - c01((te - 0.85) / 0.15);
+      }
+    }
+  }
+  if (escala <= 0.01) return null;
+  const cor = p.cor === 'acento' ? cores.acento : cores.texto;
+  return (
+    <span style={{ position: 'absolute', left: '50%', top: '55%', width: tamPonto + 'em', height: tamPonto + 'em', marginLeft: -tamPonto / 2 + 'em', marginTop: -tamPonto / 2 + 'em',
+      borderRadius: '50%', background: cor, opacity: op,
+      transform: 'translate(' + dx.toFixed(1) + 'px,' + dy.toFixed(1) + 'px) scale(' + escala.toFixed(3) + ')' }} />
+  );
+}
+
+// ── uma linha ──────────────────────────────────────────────────────────
+function Linha({ l, b, cx, t, fps, P, frame, alvoSaida, centroBloco }) {
+  if (!cx) return null;
+  const folga = Math.max(0, (P.largura * 0.94) / Math.max(1, cx.w) - 1);
+  // O GOLPE: a tese soca (escala que bate e assenta).
+  let soco = 1;
+  for (const g of b.golpes || []) if (g.linha === l.id && t >= g.t) soco += 0.05 * g.forca * Math.exp(-(t - g.t) * 14);
+  const cores = b.cores;
+  const eixosF = P.eixos[l.fonte] || {};
+  const ps = palavrasDaLinha(l);
+  const n = ps.reduce((q, p) => q + Array.from(p.texto).length, 0);
+  // A cascata envelhece: o item anterior perde a cor quando o próximo entra.
+  const velho = l.envelhece != null ? c01((t - l.envelhece) / (6 / fps)) : 0;
+  let corL = l.cor === 'acento' ? cores.acento : l.cor === 'fraco' ? cores.fraco : cores.texto;
+  if (velho > 0) corL = mistura(corL, cores.fraco, velho);
+  let texto = null;
+  // O CONTADOR: o número conta, e o peso cresce com ele.
+  const ct = b.contador && b.contador.linha === l.id ? b.contador : null;
+  let pesoContador = null;
+  if (ct && ct.n != null) {
+    const k = ed(c01((t - ct.t) / ct.dur));
+    const v = ct.n * k;
+    let s = v.toFixed(ct.casas || 0);
+    if (ct.milhar) s = s.replace(/\B(?=(\d{3})+(?!\d))/g, ct.milhar);
+    if (ct.virgula) s = s.replace('.', ',');
+    texto = (ct.antes || '') + s + (ct.depois || '');
+    if (l.maiusc) texto = texto.toUpperCase();
+    const faixa = eixosF.wght || [300, 900];
+    pesoContador = lerp(faixa[0], l.eixos.wght, k);
+  }
+  const estiloPalavra = (p, j) => {
+    const e = {};
+    if (p.cor === 'acento' && l.cor !== 'acento') e.color = velho > 0 ? mistura(cores.acento, cores.fraco, velho) : cores.acento;
+    if (l.comportamento === 'mascara') e.clipPath = 'inset(-0.25em -0.1em -0.3em -0.1em)';
+    return e;
+  };
+  const conteudo = texto != null ? (
+    <span style={{ display: 'inline-block', fontVariationSettings: fvs(eixosF, { ...l.eixos, wght: pesoContador }), fontFeatureSettings: '"tnum" 1',
+      opacity: c01((t - ct.t) * fps / 3), transform: 'scaleY(' + (0.9 + 0.1 * ed(c01((t - ct.t) / ct.dur))).toFixed(3) + ')' }}>{texto}</span>
+  ) : (
+    <Marcacao l={l} eixosFonte={eixosF} estiloPalavra={estiloPalavra}
+      estiloLetra={(p, j, ch, i, idx) => letra({ t, fps, l, p, j, ch, i, idx, n, b, cx, cores, eixosF, alvoSaida, frame, folga, centroBloco })}
+      extraLetra={(p, j, i, idx) => pontoDaLetra({ t, fps, l, p, idx, n, b, cx, cores, alvoSaida })} />
+  );
+  // As ALÇAS de vetor da marca que se constrói: cantos e guias enquanto a letra se desenha.
+  const alcas = l.marca && t >= l.t && t < l.t + 1.3 ? (() => {
+    const k = c01((t - l.t) / 0.25) * (1 - c01((t - l.t - 0.9) / 0.4));
+    const lado = Math.max(5, cx.s * 0.05);
+    const cor = alfa(cores.texto, 0.75 * k);
+    return (
+      <>
+        {[0.2, 0.78, 1.0].map((f, q) => <div key={'g' + q} style={{ position: 'absolute', left: -cx.s * 0.3, width: cx.w + cx.s * 0.6, top: cx.h * f, height: 1, background: alfa(cores.acento, 0.55 * k) }} />)}
+        {cx.letras.map((q, qi) => {
+          const k2 = c01((t - l.t - qi * 1.6 / fps) / 0.15) * k;
+          return [0, 1].map((lx) => [0.2, 1.0].map((ly) => (
+            <div key={qi + '-' + lx + '-' + ly} style={{ position: 'absolute', left: q.x - cx.x + lx * q.w - lado / 2, top: cx.h * ly - lado / 2, width: lado, height: lado,
+              border: '1.5px solid ' + cor, background: alfa(cores.fundo, 0.9 * k2), opacity: k2 }} />
+          )));
+        })}
+      </>
+    );
+  })() : null;
+  return (
+    <div style={{ position: 'absolute', left: cx.x, top: cx.y, width: cx.w + 2, height: cx.h, whiteSpace: 'pre', lineHeight: 1,
+      fontFamily: familia(l.fonte), fontSize: cx.s, letterSpacing: (l.tracking || 0) + 'em', color: corL, perspective: '600px',
+      textAlign: 'left', fontFeatureSettings: '"tnum" 1', transform: soco !== 1 ? 'scale(' + soco.toFixed(4) + ')' : undefined, transformOrigin: '50% 55%' }}>
+      {alcas}
+      {conteudo}
+    </div>
+  );
+}
+
+// ── a parede: a linha repetida vira textura ─────────────────────────────
+function Textura({ b, cx, t, P, periodo }) {
+  if (!cx || !b.textura || !periodo) return null;
+  const tx = b.textura;
+  const linhas = [];
+  const n = Math.ceil(tx.linhas / 2);
+  const reps = Math.ceil((P.largura * 3) / periodo) + 2;
+  const unidade = (tx.texto + '  ·  ').repeat(reps);
+  const saiu = DUR_SAIDA[b.saida] ? c01((t - (b.ate - DUR_SAIDA[b.saida])) / DUR_SAIDA[b.saida]) : 0;
+  const l0 = b.linhas[0];
+  for (let k = -n; k <= n; k++) {
+    if (k === 0) continue;
+    const aparece = c01((t - (l0.t + Math.abs(k) * 2 / P.fps)) / (6 / P.fps));
+    if (aparece <= 0) continue;
+    const dir = k % 2 ? 1 : -1;
+    const x = -((t * tx.velocidade * (1 + Math.abs(k) * 0.08) + Math.abs(k) * periodo * 0.37) % periodo) * dir - periodo * (dir > 0 ? 1 : 0) - P.largura;
+    linhas.push(
+      <div key={k} style={{ position: 'absolute', left: cx.x + x - cx.x, top: cx.y + k * cx.h * 1.02, whiteSpace: 'pre', lineHeight: 1, fontFamily: familia(tx.fonte),
+        fontSize: cx.s, fontVariationSettings: fvs(P.eixos[tx.fonte] || {}, l0.eixos), color: 'rgba(0,0,0,0)',
+        WebkitTextStroke: Math.max(1, cx.s * 0.008) + 'px ' + alfa(b.cores.texto, 0.32 * aparece * (1 - saiu)) }}>{unidade}</div>,
+    );
+  }
+  return <>{linhas}</>;
+}
+
+// ── o fundo vivo ────────────────────────────────────────────────────────
+const GRAO = 'url("data:image/svg+xml;utf8,' + encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") + '")';
+
+function Fundo({ P, b, prevB, t, cam, frame, origem }) {
+  const W = P.largura, H = P.altura;
+  const f = P.fundo;
+  // A inundação: o acento cresce e vira o fundo da próxima batida.
+  let corBase = b.cores.fundo, circulo = null;
+  /* O CAMPO troca: por inundação (o acento cresce e vira o fundo), por cortina
+     (a cor nova varre de um lado) ou por corte seco no quadro da batida. */
+  if (prevB && prevB.cores.fundo !== b.cores.fundo && b.troca === 'inunda') {
+    const k = entradaC(c01((t - (b.de - 0.2)) / 0.42));
+    if (k < 1) {
+      corBase = prevB.cores.fundo;
+      const R = Math.hypot(W, H) * 1.05 * k;
+      circulo = <div style={{ position: 'absolute', left: origem.x - R, top: origem.y - R, width: 2 * R, height: 2 * R, borderRadius: '50%', background: b.cores.fundo }} />;
+    }
+  } else if (prevB && prevB.cores.fundo !== b.cores.fundo && b.troca === 'cortina') {
+    const k = ed(c01((t - (b.de - 0.1)) / 0.34));
+    if (k < 1) {
+      corBase = prevB.cores.fundo;
+      const lado = (b.campo + Math.round(b.de * 10)) % 4;
+      const ins = lado === 0 ? `inset(0 ${100 - k * 100}% 0 0)` : lado === 1 ? `inset(0 0 0 ${100 - k * 100}%)` : lado === 2 ? `inset(0 0 ${100 - k * 100}% 0)` : `inset(${100 - k * 100}% 0 0 0)`;
+      circulo = <div style={{ position: 'absolute', inset: 0, background: b.cores.fundo, clipPath: ins }} />;
+    }
+  }
+  const claro = (() => { const n = parseInt(corBase.slice(1), 16); return ((n >> 16 & 255) * 0.299 + (n >> 8 & 255) * 0.587 + (n & 255) * 0.114) / 255 > 0.5; })();
+  const linhaCor = alfa(b.cores.texto, claro ? 0.07 : 0.075);
+  const passo = f.passo * (1 + (cam.zoom - 1) * 0.35);
+  const px = (-cam.x * 0.35 + t * 6) % passo, py = (-cam.y * 0.35 + t * 3) % passo;
+  const textura = f.textura === 'grade'
+    ? { backgroundImage: 'linear-gradient(' + linhaCor + ' 1px, transparent 1px), linear-gradient(90deg, ' + linhaCor + ' 1px, transparent 1px)' }
+    : f.textura === 'pontos' ? { backgroundImage: 'radial-gradient(' + alfa(b.cores.texto, 0.16) + ' 1.2px, transparent 1.6px)' }
+    : { backgroundImage: 'linear-gradient(' + linhaCor + ' 1px, transparent 1px)' };
+  const bx = (f.brilho.x + 0.12 * Math.sin(t * 0.23)) * 100, by = (f.brilho.y + 0.1 * Math.cos(t * 0.19)) * 100;
+  return (
+    <div style={{ position: 'absolute', inset: 0, background: corBase, overflow: 'hidden' }}>
+      {circulo}
+      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at ' + bx + '% ' + by + '%, ' + alfa(claro ? '#000000' : '#ffffff', 0.05) + ' 0%, transparent 60%)' }} />
+      {(f.particulas || []).map((q, i) => {
+        const x = ((q.x - cam.x * q.z * 1.6 + t * q.v * (i % 2 ? 1 : -0.6)) % W + W) % W;
+        const y = ((q.y - cam.y * q.z * 1.6 - t * q.v * 0.7) % H + H) % H;
+        const sc = 1 + (cam.zoom - 1) * q.z * 3;
+        return <div key={'q' + i} style={{ position: 'absolute', left: x, top: y, width: q.r * 2 * sc, height: q.r * 2 * sc, borderRadius: '50%',
+          background: i % 5 === 0 ? b.cores.acento : b.cores.texto, opacity: (0.1 + q.z * 0.25), filter: q.z < 0.3 ? 'blur(1.5px)' : undefined }} />;
+      })}
+      <div style={{ position: 'absolute', inset: 0, ...textura, backgroundSize: passo + 'px ' + passo + 'px', backgroundPosition: px + 'px ' + py + 'px',
+        WebkitMaskImage: 'radial-gradient(ellipse at 50% 50%, #000 20%, transparent 78%)', maskImage: 'radial-gradient(ellipse at 50% 50%, #000 20%, transparent 78%)' }} />
+    </div>
+  );
+}
+
+// ── o HERÓI GRÁFICO: a ideia visual grande de cada batida ───────────────
+const TAU = Math.PI * 2;
+function formaPoligono(n, estrela, R, cx, cy, giro, N = 60) {
+  const v = [];
+  const lados = estrela ? n * 2 : n;
+  for (let i = 0; i < lados; i++) { const a = giro + (i / lados) * TAU - Math.PI / 2, r = estrela && i % 2 ? R * 0.45 : R; v.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]); }
+  const pts = [];
+  for (let k = 0; k < N; k++) {
+    const u = (k / N) * lados, i = Math.floor(u), f = u - i, a = v[i % lados], b2 = v[(i + 1) % lados];
+    pts.push([lerp(a[0], b2[0], f), lerp(a[1], b2[1], f)]);
+  }
+  return pts;
+}
+const caminhoFechado = (pts) => 'M' + pts.map((q) => q[0].toFixed(1) + ' ' + q[1].toFixed(1)).join('L') + 'Z';
+
+function Heroi({ b, t, P, slot }) {
+  const h = b.heroi;
+  if (!h) return null;
+  const W = P.largura, H = P.altura, base = Math.min(W, H) / 1080;
+  const tl = t - b.de, dur = Math.max(0.8, b.ate - b.de);
+  const k = ed(c01(tl / 0.7));
+  const sem = h.semente;
+  const cor = h.cor, cor2 = h.cor2;
+  const { cx, cy, R, fraco } = slot;
+  const op = fraco ? 0.32 : 1;
+  const els = [];
+  if (h.tipo === 'explosao') {
+    // A explosão radial: nasce de um ponto, os raios saem em mola e giram devagar; anéis de régua em volta.
+    const n = 10 + (sem % 7), giro = tl * 0.25 + (sem % 10) * 0.3;
+    for (let i = 0; i < n; i++) {
+      const ki = MOLA(tl - 0.12 - i * 0.025), a = giro + (i / n) * TAU, r1 = R * (0.62 + 0.38 * acaso(sem + i)) * ki * (1 + 0.04 * Math.sin(t * 3 + i));
+      els.push(<line key={'r' + i} x1={cx + Math.cos(a) * R * 0.14} y1={cy + Math.sin(a) * R * 0.14} x2={cx + Math.cos(a) * r1} y2={cy + Math.sin(a) * r1} stroke={cor} strokeWidth={R * 0.1} strokeLinecap="round" />);
+    }
+    els.push(<circle key="c" cx={cx} cy={cy} r={R * 0.16 * Math.min(1, tl * 6)} fill={cor} />);
+    els.push(<circle key="a1" cx={cx} cy={cy} r={R * 1.25 * k} fill="none" stroke={cor2} strokeOpacity={0.28} strokeWidth={1.5 * base} />);
+    els.push(<circle key="a2" cx={cx} cy={cy} r={R * 1.55 * ed(c01((tl - 0.15) / 0.8))} fill="none" stroke={cor2} strokeOpacity={0.22} strokeWidth={1.2 * base} strokeDasharray={`${2 * base} ${9 * base}`} transform={`rotate(${-tl * 12} ${cx} ${cy})`} />);
+  } else if (h.tipo === 'poligono') {
+    // O polígono que se transforma: triângulo → estrela → quadrado, com partículas em órbita.
+    const seq = [[3, false], [5, true], [4, false], [6, true]];
+    const u = c01(tl / dur) * 3, i = Math.min(2, Math.floor(u)), f = ed(c01((u - i) * 2.2 - 0.6));
+    const giro = tl * 0.35;
+    const A = formaPoligono(seq[i][0], seq[i][1], R * 0.62 * k, cx, cy, giro), B2 = formaPoligono(seq[i + 1][0], seq[i + 1][1], R * 0.62 * k, cx, cy, giro);
+    const pts = A.map((q, j) => [lerp(q[0], B2[j][0], f), lerp(q[1], B2[j][1], f)]);
+    els.push(<path key="g" d={caminhoFechado(formaPoligono(seq[i + 1][0], seq[i + 1][1], R * 0.7 * k, cx, cy, -giro * 1.4))} fill="none" stroke={cor} strokeOpacity={0.55} strokeWidth={1.4 * base} />);
+    els.push(<path key="p" d={caminhoFechado(pts)} fill={cor2} />);
+    const n = 12;
+    for (let j = 0; j < n; j++) {
+      const a = (j / n) * TAU + tl * 0.6, r = R * 1.18 * k;
+      const x = cx + Math.cos(a) * r, y = cy + Math.sin(a) * r, s2 = R * 0.045;
+      els.push(j % 3 ? <circle key={'o' + j} cx={x} cy={y} r={s2} fill={cor2} /> : <path key={'o' + j} d={caminhoFechado(formaPoligono(3, false, s2 * 1.6, x, y, a))} fill={cor} />);
+    }
+  } else if (h.tipo === 'esfera' || h.tipo === 'toro') {
+    // A malha de pontos em 3D: esfera ou toro girando, o ponto mais perto maior e mais forte.
+    const pts = [];
+    const ry = tl * 0.7 + sem, rx = 0.45 + Math.sin(tl * 0.4) * 0.2;
+    const add = (x, y, z, ac) => {
+      const x1 = x * Math.cos(ry) + z * Math.sin(ry), z1 = -x * Math.sin(ry) + z * Math.cos(ry);
+      const y2 = y * Math.cos(rx) - z1 * Math.sin(rx), z2 = y * Math.sin(rx) + z1 * Math.cos(rx);
+      const f = 3.2 / (3.2 + z2);
+      pts.push({ x: cx + x1 * R * f * k, y: cy + y2 * R * f * k, z: z2, f, ac });
+    };
+    if (h.tipo === 'esfera') { for (let i = 1; i < 16; i++) for (let j = 0; j < 26; j++) { const th = (i / 16) * Math.PI, ph = (j / 26) * TAU; add(Math.sin(th) * Math.cos(ph), Math.cos(th), Math.sin(th) * Math.sin(ph), (i * 26 + j) % 11 === 0); } }
+    else { for (let i = 0; i < 30; i++) for (let j = 0; j < 14; j++) { const u = (i / 30) * TAU, v = (j / 14) * TAU; add((0.72 + 0.3 * Math.cos(v)) * Math.cos(u), 0.3 * Math.sin(v), (0.72 + 0.3 * Math.cos(v)) * Math.sin(u), (i + j) % 9 === 0); } }
+    pts.sort((a, b2) => b2.z - a.z);
+    pts.forEach((q, j) => els.push(<circle key={j} cx={q.x} cy={q.y} r={Math.max(0.6, 2.6 * base * q.f)} fill={q.ac ? cor : cor2} opacity={0.25 + 0.75 * c01((1 - q.z) / 2)} />));
+  } else if (h.tipo === 'truchet') {
+    // O campo de truchet: arcos em azulejo e uma onda de cor que atravessa na diagonal.
+    const T = Math.round(Math.min(W, H) / 7.5), cols = Math.ceil(W / T) + 1, rows = Math.ceil(H / T) + 1;
+    const onda = (tl * 7) % (cols + rows + 8) - 4;
+    let dBase = '', dOnda = '';
+    for (let i = 0; i < cols; i++) for (let j = 0; j < rows; j++) {
+      if ((i + j) * 0.9 > tl * 22) continue;
+      const x = i * T, y = j * T, r = T / 2, o = acaso(sem + i * 31 + j * 17) > 0.5;
+      const d = o ? `M${x + r} ${y}A${r} ${r} 0 0 1 ${x} ${y + r}M${x + T} ${y + r}A${r} ${r} 0 0 0 ${x + r} ${y + T}`
+        : `M${x + r} ${y}A${r} ${r} 0 0 0 ${x + T} ${y + r}M${x} ${y + r}A${r} ${r} 0 0 1 ${x + r} ${y + T}`;
+      if (Math.abs(i + j - onda) < 2.2) dOnda += d; else dBase += d;
+    }
+    els.push(<path key="b" d={dBase} fill="none" stroke={cor2} strokeOpacity={0.16} strokeWidth={T * 0.16} strokeLinecap="round" />);
+    els.push(<path key="o" d={dOnda} fill="none" stroke={cor} strokeOpacity={0.8} strokeWidth={T * 0.16} strokeLinecap="round" />);
+  } else if (h.tipo === 'aneis') {
+    // Anéis de órbita inclinados, cada um com o seu satélite.
+    for (let j = 0; j < 3; j++) {
+      const rx2 = R * (1.05 + j * 0.38) * k, ry2 = rx2 * (0.3 + 0.08 * j), ang = (sem % 40) - 20 + j * 28 + tl * (6 + j * 3);
+      const a = tl * (0.9 - j * 0.2) + j * 2;
+      els.push(<g key={'a' + j} transform={`rotate(${ang.toFixed(2)} ${cx} ${cy})`}>
+        <ellipse cx={cx} cy={cy} rx={rx2} ry={ry2} fill="none" stroke={cor2} strokeOpacity={0.3} strokeWidth={1.6 * base} />
+        <circle cx={cx + Math.cos(a) * rx2} cy={cy + Math.sin(a) * ry2} r={6 * base} fill={j === 1 ? cor : cor2} />
+      </g>);
+    }
+  } else if (h.tipo === 'grade') {
+    // A grade que deforma: uma lente passa e entorta as linhas.
+    const G = Math.round(Math.min(W, H) / 12), bx = lerp(-0.2 * W, 1.2 * W, (tl / dur) % 1), by = H * (0.35 + 0.3 * Math.sin(tl * 0.7));
+    const warp = (x, y) => { const d2 = ((x - bx) ** 2 + (y - by) ** 2) / (0.09 * W * W); const e = Math.exp(-d2) * 60 * base; return [x + (x - bx) * e / 300, y + (y - by) * e / 300]; };
+    let d = '';
+    for (let x = 0; x <= W + G; x += G) { d += 'M'; for (let y = 0; y <= H; y += 40) { const q = warp(x, y); d += q[0].toFixed(1) + ' ' + q[1].toFixed(1) + (y + 40 <= H ? 'L' : ''); } }
+    for (let y = 0; y <= H + G; y += G) { d += 'M'; for (let x = 0; x <= W; x += 40) { const q = warp(x, y); d += q[0].toFixed(1) + ' ' + q[1].toFixed(1) + (x + 40 <= W ? 'L' : ''); } }
+    els.push(<path key="g" d={d} fill="none" stroke={cor2} strokeOpacity={0.14 * k} strokeWidth={1.2 * base} />);
+    els.push(<circle key="l" cx={bx} cy={by} r={7 * base} fill={cor} opacity={k} />);
+  } else if (h.tipo === 'rastro') {
+    // Rastros de velocidade cruzando o quadro.
+    for (let j = 0; j < 16; j++) {
+      const y = H * acaso(sem + j * 7), len = W * (0.15 + 0.45 * acaso(sem + j * 11)), v = W * (1.2 + acaso(j * 13 + 1) * 1.6);
+      const x = ((tl * v + acaso(sem + j * 3) * W * 2) % (W * 2 + len)) - len;
+      els.push(<rect key={j} x={x} y={y} width={len} height={(1.5 + 4 * acaso(j * 5 + sem)) * base} rx={2} fill={j % 4 === 0 ? cor : cor2} opacity={(j % 4 === 0 ? 0.7 : 0.18) * k} />);
+    }
+  }
+  return <svg width={W} height={H} style={{ position: 'absolute', left: 0, top: 0, overflow: 'visible', opacity: op }}>{els}</svg>;
+}
+
+/* O HUD do motion designer, em toda batida: cantos de enquadramento, a marca,
+   a seção, o timecode, os quadros por segundo e a régua do vídeo. */
+const SECOES = { gigante: 'TESE', pilha: 'ARGUMENTO', divisao: 'CONTRASTE', contador: 'NÚMERO', cascata: 'LISTA', parede: 'TEXTURA', citacao: 'CITAÇÃO', marca: 'MARCA', palavras: 'FALA', produto: 'PRODUTO' };
+function HudG({ P, b, bi, t, fps }) {
+  const W = P.largura, H = P.altura, m = Math.round(Math.min(W, H) * 0.035), tam = Math.max(11, Math.round(Math.min(W, H) * 0.0125));
+  const cor = alfa(b.cores.texto, 0.72);
+  const f = Math.round(t * fps);
+  const tc = [Math.floor(t / 60), Math.floor(t) % 60, f % fps].map((n) => String(n).padStart(2, '0')).join(':');
+  const rot = { position: 'absolute', fontFamily: familia(P.fontes.mono), fontSize: tam, letterSpacing: '0.14em', color: cor, whiteSpace: 'nowrap', textTransform: 'uppercase' };
+  const canto = (x, y, sx, sy) => <div key={x + '-' + y} style={{ position: 'absolute', left: x - (sx < 0 ? m * 0.7 : 0), top: y - (sy < 0 ? m * 0.7 : 0), width: m * 0.7, height: m * 0.7,
+    borderLeft: sx > 0 ? '1.5px solid ' + cor : undefined, borderRight: sx < 0 ? '1.5px solid ' + cor : undefined, borderTop: sy > 0 ? '1.5px solid ' + cor : undefined, borderBottom: sy < 0 ? '1.5px solid ' + cor : undefined }} />;
+  return (
+    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
+      {canto(m, m, 1, 1)}{canto(W - m, m, -1, 1)}{canto(m, H - m, 1, -1)}{canto(W - m, H - m, -1, -1)}
+      <div style={{ ...rot, left: m * 1.5, top: m * 1.1 }}><b>{P.hud.marca}</b><span style={{ opacity: 0.6 }}>{'  ·  MOTION · ' + P.hud.ano}</span></div>
+      <div style={{ ...rot, right: m * 1.5, top: m * 1.1 }}>{String(bi + 1).padStart(2, '0') + ' — ' + (SECOES[b.comp] || b.comp.toUpperCase())}</div>
+      <div style={{ ...rot, left: m * 1.5, bottom: m * 1.1 }}>{tc}<span style={{ opacity: 0.55 }}>{'   ' + fps + ' FPS'}</span></div>
+      <div style={{ ...rot, right: m * 1.5, bottom: m * 1.1 }}>{W + '×' + H}</div>
+      <div style={{ position: 'absolute', left: m * 1.5, bottom: m * 0.62, height: 1.5, width: (W - m * 3) * c01(t / P.duracao), background: cor }} />
+    </div>
+  );
+}
+
+// ── o componente ────────────────────────────────────────────────────────
+export function Gerativo({ el, t, fps }) {
+  const P = el.partitura;
+  const med = useMedidas(P);
+  const L = useMemo(() => (med ? leiaute(P, med) : null), [med]);
+  const estados = useMemo(() => (L ? estadosDoAcento(P, L) : null), [L]);
+  const W = P.largura, H = P.altura;
+  if (!L) return <div style={{ position: 'absolute', inset: 0, background: P.paleta.fundo }} />;
+  const frame = Math.round(t * fps);
+  const bs = P.batidas;
+  let bi = 0;
+  while (bi < bs.length - 1 && t >= bs[bi + 1].de) bi++;
+  const b = bs[bi];
+  const cam0 = cameraEm(t, P.camera);
+  /* A câmera NUNCA para: por cima das chaves, uma deriva de mão; e nos
+     golpes (a tese que bate, o corte) ela treme e soca. */
+  const base = Math.min(W, H) / 1080;
+  // A deriva é lenta e longa (inércia); o tremor só no golpe, e dura no máximo 6 quadros.
+  let sx = Math.sin(t * 0.43) * 0.006 * W, sy = Math.cos(t * 0.37) * 0.005 * H, sr = Math.sin(t * 0.29) * 0.25, sz = 0;
+  for (const g of b.golpes || []) {
+    const d = t - g.t;
+    if (d < 0 || d > 6 / fps) continue;
+    const k = g.forca * (1 - d / (6 / fps));
+    sx += Math.sin(d * 70) * 9 * base * k; sy += Math.cos(d * 60) * 6 * base * k; sz += 0.02 * k;
+  }
+  /* O PULSO: nada assenta de vez — o mundo respira (escala lenta) e bate de
+     leve a cada meio segundo, como um bumbo. */
+  // A respiração lenta do mundo (sem bumbo: o pulso batendo lia como tranco).
+  sz += 0.008 * Math.sin((t * Math.PI * 2) / 3.4);
+  const cam = { x: cam0.x + sx, y: cam0.y + sy, zoom: cam0.zoom * (1 + sz), rot: cam0.rot + sr };
+  const ac0 = acentoEm(t, estados);
+  // O acento também vive: treme de leve e respira na espessura.
+  const ac = { ...ac0, pts: ac0.pts.map((q, i) => [q[0] + Math.sin(t * 3.1 + i * 0.5) * 1.6 * base, q[1] + Math.cos(t * 2.7 + i * 0.37) * 1.6 * base]), larg: ac0.larg * (1 + 0.08 * Math.sin(t * 4.2)) };
+  // O ponto de onde a inundação nasce: o acento, visto pela câmera.
+  const tela = (x, y) => {
+    const r = (cam.rot * Math.PI) / 180, dx = x - W / 2 - cam.x, dy = y - H / 2 - cam.y;
+    return { x: W / 2 + cam.zoom * (dx * Math.cos(r) - dy * Math.sin(r)), y: H / 2 + cam.zoom * (dx * Math.sin(r) + dy * Math.cos(r)) };
+  };
+  const origem = tela(ac.cx, ac.cy);
+  /* O ESPAÇO 3D: o mundo tem perspectiva, a câmera também inclina (rotateX/Y)
+     e as camadas estão em profundidades diferentes — o texto não é adesivo. */
+  const rx = Math.cos(t * 0.27) * 1.4, ry = Math.sin(t * 0.31) * 2 + cam.rot * 0.6;
+  const mundo = 'translate(' + W / 2 + 'px,' + H / 2 + 'px) rotate(' + cam.rot.toFixed(3) + 'deg) rotateX(' + rx.toFixed(3) + 'deg) rotateY(' + ry.toFixed(3) + 'deg) scale(' + cam.zoom.toFixed(4) + ') translate(' + (-W / 2 - cam.x).toFixed(1) + 'px,' + (-H / 2 - cam.y).toFixed(1) + 'px)';
+  // No ar: a batida atual, a anterior enquanto sai.
+  const noAr = bs.filter((x, i) => i === bi || (i === bi - 1 && t < x.ate + 0.14 && x.saida !== 'corte'));
+  const traco = (
+    <svg key="acento" width={W} height={H} style={{ position: 'absolute', left: 0, top: 0, overflow: 'visible' }}>
+      <path d={suave(ac.pts)} fill="none" stroke={ac.cor} strokeWidth={Math.max(0.1, ac.larg)} strokeLinecap={ac.tampa || 'round'} strokeLinejoin="round" opacity={ac.alfa} />
+    </svg>
+  );
+  // Onde as letras que viram pontos vão parar: a viagem do acento na próxima batida.
+  const alvoDe = (x) => {
+    const prox = estados.find((e) => e.batida === bs.indexOf(x) + 1);
+    return prox ? { x: prox.g.cx, y: prox.g.cy } : null;
+  };
+  const produtos = (P.produtos || []).filter((q) => t >= q.de - 0.1 && t <= q.ate + 0.35);
+  return (
+    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+      <Fundo P={P} b={b} prevB={bs[bi - 1]} t={t} cam={cam} frame={frame} origem={origem} />
+      <div style={{ position: 'absolute', inset: 0, perspective: Math.round(Math.max(W, H) * 0.85) + 'px', perspectiveOrigin: '50% 48%' }}>
+      <div style={{ position: 'absolute', left: 0, top: 0, width: W, height: H, transformOrigin: '0 0', transform: mundo, transformStyle: 'preserve-3d' }}>
+        {produtos.map((q, i) => {
+          const sai = c01((t - q.ate) / 0.3), entra = ed(c01((t - q.de) / 0.6));
+          return (
+            <div key={'p' + i} style={{ position: 'absolute', left: 0, top: 0, width: W, height: H, opacity: 1 - sai, transform: 'scale(' + (0.94 + 0.06 * entra + 0.1 * sai) + ')', transformOrigin: (q.x + q.largura / 2) + 'px ' + (q.y + q.altura / 2) + 'px' }}>
+              <Produto3D el={{ x: q.x, y: q.y, largura: q.largura, altura: q.altura, modelo: q.modelo, cor: q.cor, corAcento: q.corAcento, t: q.de + 0.05, giro: 0.45, escala: q.escala || 1, semChao: true }} t={t} />
+            </div>
+          );
+        })}
+        {!ac.frente && traco}
+        {noAr.map((x) => {
+          const lay = L[x.id];
+          const ds = DUR_SAIDA[x.saida] || 0;
+          const te = ds ? c01((t - (x.ate - ds)) / ds) : 0;
+          let estilo = {};
+          if (x.saida === 'atravessa' && te > 0) {
+            estilo = { transform: 'scale(' + (1 + 4.5 * entradaC(te)).toFixed(3) + ')', opacity: 1 - c01((te - 0.45) / 0.55), filter: 'blur(' + (te * 10).toFixed(1) + 'px)' };
+          } else if (x.saida === 'chicote' && te > 0) {
+            estilo = { transform: 'translateX(' + (-0.25 * W * entradaC(te)).toFixed(1) + 'px) skewX(' + (-6 * te).toFixed(2) + 'deg)', filter: 'blur(' + (te * 12).toFixed(1) + 'px)', opacity: 1 - c01((te - 0.5) / 0.5) };
+          } else if (x.saida === 'inunda' && te > 0) estilo = { opacity: 1 - te, transform: 'scale(' + (1 - 0.04 * te) + ')' };
+          else if (x.saida === 'corte' && t >= x.ate) return null;
+          if (x.entrada === 'chicote' && t < x.de + 0.32) {
+            const k = ed(c01((t - x.de) / 0.32));
+            estilo = { ...estilo, transform: 'translateX(' + (0.2 * W * (1 - k)).toFixed(1) + 'px) skewX(' + (5 * (1 - k)).toFixed(2) + 'deg)', filter: 'blur(' + ((1 - k) * 10).toFixed(1) + 'px)' };
+          }
+          if (x.entrada === 'atravessa' && t < x.de + 0.4) {
+            const k = ed(c01((t - x.de) / 0.4));
+            estilo = { ...estilo, transform: 'scale(' + (0.82 + 0.18 * k).toFixed(4) + ')', filter: 'blur(' + ((1 - k) * 8).toFixed(1) + 'px)' };
+          }
+          const alvo = x.saida === 'pontos' ? alvoDe(x) : null;
+          /* O DOLLY: a batida chega do fundo do espaço, a câmera avança devagar
+             nela, e na saída ela vem para cima da lente e passa — atravessamos. */
+          const zEntra = x.entrada === 'corte' ? 0 : -340 * (1 - ed(c01((t - x.de) / 0.65)));
+          const zSai = ds && x.saida !== 'corte' && x.saida !== 'inunda' ? 560 * entradaC(te) : 0;
+          const zB = zEntra + 110 * c01((t - x.de) / Math.max(0.6, x.ate - x.de)) + zSai;
+          const tz = 'translateZ(' + zB.toFixed(1) + 'px)';
+          return (
+            <div key={x.id} style={{ position: 'absolute', left: 0, top: 0, width: W, height: H, transformOrigin: (W / 2) + 'px ' + (H / 2) + 'px', transformStyle: estilo.filter ? undefined : 'preserve-3d',
+              ...estilo, transform: [tz, estilo.transform].filter(Boolean).join(' '), opacity: (estilo.opacity != null ? estilo.opacity : 1) * (zSai ? 1 - c01((te - 0.55) / 0.45) : 1) }}>
+              {x.heroi && (() => {
+                // O lugar do herói: o vazio do bloco (como o ícone); sem vazio, atrás do texto e mais fraco.
+                const bl = lay.bloco, M = P.margem;
+                if (x.heroi.modo === 'campo') return <Heroi b={x} t={t} P={P} slot={{ cx: (bl.x + bl.x1) / 2, cy: (bl.y + bl.y1) / 2, R: Math.min(W, H) * 0.32 }} />;
+                const R = Math.min(W, H) * (W >= H ? 0.2 : 0.17);
+                let slot = null;
+                if (W - M - bl.x1 >= R * 2.3) slot = { cx: bl.x1 + (W - M - bl.x1) / 2, cy: (bl.y + bl.y1) / 2, R };
+                else if (bl.y - M * 1.4 >= R * 2.2) slot = { cx: W / 2, cy: M * 1.4 + (bl.y - M * 1.4) / 2, R };
+                else if (H - M * 1.4 - bl.y1 >= R * 2.2) slot = { cx: W / 2, cy: bl.y1 + (H - M * 1.4 - bl.y1) / 2, R };
+                else return <Heroi b={{ ...x, heroi: { ...x.heroi, tipo: 'aneis' } }} t={t} P={P} slot={{ cx: (bl.x + bl.x1) / 2, cy: (bl.y + bl.y1) / 2, R: Math.min(W, H) * 0.3 }} />;
+                return <Heroi b={x} t={t} P={P} slot={slot} />;
+              })()}
+              <Textura b={x} cx={lay.caixas[x.linhas[0].id]} t={t} P={P} periodo={lay.textura} />
+              {x.icone3d && (() => {
+                /* O ícone 3D mora no vazio do bloco: à direita (deitado) ou acima
+                   (em pé); sem espaço, não entra — nunca por cima do texto. */
+                const ic = x.icone3d, tam = ic.tamanho, M = P.margem, bl = lay.bloco;
+                let px = null, py = null;
+                if (ic.lado === 'direita' && W - M - bl.x1 >= tam * 0.9) { px = Math.min(W - M - tam, bl.x1 + (W - M - bl.x1 - tam) / 2); py = (bl.y + bl.y1) / 2 - tam / 2; }
+                else if (bl.y - M * 1.2 >= tam * 0.85) { px = x.bloco.alinha === 'centro' ? (bl.x + bl.x1) / 2 - tam / 2 : bl.x - tam * 0.08; py = Math.max(M, bl.y - tam - 0.02 * H); }
+                if (px == null) return null;
+                return <div style={{ position: 'absolute', inset: 0, transform: 'translateZ(150px)' }}><Icone3D el={{ ...ic, x: Math.round(px), y: Math.round(py) }} t={t} /></div>;
+              })()}
+              {x.linhas.map((l, li) => {
+                const cx = lay.caixas[l.id];
+                if (t < l.t - 0.2) return null;
+                let eLinha = {};
+                if (x.saida === 'desliza') {
+                  const tl = c01((t - (x.ate - DUR_SAIDA.desliza) - li * 3 / fps) / (DUR_SAIDA.desliza * 0.7));
+                  if (tl > 0) eLinha = { transform: 'translateY(' + (-0.5 * ed(tl) * cx.s).toFixed(1) + 'px)', opacity: 1 - tl, filter: 'blur(' + (tl * 4).toFixed(1) + 'px)' };
+                }
+                /* Cada linha numa PROFUNDIDADE: o rótulo perto da lente, o apoio
+                   atrás, a tese no foco — e a lente desfoca o que não é a tese.
+                   A linha entra deitada (rotateX) e balança no eixo Y. */
+                const zL = { rotulo: 120, aspas: 170, apoio: -120, fraco: -150, numero: 40, item: -35 * (li % 3) }[l.papel] || 0;
+                const deita = (1 - ed(c01((t - l.t) / 0.55))) * 32;
+                const balanco = Math.sin(t * 0.42 + li * 0.9) * 1.4;
+                const dof = Math.min(1.1, Math.abs(zL) / 140) * 0.9;
+                const origemL = (cx.x + cx.w / 2).toFixed(0) + 'px ' + (cx.y + cx.h / 2).toFixed(0) + 'px';
+                const t3 = 'translateZ(' + zL + 'px) rotateX(' + deita.toFixed(2) + 'deg) rotateY(' + balanco.toFixed(2) + 'deg)';
+                eLinha = { ...eLinha, transform: [t3, eLinha.transform].filter(Boolean).join(' '), transformOrigin: origemL,
+                  filter: [dof > 0.05 ? 'blur(' + dof.toFixed(2) + 'px)' : '', eLinha.filter || ''].filter(Boolean).join(' ') || undefined };
+                return (
+                  <div key={l.id} style={{ position: 'absolute', inset: 0, ...eLinha }}>
+                    <Linha l={l} b={x} cx={cx} t={t} fps={fps} P={P} frame={frame} alvoSaida={alvo} centroBloco={{ x: (lay.bloco.x + lay.bloco.x1) / 2, y: (lay.bloco.y + lay.bloco.y1) / 2 }} />
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+        {ac.frente && traco}
+      </div>
+      </div>
+      {/* A FRENTE: manchas de luz que passam perto da lente (bokeh) e o feixe
+          de luz que varre o quadro quando uma batida chega. */}
+      {[0, 1, 2, 3].map((k) => {
+        const per = 5 + acaso(P.semente % 997 + k * 7) * 4, fase = acaso(P.semente % 991 + k * 13) * per;
+        const u = ((t + fase) % per) / per;
+        const tam = Math.min(W, H) * (0.28 + acaso(k * 17 + 3) * 0.3);
+        const x = lerp(-0.35 * W, 1.35 * W, u) - cam.x * 1.8, y = H * (0.15 + acaso(k * 29 + 5) * 0.7) - cam.y * 1.8;
+        const cor = k % 2 ? b.cores.acento : b.cores.texto;
+        return <div key={'bk' + k} style={{ position: 'absolute', left: x - tam / 2, top: y - tam / 2, width: tam, height: tam, borderRadius: '50%', pointerEvents: 'none',
+          background: 'radial-gradient(circle, ' + alfa(cor, k % 2 ? 0.16 : 0.08) + ' 0%, transparent 66%)', opacity: Math.sin(Math.PI * u) }} />;
+      })}
+      {(() => {
+        const k = c01((t - b.de) / 0.95);
+        if (k <= 0 || k >= 1) return null;
+        const x = lerp(-0.7 * W, 1.2 * W, ed(k));
+        const claro = parseInt(b.cores.fundo.slice(1, 3), 16) > 160;
+        return <div style={{ position: 'absolute', top: -H * 0.2, height: H * 1.4, left: x, width: W * 0.45, pointerEvents: 'none', transform: 'rotate(14deg)',
+          background: 'linear-gradient(90deg, transparent, ' + (claro ? 'rgba(255,255,255,0.55)' : 'rgba(255,255,255,0.12)') + ', transparent)', mixBlendMode: claro ? 'soft-light' : 'screen', opacity: Math.sin(Math.PI * k) }} />;
+      })()}
+      {P.hud && <HudG P={P} b={b} bi={bi} t={t} fps={fps} />}
+      {/* O acabamento: grão que muda a cada quadro e vinheta suave. */}
+      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', backgroundImage: GRAO, backgroundSize: '220px 220px',
+        backgroundPosition: Math.floor(acaso(frame) * 220) + 'px ' + Math.floor(acaso(frame + 7) * 220) + 'px', opacity: P.fundo.grao * 1.6, mixBlendMode: 'overlay' }} />
+      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,' + (parseInt(b.cores.fundo.slice(1, 3), 16) > 160 ? 0.06 : 0.18) + ') 100%)' }} />
+    </div>
+  );
+}
+
+export const GERATIVO = { gerativo: Gerativo };