primocode 10.1.0 → 10.3.0-beta.0

package/lib/estudio/kit/fluido.jsx

@@ -23,6 +23,7 @@ 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 lum = (hex) => { const n = parseInt(String(hex).slice(1), 16); return (0.299 * (n >> 16 & 255) + 0.587 * (n >> 8 & 255) + 0.114 * (n & 255)) / 255; };
 const entra = (t) => t * t;
 const SANS = (f) => '"' + f + '", system-ui, sans-serif';
 const SERIF = (f) => '"' + f + '", Georgia, serif';
@@ -52,7 +53,7 @@ function medir(t, tam, peso, serifa, P, mono) {
 
 /* 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 }) {
+function bloco(P, f, { tam, peso = 400, max = 1e9, cx, cy, alinha = 'centro', cor, corAcento = null, 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 = [[]];
@@ -67,7 +68,7 @@ function bloco(P, f, { tam, peso = 400, max = 1e9, cx, cy, alinha = 'centro', co
   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,
+    f, tam, peso, cor, corAcento, 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) })),
   };
 }
@@ -108,6 +109,60 @@ function leiaute(P) {
       ent = [0.3, 0.8];
     }
     const poe = (bl) => { out.blocos.push(bl); return bl; };
+    /* A IMAGEM (fluido.js escolhe a batida e o jeito): o texto se arruma em
+       volta dela, e o portador vira um ponto discreto enquanto a foto manda. */
+    if (b.imagem && pr) {
+      const j = b.imagem.jeito;
+      const t0 = Math.max(b.de + 0.05, Math.min(...b.frases.map((f) => f.palavras[0].em)));
+      const [sb] = fr('sub');
+      const branco = '#ffffff';
+      let foto, tY;
+      if (j === 'cartao') {
+        const cw = deitado ? W * 0.36 : W * 0.74, ch = deitado ? H * 0.62 : H * 0.42;
+        foto = { x: deitado ? cx + W * 0.2 : cx, y: deitado ? cy : cy + H * 0.12, w: cw, h: ch };
+        tY = deitado ? cy : cy - H * 0.24;
+      } else if (j === 'faixa') {
+        foto = { x: cx, y: deitado ? cy - H * 0.08 : cy - H * 0.06, w: W, h: deitado ? H * 0.46 : H * 0.34 };
+        tY = foto.y + foto.h / 2 + 130 * u;
+      } else { foto = { x: cx, y: cy, w: W, h: H }; tY = j === 'vazado' ? cy : cy + H * (deitado ? 0.22 : 0.2); }
+      const tx2 = j === 'cartao' && deitado ? cx - W * 0.2 : cx;
+      const sobreFoto = j === 'janela' || j === 'circulo';
+      let tam = (j === 'vazado' ? 200 : sobreFoto ? 92 : 76) * u;
+      if (j === 'vazado') {
+        const l100 = pr.palavras.reduce((s2, w) => s2 + medir(w.t, 100, 700, false, P), 0) + medir(' ', 100, 700, false, P) * (pr.palavras.length - 1);
+        tam = Math.min(360 * u, (W * 0.84 / (1 + 0.022 * (bi + 1))) / Math.max(1, l100) * 100);
+      }
+      const larg2 = j === 'cartao' && deitado ? W * 0.34 : W * 0.84;
+      const tb = poe(bloco(P, pr, { tam, peso: j === 'vazado' ? 700 : 400, max: larg2, cx: tx2, cy: tY, cor: sobreFoto ? branco : T, corAcento: sobreFoto ? branco : null }));
+      if (sb) poe(bloco(P, sb, { tam: 34 * u, max: larg2, cx: tx2, cy: tY + tb.h / 2 + 56 * u, cor: sobreFoto ? alfa(branco, 0.82) : S }));
+      out.imagem = { jeito: j, src: b.imagem.src, foto, t0, texto: tb };
+      // O portador: no círculo ele É a foto (cresce); nos outros, vira um ponto e some.
+      if (j === 'circulo') vai(Math.max(0, t0 - 0.5), t0 + 0.2, forma(cx, cy, 0, 0, { solid: 1, ac: 1, op: 0 }));
+      else vai(ent[0], ent[1], forma(tx2, tY - tb.h / 2 - 60 * u, 10 * u, 10 * u, { solid: 1, ac: 1, op: j === 'vazado' ? 1 : 0 }));
+      return out;
+    }
+    /* A PALAVRA GIGANTE (fluido.js marca): a frase curta enche a largura,
+       sem pílula, peso fino. Na VIRADA o portador cresce até cobrir a tela
+       de acento, e o texto troca para a cor que lê sobre ele. */
+    if (b.gigante && pr) {
+      const base = 100;
+      const larguraA100 = pr.palavras.reduce((s2, w) => s2 + medir(w.t, w.acento ? base * 1.14 : base, 300, w.acento, P), 0) + medir(' ', base, 300, false, P) * (pr.palavras.length - 1);
+      // Cabe já descontando o zoom que a câmera terá nesta batida (1 + 0,022 por batida) e a deriva.
+      const zoomAqui = 1 + 0.022 * (bi + 1);
+      const tam = Math.min(330 * u, Math.max(96 * u, (W * 0.8 / zoomAqui) / Math.max(1, larguraA100) * base));
+      const sobre = b.virada ? (lum(pal.acentos[0]) > 0.55 ? pal.fundo[0] : '#ffffff') : T;
+      const acentoSobre = b.virada ? sobre : pal.acentos[0];
+      const g = poe(bloco(P, pr, { tam, peso: 300, max: W * 0.84 / zoomAqui, cx, cy, cor: sobre, corAcento: acentoSobre }));
+      const [sb] = fr('sub');
+      if (sb) poe(bloco(P, sb, { tam: 34 * u, max: W * 0.7, cx, cy: cy + g.h / 2 + 70 * u, cor: b.virada ? sobre : S }));
+      // A virada começa com a PRIMEIRA frase que aparece (a voz pode dizer o sub antes do título).
+      const t0 = Math.max(b.de + 0.1, Math.min(...b.frases.map((f) => f.palavras[0].em)));
+      if (b.virada) {
+        const D = Math.hypot(W, H) * 1.08;
+        vai(Math.max(0, t0 - 0.55), t0 - 0.05, forma(cx, cy, D, D, { solid: 1, ac: 1 }));
+      } else vai(ent[0], ent[1], forma(cx, cy - g.h / 2 - 70 * u, 14 * u, 14 * u, { solid: 1, ac: 1 }));
+      return out;
+    }
     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 }));
