primocode 10.4.4 → 10.5.0

package/lib/estudio/index.js

@@ -66,6 +66,7 @@ const kokoro = require('./kokoro.js');
 const lancamento = require('./lancamento.js');
 const glifos = require('./glifos.js');
 const personagem = require('./personagem.js');
+const colecao = require('./colecao.js');
 const { escolherEstilo, LEVES } = require('./estilo.js');
 const sonsLeves = require('./sons-leves.js');
 const ende = require('./ende.js');
@@ -518,6 +519,23 @@ async function ferramentaMidia(args) {
         return r;
     }
 
+    /* A BIBLIOTECA (colecao.js, 11/10): o cardápio inteiro, o ícone 3D e a
+       animação pronta. Procurar não usa rede (o índice mora no pacote); com
+       id, baixa para o projeto e devolve o elemento pronto. */
+    if (acao === 'biblioteca' || acao === 'cardapio' || acao === 'cardápio') return colecao.cardapio();
+    if (acao === 'icones3d' || acao === 'icone3d' || acao === 'animacoes' || acao === 'animacao' || acao === 'animação' || acao === 'animações') {
+        const ehAnim = /^anima/.test(acao);
+        if (args.id_item || /^(fluent3d|noto):/.test(String(args.item || args.baixar || ''))) {
+            const pj = p ? projeto.ler(p.id) : null;
+            const fmt = (pj && pj.formato) || {};
+            const r = await colecao.baixar(args.id_item || args.item || args.baixar, { pasta: p ? p.pasta : null, largura: fmt.largura || 1920, altura: fmt.altura || 1080 });
+            if (r.ok && p) projeto.anotar(p.id, 'midia', `biblioteca: ${r.src} (${r.licenca})`);
+            return r;
+        }
+        return ehAnim ? colecao.procurarAnimacoes(args.termo || args.busca || '', { quantas: Number(args.quantas) || 10 })
+            : colecao.procurarIcones3d(args.termo || args.busca || '', { quantas: Number(args.quantas) || 10 });
+    }
+
     if (acao === 'icones' || acao === 'icone') {
         if (args.nome) {
             const r = await assets.icone(args.nome, { pasta: p ? p.pasta : null });
@@ -896,6 +914,32 @@ function alinharPartes(lista, palavras, total) {
     });
 }
 
