primocode 10.2.0 → 10.3.0

package/lib/estudio/index.js

@@ -38,6 +38,8 @@ const hibrido = require('./hibrido.js');
 const biblioteca = require('./biblioteca.js');
 const referencias = require('./referencias.js');
 const variedade = require('./variedade.js');
+const diretor = require('./diretor.js');
+const falantes = require('./falantes.js');
 const variacao3d = require('./variacao3d.js');
 const plano = require('./plano.js');
 const remotion = require('./remotion.js');
@@ -45,11 +47,14 @@ const assets = require('./assets.js');
 const video = require('./video.js');
 const batida = require('./batida.js');
 const revisor = require('./revisor.js');
+const assinatura = require('./assinatura.js');
 const identidade = require('./identidade.js');
 const slides = require('./slides.js');
 const edicao = require('./edicao.js');
 const composicao = require('./composicao.js');
 const acervoSite = require('./acervo-site.js');
+const printSite = require('./print-site.js');
+const efeitos = require('./efeitos.js');
 const impacto = require('./impacto.js');
 const cinema = require('./cinema.js');
 const motion = require('./motion.js');
@@ -200,6 +205,17 @@ async function ferramentaProjeto(args, ctx = {}) {
         return { ok: true };
     }
 
+    /* O FEEDBACK que vira estilo: "adorei a virada", "texto demais" fica na
+       assinatura da pessoa (assinatura.js), e o próximo vídeo já parte dele.
+       Sem texto, devolve a assinatura (as faixas e as notas). */
+    if (acao === 'assinatura' || acao === 'feedback' || acao === 'gostei') {
+        const nome = args.nome || args.assinatura || 'fluido';
+        if (!args.texto) { const a = assinatura.ler(nome); return a ? { ok: true, assinatura: a } : { ok: false, error: `a assinatura "${nome}" não existe.` }; }
+        const r = assinatura.anotar(nome, args.texto);
+        if (r.ok && args.id) projeto.anotar(args.id, 'assinatura', `feedback gravado na assinatura ${nome}: ${args.texto}`);
+        return r;
+    }
+
     const todos = projeto.listar({ limite: Number(args.limite) || 20 });
     return {
         ok: true,
@@ -262,7 +278,8 @@ function roteiroValido(r) {
     const CINEMA = ['frase', 'montagem', 'numeros', 'escada', 'dia', 'depoimento', 'climax', 'final'];
     const NOVOS = ['logo', 'cores', 'produto'];   // vox.js e lancamento.js
     if (!partes.every((pt) => pt && (composicao.TIPOS.includes(pt.tipo) || CINEMA.includes(pt.tipo) || NOVOS.includes(pt.tipo)))) return null;
-    const obj = Array.isArray(x) ? { partes } : x;
+    // Duas vozes: roteiro.vozes e parte.falante, limpos (falantes.js). Sem eles, nada muda.
+    const obj = falantes.normalizar(Array.isArray(x) ? { partes } : x);
     return partes.some((pt) => CINEMA.includes(pt.tipo)) && !obj.estilo ? { ...obj, estilo: 'cinema' } : obj;
 }
 
@@ -365,6 +382,13 @@ async function ferramentaPlano(args) {
         // O roteiro fica guardado: ajustar uma frase é mandar o roteiro de novo, não reescrever tudo.
         try { fs.writeFileSync(path.join(p.pasta, 'roteiro.json'), JSON.stringify(original || args.roteiro, null, 2)); } catch { /* segue */ }
         projeto.salvar(args.id, { duracao: conferida.duracao });
+        /* A memória da estrutura (diretor.cardapioEstruturas): o próximo roteiro
+           vê o que este usou. Uma vez por projeto — mandar o roteiro de novo
+           para ajustar uma frase não é um vídeo novo. */
+        if (!p.estrutura) {
+            const usada = diretor.registrarEstrutura(original || args.roteiro);
+            projeto.salvar(args.id, { estrutura: usada.estrutura || '-' });
+        }
         return {
             ok: true, duracao: conferida.duracao, ...r.resumo, resumo: plano.resumo(r.plano),
             proximo: 'estudio_render com este id. Para ajustar, mande o roteiro de novo (é rápido) — não edite as cenas à mão.',
@@ -437,6 +461,26 @@ async function ferramentaMidia(args) {
         return { ok: true, src: relativo, metodo: r.metodo, aviso: r.aviso || undefined };
     }
 
+    /* O print de verdade do site (print-site.js), para a peça 3D `printsite`.
+       Só roda quando o modelo pede: o cardápio diz quando vale. */
+    if (acao === 'print') {
+        if (!p) return { ok: false, error: 'para tirar o print é preciso dizer em qual projeto (id).' };
+        const r = await printSite.capturarSite(args.url || args.site || args.termo, { pasta: p.pasta, celular: !!args.celular, inteira: args.inteira !== false });
+        if (r.ok) projeto.anotar(p.id, 'midia', `print de ${r.url} (${r.tela}): ${r.src}`);
+        return r;
+    }
+
+    // O catálogo de efeitos que a IA escreveu (efeitos.js): guardar, listar, reusar.
+    if (acao === 'efeitos') return { ok: true, efeitos: efeitos.cardapio() };
+    if (acao === 'guardar-efeito' || acao === 'usar-efeito') {
+        if (!p) return { ok: false, error: 'diga em qual projeto (id).' };
+        const r = acao === 'guardar-efeito'
+            ? efeitos.guardar({ pasta: p.pasta, arquivo: args.arquivo || args.src, nome: args.nome, descricao: args.descricao, tags: args.tags })
+            : efeitos.reusar({ pasta: p.pasta, nome: args.nome });
+        if (r.ok) projeto.anotar(p.id, 'midia', `${acao === 'guardar-efeito' ? 'guardou' : 'reusou'} o efeito ${r.nome || args.nome}`);
+        return r;
+    }
+
     if (acao === 'logo') {
         if (!p) return { ok: false, error: 'para baixar a logo é preciso dizer em qual projeto (id).' };
         const nome = String(args.marca || args.nome || args.termo || '').trim();
@@ -970,6 +1014,20 @@ function narrarReserva(lista, mp3, arq, voz, vozEdge, { soEdge = false, semKokor
     });
 }
 
+/* DUAS VOZES (falantes.js): os mp3 de cada falante, um depois do outro, num
+   arquivo só — reamostrados, porque o Gemini sai a 24 kHz e o Edge não. A
+   duração de cada um é MEDIDA: é ela que empurra os tempos do grupo seguinte. */
+async function juntarVozes(arquivos, mp3) {
+    const fil = arquivos.map((_, i) => `[${i}:a]aresample=44100,aformat=channel_layouts=mono[a${i}]`).join(';')
+        + ';' + arquivos.map((_, i) => `[a${i}]`).join('') + `concat=n=${arquivos.length}:v=0:a=1[s]`;
+    const c = await video.rodar(video.ffmpeg(), ['-y', ...arquivos.flatMap((a) => ['-i', a]), '-filter_complex', fil, '-map', '[s]',
+        '-c:a', 'libmp3lame', '-q:a', '3', mp3], { timeout: 120000 });
+    if (!c.ok) return { ok: false, error: 'não consegui juntar as vozes' };
+    const duracoes = [];
+    for (const a of arquivos) duracoes.push((await video.medir(a)).segundos);
+    return { ok: true, duracoes };
+}
+
 /* A MÚSICA TEM LETRA? O acervo não diz se a faixa é instrumental, então ela
    é ouvida: 25 s do meio vão para a transcrição, e mais de 6 palavras é voz
    cantada. Sem servidor para ouvir, a faixa passa (melhor música que nenhuma). */
@@ -1015,6 +1073,14 @@ async function sonsReais(p, video) {
 const PROPORCOES = { '16:9': [1920, 1080], '9:16': [1080, 1920], '1:1': [1080, 1080], '4:5': [1080, 1350] };
 
 /** O roteiro vira plano: baixa o que falta, narra, e chama o compositor. */
+/* A ASSINATURA (assinatura.js): o vídeo é medido e conferido contra as
+   faixas do estilo; o que saiu volta para o agente e fica no caderno. */
+function conferirAssinatura(p, r, nome) {
+    const fora = assinatura.descrever(assinatura.conferir(nome, assinatura.medir(r.partitura, r.plano)).fora);
+    r.resumo.assinatura = { nome, seguiu: !fora.length, fora: fora.length ? fora : undefined };
+    projeto.anotar(p.id, 'assinatura', fora.length ? `fora da assinatura ${nome}: ${fora.join('; ')}` : `seguiu a assinatura ${nome}`);
+}
+
 async function prepararRoteiro(p, args) {
     const roteiro = typeof args.roteiro === 'string' ? JSON.parse(args.roteiro) : args.roteiro;
     if (Array.isArray(roteiro)) return prepararRoteiro(p, { ...args, roteiro: { partes: roteiro } });
@@ -1066,6 +1132,14 @@ async function prepararRoteiro(p, args) {
         roteiro.semente = p.semente != null ? p.semente : Math.floor(Math.random() * 1e9);
         if (p.semente == null) projeto.salvar(p.id, { semente: roteiro.semente });
     }
+    /* O humor, a paleta, as fontes e o gênero do gerativo, com memória entre
+       vídeos (09/10, "vício em cores, músicas, fontes"): por PROJETO, como a semente. */
+    // O assunto do vídeo é o rótulo da moldura (quando ela sai): o título do projeto.
+    if (estilo === 'gerativo' && !roteiro.titulo && p.titulo) roteiro.titulo = p.titulo;
+    if (estilo === 'gerativo' && !roteiro.escolhasGerativo) {
+        roteiro.escolhasGerativo = p.escolhasGerativo || gerativo.escolherVisual(roteiro);
+        if (!p.escolhasGerativo) projeto.salvar(p.id, { escolhasGerativo: roteiro.escolhasGerativo });
+    }
     if (ref.modo === 'fechado' && !roteiro.busca && referencias.termos().length) roteiro.busca = referencias.termos();
     /* A BIBLIOTECA (biblioteca.js): sem fonte e cor da marca, o híbrido, o
        cinema e o impacto caíam sempre no Inter e no azul e roxo — "os vídeos
@@ -1135,7 +1209,13 @@ async function prepararRoteiro(p, args) {
         // Só as partes com voz vão para a narração; o depoimento tem a voz do aluno.
         // Só as partes com voz: o depoimento tem a voz do aluno, e a parte muda não tem voz.
         // A parte com voz forte é narrada à parte: se entrasse aqui também, seria falada duas vezes (e muda uma delas).
-        const lista = partes.filter((pt) => pt.tipo !== 'depoimento' && cinema.falaDe(pt) !== '' && !pt.falaForte).map((pt) => ({ texto: cinema.falaDe(pt), registro: 'normal' }));
+        const comVoz = partes.filter((pt) => pt.tipo !== 'depoimento' && cinema.falaDe(pt) !== '' && !pt.falaForte);
+        const lista = comVoz.map((pt) => ({ texto: cinema.falaDe(pt), registro: 'normal' }));
+        // Duas vozes: a voz de cada parte pelo falante dela (roteiro.vozes).
+        const vozesL = falantes.vozesDasPartes(comVoz, roteiro, args.voz || roteiro.voz);
+        const variasVozes = new Set(vozesL).size > 1;
+        const DIRECAO_CINEMA = 'Leia em português do Brasil como narrador de trailer de marca premium: voz grave, confiante e humana, '
+            + 'ritmo firme, pausas curtas entre as frases, sem arrastar.';
         const mp3 = path.join(p.pasta, 'midia', `narracao-${Date.now().toString(36)}.mp3`);
         /* O CACHE DA VOZ: a mesma fala, na mesma voz, não é gerada duas vezes.
            Refazer o roteiro em outro formato, ou mexer numa cena, não gasta a
@@ -1146,7 +1226,20 @@ async function prepararRoteiro(p, args) {
         let v = null;
         // motorVoz "edge": a voz do Edge direto, sem esperar a cota do Gemini ("a narração pode manter a do Edge", 25/09).
         const soEdge = String(roteiro.motorVoz || args.motorVoz || '').toLowerCase() === 'edge';
-        if (soEdge) {
+        if (variasVozes) {
+            /* Um grupo por falante, cada um com a sua voz e o seu cache (a chave
+               do narrarComCache leva a voz). Falhou? Fica anotado, e a reserva
+               de baixo narra numa voz só — melhor o vídeo do que nada. */
+            v = await falantes.narrarPorFalante(lista.map((x, i) => ({ ...x, voz: vozesL[i] })), mp3, { juntar: juntarVozes,
+                narrarUm: async (l, m, voz) => {
+                    const g = soEdge ? { ok: false } : await narrarComCache(l, m, { voz, direcao: DIRECAO_CINEMA });
+                    if (g.ok) return g;
+                    const a = m.replace(/\.mp3$/, '.json');
+                    fs.writeFileSync(a, JSON.stringify(l));
+                    return narrarReserva(l, m, a, voz, 'antonio', { soEdge });
+                } });
+            if (!v.ok) projeto.anotar(p.id, 'narracao', `as duas vozes falharam (${v.error}); saiu numa voz só`);
+        } else if (soEdge) {
             v = { ok: false, error: 'edge pedido' };
         } else if (fs.existsSync(cacheMp3) && fs.existsSync(cacheJson)) {
             fs.copyFileSync(cacheMp3, mp3);
@@ -1165,9 +1258,7 @@ async function prepararRoteiro(p, args) {
         } else if (kokoro.querKokoro(args.voz || roteiro.voz)) {
             v = { ok: false, error: 'kokoro pedido' };
         } else {
-            v = await narrarComGemini(lista, mp3, { voz: args.voz || roteiro.voz,
-                direcao: 'Leia em português do Brasil como narrador de trailer de marca premium: voz grave, confiante e humana, '
-                    + 'ritmo firme, pausas curtas entre as frases, sem arrastar.' });
+            v = await narrarComGemini(lista, mp3, { voz: args.voz || roteiro.voz, direcao: DIRECAO_CINEMA });
             if (v.ok) {
                 try { fs.mkdirSync(cacheDir, { recursive: true }); fs.copyFileSync(mp3, cacheMp3); fs.writeFileSync(cacheJson, JSON.stringify({ voz: v.voz, segundos: v.segundos, partes: v.partes })); } catch { /* sem cache */ }
             }
@@ -1342,12 +1433,14 @@ async function prepararRoteiro(p, args) {
                 // falaForte: true → a voz forte lê o texto da tela.
                 const textoForte = pt.falaForte === true ? cinema.falaDe({ ...pt, fala: undefined }) : pt.falaForte;
                 const soEdgeF = String(roteiro.motorVoz || args.motorVoz || '').toLowerCase() === 'edge';
+                // A voz forte é a de quem fala a parte (duas vozes), não sempre a do narrador.
+                const vozForte = falantes.vozesDasPartes([pt], roteiro, args.voz || roteiro.voz)[0];
                 const vf = soEdgeF ? await (async () => {
                     // No Edge, a ênfase é o registro "contraste": a mesma voz, um pouco mais firme.
                     const arqJ = arqF.replace(/\.mp3$/, '.json');
                     fs.writeFileSync(arqJ, JSON.stringify([{ texto: textoForte, registro: 'contraste' }]));
-                    return rodarPython('narrar.py', ['roteiro', '--arquivo', arqJ, '--saida', arqF, '--voz', String(args.voz || roteiro.voz || 'antonio')], { timeout: 5 * 60000 });
-                })() : await narrarComCache([{ texto: textoForte }], arqF, { voz: args.voz || roteiro.voz,
+                    return rodarPython('narrar.py', ['roteiro', '--arquivo', arqJ, '--saida', arqF, '--voz', String(vozForte || 'antonio')], { timeout: 5 * 60000 });
+                })() : await narrarComCache([{ texto: textoForte }], arqF, { voz: vozForte,
                     // A MESMA voz do narrador, só com um pouco mais de ênfase: "não é mudar a voz, é só um pouco a entonação" (25/09).
                     direcao: pt.entonacao || 'Leia em português do Brasil com a mesma voz e o mesmo ritmo de um narrador de trailer de marca: '
                         + 'confiante e natural, só um pouco mais de ênfase nas palavras principais. Sem dramatizar.' });
@@ -1382,8 +1475,7 @@ async function prepararRoteiro(p, args) {
         const mp3 = path.join(p.pasta, 'midia', `narracao-${Date.now().toString(36)}.mp3`);
         // A voz de gente primeiro (Gemini, pelo servidor); o Edge é a reserva.
         // Com cache: refazer o vídeo (outro estilo, outra proporção) não gasta a cota da voz.
-        let v = await narrarComCache(lista, mp3, { voz: args.voz || roteiro.voz,
-            direcao: estilo === 'gerativo'
+        const direcao = estilo === 'gerativo'
                 /* O gerativo pede voz com CORPO ("narração encorpada, extravagante",
                    30/09): cheia, quente, perto do microfone — e o ritmo segue 1,12×. */
                 /* (A primeira versão pedia "trailer" e "ênfase sustentada": a voz saiu 25% mais lenta, medido em 30/09.) */
@@ -1397,9 +1489,19 @@ async function prepararRoteiro(p, args) {
                 + 'voz encorpada, ênfase forte nas palavras de impacto, pausas curtas e secas entre as frases, sorrindo na voz.'
                 // "A narração tá lenta, deixa mais viva" (29/09): todo estilo fala com energia de reels.
                 : 'Leia em português do Brasil como narrador de reels de tecnologia: vivo, confiante e rápido, sorrindo na voz, '
-                + 'ênfase nas palavras que importam, pausas curtas entre as frases. Nada de leitura lenta ou solene.' });
-        // O Kokoro pedido já foi tentado no narrarComCache: a reserva não repete.
-        if (!v.ok) v = await narrarReserva(lista, mp3, arq, args.voz || roteiro.voz, 'thalita', { semKokoro: kokoro.querKokoro(args.voz || roteiro.voz) });
+                + 'ênfase nas palavras que importam, pausas curtas entre as frases. Nada de leitura lenta ou solene.';
+        /* Uma voz por falante (falantes.js). Com uma voz só, um grupo só: é a
+           narração de sempre, com o mesmo cache. */
+        const vozesL = falantes.vozesDasPartes(partes, roteiro, args.voz || roteiro.voz);
+        let v = await falantes.narrarPorFalante(lista.map((x, i) => ({ ...x, voz: vozesL[i] })), mp3, { juntar: juntarVozes,
+            narrarUm: async (l, m, voz) => {
+                const g = await narrarComCache(l, m, { voz, direcao });
+                if (g.ok) return g;
+                // O Kokoro pedido já foi tentado no narrarComCache: a reserva não repete.
+                const a = m === mp3 ? arq : m.replace(/\.mp3$/, '.json');
+                if (a !== arq) fs.writeFileSync(a, JSON.stringify(l));
+                return narrarReserva(l, m, a, voz, 'thalita', { semKokoro: kokoro.querKokoro(voz) });
+            } });
         if (!v.ok) return v;
         /* O RITMO DA VOZ. Mesmo com a direção, a voz sai no passo de leitura, e
            o vídeo — que segue a voz palavra por palavra — sai lento junto. O
@@ -1528,13 +1630,22 @@ async function prepararRoteiro(p, args) {
                 '-af', 'afade=t=in:st=0:d=0.4,loudnorm=I=-18:TP=-2:LRA=11', '-ar', '44100', norm], { timeout: 5 * 60000 });
             if (c.ok && fs.existsSync(norm)) trilha = path.relative(p.pasta, norm).replace(/\\/g, '/');
         }
-        const r = gerativo.montarGerativo({ roteiro, largura, altura, tempos, narracao, sons, trilha });
+        /* O herói que o roteiro pediu do Iconify ("mdi:bread-slice"): o desenho é
+           baixado aqui (fica em midia/icones); o que não baixar, a batida fica sem. */
+        const icones = {};
+        for (const pt of partes) {
+            const h = typeof (pt.heroi != null ? pt.heroi : pt.icone) === 'string' ? String(pt.heroi != null ? pt.heroi : pt.icone).trim() : '';
+            if (!/^[a-z0-9-]+:[a-z0-9-]+$/i.test(h) || icones[h]) continue;
+            try { const ic = await assets.icone(h, { pasta: p.pasta }); if (ic && ic.ok) icones[h] = ic.svg; else projeto.anotar(p.id, 'icones', `herói ${h} não baixou: ${(ic && ic.error) || '?'}`); } catch { /* fica sem */ }
+        }
+        const r = gerativo.montarGerativo({ roteiro, largura, altura, tempos, narracao, sons, trilha, icones });
         if (r.ok) {
             const feitos = sonsLeves.prepararReceitas(p.pasta, r.somReceitas);
             // Som que o ffmpeg não conseguiu fazer sai do plano (o vídeo não espera um arquivo que não existe).
             r.plano.audio.efeitos = r.plano.audio.efeitos.filter((e) => Object.values(feitos).includes(e.src));
         }
         if (r.ok) projeto.anotar(p.id, 'plano', `estilo gerativo: ${r.resumo.batidas} batidas (${r.resumo.composicoes.join(' → ')}), ${r.resumo.segundos}s, semente ${r.resumo.semente}`);
+        if (r.ok) conferirAssinatura(p, r, roteiro.assinatura || 'gerativo');
         return r;
     }
     if (estilo === 'fluido' && modo === 'video') {
@@ -1562,6 +1673,9 @@ async function prepararRoteiro(p, args) {
             p.paletaFluido = escolha;
         }
         roteiro.paleta = p.paletaFluido;
+        // O trio de fontes, também por projeto e sem repetir os últimos vídeos (09/10, "vício em fontes").
+        if (!p.fontesFluido) { p.fontesFluido = fluido.escolherFontes(roteiro.fontesFluido); projeto.salvar(p.id, { fontesFluido: p.fontesFluido }); }
+        roteiro.fontesFluido = p.fontesFluido;
         /* As IMAGENS do fluido misto, só com imagem pedida: as partes com
            "busca", no máximo 1 em 3 e espalhadas (fluido.js decide o jeito). */
         const fotosFluido = {};
@@ -1580,6 +1694,7 @@ async function prepararRoteiro(p, args) {
         }
         const r = fluido.montarFluido({ imagens: fotosFluido, roteiro: { ...roteiro, pedido: roteiro.pedido || pedidoTxt }, largura, altura, tempos, narracao, sons, trilha });
         if (r.ok) projeto.anotar(p.id, 'plano', `estilo fluido: ${r.resumo.batidas} batidas${r.resumo.imagens.length ? ` (imagens: ${r.resumo.imagens.join(', ')})` : ''}, paleta ${r.resumo.paleta}, ${r.resumo.segundos}s, batida atrasada no máximo ${r.resumo.atraso}s, palavra atrás da voz no máximo ${r.resumo.sincronia}s`);
+        if (r.ok) conferirAssinatura(p, r, roteiro.assinatura || 'fluido');
         return r;
     }
     if (estilo === 'motion' && modo === 'video') {
@@ -1898,5 +2013,5 @@ async function ferramentaSite(args) {
 module.exports = { variarIcones,
     ferramentaProjeto, ferramentaPlano, ferramentaMidia, ferramentaNarrar,
     ferramentaVideo, ferramentaRender, ferramentaSite,
-    projeto, plano, remotion, assets, video, identidade, slides, python, rodarPython, alinharPartes, prepararRoteiro,
+    projeto, plano, remotion, assets, video, identidade, slides, python, rodarPython, alinharPartes, prepararRoteiro, roteiroValido, juntarVozes,
 };

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;
     }
 }