@@ -146,7 +201,9 @@ function leiaute(P) {
         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 }));
+        // A primeira pílula nasce com o primeiro item (antes, ficava vazia e enorme esperando a voz).
+        const i0 = p0 ? p0.f.palavras[0].em : b.de;
+        if (p0) vai(Math.max(ent[0], i0 - 0.4), Math.max(ent[1], i0 + 0.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;
       }
@@ -220,8 +277,12 @@ function leiaute(P) {
         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 }));
+        /* A pílula nasce com a primeira palavra, não antes: entrando em b.de,
+           ela ficava VAZIA até a voz chegar na frase (teste de 08/10). */
+        const p0 = pr ? pr.palavras[0].em : b.de;
+        const entT = [Math.max(ent[0], p0 - 0.4), Math.max(ent[1], p0 + 0.1)];
+        if (umaLinha) vai(entT[0], entT[1], forma(tx, ty, (t ? t.w : 200 * u) + 110 * u, h, { fill: 1, stroke: 0.35 }));
+        else vai(entT[0], entT[1], forma(t.left - 40 * u, ty, 6 * u, t.h * 0.92, { solid: 1, ac: 1, r: 3 }));
       }
     }
     return out;
@@ -261,7 +322,7 @@ function Palavras({ bl, sai, t, P, op = 1, de = null }) {
             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,
+            color: w.acento ? (bl.corAcento || pal.acentos[0]) : bl.cor,
           }}>{w.t}</span>
         );
       })}
@@ -340,6 +401,55 @@ function Cartao({ c, ui, de: de0, sai, t, P, u: u0 }) {
   );
 }
 