+/**
+ * Onde o roteiro COMEÇA na fala transcrita, em segundos — 0 se começa logo.
+ *
+ * Dois jeitos de o Gemini vazar a direção, os dois vistos no vídeo do Joel
+ * (10/10): falar "Rápido e contínuo." ANTES do roteiro, e falar NO LUGAR da
+ * primeira frase ("Rápido e contínuo. Você pergunta…", sem o "IA é pra tirar
+ * dúvida"). Então: acha o primeiro par de palavras seguidas que existe no
+ * roteiro (não só o par do começo), e corta o que veio antes — mas só se o que
+ * veio antes for, na maior parte, palavra da DIREÇÃO. Fala do roteiro que o
+ * transcritor errou não é vazamento e não sai.
+ */
+function vazamentoNoComeco(lista, palavras, direcao = '') {
+    const norm = (t) => String(t || '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-z0-9]+/g, ' ').trim();
+    const roteiro = norm(lista.slice(0, 2).map((x) => x.texto).join(' ')).split(' ').filter(Boolean);
+    if (roteiro.length < 2 || !palavras.length) return 0;
+    const pares = new Set(roteiro.slice(0, -1).map((w, i) => w + ' ' + roteiro[i + 1]));
+    const ditas = palavras.slice(0, 14).map((w) => norm(w.texto));
+    let i = 0;
+    while (i < ditas.length - 1 && !pares.has(ditas[i] + ' ' + ditas[i + 1])) i++;
+    if (i === 0 || i >= ditas.length - 1) return 0;
+    const daDirecao = new Set(norm(direcao).split(' ').filter(Boolean));
+    const antes = ditas.slice(0, i).join(' ').split(' ').filter(Boolean);
+    const vazou = !direcao || antes.filter((w) => daDirecao.has(w)).length / antes.length >= 0.6;
+    return vazou ? Math.max(0, palavras[i].de - 0.08) : 0;
+}
+
 async function narrarComGemini(lista, mp3, { voz, direcao } = {}) {
     try {
         const cfg = require('../config').loadConfig();
@@ -931,9 +975,25 @@ async function narrarComGemini(lista, mp3, { voz, direcao } = {}) {
         const chars = lista.reduce((n, x) => n + x.texto.length, 0);
         if (med.segundos < chars / 22) return { ok: false, error: `a voz veio cortada (${med.segundos.toFixed(1)} s para ${chars} caracteres)` };
         const tr = await api.requestTranscricao(cfg.server, { token: cfg.token, audio: fs.readFileSync(mp3).toString('base64'), nome: 'voz.mp3', idioma: 'pt' });
-        const palavras = (tr && tr.palavras) || [];
+        let palavras = (tr && tr.palavras) || [];
         if (!palavras.length) return { ok: false, error: 'sem a transcrição da voz para achar as partes' };
-        return { ok: true, voz: `gemini ${r.voz}`, segundos: med.segundos, partes: alinharPartes(lista, palavras, med.segundos) };
+        let segundos = med.segundos;
+        /* A DIREÇÃO LIDA EM VOZ ALTA. O servidor manda a direção ("leia RÁPIDO e
+           contínuo…") e o texto no mesmo pedido, e o Gemini às vezes fala o
+           começo dela: o vídeo do Joel abria com "Rápido e contínuo." antes do
+           roteiro (10/10). Se o roteiro só começa depois de algumas palavras,
+           o que vem antes é vazamento — e sai do áudio. */
+        const corte = vazamentoNoComeco(lista, palavras, direcao);
+        if (corte > 0.15) {
+            const cortado = mp3.replace(/\.mp3$/, '-c.mp3');
+            const k = await video.rodar(video.ffmpeg(), ['-y', '-ss', corte.toFixed(3), '-i', mp3, '-c:a', 'libmp3lame', '-q:a', '3', cortado], { timeout: 120000 });
+            if (k.ok && fs.existsSync(cortado)) {
+                fs.renameSync(cortado, mp3);
+                palavras = palavras.filter((w) => w.de >= corte - 0.02).map((w) => ({ ...w, de: Math.max(0, w.de - corte), ate: Math.max(0, w.ate - corte) }));
+                segundos = Math.max(0, segundos - corte);
+            }
+        }
+        return { ok: true, voz: `gemini ${r.voz}`, segundos, partes: alinharPartes(lista, palavras, segundos), ...(corte > 0.15 ? { cortouDirecao: corte } : {}) };
     } catch (e) {
         return { ok: false, error: e.message };
     }
@@ -1009,9 +1069,24 @@ async function prepararDepoimento(p, c) {
         origem: { src: c.src, de: c.de, ate: c.ate, frase: c.frase }, ...(c.fraseDita ? { frase: c.fraseDita } : {}) };
 }
 
+/* O tom de cada estilo, em UMA frase de instrução, em inglês e terminando em
+   dois-pontos, que é a forma que o Gemini TTS entende como instrução e não
+   como fala. Se ainda vazar, o corte de vazamentoNoComeco tira (as palavras
+   ditas antes do roteiro são quase todas daqui). */
+const DIRECAO_DA_VOZ = {
+    gerativo: 'Read aloud in Brazilian Portuguese as a tech reels narrator: full, warm voice close to the mic, energetic and smiling, no long pauses:',
+    fluido: 'Read aloud in Brazilian Portuguese as a premium product video narrator: confident and close, clean sentences that flow into each other, no ad tone:',
+    personagem: 'Read aloud in Brazilian Portuguese as someone really talking on a podcast: natural and close, never like an announcer:',
+    impacto: 'Read aloud in Brazilian Portuguese as an energetic ad announcer: full voice, strong emphasis on the impact words:',
+    padrao: 'Read aloud in Brazilian Portuguese as a lively tech reels narrator: confident, smiling, emphasis on the words that matter:',
+};
+
 /* A narração com cache (a mesma fala, na mesma direção, não é gerada duas vezes). */
 async function narrarComCache(lista, mp3, { voz, direcao } = {}) {
-    const chave = require('crypto').createHash('sha1').update(JSON.stringify([lista.map((x) => x.texto), voz || '', direcao || ''])).digest('hex').slice(0, 16);
+    /* 'v3' (11/10): as narrações guardadas com a direção antiga (a que tinha
+       "RÁPIDO" e "contínuas") ficam para trás — reaproveitar uma delas trazia o
+       "Rápido e contínuo." de volta mesmo com a direção nova. */
+    const chave = require('crypto').createHash('sha1').update(JSON.stringify(['v3', lista.map((x) => x.texto), voz || '', direcao || ''])).digest('hex').slice(0, 16);
     const dir = path.join(os.homedir(), '.primocode', 'studio', 'cache-voz');
     const cm = path.join(dir, chave + '.mp3'), cj = path.join(dir, chave + '.json');
     if (fs.existsSync(cm) && fs.existsSync(cj)) { fs.copyFileSync(cm, mp3); return { ok: true, ...JSON.parse(fs.readFileSync(cj, 'utf8')) }; }
@@ -1493,24 +1568,14 @@ 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.
-        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.) */
-                ? 'Leia em português do Brasil como locutor de reels de tecnologia: RÁPIDO e contínuo, com voz cheia, quente e encorpada, '
-                    + 'bem perto do microfone, muita energia e sorriso na voz. Ataque firme e ênfase curta e forte nas palavras de impacto; '
-                    + 'quase sem pausa entre as frases. Nunca arraste, nunca leia devagar nem solene.'
-                // O fluido é o vídeo de produto: voz limpa e segura, e rápida ("mais rápido", 06/10).
-                : estilo === 'fluido' ? 'Leia em português do Brasil como narrador de vídeo de produto premium: seguro, próximo e RÁPIDO, '
-                    + 'frases limpas e contínuas, quase sem pausa entre elas. Nunca arraste, nunca leia devagar; sem tom de anúncio.'
-                // O personagem CONVERSA: voz de gente falando com gente, não de locutor.
-                : estilo === 'personagem' ? 'Fale em português do Brasil como alguém conversando de verdade num podcast: natural, próximo, '
-                    + 'com as pausas e a entonação de quem está pensando junto. Sem voz de locutor, sem leitura.'
-                : estilo === 'impacto' ? 'Leia em português do Brasil como locutor de comercial agressivo e vendedor: energia alta, ritmo rápido, '
-                + '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.';
+        /* A DIREÇÃO DA VOZ. O servidor manda a direção e o texto no MESMO pedido,
+           e o Gemini às vezes lê o começo dela em voz alta: todo vídeo do fluido
+           abria com "Rápido e contínuo." (11/10, "em tudo ela coloca isso, pode
+           ser um negócio de padaria"). Então a direção é curta, descreve só o
+           TOM, e não tem palavra solta que soe como a primeira frase de um
+           roteiro ("rápido", "contínuo", caixa alta). A velocidade não vem
+           daqui: vem do atempo (ritmoVoz) depois da voz pronta. */
+        const direcao = DIRECAO_DA_VOZ[estilo] || DIRECAO_DA_VOZ.padrao;
         /* 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);
@@ -1656,6 +1721,15 @@ async function prepararRoteiro(p, args) {
         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 (/^(fluent3d|noto):/i.test(h) && !icones[h]) {
+                // O herói da biblioteca: o PNG 3D ou o Lottie, baixado para o projeto.
+                try {
+                    const r = await colecao.baixar(h, { pasta: p.pasta, largura, altura });
+                    if (r.ok) icones[h] = /^noto:/i.test(h) ? { lottie: r.src } : { png: r.src };
+                    else projeto.anotar(p.id, 'icones', `herói ${h} não baixou: ${r.error || '?'}`);
+                } catch { /* fica sem */ }
+                continue;
+            }
             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 */ }
         }
