primocode 10.0.0 → 10.1.0

package/lib/estudio/kit/fluido.jsx

@@ -0,0 +1,493 @@
+/* kit/fluido.jsx — o estilo fluido (lib/estudio/fluido.js), quadro a quadro.
+ *
+ * Uma peça só desenha a partitura inteira. Antes do primeiro quadro as fontes
+ * carregam e cada palavra é MEDIDA (canvas): é daí que sai o tamanho da
+ * pílula, do anel e do cartão. Depois, tudo é função do tempo:
+ *
+ *   o PORTADOR  uma forma que vive o vídeo todo e muda de lugar, tamanho,
+ *               raio e preenchimento entre as batidas (ponto → pílula → anel
+ *               → linha → cartão → marca). É ele que tira o corte.
+ *   a PALAVRA   entra no instante em que a voz a diz (partitura: w.em), sobe
+ *               meio corpo e sai do desfoque, na curva editorial. Uma por
+ *               frase em serifa itálica, na cor de acento.
+ *   o CARTÃO    a interface de produto que flutua do outro lado do texto, em
+ *               perspectiva: terminal, chat ou painel — de forma e texto.
+ *   o FUNDO     gradiente grande e macio; o brilho segue o portador devagar.
+ *
+ * Nada fica parado: a câmera avança e deriva, o portador respira, o cartão
+ * flutua. Sem HUD, sem cantoneira, sem timecode, sem partícula, sem caixa alta. */
+import React, { useState, useEffect, useMemo } from 'react';
+import { delayRender, continueRender, Img, staticFile } from 'remotion';
+import { CURVAS_KIT, alfa } from './base';
+
+const ed = CURVAS_KIT.editorial, cam = CURVAS_KIT.camera;
+const c01 = (x) => (x < 0 ? 0 : x > 1 ? 1 : x);
+const lerp = (a, b, k) => a + (b - a) * k;
+const entra = (t) => t * t;
+const SANS = (f) => '"' + f + '", system-ui, sans-serif';
+const SERIF = (f) => '"' + f + '", Georgia, serif';
+const MONO = (f) => '"' + f + '", ui-monospace, monospace';
+const BRILHO4 = 'M 0 -1 C 0.12 -0.12 0.12 -0.12 1 0 C 0.12 0.12 0.12 0.12 0 1 C -0.12 0.12 -0.12 0.12 -1 0 C -0.12 -0.12 -0.12 -0.12 0 -1 Z';
+
+// ── a medida ─────────────────────────────────────────────────────────────
+function useFontes(P) {
+  const [pronto, setPronto] = useState(false);
+  const [alca] = useState(() => delayRender('fluido: carregar as fontes'));
+  useEffect(() => {
+    const txt = P.batidas.flatMap((b) => b.frases.flatMap((f) => f.palavras.map((w) => w.t))).join(' ') + ' 0123456789—$✓';
+    Promise.all([300, 400, 500, 600].map((w) => document.fonts.load(w + ' 40px ' + SANS(P.fontes.texto), txt).catch(() => null))
+      .concat([document.fonts.load('italic 400 40px ' + SERIF(P.fontes.serifa), txt).catch(() => null),
+        document.fonts.load('400 40px ' + MONO(P.fontes.mono), txt).catch(() => null)]))
+      .then(() => document.fonts.ready).then(() => setPronto(true), () => setPronto(true));
+  }, []);
+  useEffect(() => { if (pronto) continueRender(alca); }, [pronto]);
+  return pronto;
+}
+let ctx = null;
+function medir(t, tam, peso, serifa, P, mono) {
+  if (!ctx) ctx = document.createElement('canvas').getContext('2d');
+  ctx.font = serifa ? 'italic 400 ' + tam + 'px ' + SERIF(P.fontes.serifa) : peso + ' ' + tam + 'px ' + (mono ? MONO(P.fontes.mono) : SANS(P.fontes.texto));
+  return ctx.measureText(t).width;
+}
+
+/* Um bloco de texto: quebra palavra a palavra (largura medida), cada linha
+   centrada em cx (ou alinhada à esquerda/direita), o bloco centrado em cy. */
+function bloco(P, f, { tam, peso = 400, max = 1e9, cx, cy, alinha = 'centro', cor, mono = false }) {
+  const esp = medir(' ', tam, peso, false, P, mono);
+  const ws = f.palavras.map((w) => ({ ...w, w: medir(w.t, w.acento ? tam * 1.14 : tam, peso, w.acento, P, mono) }));
+  const linhas = [[]];
+  let lw = 0;
+  for (const w of ws) {
+    const cur = linhas[linhas.length - 1];
+    if (cur.length && lw + esp + w.w > max) { linhas.push([w]); lw = w.w; } else { lw += (cur.length ? esp : 0) + w.w; cur.push(w); }
+  }
+  const lh = tam * 1.2;
+  const larg = (l) => l.reduce((s, w) => s + w.w, 0) + esp * (l.length - 1);
+  const w = Math.max(...linhas.map(larg)), h = linhas.length * lh;
+  const top = cy - h / 2;
+  const x0 = alinha === 'centro' ? cx - w / 2 : alinha === 'esq' ? cx : cx - w;
+  return {
+    f, tam, peso, cor, esp, lh, w, h, top, cx, cy, mono, left: x0,
+    linhas: linhas.map((l, i) => ({ palavras: l, y: top + i * lh, x: alinha === 'centro' ? cx - larg(l) / 2 : alinha === 'esq' ? cx : cx - larg(l) })),
+  };
+}
+
+// ── o leiaute de cada batida: os blocos, o cartão e as chaves do portador ─
+function leiaute(P) {
+  const W = P.largura, H = P.altura, u = Math.min(W, H) / 1080, deitado = W >= H;
+  const cx = W / 2, cy = H / 2;
+  const pal = P.paleta, T = pal.tinta, S = pal.suave;
+  /* O estado do portador. A cor cheia vai PRÉ-MULTIPLICADA (sa: quanto de
+     acento, si: quanto de tinta): ponto de acento que vira pílula clara
+     cruza as duas camadas, sem passar por um cinza no meio. */
+  const forma = (x, y, w, h, o = {}) => {
+    const solid = o.solid ?? 0, ac = o.ac ?? 0;
+    return { x, y, w, h, r: o.r ?? Math.min(w, h) / 2, fill: o.fill ?? 0, sa: solid * ac, si: solid * (1 - ac), stroke: o.stroke ?? 0, op: o.op ?? 1 };
+  };
+  const chaves = [];   // [{a, b, s}]: de a até b o portador vai para s
+  const vai = (a, b, s) => chaves.push({ a, b, s });
+  const batidas = P.batidas.map((b, bi) => {
+    const fr = (papel) => b.frases.filter((f) => f.papel === papel);
+    const [pr] = fr('principal');
+    const out = { b, blocos: [], extra: null };
+    /* A COMPOSIÇÃO: com cartão, o texto vai para um lado (ou para cima, em
+       pé) e o cartão para o outro; sem cartão, o centro. */
+    const lado = b.lado || 'centro';
+    const tx = !deitado || lado === 'centro' ? cx : lado === 'esq' ? cx - W * 0.21 : cx + W * 0.21;
+    const ty = deitado || lado === 'centro' ? cy : cy - H * 0.2;
+    const larg = lado === 'centro' ? W * (deitado ? 0.72 : 0.86) : deitado ? W * 0.36 : W * 0.86;
+    if (b.ui) {
+      const cw = deitado ? W * 0.34 : W * 0.8, ch = cw * (b.ui.tipo === 'terminal' ? 0.6 : 0.7);
+      out.cartao = { x: deitado ? (lado === 'esq' ? cx + W * 0.2 : cx - W * 0.2) : cx, y: deitado ? cy : cy + H * 0.15, w: cw, h: ch, gira: deitado ? (lado === 'esq' ? -14 : 14) : 0 };
+    }
+    let ent = b.transicao === 'corte' ? [b.de, b.de] : [Math.max(0, b.de - 0.22), b.de + 0.45];
+    // A primeira batida (sem ser abertura) nasce de um ponto, que então vira a forma dela.
+    if (bi === 0 && b.tipo !== 'abertura') {
+      vai(0, 0.01, forma(tx, ty, 0, 0, { solid: 1, ac: 1, op: 0 }));
+      vai(0.02, 0.3, forma(tx, ty, 16 * u, 16 * u, { solid: 1, ac: 1 }));
+      ent = [0.3, 0.8];
+    }
+    const poe = (bl) => { out.blocos.push(bl); return bl; };
+    switch (b.tipo) {
+      case 'abertura': {
+        const t = pr && poe(bloco(P, pr, { tam: (lado === 'centro' ? 96 : 80) * u, max: larg, cx: tx, cy: ty, cor: T }));
+        const [sb] = fr('sub');
+        if (sb) poe(bloco(P, sb, { tam: 36 * u, max: larg * 0.8, cx: tx, cy: ty + (t ? t.h / 2 : 0) + 64 * u, cor: S }));
+        const y = ty - (t ? t.h / 2 : 0) - 80 * u;
+        vai(0, 0.01, forma(tx, y, 0, 0, { solid: 1, ac: 1, op: 0 }));
+        vai(0.02, 0.45, forma(tx, y, 18 * u, 18 * u, { solid: 1, ac: 1 }));
+        break;
+      }
+      case 'numero': {
+        const [nb] = fr('numero'), [rot] = fr('rotulo');
+        const n = nb && poe(bloco(P, nb, { tam: 280 * u, peso: 300, cx: tx, cy: ty - 40 * u, cor: T }));
+        const d = Math.max(n ? n.w : 0, 260 * u) + 140 * u;
+        if (rot) poe(bloco(P, rot, { tam: 40 * u, max: larg, cx: tx, cy: ty - 40 * u + d / 2 + 64 * u, cor: S }));
+        vai(ent[0], ent[1], forma(tx, ty - 40 * u, d, d, { stroke: 0.55 }));
+        break;
+      }
+      case 'lista': {
+        const its = fr('item');
+        const tt = pr && poe(bloco(P, pr, { tam: 60 * u, max: W * 0.8, cx, cy: cy - (deitado ? 200 : 380) * u, cor: T }));
+        const tam = 42 * u, padX = 36 * u, ph = tam * 2.2, ic = 30 * u;
+        const ws = its.map((f) => medir(f.palavras.map((w) => w.t).join(' '), tam, 400, false, P) + padX * 2 + ic + 14 * u);
+        const gap = 70 * u;
+        const total = ws.reduce((s, w) => s + w, 0) + gap * (ws.length - 1);
+        const linha = deitado && total < W * 0.94;
+        let x = cx - total / 2;
+        const pilulas = its.map((f, j) => {
+          let pcx, pcy;
+          if (linha) { pcx = x + ws[j] / 2; pcy = cy + 30 * u + (j % 2 ? 90 : -10) * u; x += ws[j] + gap; }
+          else { pcx = cx + (j % 2 ? 1 : -1) * Math.min(W * 0.14, 150 * u); pcy = cy - 160 * u + j * (ph + 90 * u); }
+          const bl = bloco(P, f, { tam, cx: pcx + (ic + 14 * u) / 2, cy: pcy, cor: T });
+          return { f, x: pcx, y: pcy, w: ws[j], h: ph, bl, ic };
+        });
+        out.blocos.push(...pilulas.map((p) => p.bl));
+        out.extra = { pilulas, tt };
+        // O portador vira a PRIMEIRA pílula; as outras nascem na ponta da curva.
+        const p0 = pilulas[0];
+        if (p0) vai(ent[0], ent[1], forma(p0.x, p0.y, p0.w, p0.h, { fill: 1, stroke: 0.35 }));
+        else vai(ent[0], ent[1], forma(cx, cy, 12 * u, 12 * u, { solid: 1, ac: 1 }));
+        break;
+      }
+      case 'passos': {
+        const its = fr('item');
+        const tam = 68 * u;
+        const tY = deitado ? cy : cy - 420 * u;
+        const tt = pr && poe(bloco(P, pr, { tam, max: W * 0.34, cx: deitado ? cx - 64 * u : cx, cy: tY, alinha: deitado ? 'dir' : 'centro', cor: T }));
+        const roda = its.map((f) => bloco(P, f, { tam, cx: deitado ? cx + 64 * u : cx, cy: deitado ? cy : cy + 60 * u, alinha: deitado ? 'esq' : 'centro', cor: T }));
+        out.extra = { roda, tt, tam };
+        vai(ent[0], ent[1], forma(cx, deitado ? cy : cy - 260 * u, 14 * u, 14 * u, { solid: 1, ac: 1 }));
+        break;
+      }
+      case 'contraste': {
+        const [nao] = fr('nao'), [sim] = fr('sim');
+        const tam = 76 * u;
+        const nb = nao && poe(bloco(P, nao, { tam: tam * 0.8, max: larg, cx, cy: cy - (deitado ? 90 : 160) * u, cor: S }));
+        const sb = sim && poe(bloco(P, sim, { tam, max: larg, cx, cy: cy + (deitado ? 70 : 120) * u, cor: T }));
+        if (nb) {
+          const fimNao = nao.palavras[nao.palavras.length - 1].em + 0.3;
+          const ly = nb.top + nb.h - nb.lh / 2;
+          vai(ent[0], ent[1], forma(nb.left - 22 * u, ly, 12 * u, 12 * u, { solid: 1 }));
+          vai(fimNao, fimNao + 0.4, forma(nb.left + nb.w / 2, ly, nb.w + 36 * u, 4 * u, { solid: 0.8, r: 3 }));
+          out.risca = fimNao + 0.2;
+        }
+        if (sb) {
+          const ly = sb.top + sb.h + 14 * u;
+          vai(Math.max(sim.de - 0.3, (chaves[chaves.length - 1] || {}).b || 0), sim.de + 0.4, forma(sb.left + sb.w / 2, ly, sb.w, 4 * u, { solid: 1, ac: 1, r: 3 }));
+        }
+        break;
+      }
+      case 'citacao': {
+        const [au] = fr('autor');
+        const q = pr && bloco(P, pr, { tam: 58 * u, max: Math.min(W * 0.66, 1100 * u), cx, cy: cy - (au ? 30 * u : 0), cor: T });
+        if (q) poe(q);
+        const a = au && poe(bloco(P, au, { tam: 30 * u, cx, cy: (q ? q.top + q.h : cy) + 44 * u, cor: S }));
+        const w = (q ? q.w : 300 * u) + 160 * u, h = (q ? q.h : 60 * u) + (a ? 80 : 20) * u + 120 * u;
+        vai(ent[0], ent[1], forma(cx, cy + (a ? 10 * u : 0), w, h, { fill: 1, stroke: 0.2, r: 44 * u }));
+        break;
+      }
+      case 'cta': {
+        const [nome] = fr('marca');
+        const tam = 120 * u;
+        const nw = nome ? medir(b.marca.nome, tam, 600, false, P) : 0;
+        const mk = 190 * u, gap = 44 * u;
+        const caber = Math.min(1, (W * 0.9 - mk - gap) / Math.max(1, nw));
+        const largMarca = mk + gap + nw * caber;
+        const x0 = cx - largMarca / 2;
+        const nb = nome && poe(bloco(P, nome, { tam: tam * caber, peso: 600, cx: x0 + mk + gap, cy: cy - 30 * u, alinha: 'esq', cor: T }));
+        let y = cy + 130 * u;
+        for (const f of fr('principal')) { poe(bloco(P, f, { tam: 44 * u, max: W * 0.8, cx, cy: y, cor: T })); y += 90 * u; }
+        // O link vira um comando numa pílula, em mono.
+        for (const f of fr('sub')) out.comando = poe(bloco(P, f, { tam: 32 * u, cx, cy: y, cor: T, mono: true }));
+        // A marca se monta de três formas: o portador (círculo cheio), um anel e um ponto.
+        const mx = x0 + mk / 2, my = cy - 30 * u, q = mk / 190;
+        vai(ent[0], ent[1], forma(cx, cy, 80 * q, 80 * q, { solid: 1, ac: 1 }));
+        vai(b.de + 0.1, b.de + 0.5, forma(mx - 42 * q, my - 22 * q, 84 * q, 84 * q, { solid: 1, ac: 1 }));
+        out.extra = { mx, my, mk, nb, pecas: [
+          { de: forma(cx + 420 * u, cy - 300 * u, 84 * q, 84 * q), ate: forma(mx + 44 * q, my - 22 * q, 84 * q, 84 * q), anel: true },
+          { de: forma(cx - 380 * u, cy + 320 * u, 44 * q, 44 * q), ate: forma(mx + 2 * q, my + 54 * q, 44 * q, 44 * q), anel: false },
+        ] };
+        break;
+      }
+      default: {   // titulo: a pílula que envolve a frase; em duas linhas, a barra de acento ao lado
+        let t = pr && bloco(P, pr, { tam: 76 * u, max: larg, cx: tx, cy: ty, cor: T });
+        // Em mais de uma linha o texto alinha à esquerda, junto da barra de acento.
+        if (t && t.linhas.length > 1) t = bloco(P, pr, { tam: 76 * u, max: larg, cx: tx - t.w / 2, cy: ty, alinha: 'esq', cor: T });
+        if (t) poe(t);
+        const [sb] = fr('sub');
+        const umaLinha = !t || t.linhas.length === 1;
+        const h = umaLinha ? (t ? t.tam * 2 : 60 * u) : t.h;
+        if (sb) poe(umaLinha ? bloco(P, sb, { tam: 34 * u, max: larg, cx: tx, cy: ty + h / 2 + 62 * u, cor: S })
+          : bloco(P, sb, { tam: 34 * u, max: larg, cx: t.left, cy: ty + h / 2 + 50 * u, alinha: 'esq', cor: S }));
+        if (umaLinha) vai(ent[0], ent[1], forma(tx, ty, (t ? t.w : 200 * u) + 110 * u, h, { fill: 1, stroke: 0.35 }));
+        else vai(ent[0], ent[1], forma(t.left - 40 * u, ty, 6 * u, t.h * 0.92, { solid: 1, ac: 1, r: 3 }));
+      }
+    }
+    return out;
+  });
+  return { batidas, chaves, u, W, H, deitado };
+}
+
+/* O portador no tempo t: a última chave começada, saindo da anterior. */
+function portadorEm(t, chaves) {
+  let i = -1;
+  while (i + 1 < chaves.length && chaves[i + 1].a <= t) i++;
+  if (i < 0) return { ...chaves[0].s, op: 0 };
+  const c = chaves[i], ant = i > 0 ? chaves[i - 1].s : { ...c.s, op: 0 };
+  const k = c.b <= c.a ? 1 : cam(c01((t - c.a) / (c.b - c.a)));
+  const s = {};
+  for (const key of Object.keys(c.s)) s[key] = lerp(ant[key], c.s[key], k);
+  return s;
+}
+
+// ── a palavra: entra quando é dita ───────────────────────────────────────
+function Palavras({ bl, sai, t, P, op = 1, de = null }) {
+  const pal = P.paleta;
+  let n = 0;
+  return bl.linhas.map((l, li) => (
+    <div key={li} style={{ position: 'absolute', left: l.x, top: l.y, height: bl.lh, lineHeight: bl.lh + 'px', whiteSpace: 'nowrap' }}>
+      {l.palavras.map((w, wi) => {
+        const em = de != null ? de + (n++) * 0.07 : w.em;
+        const k = ed(c01((t - em) / 0.5));
+        const o = entra(c01((t - sai) / 0.35));
+        const vis = k * (1 - o) * op;
+        const mr = wi < l.palavras.length - 1 ? bl.esp : 0;
+        if (vis <= 0.001) return <span key={wi} style={{ display: 'inline-block', width: w.w, marginRight: mr }} />;
+        return (
+          <span key={wi} style={{
+            display: 'inline-block', marginRight: mr,
+            opacity: vis, transform: 'translateY(' + ((1 - k) * 0.4 - o * 0.25) * bl.tam + 'px)',
+            filter: (1 - k) + o > 0.02 ? 'blur(' + ((1 - k) * 8 + o * 6).toFixed(2) + 'px)' : undefined,
+            fontFamily: w.acento ? SERIF(P.fontes.serifa) : bl.mono ? MONO(P.fontes.mono) : SANS(P.fontes.texto), fontStyle: w.acento ? 'italic' : 'normal',
+            fontWeight: w.acento ? 400 : bl.peso, fontSize: w.acento ? bl.tam * 1.14 : bl.tam, letterSpacing: w.acento || bl.mono ? 0 : '-0.02em',
+            color: w.acento ? pal.acentos[0] : bl.cor,
+          }}>{w.t}</span>
+        );
+      })}
+    </div>
+  ));
+}
+
+const numeroTexto = (n, k) => n.antes + (n.ate * k).toLocaleString('pt-BR', { minimumFractionDigits: n.casas, maximumFractionDigits: n.casas }) + n.depois;
+
+// ── o cartão de produto: terminal, chat ou painel, de forma e texto ─────
+function Cartao({ c, ui, de: de0, sai, t, P, u: u0 }) {
+  const pal = P.paleta, T = pal.tinta, A = pal.acentos[0];
+  // O conteúdo escala com o cartão (em pé ele é mais largo); entra logo depois da troca.
+  const u = u0 * c.w / (650 * u0), de = de0 + 0.2;
+  const k = ed(c01((t - de - 0.05) / 0.6)), o = entra(c01((t - sai) / 0.35));
+  const vis = k * (1 - o);
+  if (vis <= 0.001) return null;
+  const vidro = pal.escuro ? alfa(T, 0.06) : alfa('#ffffff', 0.78);
+  const linha = alfa(T, pal.escuro ? 0.14 : 0.1);
+  const pele = alfa(T, pal.escuro ? 0.2 : 0.1);
+  const barra = (x, y, w, h, cor, kk = 1) => <div style={{ position: 'absolute', left: x, top: y, width: w * kk, height: h, borderRadius: h / 2, background: cor }} />;
+  const pad = 34 * u, mono = { fontFamily: MONO(P.fontes.mono), fontSize: 26 * u, color: T, whiteSpace: 'nowrap', position: 'absolute' };
+  let corpo = null;
+  if (ui.tipo === 'terminal') {
+    const linhas = ui.linhas.map((ln, j) => {
+      const t0 = de + 0.55 + j * 0.5, n = Math.round(c01((t - t0) / 0.4) * ln.length);
+      if (n <= 0) return null;
+      const txt = ln.slice(0, n), ok = txt.startsWith('✓');
+      return <div key={j} style={{ ...mono, left: pad, top: 70 * u + j * 48 * u }}>
+        {ok ? <span style={{ color: A }}>✓</span> : null}{ok ? txt.slice(1) : txt}
+        {j === ui.linhas.length - 1 || n < ln.length ? <span style={{ display: 'inline-block', width: 14 * u, height: 28 * u, marginLeft: 6 * u, verticalAlign: 'middle', background: A, opacity: Math.floor(t * 2.5) % 2 ? 0.2 : 0.9 }} /> : null}
+      </div>;
+    });
+    const kk = (j) => ed(c01((t - de - 1.4 - j * 0.15) / 0.6));
+    const y0 = 70 * u + ui.linhas.length * 48 * u + 16 * u;
+    corpo = <>{linhas}{barra(pad, y0, c.w * 0.5, 14 * u, pele, kk(0))}{barra(pad, y0 + 30 * u, c.w * 0.34, 14 * u, pele, kk(1))}</>;
+  } else if (ui.tipo === 'chat') {
+    const k1 = ed(c01((t - de - 0.45) / 0.5)), k2 = ed(c01((t - de - 0.9) / 0.5)), k3 = ed(c01((t - de - 1.5) / 0.6));
+    corpo = <>
+      <div style={{ position: 'absolute', right: pad, top: 74 * u, maxWidth: c.w * 0.72, padding: (14 * u) + 'px ' + (22 * u) + 'px', borderRadius: 26 * u,
+        background: A, color: '#ffffff', fontFamily: SANS(P.fontes.texto), fontSize: 26 * u, lineHeight: 1.3, opacity: k1, transform: 'translateY(' + (1 - k1) * 20 * u + 'px)' }}>{ui.pergunta}</div>
+      <div style={{ position: 'absolute', left: pad, top: c.h * 0.55, width: c.w * 0.62, height: c.h * 0.28, borderRadius: 26 * u, background: pele, opacity: k2,
+        transform: 'translateY(' + (1 - k2) * 20 * u + 'px)' }}>
+        {k3 < 0.05 ? [0, 1, 2].map((j) => <div key={j} style={{ position: 'absolute', left: 24 * u + j * 22 * u, top: 24 * u, width: 12 * u, height: 12 * u, borderRadius: 99,
+          background: alfa(T, 0.35 + 0.4 * (0.5 + 0.5 * Math.sin(t * 9 - j))) }} />) : null}
+        {barra(24 * u, 22 * u, c.w * 0.5, 14 * u, alfa(T, 0.22), k3)}{barra(24 * u, 52 * u, c.w * 0.36, 14 * u, alfa(T, 0.22), k3)}
+      </div>
+    </>;
+  } else {
+    const bs = ui.barras || [];
+    const passo = (c.w - pad * 2) / Math.max(1, bs.length), base = c.h - pad;
+    corpo = <>
+      <div style={{ position: 'absolute', left: pad, top: 70 * u, fontFamily: SANS(P.fontes.texto), fontSize: 24 * u, color: pal.suave, whiteSpace: 'nowrap' }}>{ui.rotulo}</div>
+      <div style={{ position: 'absolute', right: pad, top: 76 * u, width: 12 * u, height: 12 * u, borderRadius: 99, background: A, boxShadow: '0 0 ' + 14 * u + 'px ' + A }} />
+      {bs.map((v, j) => {
+        const kb = ed(c01((t - de - 0.55 - j * 0.09) / 0.7)), h = (c.h - 170 * u) * v * kb;
+        return <div key={j} style={{ position: 'absolute', left: pad + j * passo, top: base - h, width: passo * 0.62, height: h, borderRadius: 8 * u,
+          background: j === bs.length - 1 ? A : pele }} />;
+      })}
+      {barra(pad, base + 6 * u, c.w - pad * 2, 2 * u, linha)}
+    </>;
+  }
+  // Flutua: entra de baixo e de longe, e segue derivando (nunca para).
+  const gy = Math.sin(t * 0.9) * 8 * u, gr = Math.sin(t * 0.55) * 2.5;
+  return (
+    <div style={{ position: 'absolute', left: c.x - c.w / 2, top: c.y - c.h / 2, width: c.w, height: c.h, borderRadius: 30 * u, overflow: 'hidden',
+      background: vidro, border: (1.2 * u) + 'px solid ' + linha, backdropFilter: 'blur(' + 22 * u + 'px)', boxSizing: 'border-box',
+      boxShadow: '0 ' + 40 * u + 'px ' + 80 * u + 'px -' + 30 * u + 'px ' + alfa(pal.escuro ? '#000000' : T, pal.escuro ? 0.55 : 0.28),
+      opacity: vis, filter: vis < 0.98 ? 'blur(' + ((1 - vis) * 8).toFixed(2) + 'px)' : undefined,
+      transform: 'perspective(' + 1600 * u + 'px) translateY(' + ((1 - k) * 90 * u + gy) + 'px) rotateY(' + (c.gira + gr) + 'deg) rotateX(' + (5 + (1 - k) * 10) + 'deg) scale(' + (0.9 + 0.1 * k) + ')' }}>
+      <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 48 * u, borderBottom: (1 * u) + 'px solid ' + linha }}>
+        {[0, 1, 2].map((j) => <div key={j} style={{ position: 'absolute', left: 22 * u + j * 22 * u, top: 18 * u, width: 12 * u, height: 12 * u, borderRadius: 99, background: alfa(T, 0.22) }} />)}
+      </div>
+      {corpo}
+    </div>
+  );
+}
+
+// ── a peça ───────────────────────────────────────────────────────────────
+export function Fluido({ el, t }) {
+  const P = el.partitura;
+  const pronto = useFontes(P);
+  const L = useMemo(() => (pronto ? leiaute(P) : null), [pronto]);
+  const pal = P.paleta, W = P.largura, H = P.altura;
+  const [f0, f1, f2] = pal.fundo;
+  const fundo = 'linear-gradient(158deg, ' + f0 + ' 0%, ' + f1 + ' 58%, ' + f2 + ' 100%)';
+  if (!L) return <div style={{ position: 'absolute', inset: 0, background: fundo }} />;
+  const { u } = L;
+  const s = portadorEm(t, L.chaves);
+  const atras = portadorEm(Math.max(0, t - 0.9), L.chaves);
+  // O brilho difuso segue o portador com atraso; uma segunda mancha deriva devagar.
+  const gx = (atras.x / W) * 100, gy = (atras.y / H) * 100;
+  const dx = 70 + Math.sin(t * 0.21) * 14, dy = 20 + Math.cos(t * 0.17) * 12;
+  const brilho = alfa(pal.acentos[1], pal.escuro ? 0.34 : 0.28);
+  const sup = pal.escuro ? alfa(pal.tinta, 0.07) : alfa('#ffffff', 0.62);
+  /* A câmera nunca para: em cada batida ela avança um pouco (e só avança —
+     a soma é contínua na troca), deriva devagar e puxa de leve para o portador. */
+  let bi = 0;
+  while (bi < P.batidas.length - 1 && t >= P.batidas[bi + 1].de) bi++;
+  const bt = P.batidas[bi];
+  const z = 1 + 0.022 * (bi + cam(c01((t - bt.de) / Math.max(0.5, bt.ate - bt.de))));
+  const px = (W / 2 - s.x) * 0.04 + Math.sin(t * 0.47) * 10 * u, py = (H / 2 - s.y) * 0.04 + Math.cos(t * 0.39) * 7 * u;
+  // O portador respira.
+  const resp = 1 + 0.018 * Math.sin(t * 2.1);
+  const ult = P.batidas[P.batidas.length - 1];
+  // Com logo, o portador some quando o logo assume a marca.
+  const so = P.logo && ult.tipo === 'cta' ? 1 - ed(c01((t - ult.de - 0.65) / 0.5)) : 1;
+
+  const camadas = [];
+  L.batidas.forEach(({ b, blocos, extra, risca, cartao, comando }, i) => {
+    const corte = b.transicao === 'corte' || (L.batidas[i + 1] && L.batidas[i + 1].b.transicao === 'corte');
+    const ultima = i === L.batidas.length - 1;
+    const sai = ultima ? 1e9 : b.ate - (corte ? 0 : 0.15), fimVis = b.ate + (corte ? 0 : 0.4);
+    if (t < b.de - 0.3 || t > fimVis || (corte && t >= b.ate && !ultima)) return;
+    if (cartao) camadas.push(<Cartao key={'k' + i} c={cartao} ui={b.ui} de={b.de} sai={sai} t={t} P={P} u={u} />);
+    // A lista: as curvas que se desenham de uma pílula à próxima, e as pílulas que nascem na ponta.
+    if (b.tipo === 'lista' && extra) {
+      const ps = extra.pilulas;
+      const o = 1 - entra(c01((t - sai) / 0.35));
+      ps.forEach((p, j) => {
+        if (j > 0) {
+          const a = ps[j - 1], c = p;
+          const x0 = a.x + a.w / 2, y0 = a.y, x1 = c.x - c.w / 2, y1 = c.y;
+          const vert = Math.abs(x1 - x0) < 60 * u || x1 < x0;
+          const d = vert
+            ? 'M ' + a.x + ' ' + (a.y + a.h / 2) + ' C ' + a.x + ' ' + (a.y + a.h / 2 + 60 * u) + ' ' + c.x + ' ' + (c.y - c.h / 2 - 60 * u) + ' ' + c.x + ' ' + (c.y - c.h / 2)
+            : 'M ' + x0 + ' ' + y0 + ' C ' + (x0 + (x1 - x0) * 0.6) + ' ' + y0 + ' ' + (x1 - (x1 - x0) * 0.6) + ' ' + y1 + ' ' + x1 + ' ' + y1;
+          const k = ed(c01((t - (p.f.de - 0.4)) / 0.45));
+          camadas.push(<svg key={'c' + i + j} width={W} height={H} style={{ position: 'absolute', left: 0, top: 0, overflow: 'visible', opacity: o }}>
+            <path d={d} fill="none" stroke={alfa(pal.tinta, 0.5)} strokeWidth={2 * u} pathLength={1} strokeDasharray="1 1" strokeDashoffset={1 - k} />
+          </svg>);
+          const kp = ed(c01((t - (p.f.de - 0.1)) / 0.45));
+          if (kp > 0) camadas.push(<div key={'p' + i + j} style={{ position: 'absolute', left: p.x - p.w / 2, top: p.y - p.h / 2, width: p.w, height: p.h, borderRadius: p.h / 2,
+            background: sup, border: (1.2 * u) + 'px solid ' + alfa(pal.tinta, 0.2), opacity: kp * o, transform: 'scale(' + (0.7 + 0.3 * kp) + ')',
+            boxShadow: pal.escuro ? undefined : '0 14px 34px -14px ' + alfa(pal.tinta, 0.3) }} />);
+        }
+        // O ícone de cada pílula: um brilho de quatro pontas que gira ao nascer.
+        const kd = ed(c01((t - p.f.de) / 0.5));
+        camadas.push(<svg key={'d' + i + j} width={p.ic} height={p.ic} viewBox="-1 -1 2 2" style={{ position: 'absolute', left: p.x - p.w / 2 + 34 * u, top: p.y - p.ic / 2,
+          opacity: kd * o, transform: 'rotate(' + ((1 - kd) * -90 + Math.sin(t * 1.3 + j) * 6) + 'deg) scale(' + kd + ')' }}>
+          <path d={BRILHO4} fill={pal.acentos[0]} />
+        </svg>);
+      });
+    }
+    for (const bl of blocos) {
+      const f = bl.f;
+      if (b.tipo === 'passos' && extra) continue;
+      const op = f.papel === 'nao' && risca ? 1 - 0.55 * ed(c01((t - risca) / 0.4)) : 1;
+      if (f.papel === 'numero' && b.numero) {
+        const k = ed(c01((t - f.de) / 1.1));
+        const vis = ed(c01((t - f.de) / 0.45)) * (1 - entra(c01((t - sai) / 0.35)));
+        camadas.push(<div key={'n' + i} style={{ position: 'absolute', left: bl.cx - W / 2, width: W, top: bl.top, lineHeight: bl.lh + 'px', textAlign: 'center',
+          fontFamily: SANS(P.fontes.texto), fontWeight: 300, fontSize: bl.tam, letterSpacing: '-0.05em', color: pal.tinta, opacity: vis,
+          transform: 'translateY(' + (1 - vis) * 40 * u + 'px)', filter: vis < 0.98 ? 'blur(' + ((1 - vis) * 10).toFixed(2) + 'px)' : undefined,
+          fontVariantNumeric: 'tabular-nums' }}>{numeroTexto(b.numero, k)}</div>);
+        continue;
+      }
+      if (bl === comando) {
+        // O comando numa pílula própria, que acende quando ele entra.
+        const kc = ed(c01((t - f.de + 0.1) / 0.45));
+        camadas.push(<div key={'cp' + i} style={{ position: 'absolute', left: bl.left - 30 * u, top: bl.top - 14 * u, width: bl.w + 60 * u, height: bl.h + 28 * u,
+          borderRadius: 999, background: sup, border: (1.2 * u) + 'px solid ' + alfa(pal.tinta, 0.2), opacity: kc, transform: 'scale(' + (0.85 + 0.15 * kc) + ')' }} />);
+      }
+      camadas.push(<React.Fragment key={'t' + i + f.id}><Palavras bl={bl} sai={sai} t={t} P={P} op={op} /></React.Fragment>);
+    }
+    // A roda dos passos: o item ativo nítido, os outros girando para trás, transparentes e desfocados.
+    if (b.tipo === 'passos' && extra) {
+      if (extra.tt) camadas.push(<React.Fragment key={'pt' + i}><Palavras bl={extra.tt} sai={sai} t={t} P={P} /></React.Fragment>);
+      const its = extra.roda;
+      let at = 0;
+      its.forEach((bl, j) => { if (j > 0) at += cam(c01((t - (bl.f.de - 0.25)) / 0.45)); });
+      const o = (1 - entra(c01((t - sai) / 0.35))) * ed(c01((t - (its[0] ? its[0].f.de - 0.2 : b.de)) / 0.5));
+      its.forEach((bl, j) => {
+        const off = j - at, a = Math.abs(off);
+        if (a > 3.2) return;
+        const vis = Math.max(0, 1 - a * 0.3) * o;
+        const k = ed(c01((t - bl.f.de) / 0.5));
+        const op = Math.max(vis * (0.4 + 0.6 * c01(1 - a)), a < 0.5 ? vis * k : 0);
+        camadas.push(<div key={'r' + i + j} style={{ position: 'absolute', left: 0, top: 0, width: W, height: H, opacity: op,
+          transform: 'perspective(' + 900 * u + 'px) translateY(' + Math.sin(off * 0.42) * extra.tam * 3.6 + 'px) translateZ(' + (-(1 - Math.cos(off * 0.42)) * 300 * u) + 'px) rotateX(' + (-off * 24) + 'deg)',
+          transformOrigin: '50% ' + bl.cy + 'px', filter: a > 0.05 ? 'blur(' + (a * 3.5).toFixed(2) + 'px)' : undefined }}>
+          <Palavras bl={bl} de={-10} sai={1e9} t={t} P={P} />
+        </div>);
+      });
+    }
+    // A marca: um anel e um ponto chegam e travam no portador; com logo, as formas viram o logo.
+    if (b.tipo === 'cta' && extra) {
+      const trava = b.de + 0.5;
+      const kl = P.logo ? ed(c01((t - trava - 0.15) / 0.5)) : 0;
+      extra.pecas.forEach((pc, j) => {
+        const k = cam(c01((t - (b.de - 0.1 + j * 0.08)) / 0.55));
+        const q = {}; for (const key of Object.keys(pc.ate)) q[key] = lerp(pc.de[key], pc.ate[key], k);
+        const ent = c01((t - b.de + 0.2) / 0.3) * (1 - kl);
+        camadas.push(<div key={'m' + i + j} style={{ position: 'absolute', left: q.x - q.w / 2, top: q.y - q.h / 2, width: q.w, height: q.h, borderRadius: 999,
+          background: pc.anel ? 'transparent' : pal.tinta, border: pc.anel ? (8 * u) + 'px solid ' + pal.tinta : undefined, opacity: ent, boxSizing: 'border-box' }} />);
+      });
+      // O pulso de quando trava (o impacto do som).
+      const kp = c01((t - trava) / 0.7);
+      if (kp > 0 && kp < 1) {
+        const r = extra.mk * (0.5 + kp * 0.6);
+        camadas.push(<div key={'pu' + i} style={{ position: 'absolute', left: extra.mx - r, top: extra.my - r, width: r * 2, height: r * 2, borderRadius: 999,
+          border: (2 * u) + 'px solid ' + alfa(pal.acentos[0], 0.6 * (1 - kp)) }} />);
+      }
+      if (P.logo && kl > 0) camadas.push(<div key={'lg' + i} style={{ position: 'absolute', left: extra.mx - extra.mk / 2, top: extra.my - extra.mk / 2, width: extra.mk, height: extra.mk,
+        opacity: kl, transform: 'scale(' + (0.8 + 0.2 * kl) + ')' }}><Img src={staticFile(P.logo)} style={{ width: '100%', height: '100%', objectFit: 'contain' }} /></div>);
+    }
+  });
+
+  return (
+    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: fundo }}>
+      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 70% 60% at ' + gx + '% ' + gy + '%, ' + brilho + ' 0%, transparent 70%)' }} />
+      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 80% 70% at ' + dx + '% ' + dy + '%, ' + alfa(f2, pal.escuro ? 0.45 : 0.5) + ' 0%, transparent 65%)' }} />
+      <div style={{ position: 'absolute', inset: 0, transform: 'translate(' + px + 'px,' + py + 'px) scale(' + z + ')', transformOrigin: '50% 50%' }}>
+        <div style={{ position: 'absolute', left: s.x - s.w * resp / 2, top: s.y - s.h * resp / 2, width: Math.max(0, s.w * resp), height: Math.max(0, s.h * resp), borderRadius: s.r,
+          background: pal.escuro ? alfa(pal.tinta, 0.07 * s.fill) : alfa('#ffffff', 0.62 * s.fill),
+          border: s.stroke > 0.01 ? (1.6 * u) + 'px solid ' + alfa(pal.tinta, s.stroke * (pal.escuro ? 0.6 : 0.55)) : undefined,
+          boxShadow: !pal.escuro && s.fill > 0.5 && s.h > 30 * u ? '0 20px 50px -24px ' + alfa(pal.tinta, 0.35 * s.fill) : undefined,
+          opacity: s.op * so, boxSizing: 'border-box' }}>
+          <div style={{ position: 'absolute', inset: 0, borderRadius: s.r, background: alfa(pal.tinta, s.si) }} />
+          <div style={{ position: 'absolute', inset: 0, borderRadius: s.r, background: alfa(pal.acentos[0], s.sa),
+            boxShadow: s.sa > 0.05 && s.h < 100 * u ? '0 0 ' + 30 * u + 'px ' + alfa(pal.acentos[0], 0.55 * s.sa) : undefined }} />
+        </div>
+        {camadas}
+      </div>
+    </div>
+  );
+}
+
+export const FLUIDO = { fluido: Fluido };