+// ── a foto: cinco jeitos de entrar, nenhum repetido no vídeo ────────────
+function Foto({ im, b, sai, t, P, u, W, H }) {
+  const k = ed(c01((t - (im.t0 - 0.45)) / 0.75));            // a entrada
+  const o = entra(c01((t - sai) / 0.4));                      // a saída
+  if (k <= 0.001 || o >= 0.999) return null;
+  const vida = c01((t - im.t0) / Math.max(1, b.ate - im.t0)); // o empurrão lento enquanto ela fica
+  const src = staticFile(im.src);
+  const f = im.foto;
+  const img = (extra = {}) => <Img src={src} style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover', ...extra }} />;
+  const escurece = <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.62) 100%)' }} />;
+  if (im.jeito === 'janela') {
+    return <div style={{ position: 'absolute', left: 0, top: 0, width: W, height: H, overflow: 'hidden', opacity: 1 - o,
+      clipPath: 'inset(0 ' + ((1 - k) * 100).toFixed(2) + '% 0 0)' }}>
+      {img({ transform: 'scale(' + (1.14 - 0.08 * vida) + ') translateX(' + ((1 - k) * -6) + '%)' })}{escurece}</div>;
+  }
+  if (im.jeito === 'circulo') {
+    const r = Math.hypot(W, H) * 0.55 * k * (1 - o);
+    return <div style={{ position: 'absolute', left: 0, top: 0, width: W, height: H, overflow: 'hidden',
+      clipPath: 'circle(' + r.toFixed(1) + 'px at ' + W / 2 + 'px ' + H / 2 + 'px)' }}>
+      {img({ transform: 'scale(' + (1.2 - 0.12 * k - 0.05 * vida) + ')' })}{escurece}</div>;
+  }
+  if (im.jeito === 'cartao') {
+    const gira = (1 - k) * -38 + Math.sin(t * 0.6) * 3;
+    return <div style={{ position: 'absolute', left: f.x - f.w / 2, top: f.y - f.h / 2, width: f.w, height: f.h, borderRadius: 28 * u, overflow: 'hidden',
+      opacity: k * (1 - o), boxShadow: '0 ' + 50 * u + 'px ' + 90 * u + 'px -' + 30 * u + 'px rgba(0,0,0,0.55)',
+      transform: 'perspective(' + 1500 * u + 'px) translateY(' + ((1 - k) * 140 * u - o * 60 * u) + 'px) rotateY(' + gira + 'deg) rotateX(' + (6 * (1 - k)) + 'deg) scale(' + (0.86 + 0.14 * k) + ')' }}>
+      {img({ transform: 'scale(' + (1.08 - 0.06 * vida) + ')' })}</div>;
+  }
+  if (im.jeito === 'faixa') {
+    const meio = (1 - k + o) * 50;
+    return <div style={{ position: 'absolute', left: 0, top: f.y - f.h / 2, width: W, height: f.h, overflow: 'hidden',
+      clipPath: 'inset(' + meio.toFixed(2) + '% 0 ' + meio.toFixed(2) + '% 0)' }}>
+      {img({ transform: 'scale(1.12) translateX(' + (-4 + 8 * vida) + '%)' })}</div>;
+  }
+  // vazado: as letras do título, com a foto por dentro (SVG: o texto é o recorte).
+  const tb = im.texto;
+  const id = 'vz' + b.i;
+  const fam = '"' + P.fontes.texto + '", system-ui, sans-serif';
+  return <svg width={W} height={H} style={{ position: 'absolute', left: 0, top: 0, opacity: (1 - o) }}>
+    <defs><clipPath id={id}>{tb.linhas.map((l, li) => (
+      <text key={li} x={l.x} y={l.y + tb.lh * 0.8} fontFamily={fam} fontWeight={700} fontSize={tb.tam} letterSpacing={-0.02 * tb.tam}>
+        {l.palavras.map((w) => w.t).join(' ')}</text>))}</clipPath></defs>
+    <g clipPath={'url(#' + id + ')'} style={{ opacity: k }}>
+      <image href={src} x={-W * 0.06 * (1 - vida)} y={tb.top - tb.h * 0.6} width={W * 1.12} height={tb.h * 2.2} preserveAspectRatio="xMidYMid slice"
+        transform={'translate(0 ' + ((1 - k) * 40 * u) + ')'} />
+    </g>
+  </svg>;
+}
+
 // ── a peça ───────────────────────────────────────────────────────────────
 export function Fluido({ el, t }) {
   const P = el.partitura;
@@ -371,12 +481,13 @@ export function Fluido({ el, t }) {
   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) => {
+  L.batidas.forEach(({ b, blocos, extra, risca, cartao, comando, imagem }, 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} />);
+    if (imagem) camadas.push(<Foto key={'f' + i} im={imagem} b={b} sai={sai} t={t} P={P} u={u} W={W} H={H} />);
     // 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;
@@ -398,17 +509,27 @@ export function Fluido({ el, t }) {
             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.
+        /* O marcador de cada pílula muda de vídeo para vídeo (P.marcador): o
+           brilho de quatro pontas em toda lista era vício (08/10). */
         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,
+        const mk = P.marcador || 'brilho';
+        const mx0 = p.x - p.w / 2 + 34 * u, my0 = p.y - p.ic / 2;
+        if (mk === 'brilho') camadas.push(<svg key={'d' + i + j} width={p.ic} height={p.ic} viewBox="-1 -1 2 2" style={{ position: 'absolute', left: mx0, top: my0,
           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>);
+        else if (mk === 'numero') camadas.push(<div key={'d' + i + j} style={{ position: 'absolute', left: mx0 - 4 * u, top: p.y - p.ic * 0.62, height: p.ic * 1.24, lineHeight: p.ic * 1.24 + 'px',
+          fontFamily: MONO(P.fontes.mono), fontSize: p.ic * 0.78, color: pal.acentos[0], opacity: kd * o, transform: 'translateY(' + (1 - kd) * 10 * u + 'px)' }}>{String(j + 1).padStart(2, '0')}</div>);
+        else if (mk === 'traco') camadas.push(<div key={'d' + i + j} style={{ position: 'absolute', left: mx0, top: p.y - 1.5 * u, width: p.ic * kd, height: 3 * u, borderRadius: 3,
+          background: pal.acentos[0], opacity: o }} />);
+        else if (mk === 'ponto') camadas.push(<div key={'d' + i + j} style={{ position: 'absolute', left: mx0 + p.ic * 0.3, top: p.y - p.ic * 0.2, width: p.ic * 0.4, height: p.ic * 0.4, borderRadius: 99,
+          background: pal.acentos[0], opacity: o, transform: 'scale(' + kd + ')' }} />);
       });
     }
     for (const bl of blocos) {
       const f = bl.f;
       if (b.tipo === 'passos' && extra) continue;
+      if (imagem && imagem.jeito === 'vazado' && bl === imagem.texto) continue;   // as letras são a foto (Foto desenha)
       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));

package/lib/estudio/kit/gerativo.jsx

@@ -284,6 +284,17 @@ function geometria(a, b, L, P) {
    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;
+  /* O ACENTO EM TRAÇO (09/10, "todo vídeo tem aquela bolinha"): sem a semente
+     no meio da tela, sem a viagem em ponto e sem o recolher — cada traço se
+     desenha no seu lugar e some com a batida (acentoEm). */
+  const semBola = P.fundo && P.fundo.acento === 'traco';
+  if (semBola) {
+    const out = [];
+    P.batidas.forEach((b, bi) => b.acento.forEach((a) => out.push({ t: a.t, dur: a.dur, g: geometria(a, b, L, P), cor: b.cores.acento, batida: bi, forma: a.forma, ate: b.ate })));
+    out.sort((a, b) => a.t - b.t);
+    out.semBola = true;
+    return out;
+  }
   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) => {
@@ -295,12 +306,32 @@ function estadosDoAcento(P, L) {
       }
       out.push({ t: a.t, dur: a.dur, g, cor: b.cores.acento, batida: bi, forma: a.forma });
     });