@@ -2042,7 +2116,8 @@ async function ferramentaSite(args) {
     return r;
 }
 
-module.exports = { variarIcones,
+module.exports = {
+    vazamentoNoComeco, variarIcones,
     ferramentaProjeto, ferramentaPlano, ferramentaMidia, ferramentaNarrar,
     ferramentaVideo, ferramentaRender, ferramentaSite,
     projeto, plano, remotion, assets, video, identidade, slides, python, rodarPython, alinharPartes, prepararRoteiro, roteiroValido, juntarVozes,

package/lib/estudio/kit/animacao.jsx

@@ -0,0 +1,41 @@
+/* kit/animacao.jsx — a animação pronta (Lottie) da biblioteca, quadro a quadro.
+ *
+ * {"tipo":"kit","peca":"animacao","src":"midia/animacoes/1f525.json","x":…,"y":…,"largura":…,"altura":…,
+ *  "loop":true,"velocidade":1}
+ *
+ * O Lottie é vetor: sai nítido em qualquer tamanho. Ele NÃO toca sozinho
+ * (o relógio do navegador faria cada render sair diferente): a cada quadro o
+ * tempo do elemento vira o quadro da animação (goToAndStop). Os arquivos vêm
+ * de colecao.js (o Noto Emoji animado do Google, CC BY 4.0). */
+import React, { useEffect, useRef, useState } from 'react';
+import { staticFile, delayRender, continueRender } from 'remotion';
+import lottie from 'lottie-web';
+
+export function Animacao({ el, t }) {
+  const caixa = useRef(null);
+  const [anim, setAnim] = useState(null);
+  const [espera] = useState(() => delayRender('animação ' + el.src));
+  useEffect(() => {
+    let vivo = true;
+    let a = null;
+    fetch(/^https?:/.test(el.src) ? el.src : staticFile(el.src))
+      .then((r) => r.json())
+      .then((dados) => {
+        if (!vivo || !caixa.current) return;
+        a = lottie.loadAnimation({ container: caixa.current, renderer: 'svg', loop: false, autoplay: false, animationData: dados,
+          rendererSettings: { preserveAspectRatio: 'xMidYMid meet' } });
+        a.addEventListener('DOMLoaded', () => { setAnim(a); continueRender(espera); });
+      })
+      .catch(() => continueRender(espera));
+    return () => { vivo = false; if (a) a.destroy(); };
+  }, [el.src]);
+  if (anim) {
+    const total = Math.max(1, anim.totalFrames - 1);
+    const q = Math.max(0, t) * (anim.frameRate || 30) * (el.velocidade || 1);
+    anim.goToAndStop(el.loop === false ? Math.min(q, total) : q % total, true);
+  }
+  const w = el.largura || 300, h = el.altura || w;
+  return <div ref={caixa} style={{ position: 'absolute', left: el.x || 0, top: el.y || 0, width: w, height: h }} />;
+}
+
+export const ANIMACAO = { animacao: Animacao };

package/lib/estudio/kit/gerativo.jsx

@@ -12,9 +12,10 @@
  * quadro as fontes carregam e cada linha é MEDIDA no navegador (delayRender):
  * o que não cabe encolhe, e o acento sabe onde fica cada palavra. */
 import React, { useState, useEffect, useMemo } from 'react';
-import { delayRender, continueRender } from 'remotion';
+import { delayRender, continueRender, Img, staticFile } from 'remotion';
+import { Animacao } from './animacao';
 import { SNAPPY, CURVAS_KIT, acaso, suave, alfa, mistura } from './base';
-import { Produto3D, Icone3D } from './tres';
+import { Produto3D, Icone3D, Heroi3D } from './tres';
 
 const ed = CURVAS_KIT.editorial, curvaCam = CURVAS_KIT.camera, arrasto = CURVAS_KIT.arrasto, acelera = CURVAS_KIT.acelera;
 const c01 = (x) => (x < 0 ? 0 : x > 1 ? 1 : x);
@@ -193,7 +194,9 @@ function leiaute(P, med) {
       if (!l.encher || !med[l.id]) continue;
       const k = l.encher + (l.coluna != null ? l.coluna : '');
       // O grid manda: a tese ocupa até ~74% da largura do bloco; só a sangria vai a 97%.
-      const s = Math.min(l.max || l.tamanho, (bl.largura * (b.cheio ? 0.97 : 0.74)) / med[l.id].w);
+      /* (10/10) A tese gigante, a parede e a marca ENCHEM o bloco (97%): com fonte
+         larga, os 74% de antes paravam "CLAUDE CODE" em 9% da altura. O resto, 80%. */
+      const s = Math.min(l.max || l.tamanho, (bl.largura * (b.cheio || ['gigante', 'parede', 'marca'].includes(b.comp) ? 0.97 : 0.8)) / med[l.id].w);
       grupo[k] = grupo[k] == null ? s : Math.min(grupo[k], s);
     }
     const tam = (l) => {
@@ -950,9 +953,24 @@ export function Gerativo({ el, t, fps }) {
             e do texto — e calmo: desenhado por cima, brigava com os dois (05/10). */}
         {noAr.filter((x) => x.heroi && x.heroi.modo === 'campo' && L[x.id]).map((x) => {
           const bl = L[x.id].bloco, some = 1 - c01((t - x.ate) / 0.14);
+          let campo3d = null;
+          if (x.heroi.tres) {
+            /* As colunas NUNCA encostam no texto: só existem numa faixa abaixo
+               (ou acima, de ponta-cabeça) do bloco MEDIDO, com folga. O campo mora
+               mais fundo que o texto (translateZ -200), então na tela ele encolhe
+               para o centro mais que o texto: a folga medida aqui só cresce lá. */
+            const folga = Math.max(x.vao || 0, 0.07 * H);
+            const ds = DUR_SAIDA[x.saida] || 0;
+            const saiDe = x.ate - ds - 0.15;
+            if (H - (bl.y1 + folga) >= 0.34 * H) campo3d = { op: 0.7, faixa: { y0: bl.y1 + folga, y1: H }, saiDe };
+            else if (bl.y - folga >= 0.34 * H) campo3d = { op: 0.7, faixa: { y0: 0, y1: bl.y - folga }, teto: true, saiDe };
+            if (!campo3d) return null;   // sem faixa livre: sem colunas
+          }
           return (
             <div key={'campo' + x.id} style={{ position: 'absolute', left: 0, top: 0, width: W, height: H, transform: 'translateZ(-200px)', opacity: some }}>
-              <Heroi b={x} t={t} P={P} slot={{ cx: (bl.x + bl.x1) / 2, cy: (bl.y + bl.y1) / 2, R: Math.min(W, H) * 0.32, op: 0.18 }} />
+              {x.heroi.tres
+                ? <Heroi3D h={x.heroi} t={t} de={x.de} ate={x.ate} W={W} H={H} slot={campo3d} />
+                : <Heroi b={x} t={t} P={P} slot={{ cx: (bl.x + bl.x1) / 2, cy: (bl.y + bl.y1) / 2, R: Math.min(W, H) * 0.32, op: 0.18 }} />}
             </div>
           );
         })}
@@ -998,10 +1016,31 @@ export function Gerativo({ el, t, fps }) {
                 // O lugar do herói: o vazio do bloco (como o ícone); sem vazio, atrás do texto e mais fraco.
                 const bl = lay.bloco, M = P.margem;
                 if (x.heroi.modo === 'campo') return null;   // desenhado atrás, antes do produto
-                const R = Math.min(W, H) * (W >= H ? 0.2 : 0.17);
+                const tres = x.heroi.modo === 'objeto3d';
+                // O 3D é GRANDE ("um 3d bem presente"): o raio pede o vazio inteiro.
+                const R = Math.min(W, H) * (tres ? (W >= H ? 0.26 : 0.22) : (W >= H ? 0.2 : 0.17));
                 let slot = null;
                 // A área segura (margem.js), com o vão do bloco; partitura antiga: a margem do mundo.
                 const S = x.seguro || { x0: M, y0: M * 1.4, x1: W - M, y1: H - M * 1.4 }, V = x.vao || 0;
+                if (tres) {
+                  /* O 3D NUNCA cruza o texto: mora no maior retângulo livre ao lado do
+                     bloco MEDIDO (com o vão e uma folga), dentro da área segura; o raio
+                     é o círculo que cabe nele, e o Heroi3D garante que a projeção inteira
+                     (anel, tubo, dolly, perspectiva) fica dentro desse raio. Sem
+                     retângulo grande o bastante: sem 3D nesta batida. */
+                  const folga = Math.max(V, 0.035 * Math.min(W, H));
+                  const livres = [
+                    { x0: bl.x1 + folga, y0: S.y0, x1: S.x1, y1: S.y1 },
+                    { x0: S.x0, y0: S.y0, x1: bl.x - folga, y1: S.y1 },
+                    { x0: S.x0, y0: S.y0, x1: S.x1, y1: bl.y - folga },
+                    { x0: S.x0, y0: bl.y1 + folga, x1: S.x1, y1: S.y1 },
+                  ].map((q) => ({ ...q, r: Math.min(q.x1 - q.x0, q.y1 - q.y0) / 2 })).sort((a, c) => c.r - a.r);
+                  const q = livres[0];
+                  if (!q || q.r < Math.min(W, H) * 0.12) return null;
+                  const ds = DUR_SAIDA[x.saida] || 0;
+                  slot = { cx: (q.x0 + q.x1) / 2, cy: (q.y0 + q.y1) / 2, R: Math.min(q.r, Math.min(W, H) * 0.3), saiDe: x.ate - ds - 0.12 };
+                  return <Heroi3D h={x.heroi} t={t} de={x.de} ate={x.ate} W={W} H={H} slot={slot} />;
+                }
                 if (S.x1 - bl.x1 - V >= R * 2.3) slot = { cx: bl.x1 + V + (S.x1 - bl.x1 - V) / 2, cy: (bl.y + bl.y1) / 2, R };
                 else if (bl.y - V - S.y0 >= R * 2.2) slot = { cx: W / 2, cy: S.y0 + (bl.y - V - S.y0) / 2, R };
                 else if (S.y1 - bl.y1 - V >= R * 2.2) slot = { cx: W / 2, cy: bl.y1 + V + (S.y1 - bl.y1 - V) / 2, R };
@@ -1037,6 +1076,25 @@ export function Gerativo({ el, t, fps }) {
                 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. */
+                /* O ÍCONE DA BIBLIOTECA (11/10): o 3D renderizado do Fluent (png) ou a
+                   animação pronta do Noto (lottie). Entra em mola, gira de leve no
+                   eixo Y e flutua, com a sombra no chão que dá peso de objeto. */
+                if (ic.png || ic.lottie) {
+                  const k = MOLA(t - ic.t), dt = t - ic.t, sai = c01((t - (x.ate - 0.25)) / 0.25);
+                  const fl = Math.sin(dt * 1.4) * 0.025 * tam, giro = Math.sin(dt * 0.9) * 10;
+                  return (
+                    <div style={{ position: 'absolute', left: Math.round(px), top: Math.round(py), width: tam, height: tam, opacity: c01(k * 1.4) * (1 - sai),
+                      transform: 'translateZ(140px) scale(' + (0.5 + 0.5 * k).toFixed(4) + ')', transformOrigin: '50% 70%' }}>
+                      <div style={{ position: 'absolute', left: '18%', right: '18%', bottom: '-4%', height: '9%', borderRadius: '50%', background: 'rgba(0,0,0,0.28)',
+                        filter: 'blur(' + (tam * 0.03).toFixed(1) + 'px)', transform: 'scale(' + (1 - fl / tam * 2).toFixed(3) + ')' }} />
+                      <div style={{ position: 'absolute', inset: 0, transform: 'translateY(' + fl.toFixed(1) + 'px) perspective(800px) rotateY(' + giro.toFixed(2) + 'deg) rotate(' + ((1 - k) * -10).toFixed(2) + 'deg)' }}>
+                        {ic.png
+                          ? <Img src={staticFile(ic.png)} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
+                          : <Animacao el={{ src: ic.lottie, x: 0, y: 0, largura: tam, altura: tam, loop: true }} t={Math.max(0, dt)} />}
+                      </div>
+                    </div>
+                  );
+                }
                 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),

package/lib/estudio/kit/index.jsx

@@ -10,6 +10,8 @@ import { TRES } from './tres';
 import { GERATIVO } from './gerativo';
 import { FLUIDO } from './fluido';
 import { PERSONAGEM } from './personagem';
+import { VOXEL } from './voxel';
+import { ANIMACAO } from './animacao';
 
-export const KIT = { ...VOX, ...MARCA, ...TRES, ...GERATIVO, ...FLUIDO, ...PERSONAGEM, papel: Papel };
+export const KIT = { ...VOX, ...MARCA, ...TRES, ...GERATIVO, ...FLUIDO, ...PERSONAGEM, ...VOXEL, ...ANIMACAO, papel: Papel };
 export { Filtros, Acabamento, Hud, CURVAS_KIT, bolhaCaminho } from './base';

package/lib/estudio/kit/tres.jsx

@@ -375,4 +375,160 @@ export function Icone3D({ el, t }) {
   );
 }
 
+
+/* ── OS HERÓIS EM 3D DE VERDADE (10/10) ───────────────────────────────────
+ * "As animações são muito iguais, quero um 3d bem presente" (Joel, com um
+ * reel de motion de referência). O herói abstrato era SVG — pontos girando
+ * num plano. Estes três são three.js: perspectiva, profundidade, luz e
+ * câmera que anda. Grandes: o raio vem do vazio do bloco (gerativo.jsx).
+ *
+ *   globo3d    a esfera de pontos e malha, girando inclinada, com um anel
+ *              de órbita; os pontos de perto maiores (perspectiva real);
+ *   fita3d     o nó que se torce, em material com verniz e a luz de
+ *              recorte na cor de acento;
+ *   colunas3d  o campo de colunas que sobe em onda, sobrevoado pela câmera
+ *              e sumindo na névoa da cor do fundo — fica ATRÁS do texto.
+ *
+ * Canvas do quadro inteiro, transparente: o objeto é posto no lugar do
+ * vazio convertendo pixel → mundo (câmera fixa, fov 30, a 12 unidades).
+ */
+const FOV3D = 30, DIST3D = 12;
+const VIS3D = 2 * DIST3D * Math.tan((FOV3D / 2) * Math.PI / 180);
+const mola3d = (x) => { const k = Math.max(0, Math.min(1, x)); return 1 - Math.pow(1 - k, 3) * Math.cos(k * 4.2); };
+
+function CameraFixa({ pos, alvo, teto }) {
+  const { camera } = useThree();
+  // De ponta-cabeça: o campo pende do alto (o texto mora embaixo).
+  camera.up.set(0, teto ? -1 : 1, 0);
+  camera.position.set(pos[0], pos[1], pos[2]);
+  camera.near = 0.1; camera.far = 80;
+  camera.lookAt(alvo[0], alvo[1], alvo[2]);
+  camera.updateProjectionMatrix();
+  return null;
+}
+
+function Globo({ r, cor, cor2, sem, tl }) {
+  const geo = useMemo(() => {
+    const N = 1100, pos = new Float32Array(N * 3), col = new Float32Array(N * 3);
+    const c1 = new THREE.Color(cor2), c2 = new THREE.Color(cor);
+    const ouro = Math.PI * (3 - Math.sqrt(5));
+    for (let i = 0; i < N; i++) {
+      const y = 1 - (i / (N - 1)) * 2, rr = Math.sqrt(1 - y * y), a = i * ouro;
+      pos.set([Math.cos(a) * rr * r, y * r, Math.sin(a) * rr * r], i * 3);
+      const c = (i * 7 + sem) % 6 === 0 ? c2 : c1;
+      col.set([c.r, c.g, c.b], i * 3);
+    }
+    const g = new THREE.BufferGeometry();
+    g.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+    g.setAttribute('color', new THREE.BufferAttribute(col, 3));
+    return g;
+  }, [r, cor, cor2, sem]);
+  return (
+    <group rotation={[0.38 + Math.sin(tl * 0.5) * 0.08, tl * 0.55 + sem * 0.01, 0.12]}>
+      <points geometry={geo}><pointsMaterial size={r * 0.06} vertexColors sizeAttenuation /></points>
+      <mesh><sphereGeometry args={[r * 0.99, 32, 20]} /><meshBasicMaterial color={cor2} wireframe transparent opacity={0.22} /></mesh>
+      <mesh rotation={[1.2, 0.3, tl * 0.4]}><torusGeometry args={[r * 1.14, r * 0.008, 8, 160]} /><meshBasicMaterial color={cor} transparent opacity={0.85} /></mesh>
+      <mesh position={[Math.cos(tl * 1.3) * r * 1.14, 0, Math.sin(tl * 1.3) * r * 1.14]} rotation={[1.2, 0.3, 0]}>
+        <sphereGeometry args={[r * 0.05, 16, 12]} /><meshBasicMaterial color={cor} />
+      </mesh>
+    </group>
+  );
+}
+
+function Fita({ r, cor, cor2, sem, tl }) {
+  return (
+    <group rotation={[0.5 + tl * 0.35, tl * 0.6 + sem * 0.02, 0.2]}>
+      <mesh>
+        <torusKnotGeometry args={[r * 0.52, r * 0.13, 280, 32, 2 + (sem % 2), 3]} />
+        <meshPhysicalMaterial color={cor2} roughness={0.28} metalness={0.35} clearcoat={0.9} clearcoatRoughness={0.2} />
+      </mesh>
+      <mesh scale={[1.02, 1.02, 1.02]}>
+        <torusKnotGeometry args={[r * 0.52, r * 0.13, 140, 12, 2 + (sem % 2), 3]} />
+        <meshBasicMaterial color={cor} wireframe transparent opacity={0.22} />
+      </mesh>
+    </group>
+  );
+}
+
+function Colunas({ cor, cor2, fundo, sem, tl }) {
+  const n = 15, passo = 0.9;
+  const base = new THREE.Color(fundo).lerp(new THREE.Color(cor2), 0.22).getStyle();
+  const acesa = new THREE.Color(cor).getStyle();
+  const els = [];
+  for (let i = 0; i < n; i++) for (let j = 0; j < n; j++) {
+    const x = (i - (n - 1) / 2) * passo, z = (j - (n - 1) / 2) * passo - tl * 1.1;
+    const d = Math.hypot(i - n / 2, j - n / 2);
+    const onda = 0.5 + 0.5 * Math.sin(d * 0.85 - tl * 2.6 + (sem % 7));
+    const h = 0.25 + 2.2 * onda * onda;
+    const crista = onda > 0.93;
+    els.push(
+      <mesh key={i + '-' + j} position={[x, h / 2 - 1.6, z]} scale={[passo * 0.78, h, passo * 0.78]}>
+        <boxGeometry args={[1, 1, 1]} />
+        <meshStandardMaterial color={crista ? acesa : base} roughness={0.55} metalness={0.15}
+          {...(crista ? { emissive: acesa, emissiveIntensity: 0.6 } : {})} />
+      </mesh>,
+    );
+  }
+  return <group>{els}</group>;
+}
+
+/* O quanto cada forma passa do raio r, no pior quadro: o anel e a lua do
+   globo (1,14 r + a lua), o nó (o tubo vai a 1,5 × 0,52 r + 0,13 r). */
+const ALCANCE3D = { globo3d: 1.2, fita3d: 0.92 };
+
+export function Heroi3D({ h, t, de, ate, W, H, slot }) {
+  const tl = Math.max(0, t - de), dur = Math.max(0.8, ate - de);
+  const k = Math.min(1.02, mola3d(tl / 0.8));
+  // Some ANTES de o texto sair (a saída dele voa pela tela): o herói nunca cruza a letra.
+  const saiDe = slot.saiDe != null ? slot.saiDe : ate - 0.25;
+  const sai = Math.max(0, Math.min(1, (t - saiDe) / 0.2));
+  const sem = h.semente || 0;
+  const cor = h.cor || '#ff5a1f', cor2 = h.cor2 || '#eeeeee', fundo = h.fundo || '#111111';
+  if (h.tipo === 'colunas3d') {
+    // O sobrevoo: a câmera alta, olhando para a frente e para baixo, andando sobre o campo.
+    const avanca = tl * 0.25;
+    return (
+      <div style={{ position: 'absolute', left: 0, top: 0, width: W, height: H, opacity: (slot.op != null ? slot.op : 0.85) * Math.min(1, tl / 0.5) * (1 - sai),
+        /* A FAIXA: as colunas só existem fora do texto (clip), com a borda esfumada. */
+        ...(slot.faixa ? { clipPath: `inset(${slot.faixa.y0}px 0 ${H - slot.faixa.y1}px 0)`,
+          WebkitMaskImage: slot.teto ? `linear-gradient(to top, transparent ${H - slot.faixa.y1}px, #000 ${H - slot.faixa.y1 + 0.06 * H}px)` : `linear-gradient(to bottom, transparent ${slot.faixa.y0}px, #000 ${slot.faixa.y0 + 0.06 * H}px)` } : {}) }}>
+        <ThreeCanvas width={W} height={H} camera={{ position: [0, 4, 9], fov: 38 }} gl={{ antialias: true, preserveDrawingBuffer: true, alpha: true }}>
+          {/* Câmera baixa olhando quase reto: o campo ocupa a metade de baixo e some na névoa — o meio fica para o texto. */}
+          <CameraFixa teto={slot.teto} pos={[Math.sin(tl * 0.3) * 1.2, 2.3, 8 - avanca]} alvo={[0, 0.9, -4 - avanca]} />
+          <fog attach="fog" args={[fundo, 6, 19]} />
+          <ambientLight intensity={0.45} />
+          <directionalLight position={[4, 8, 5]} intensity={2.2} />
+          <directionalLight position={[-6, 2, -4]} intensity={2.6} color={cor} />
+          <Colunas cor={cor} cor2={cor2} fundo={fundo} sem={sem} tl={tl} />
+        </ThreeCanvas>
+      </div>
+    );
+  }
+  const { cx, cy, R } = slot;
+  const wx = ((cx - W / 2) / H) * VIS3D, wy = (-(cy - H / 2) / H) * VIS3D;
+  /* R é o TETO do que aparece na tela (o vão livre ao lado do texto). O raio
+     no mundo sai dele de trás para a frente: o alcance da forma, a escala
+     máxima e a perspectiva do ponto mais perto da lente no fim do dolly. */
+  const F = ALCANCE3D[h.tipo] || 1.2, zMax = 0.45;
+  let r = (R / H) * VIS3D / (F * 1.02);
+  for (let i = 0; i < 3; i++) r = ((R / H) * VIS3D / (F * 1.02)) * ((DIST3D - zMax - F * r) / DIST3D);
+  // O dolly: o objeto chega do fundo e vem devagar para a lente durante a batida.
+  const z = -3.5 * (1 - Math.min(1, k)) + zMax * Math.min(1, tl / dur);
+  const esc = 0.55 + 0.45 * k;
+  return (
+    <div style={{ position: 'absolute', left: 0, top: 0, width: W, height: H, opacity: (slot.op != null ? slot.op : 1) * Math.min(1, tl / 0.3) * (1 - sai) }}>
+      <ThreeCanvas width={W} height={H} camera={{ position: [0, 0, DIST3D], fov: FOV3D }} gl={{ antialias: true, preserveDrawingBuffer: true, alpha: true }}>
+        <Ambiente forca={0.9} />
+        <ambientLight intensity={0.3} />
+        <directionalLight position={[3, 4, 6]} intensity={2.6} />
+        <directionalLight position={[-5, -1, -3]} intensity={3.2} color={cor} />
+        <pointLight position={[0, 0, 5]} intensity={0.6} />
+        <group position={[wx, wy, z]} scale={[esc, esc, esc]}>
+          {h.tipo === 'fita3d' ? <Fita r={r} cor={cor} cor2={cor2} sem={sem} tl={tl} /> : <Globo r={r} cor={cor} cor2={cor2} sem={sem} tl={tl} />}
+        </group>
+      </ThreeCanvas>
+    </div>
+  );
+}
+
 export const TRES = { produto3d: Produto3D, icone3d: Icone3D };