+    /* No fim da batida o acento se RECOLHE num ponto: ele ficava na última
+       forma até a batida seguinte, e a moldura sobrava sozinha na tela depois
+       que a palavra saía (teste de 08/10). */
+    const ult = b.acento[b.acento.length - 1];
+    if (ult && b.ate != null) {
+      const g = geometria(ult, b, L, P);
+      const t0 = Math.max(ult.t + (ult.dur || 0), b.ate - 0.3);
+      if (t0 < b.ate) out.push({ t: t0, dur: 0.25, g: geometria({ forma: 'viagem', x: g.cx, y: g.cy, r: 7 * base }, b, L, P), cor: b.cores.acento, batida: bi });
+    }
   });
   out.sort((a, b) => a.t - b.t);
   return out;
 }
 
 function acentoEm(t, estados) {
+  if (estados.semBola) {
+    // O traço se desenha (os pontos aparecem em ordem) e some no fim da batida; antes do primeiro, nada.
+    let k = -1;
+    while (k < estados.length - 1 && estados[k + 1].t <= t) k++;
+    const cur = estados[k];
+    if (!cur) return { pts: [[0, 0], [0, 0]], larg: 0.1, alfa: 0, frente: true, cor: '#000000', cx: 0, cy: 0 };
+    const p = arrasto(c01((t - cur.t) / Math.max(0.01, cur.dur)));
+    const n = Math.max(2, Math.ceil(cur.g.pts.length * p));
+    const some = 1 - c01((t - (cur.ate - 0.22)) / 0.22);
+    return { pts: cur.g.pts.slice(0, n), larg: cur.g.larg, alfa: cur.g.alfa * some, frente: cur.g.frente, tampa: cur.g.tampa, cor: cur.cor, cx: cur.g.cx, cy: cur.g.cy };
+  }
   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)];
@@ -650,7 +681,7 @@ function Fundo({ P, b, prevB, t, cam, frame, origem }) {
   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.ambiente || 'bokeh') !== 'limpo' && <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;
@@ -773,25 +804,39 @@ function Heroi({ b, t, P, slot }) {
   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. */
+/* A MOLDURA (o HUD do motion designer): cantos de enquadramento, o assunto do
+   vídeo, a SEÇÃO ("01 · A CONVERSA"), o timecode e a régua do vídeo — fixa do
+   começo ao fim, como no reel de referência. Mora dentro da área segura
+   (P.hud.area: no 9:16, longe do status e dos botões do celular). 'cantos' é
+   a versão mínima: os cantos e a seção. Partitura antiga (sem área): a margem de antes. */
 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 W = P.largura, H = P.altura, h = P.hud, deitado = W >= H;
+  const m0 = Math.round(Math.min(W, H) * 0.035);
+  const A = h.area || { x: m0, topo: m0, base: m0 };
+  const tam = Math.max(11, Math.round(Math.min(W, H) * (deitado ? 0.0125 : 0.018)));
+  const c = Math.round(Math.min(W, H) * 0.026);
   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,
+  const rot = { position: 'absolute', fontFamily: familia(P.fontes.mono), fontSize: tam, letterSpacing: '0.14em', color: cor, whiteSpace: 'nowrap', textTransform: 'uppercase', lineHeight: 1 };
+  const L = A.x, T = A.topo, R = W - A.x, B = H - A.base;
+  const canto = (x, y, sx, sy) => <div key={x + '-' + y} style={{ position: 'absolute', left: sx > 0 ? x : x - c, top: sy > 0 ? y : y - c, width: c, height: c,
     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 }} />;
+  // A seção: o número e o nome dela (a partitura antiga não tem seção — vale a composição).
+  const k = b.secao != null ? b.secao : bi;
+  const nome = (h.secoes || [])[k] || SECOES[b.comp] || String(b.comp).toUpperCase();
+  const secao = <div style={{ ...rot, right: W - R + c * 0.6, top: T + c * 0.6 }}>{String(k + 1).padStart(2, '0') + ' · ' + nome}</div>;
+  if (h.tipo === 'cantos') return <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>{canto(L, T, 1, 1)}{canto(R, T, -1, 1)}{canto(L, B, 1, -1)}{canto(R, B, -1, -1)}{secao}</div>;
+  const n = Math.max(1, (h.secoes || []).length);
   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 }} />
+      {canto(L, T, 1, 1)}{canto(R, T, -1, 1)}{canto(L, B, 1, -1)}{canto(R, B, -1, -1)}
+      <div style={{ ...rot, left: L + c * 0.6, top: T + c * 0.6 }}><b>{h.marca}</b>{deitado && <span style={{ opacity: 0.6 }}>{'  ·  ' + h.ano}</span>}</div>
+      {secao}
+      <div style={{ ...rot, left: L + c * 0.6, bottom: H - B + c * 0.6 }}>{tc}<span style={{ opacity: 0.55 }}>{'   ' + fps + ' FPS'}</span></div>
+      <div style={{ ...rot, right: W - R + c * 0.6, bottom: H - B + c * 0.6 }}>{(h.secoes ? String(k + 1).padStart(2, '0') + ' / ' + String(n).padStart(2, '0') : W + '×' + H)}</div>
+      <div style={{ position: 'absolute', left: L + c * 0.6, top: B - c * 0.35, height: 1.5, width: (R - L - c * 1.2) * c01(t / P.duracao), background: cor }} />
     </div>
   );
 }
@@ -806,6 +851,9 @@ export function Gerativo({ el, t, fps }) {
   if (!L) return <div style={{ position: 'absolute', inset: 0, background: P.paleta.fundo }} />;
   const frame = Math.round(t * fps);
   const bs = P.batidas;
+  /* O AMBIENTE (09/10): o bokeh e o feixe de luz só quando a identidade pede
+     (P.fundo.ambiente). Partitura antiga, sem o campo: como antes (ambiente || 'bokeh'). */
+  const ambiente = P.fundo.ambiente || 'bokeh', comLuz = ambiente !== 'limpo';
   let bi = 0;
   while (bi < bs.length - 1 && t >= bs[bi + 1].de) bi++;
   const b = bs[bi];
@@ -914,18 +962,39 @@ export function Gerativo({ el, t, fps }) {
                 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 }} />;
+                // Sem vazio, não entra (09/10): o anel no meio do texto era enfeite que ninguém pediu.
+                else return null;
                 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. */
+                /* O ícone 3D mora no vazio do bloco, no lugar que o projeto escolheu
+                   (ic.lados, gerativo.js: direita, esquerda, acima, abaixo ou canto);
+                   sem espaço lá, tenta o próximo; sem nenhum, não entra — nunca
+                   por cima do texto. Partitura antiga (sem lados): direita ou acima. */
                 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;
+                const xTopo = x.bloco.alinha === 'centro' ? (bl.x + bl.x1) / 2 - tam / 2 : bl.x - tam * 0.08;
+                const fora = (qx, qy) => qx + tam <= bl.x - 8 || qx >= bl.x1 + 8 || qy + tam <= bl.y - 8 || qy >= bl.y1 + 8;
+                const LUGAR = {
+                  'direita': () => (W - M - bl.x1 >= tam * 0.9 ? [Math.min(W - M - tam, bl.x1 + (W - M - bl.x1 - tam) / 2), (bl.y + bl.y1) / 2 - tam / 2] : null),
+                  'esquerda': () => (bl.x - M >= tam * 0.9 ? [Math.max(M * 0.6, M + (bl.x - M - tam) / 2), (bl.y + bl.y1) / 2 - tam / 2] : null),
+                  'acima': () => (bl.y - M * 1.2 >= tam * 0.85 ? [xTopo, Math.max(M, bl.y - tam - 0.02 * H)] : null),
+                  'abaixo': () => (H - M * 1.2 - bl.y1 >= tam * 0.85 ? [xTopo, Math.min(H - M - tam, bl.y1 + 0.02 * H)] : null),
+                  // O canto livre mais longe do texto: o ícone pequeno, de assinatura.
+                  'canto': () => [[W - M - tam, M], [W - M - tam, H - M - tam], [M, M], [M, H - M - tam]].find(([qx, qy]) => fora(qx, qy)) || null,
+                };
+                const ordem = ic.lados || [ic.lado, 'acima'];
+                const achou = ordem.map((l) => LUGAR[l] && LUGAR[l]()).find(Boolean);
+                if (!achou) return null;
+                const [px, py] = achou;
+                /* O ÍCONE PLANO (09/10): o do Iconify que o roteiro pediu (o pão, o QR
+                   code), na cor do acento da identidade — entra em mola e flutua de leve. */
+                if (ic.svg) {
+                  const k = MOLA(t - ic.t), fl = Math.sin((t - ic.t) * 1.3) * 0.012 * tam, sai = c01((t - (x.ate - 0.25)) / 0.25);
+                  return <div style={{ position: 'absolute', left: Math.round(px), top: Math.round(py + fl), width: tam, height: tam, color: ic.cor, opacity: c01(k * 1.4) * (1 - sai),
+                    transform: 'translateZ(120px) scale(' + (0.6 + 0.4 * k).toFixed(4) + ') rotate(' + ((1 - k) * -8).toFixed(2) + 'deg)', transformOrigin: '50% 60%' }}
+                    dangerouslySetInnerHTML={{ __html: ic.svg }} />;
+                }
                 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) => {
@@ -961,7 +1030,7 @@ export function Gerativo({ el, t, fps }) {
       </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) => {
+      {ambiente === 'bokeh' && [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);
@@ -970,7 +1039,7 @@ export function Gerativo({ el, t, fps }) {
         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) }} />;
       })}
-      {(() => {
+      {comLuz && (() => {
         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));

package/lib/estudio/kit/marca.jsx

@@ -735,7 +735,64 @@ export function Site({ el, t, fps }) {
   );
 }
 
+// ── o print do site de verdade, em 3D ───────────────────────────────────
+/* A peça `site` acima DESENHA um site genérico; esta mostra o print real
+   (print-site.js), numa janela de navegador ou num celular, inclinados em
+   perspectiva, com espessura, reflexo e a página rolando devagar.
+   "proporcao" é altura/largura do print: é ela que diz quanto há para rolar.
+   Só CSS 3D — o three.js entraria aqui só para o mesmo plano com textura. */
+export function PrintSite({ el, t, fps }) {
+  const W = el.largura || 1280, H = el.altura || (el.celular ? 900 : 820);
+  const t0 = el.t || 0;
+  const cel = !!el.celular;
+  const m = mola(t, t0, fps, { damping: 30, stiffness: 90, mass: 1 });
+  const inc = el.inclinacao ?? (cel ? 14 : 18);           // graus de giro em Y no repouso
+  const deriva = Math.sin((t - t0) * 0.6) * 3;             // a câmera que respira, sem parar
+  const rotY = lerp(-48, -inc, m) + deriva;
+  const rotX = lerp(22, cel ? 6 : 9, m);
+  const z = lerp(-700, 0, m);
+  const barra = cel ? 0 : Math.round(H * 0.06);            // a barra do navegador
+  const borda = cel ? Math.round(W * 0.045) : 0;           // a moldura do celular
+  const telaW = W - borda * 2, telaH = H - barra - borda * 2;
+  // A página rola de cima até o fim, com respiro parado nas duas pontas.
+  const total = Math.max(0, telaW * (el.proporcao || 0) - telaH);
+  const dur = el.duracao || 6;
+  const k = el.rolar === false ? 0 : CURVAS_KIT.camera(entre(t, t0 + 1.0, t0 + dur - 0.6));
+  const brilho = 30 + 50 * entre(t, t0, t0 + dur);
+  const raio = cel ? Math.round(W * 0.14) : Math.round(H * 0.018);
+  return (
+    <div style={{ position: 'absolute', left: el.x || 0, top: el.y || 0, width: W, height: H, perspective: 2400, opacity: t >= t0 ? Math.min(1, m * 2) : 0 }}>
+      <div style={{ position: 'absolute', inset: 0, transformStyle: 'preserve-3d',
+        transform: 'translateZ(' + z + 'px) rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)' }}>
+        {/* A espessura: duas placas atrás, mais escuras — o aparelho tem corpo. */}
+        {[18, 9].map((d) => (
+          <div key={d} style={{ position: 'absolute', inset: 0, borderRadius: raio, background: d > 10 ? '#0b0c10' : '#1d1f26', transform: 'translateZ(' + -d + 'px)' }} />
+        ))}
+        <div style={{ position: 'absolute', inset: 0, borderRadius: raio, overflow: 'hidden', background: cel ? '#0e0f13' : '#f4f4f6',
+          boxShadow: '0 80px 160px -40px rgba(0,0,0,0.55), 0 30px 60px -30px rgba(0,0,0,0.4)' }}>
+          {cel ? null : (
+            <div style={{ height: barra, display: 'flex', alignItems: 'center', gap: barra * 0.18, padding: '0 ' + barra * 0.4 + 'px', background: '#e9e9ee' }}>
+              {['#ff5f57', '#febc2e', '#28c840'].map((c) => <div key={c} style={{ width: barra * 0.24, height: barra * 0.24, borderRadius: 99, background: c }} />)}
+              <div style={{ marginLeft: barra * 0.4, flex: 1, maxWidth: W * 0.5, height: barra * 0.5, borderRadius: 99, background: '#fff', display: 'flex', alignItems: 'center',
+                padding: '0 ' + barra * 0.35 + 'px', fontFamily: MONO(), fontSize: barra * 0.26, color: '#55585f', whiteSpace: 'nowrap', overflow: 'hidden' }}>
+                {String(el.url || '').replace(/^https?:\/\//, '').replace(/\/$/, '')}
+              </div>
+            </div>
+          )}
+          <div style={{ position: 'absolute', left: borda, top: barra + borda, width: telaW, height: telaH, overflow: 'hidden', borderRadius: cel ? raio * 0.75 : 0, background: '#fff' }}>
+            <Img src={staticFile(el.src)} style={{ position: 'absolute', left: 0, top: 0, width: telaW, transform: 'translateY(' + (-total * k).toFixed(1) + 'px)' }} />
+          </div>
+          {cel ? <div style={{ position: 'absolute', left: '50%', top: borda * 1.3, width: W * 0.28, height: borda * 1.1, marginLeft: -W * 0.14, borderRadius: 99, background: '#0e0f13' }} /> : null}
+          {/* O reflexo que atravessa o vidro enquanto o aparelho gira. */}
+          <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
+            background: 'linear-gradient(115deg, rgba(255,255,255,0) ' + (brilho - 18) + '%, rgba(255,255,255,0.16) ' + brilho + '%, rgba(255,255,255,0) ' + (brilho + 18) + '%)' }} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export const MARCA = {
   orbe: Orbe, vetor: Vetor, manchete: Manchete, cromo: Cromo, cores: Cores, padrao: Padrao, particulas: Particulas,
-  estrela: Estrela, cartoes: Cartoes, painel: Painel, esfera: Esfera, grade: Grade, site: Site,
+  estrela: Estrela, cartoes: Cartoes, painel: Painel, esfera: Esfera, grade: Grade, site: Site, printsite: PrintSite,
 };

package/lib/estudio/kit/tres.jsx

@@ -278,8 +278,11 @@ const FORMAS = {
 };
 
 function Mat({ tipo, cor }) {
-  // Metal escovado, bala (verniz) ou argila — os três refletem a sala (Ambiente).
+  // Metal escovado, bala (verniz), pérola, acetinado ou argila — todos refletem a sala (Ambiente).
   if (tipo === 'metal') return <meshPhysicalMaterial color={cor} roughness={0.32} metalness={0.85} clearcoat={0.4} envMapIntensity={1.2} />;
+  // Pérola (iridescente) e acetinado (meio metal, meio fosco): o cardápio de 09/10 (gerativo.MATERIAIS_ICONE).
+  if (tipo === 'perola') return <meshPhysicalMaterial color={cor} roughness={0.25} metalness={0.1} clearcoat={1} clearcoatRoughness={0.1} iridescence={1} iridescenceIOR={1.3} />;
+  if (tipo === 'acetinado') return <meshPhysicalMaterial color={cor} roughness={0.5} metalness={0.45} clearcoat={0.4} />;
   if (tipo === 'verniz') return <meshPhysicalMaterial color={cor} roughness={0.18} metalness={0} clearcoat={1} clearcoatRoughness={0.08} sheen={0.3} />;
   return <meshPhysicalMaterial color={cor} roughness={0.72} metalness={0} clearcoat={0.15} />;   // argila: fosca, macia
 }

package/lib/estudio/kit.js

@@ -49,6 +49,8 @@ const PECAS = {
     esfera: {},
     grade: {},
     site: {},
+    // O print REAL do site (print-site.js) numa janela ou num celular em 3D, rolando.
+    printsite: { precisa: ['src'] },
     // O produto em 3D (kit/tres.jsx): fone, celular, lata ou caixa, de geometria.
     produto3d: { precisa: ['modelo'] },
     // Os ícones 3D de geometria (kit/tres.jsx): raio, coração, bateria, relógio, fone…

package/lib/estudio/plano.js

@@ -54,7 +54,9 @@ const kit = require('./kit.js');
 const TIPOS = new Set(['texto', 'forma', 'imagem', 'video', 'icone', 'legenda', 'componente', 'grupo', 'kit']);
 const FORMAS = new Set(['retangulo', 'circulo', 'linha', 'poligono', 'traco']);
 const AJUSTES = new Set(['cover', 'contain', 'preencher']);
-const TRANSICOES = new Set(['corte', 'esmaecer', 'deslizar', 'zoom', 'giro', 'mascara', 'morph', 'chicote', 'soco', 'flash', 'liquido']);
+const TRANSICOES = new Set(['corte', 'esmaecer', 'deslizar', 'zoom', 'giro', 'mascara', 'morph', 'chicote', 'soco', 'flash', 'liquido',
+    // as 3D, que mexem nas duas cenas (remotion.js, estilo3d)
+    'virar', 'cubo', 'profundidade', 'inclinar']);
 
 /* As propriedades que a animação por quadro-chave alcança. Cada uma é um
    número no tempo; a curva entre dois quadros é a suavização declarada.
@@ -248,6 +250,8 @@ function conferirElemento(caminho, el, pasta, problemas, duracao) {
             for (const oque of kit.conferirPeca(el)) problemas.push(erro(`${caminho}.peca`, oque));
             // A logo de uma peça é arquivo da pasta, como a imagem.
             if (el.logo) conferirArquivo(`${caminho}.logo`, el.logo, pasta, problemas);
+            // E o print do site (printsite) também: sem o arquivo, a janela 3D sai vazia.
+            if (el.src) conferirArquivo(`${caminho}.src`, el.src, pasta, problemas);
             break;
     }
 }