primocode 10.4.7 → 10.5.0

package/lib/estudio/kit/voxel.jsx

@@ -0,0 +1,609 @@
+/* kit/voxel.jsx — o vídeo GRAVADO em 3D, no visual de blocos (voxel).
+ *
+ * {"tipo":"kit","peca":"voxel","partitura":{…},"largura":1080,"altura":1920}
+ *
+ *   "esse 3D que é como eu quero e não tudo fudido como tá lá" (Joel, 11/10,
+ *    com o vídeo de referência: bonecos de blocos, o bichinho laranja do
+ *    Claude flutuando, chão de ladrilhos roxo, a parede de telas e o fundo
+ *    desfocado de lente de cinema)
+ *
+ * A partitura é a mesma do kit/personagem.jsx (lib/estudio/personagem.js: quem
+ * fala quando, os planos, a aparência). Muda o desenho:
+ *  - tudo é bloco com a quina arredondada (RoundedBoxGeometry), nada de esfera;
+ *  - o rosto é pixel: olho quadrado, sobrancelha grossa, a boca que abre com a voz;
+ *  - quem é IA vira o mascote: o corpo laranja, os olhos em fenda, quatro
+ *    perninhas, flutuando — e "fala" esticando o corpo no ritmo da voz;
+ *  - o set: chão de ladrilhos, a parede de telas com os cartões do ASSUNTO do
+ *    vídeo (os títulos saem da fala), luz de recorte roxa;
+ *  - a lente: o desfoque de profundidade (BokehPass) e o brilho das telas
+ *    (UnrealBloomPass), que é o que faz parecer render de cinema e não jogo;
+ *  - a legenda é a da referência: frase inteira, branca, no meio, sem caixa alta.
+ * Tudo é geometria do three.js: nada é baixado. */
+import React, { useMemo } from 'react';
+import { ThreeCanvas } from '@remotion/three';
+import * as THREE from 'three';
+import { useThree, useFrame } from '@react-three/fiber';
+import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
+import { BokehPass } from 'three/examples/jsm/postprocessing/BokehPass.js';
+import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
+import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
+
+const clamp = (x, a = 0, b = 1) => Math.max(a, Math.min(b, x));
+const lerp = (a, b, k) => a + (b - a) * k;
+const suave = (x) => { const k = clamp(x); return k * k * (3 - 2 * k); };
+const hash = (n) => { const s = Math.sin(n * 127.1 + 311.7) * 43758.5453; return s - Math.floor(s); };
+
+/* ── O BLOCO ─────────────────────────────────────────────────────────────
+   Toda peça é uma caixa de quina arredondada. A geometria é guardada pelo
+   tamanho: o mesmo ladrilho repetido 200 vezes é UMA geometria. */
+const GEOS = new Map();
+function geo(w, h, d, r) {
+  const raio = Math.min(r, w / 2 - 0.001, h / 2 - 0.001, d / 2 - 0.001);
+  const k = `${w}|${h}|${d}|${raio}`;
+  if (!GEOS.has(k)) GEOS.set(k, new RoundedBoxGeometry(w, h, d, 3, Math.max(0.001, raio)));
+  return GEOS.get(k);
+}
+const Bloco = ({ s, p = [0, 0, 0], rot, c, r = 0.03, rough = 0.62, metal = 0, e, ei = 1, sombra = true }) => (
+  <mesh position={p} rotation={rot} geometry={geo(s[0], s[1], s[2], r)} castShadow={sombra} receiveShadow>
+    <meshStandardMaterial color={c} roughness={rough} metalness={metal} {...(e ? { emissive: e, emissiveIntensity: ei } : {})} />
+  </mesh>
+);
+// O que é chapado no rosto (olho, boca, sobrancelha): fino, sem quina e sem sombra.
+const Chapa = ({ s, p, c, rot }) => (
+  <mesh position={p} rotation={rot}><boxGeometry args={s} /><meshStandardMaterial color={c} roughness={0.7} /></mesh>
+);
+
+/* ── A CENA POR TRÁS: a luz de ambiente e a câmera ───────────────────────── */
+function Ambiente() {
+  const { gl, scene } = useThree();
+  useMemo(() => {
+    const pm = new THREE.PMREMGenerator(gl);
+    scene.environment = pm.fromScene(new RoomEnvironment(), 0.04).texture;
+    scene.environmentIntensity = 0.22;
+    pm.dispose();
+  }, [gl, scene]);
+  return null;
+}
+
+function Camera({ pos, alvo, fov }) {
+  const { camera } = useThree();
+  camera.position.set(pos[0], pos[1], pos[2]);
+  camera.fov = fov;
+  camera.near = 0.05;
+  camera.far = 60;
+  camera.lookAt(alvo[0], alvo[1], alvo[2]);
+  camera.updateProjectionMatrix();
+  return null;
+}
+
+/* A LENTE. O compositor desenha a cena, o brilho das telas e o desfoque de
+   profundidade, nesta ordem. O useFrame com prioridade 1 tira o desenho do
+   R3F e passa para o compositor — o Remotion chama o advance() a cada quadro,
+   e é ele que dispara isto. */
+function Lente({ W, H, foco, abertura, desfoqueMax, brilho }) {
+  const { gl, scene, camera } = useThree();
+  const fx = useMemo(() => {
+    const comp = new EffectComposer(gl);
+    comp.setPixelRatio(1);
+    comp.setSize(W, H);
+    comp.addPass(new RenderPass(scene, camera));
+    const bloom = new UnrealBloomPass(new THREE.Vector2(W, H), 0.55, 0.65, 0.92);
+    comp.addPass(bloom);
+    const bokeh = new BokehPass(scene, camera, { focus: 3, aperture: 0.004, maxblur: 0.01 });
+    comp.addPass(bokeh);
+    comp.addPass(new OutputPass());
+    return { comp, bokeh, bloom };
+  }, [gl, scene, camera, W, H]);
+  fx.bokeh.uniforms.focus.value = foco;
+  fx.bokeh.uniforms.aperture.value = abertura;
+  fx.bokeh.uniforms.maxblur.value = desfoqueMax;
+  fx.bloom.strength = brilho;
+  useFrame(() => { fx.comp.render(); }, 1);
+  return null;
+}
+
+/* ── A BOCA, O GESTO E A PISCADA (os mesmos do kit/personagem.jsx) ──────── */
+const VISEMA = (ch) => {
+  if (/[aáàãâ]/.test(ch)) return [1, 0.6];
+  if (/[eéê]/.test(ch)) return [0.6, 0.85];
+  if (/[iíy]/.test(ch)) return [0.32, 1];
+  if (/[oóôõ]/.test(ch)) return [0.78, 0.3];
+  if (/[uúw]/.test(ch)) return [0.45, 0.15];
+  if (/[mbp]/.test(ch)) return [0, 0.5];
+  if (/[fv]/.test(ch)) return [0.12, 0.62];
+  if (/[lnrdt]/.test(ch)) return [0.3, 0.6];
+  return [0.22, 0.55];
+};
+
+function bocaEm(falas, quem, t) {
+  for (const f of falas) {
+    if (f.quem !== quem || t < f.de - 0.05 || t > f.ate + 0.05) continue;
+    const w = f.palavras.find((x) => t >= x.de && t <= x.ate);
+    if (!w) return [0, 0.55];
+    const letras = String(w.t).toLowerCase().replace(/[^a-záàãâéêíóôõúçy]/g, '') || 'a';
+    const p = clamp((t - w.de) / Math.max(0.05, w.ate - w.de), 0, 0.999);
+    const pos = p * letras.length;
+    const [a, l] = VISEMA(letras[Math.floor(pos)]);
+    return [a * (0.62 + 0.38 * Math.sin(Math.PI * (pos % 1))), l];
+  }
+  return [0, 0.55];
+}
+
+function boca(falas, quem, t) {
+  const amostras = [0, 1 / 60, 1 / 30].map((d) => bocaEm(falas, quem, t - d));
+  return [amostras.reduce((s, x) => s + x[0], 0) / 3, amostras.reduce((s, x) => s + x[1], 0) / 3];
+}
+
+function gesto(falas, quem, t) {
+  let esq = 0, dir = 0;
+  for (const f of falas) {
+    if (f.quem !== quem || t < f.de - 0.5 || t > f.ate + 1) continue;
+    f.palavras.forEach((w, k) => {
+      if (String(w.t).replace(/[^\p{L}\d]/gu, '').length < 6 && !/\d/.test(w.t)) return;
+      const x = (t - (w.de - 0.15)) / 1.0;
+      if (x < 0 || x > 1) return;
+      const b = Math.sin(Math.PI * x);
+      if (k % 2) esq = Math.max(esq, b); else dir = Math.max(dir, b);
+    });
+  }
+  return [esq, dir];
+}
+
+function piscada(quem, t) {
+  let base = 0.6 + quem * 1.3, k = 0;
+  while (base < t + 1) {
+    const d = t - base;
+    if (d >= 0 && d < 0.14) return Math.sin((d / 0.14) * Math.PI);
+    if (hash(quem * 31 + k) < 0.2) { const d2 = t - (base + 0.28); if (d2 >= 0 && d2 < 0.14) return Math.sin((d2 / 0.14) * Math.PI); }
+    base += 2.4 + hash(quem * 17 + k) * 2.6;
+    k++;
+  }
+  return 0;
+}
+
+const EMO = {
+  neutro: { sobr: 0, inclina: 0 },
+  feliz: { sobr: 0.3, inclina: 0.04 },
+  animado: { sobr: 0.6, inclina: 0 },
+  serio: { sobr: -0.5, inclina: 0 },
+  surpreso: { sobr: 0.9, inclina: 0 },
+  pensativo: { sobr: -0.15, inclina: 0.12 },
+  curioso: { sobr: 0.45, inclina: 0.1 },
+};
+
+/* ── A PESSOA DE BLOCOS ─────────────────────────────────────────────────
+   A cabeça é um cubo de 0,62: o rosto mora na face da frente (z = 0,31). */
+const CAB = 0.62;
+const FACE = CAB / 2 + 0.004;
+const escurecer = (c, k) => new THREE.Color(c).multiplyScalar(k).getStyle();
+
+function Cabelo({ estilo, cor }) {
+  const s = CAB;
+  const topo = <Bloco s={[s + 0.04, 0.16, s + 0.04]} p={[0, s / 2 + 0.02, -0.005]} c={cor} r={0.03} rough={0.85} />;
+  const nuca = <Bloco s={[s + 0.04, s * 0.62, 0.1]} p={[0, s * 0.14, -s / 2 - 0.02]} c={cor} r={0.03} rough={0.85} />;
+  const lados = [-1, 1].map((k) => <Bloco key={k} s={[0.06, s * 0.42, s * 0.7]} p={[k * (s / 2 + 0.02), s * 0.24, -0.08]} c={cor} r={0.02} rough={0.85} />);
+  if (estilo === 'careca') return null;
+  if (estilo === 'cacheado') {
+    return (
+      <group>
+        {nuca}{lados}
+        {[...Array(9)].map((_, i) => {
+          const x = ((i % 3) - 1) * 0.22, z = (Math.floor(i / 3) - 1) * 0.22;
+          return <Bloco key={i} s={[0.24, 0.2 + hash(i) * 0.06, 0.24]} p={[x, s / 2 + 0.06 + hash(i + 3) * 0.03, z - 0.01]} c={cor} r={0.05} rough={0.9} />;
+        })}
+      </group>
+    );
+  }
+  return (
+    <group>
+      {topo}{nuca}{lados}
+      {/* a franja: um degrau na testa, o que dá a cara do boneco da referência */}
+      <Bloco s={[s * 0.62, 0.1, 0.1]} p={[-s * 0.16, s / 2 - 0.05, s / 2 - 0.02]} c={cor} r={0.02} rough={0.85} />
+      {estilo === 'topete' && <Bloco s={[s * 0.7, 0.16, 0.26]} p={[0.04, s / 2 + 0.13, s / 2 - 0.12]} c={cor} r={0.04} rough={0.85} />}
+      {estilo === 'coque' && <Bloco s={[0.24, 0.24, 0.24]} p={[0, s / 2 + 0.08, -s / 2 + 0.02]} c={cor} r={0.05} rough={0.85} />}
+      {estilo === 'longo' && (
+        <>
+          <Bloco s={[s + 0.06, s * 1.05, 0.12]} p={[0, -0.06, -s / 2 - 0.04]} c={cor} r={0.03} rough={0.85} />
+          {[-1, 1].map((k) => <Bloco key={k} s={[0.08, s * 0.95, s * 0.6]} p={[k * (s / 2 + 0.03), -0.02, -0.1]} c={cor} r={0.02} rough={0.85} />)}
+        </>
+      )}
+    </group>
+  );
+}
+
+function RostoPixel({ p, est }) {
+  const e = EMO[est.emocao] || EMO.neutro;
+  const sobr = e.sobr + est.enfase * 0.4;
+  const [abre, larg] = est.boca;
+  const pisca = clamp(est.pisca);
+  const escuro = '#141016';
+  const olhoH = 0.14 * (1 - pisca * 0.9);
+  // O olhar: a pupila anda dentro do branco do olho.
+  const ox = clamp(est.olhar[0], -1, 1) * 0.025, oy = clamp(est.olhar[1], -1, 1) * 0.02;
+  return (
+    <group>
+      {[-1, 1].map((k) => (
+        <group key={k} position={[k * 0.135, 0.035, FACE]}>
+          <Chapa s={[0.13, olhoH, 0.012]} p={[0, 0, 0]} c="#d6d2cc" />
+          {pisca < 0.6 && <Chapa s={[0.065, Math.min(olhoH, 0.085), 0.016]} p={[ox + k * 0.012, oy - 0.005, 0.002]} c={escuro} />}
+          {/* a sobrancelha grossa: sobe e desce com a emoção, inclina no sério */}
+          <Chapa s={[0.17, 0.05, 0.02]} p={[0, 0.125 + sobr * 0.03, 0.004]}
+            rot={[0, 0, k * (est.emocao === 'serio' ? 0.22 : est.emocao === 'surpreso' ? -0.08 : 0.04) - k * sobr * 0.06]} c={p.corCabelo} />
+        </group>
+      ))}
+      {/* o nariz: um degrauzinho de pele mais escura */}
+      <Bloco s={[0.07, 0.11, 0.05]} p={[0, -0.04, FACE + 0.015]} c={escurecer(p.pele, 0.86)} r={0.012} sombra={false} />
+      {/* a boca: um retângulo escuro que abre com a vogal e estica no "i" */}
+      <Chapa s={[0.1 + 0.1 * larg, 0.028 + 0.1 * abre, 0.012]} p={[0, -0.165 - 0.03 * abre, FACE]} c="#3a1416" />
+      {abre > 0.35 && <Chapa s={[0.08 + 0.06 * larg, 0.022, 0.014]} p={[0, -0.155 + 0.02 * abre, FACE + 0.001]} c="#efe9e1" />}
+      {p.barba && (
+        <>
+          <Chapa s={[CAB + 0.006, 0.17, 0.008]} p={[0, -CAB / 2 + 0.085, FACE - 0.002]} c={escurecer(p.corCabelo, 1)} />
+          {[-1, 1].map((k) => <Chapa key={k} s={[0.008, 0.26, CAB * 0.7]} p={[k * (CAB / 2 + 0.003), -CAB / 2 + 0.13, 0.04]} c={p.corCabelo} />)}
+        </>
+      )}
+      {p.oculos && (
+        <group position={[0, 0.035, FACE + 0.03]}>
+          {[-1, 1].map((k) => (
+            <group key={k} position={[k * 0.135, 0, 0]}>
+              {[[0, 0.085, 0.2, 0.025], [0, -0.085, 0.2, 0.025], [-0.0875, 0, 0.025, 0.19], [0.0875, 0, 0.025, 0.19]].map(([x, y, w, h], i) => (
+                <Chapa key={i} s={[w, h, 0.02]} p={[x, y, 0]} c="#111114" />
+              ))}
+            </group>
+          ))}
+          <Chapa s={[0.07, 0.022, 0.02]} p={[0, 0.03, 0]} c="#111114" />
+        </group>
+      )}
+    </group>
+  );
+}
+
+function BracoBloco({ lado, g, cor, pele, t }) {
+  // Repouso: o braço caído, um tico para fora. Gesto: o antebraço sobe e a mão mexe.
+  const ombroX = lerp(0.08, -0.85, g) + Math.sin(t * 6 + lado) * 0.06 * g;
+  const ombroZ = lado * lerp(0.06, 0.22, g);
+  const cotovelo = lerp(-0.12, -1.05, g) + Math.sin(t * 7.3 + lado * 2) * 0.14 * g;
+  return (
+    <group position={[lado * 0.47, 1.4, 0]} rotation={[ombroX, 0, ombroZ]}>
+      <Bloco s={[0.2, 0.36, 0.2]} p={[0, -0.17, 0]} c={cor} r={0.04} rough={0.8} />
+      <group position={[0, -0.34, 0]} rotation={[cotovelo, 0, 0]}>
+        <Bloco s={[0.19, 0.3, 0.19]} p={[0, -0.14, 0]} c={cor} r={0.04} rough={0.8} />
+        <Bloco s={[0.17, 0.17, 0.17]} p={[0, -0.36, 0]} c={pele} r={0.035} />
+      </group>
+    </group>
+  );
+}
+
+function PessoaBloco({ p, est }) {
+  const resp = Math.sin(est.t * 1.7) * 0.008;
+  const [cy, cp, cr] = est.cabeca;
+  const calca = escurecer(p.roupa, 0.35);
+  return (
+    <group>
+      {/* as pernas e o sapato */}
+      {[-1, 1].map((k) => (
+        <group key={k}>
+          <Bloco s={[0.25, 0.72, 0.27]} p={[k * 0.15, 0.4, 0]} c={calca} r={0.03} rough={0.85} />
+          <Bloco s={[0.27, 0.1, 0.36]} p={[k * 0.15, 0.05, 0.04]} c="#1a1a1f" r={0.03} />
+        </group>
+      ))}
+      <group position={[0, resp, 0]}>
+        {/* o tronco, com a faixa branca da camisa da referência */}
+        <Bloco s={[0.76, 0.66, 0.4]} p={[0, 1.1, 0]} c={p.roupa} r={0.05} rough={0.8} />
+        <Bloco s={[0.06, 0.5, 0.02]} p={[0.17, 1.12, 0.205]} c="#dcd8d0" r={0.008} sombra={false} />
+        <Bloco s={[0.22, 0.08, 0.22]} p={[0, 1.46, 0]} c={escurecer(p.pele, 0.88)} r={0.02} />
+      </group>
+      <BracoBloco lado={-1} g={est.gesto[0]} cor={p.roupa} pele={p.pele} t={est.t} />
+      <BracoBloco lado={1} g={est.gesto[1]} cor={p.roupa} pele={p.pele} t={est.t} />
+      <group position={[0, 1.8 + resp, 0]} rotation={[cp, cy, cr]}>
+        <Bloco s={[CAB, CAB, CAB]} c={p.pele} r={0.04} rough={0.6} />
+        <RostoPixel p={p} est={est} />
+        <Cabelo estilo={p.cabelo} cor={p.corCabelo} />
+      </group>
+    </group>
+  );
+}
+
+/* ── O MASCOTE (quem é IA) ──────────────────────────────────────────────
+   O corpo laranja de quina mole, dois olhos em fenda, os bracinhos de lado e
+   quatro perninhas. Não tem boca: ele fala com o CORPO — estica para cima na
+   vogal aberta e encolhe no "m" —, e flutua devagar. */
+function Mascote({ p, est }) {
+  const cor = p.cor || '#d97757';
+  const [abre] = est.boca;
+  const bob = Math.sin(est.t * 1.9 + 0.7) * 0.05;
+  const estica = 1 + abre * 0.1, achata = 1 - abre * 0.05;
+  const pisca = clamp(est.pisca);
+  const [cy, cp, cr] = est.cabeca;
+  const pe = (x, z, k) => <Bloco key={k} s={[0.1, 0.22, 0.1]} p={[x, -0.33 + Math.sin(est.t * 5 + k) * 0.02, z]} c={escurecer(cor, 0.92)} r={0.025} />;
+  return (
+    <group position={[0, 1.55 + bob, 0]} rotation={[cp * 0.6, cy, cr + Math.sin(est.t * 1.3) * 0.03]}>
+      <group scale={[achata, estica, achata]}>
+        <Bloco s={[0.82, 0.5, 0.52]} c={cor} r={0.07} rough={0.55} />
+        {[-1, 1].map((k) => (
+          <Bloco key={k} s={[0.14, 0.16, 0.22]} p={[k * 0.47, 0.02 + (est.gesto[k > 0 ? 1 : 0] * 0.08), 0]} c={cor} r={0.04} rough={0.55} />
+        ))}
+        {[-1, 1].map((k) => <Chapa key={'o' + k} s={[0.065, 0.15 * (1 - pisca * 0.85), 0.012]} p={[k * 0.17, 0.05, 0.264]} c="#141016" />)}
+      </group>
+      {pe(-0.27, 0.13, 1)}{pe(-0.1, 0.13, 2)}{pe(0.1, 0.13, 3)}{pe(0.27, 0.13, 4)}
+    </group>
+  );
+}
+
+/* ── O SET ─────────────────────────────────────────────────────────────── */
+
+/* Um cartão de tela: o painel escuro com o ícone, o título do assunto, duas
+   linhas de texto, a barra de progresso e a bolinha verde de "rodando". É
+   desenhado num canvas 2D e vira textura que BRILHA (o bloom pega). */
+function texturaCartao(titulo, linha, cor, acento, k) {
+  const cv = document.createElement('canvas');
+  cv.width = 512; cv.height = 320;
+  const g = cv.getContext('2d');
+  const r = 26;
+  g.fillStyle = cor; g.beginPath(); g.roundRect(6, 6, 500, 308, r); g.fill();
+  g.strokeStyle = 'rgba(160,175,255,0.35)'; g.lineWidth = 3; g.stroke();
+  g.fillStyle = acento; g.beginPath(); g.roundRect(34, 34, 44, 44, 8); g.fill();
+  g.fillStyle = '#eef1ff'; g.font = '600 34px Inter, "Helvetica Neue", Arial, sans-serif';
+  g.fillText(String(titulo).slice(0, 18), 96, 68);
+  g.fillStyle = '#3ddc84'; g.beginPath(); g.arc(462, 56, 10, 0, Math.PI * 2); g.fill();
+  g.fillStyle = 'rgba(205,212,255,0.75)'; g.font = '400 24px Inter, "Helvetica Neue", Arial, sans-serif';
+  g.fillText(String(linha).slice(0, 30), 36, 132);
+  g.fillStyle = 'rgba(205,212,255,0.28)';
+  g.beginPath(); g.roundRect(36, 160, 300 + hash(k) * 120, 16, 8); g.fill();
+  g.beginPath(); g.roundRect(36, 192, 200 + hash(k + 4) * 160, 16, 8); g.fill();
+  g.fillStyle = 'rgba(205,212,255,0.18)'; g.beginPath(); g.roundRect(36, 262, 440, 10, 5); g.fill();
+  g.fillStyle = '#8fa2ff'; g.beginPath(); g.roundRect(36, 262, 120 + hash(k + 9) * 300, 10, 5); g.fill();
+  const tx = new THREE.CanvasTexture(cv);
+  tx.colorSpace = THREE.SRGBColorSpace;
+  tx.anisotropy = 4;
+  return tx;
+}
+
+function ParedeDeTelas({ c, paineis, t }) {
+  const texturas = useMemo(() => {
+    const lista = paineis && paineis.length ? paineis : [{ titulo: 'Agora', linha: '' }];
+    return Array.from({ length: 16 }, (_, i) => {
+      const pn = lista[i % lista.length];
+      return texturaCartao(pn.titulo, pn.linha || '', c.tela, c.acento, i);
+    });
+  }, [paineis, c.tela, c.acento]);
+  // Duas fileiras de seis telas, num arco suave atrás do set.
+  const telas = [];
+  for (let fila = 0; fila < 2; fila++) {
+    for (let i = 0; i < 8; i++) {
+      const x = (i - 3.5) * 1.62;
+      const ang = -x * 0.07;
+      const z = -3.4 + Math.abs(x) * 0.12;
+      telas.push({ k: fila * 8 + i, x, y: 1.25 + fila * 1.08, z, ang });
+    }
+  }
+  return (
+    <group>
+      {/* a estrutura escura onde as telas moram */}
+      <Bloco s={[16, 3.2, 0.3]} p={[0, 1.78, -3.75]} c={c.parede} r={0.05} rough={0.9} sombra={false} />
+      {telas.map((s) => {
+        const vivo = 0.82 + 0.18 * Math.sin(t * 2 + s.k * 1.7);
+        return (
+          <group key={s.k} position={[s.x, s.y, s.z]} rotation={[0, s.ang, 0]}>
+            <Bloco s={[1.54, 0.98, 0.07]} c="#0a0c18" r={0.04} rough={0.4} sombra={false} />
+            <mesh position={[0, 0, 0.04]}>
+              <planeGeometry args={[1.46, 0.9]} />
+              <meshStandardMaterial map={texturas[s.k]} emissiveMap={texturas[s.k]} emissive="#ffffff" emissiveIntensity={0.55 * vivo} roughness={0.35} toneMapped />
+            </mesh>
+          </group>
+        );
+      })}
+      {/* a fileira de luzinhas em cima da parede, como na referência */}
+      {Array.from({ length: 9 }, (_, i) => (
+        <Bloco key={'l' + i} s={[0.16, 0.1, 0.1]} p={[(i - 4) * 1.15, 3.15, -3.55]} c={c.acento} e={c.acento} ei={1.6 + 0.6 * Math.sin(t * 3 + i)} r={0.02} sombra={false} />
+      ))}
+    </group>
+  );
+}
+
+function ChaoDeLadrilhos({ c }) {
+  // Ladrilhos de 0,9 com junta escura: a grade que dá escala ao set.
+  const pecas = useMemo(() => {
+    const out = [];
+    for (let i = -7; i <= 7; i++) for (let j = -5; j <= 6; j++) out.push([i * 0.92 + (j % 2 ? 0.46 : 0), j * 0.6, hash(i * 13 + j * 7)]);
+    return out;
+  }, []);
+  return (
+    <group>
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.02, 0]} receiveShadow>
+        <planeGeometry args={[40, 40]} /><meshStandardMaterial color={escurecer(c.chao, 0.45)} roughness={0.9} />
+      </mesh>
+      {pecas.map(([x, z, k], i) => (
+        <mesh key={i} position={[x, -0.03, z]} geometry={geo(0.88, 0.1, 0.56, 0.035)} receiveShadow>
+          <meshStandardMaterial color={k > 0.5 ? c.chao : c.chao2} roughness={0.42} metalness={0.05} />
+        </mesh>
+      ))}
+    </group>
+  );
+}
+
+/* ── A CÂMERA ──────────────────────────────────────────────────────────── */
+function lugarDe(el, i) {
+  const dois = el.length > 1;
+  return dois ? [(el[i].lado || 0) * 0.78, 0, 0] : [0, 0, 0];
+}
+function giroDe(el, i) { return el.length > 1 ? (el[i].lado < 0 ? 0.42 : -0.42) : 0; }
+function alturaDaCabeca(p) { return p && p.tipo === 'robo' ? 1.55 : 1.8; }
+
+function cameraDe(pl, t, part, aspecto) {
+  const vert = aspecto < 1;
+  const el = part.elenco;
+  const dois = el.length > 1;
+  const quem = el[pl.alvo] ? pl.alvo : 0;
+  const cabeca = (i) => { const p = lugarDe(el, i); return [p[0], alturaDaCabeca(el[i]), p[2]]; };
+  const frente = (i) => [Math.sin(giroDe(el, i)), 0, Math.cos(giroDe(el, i))];
+  const k = clamp((t - pl.de) / Math.max(0.5, pl.ate - pl.de));
+  const fovK = vert ? 1.45 : 1;
+  let pos, alvo, fov;
+  if (pl.tipo === 'aberto' || pl.tipo === 'largo') {
+    // O plano aberto de cima, como o da referência: o set inteiro e a parede de telas.
+    fov = (pl.tipo === 'largo' ? 38 : 34) * fovK;
+    const dist = pl.tipo === 'largo' ? (vert ? 8.2 : 6.6) : (vert ? 6.6 : 5.2);
+    pos = [pl.lado * 0.5, pl.tipo === 'largo' ? 3.1 : 2.5, dist];
+    alvo = [0, 1.45, -0.6];
+  } else if (pl.tipo === 'ombro' && dois) {
+    const o = 1 - quem, h = cabeca(o), s = cabeca(quem);
+    const d = [h[0] - s[0], h[2] - s[2]], n = Math.hypot(d[0], d[1]) || 1;
+    pos = [h[0] + (d[0] / n) * 0.9, h[1] + 0.25, h[2] + 1.6];
+    alvo = [s[0], s[1] - 0.1, s[2]]; fov = 32 * fovK;
+  } else {
+    /* O close da referência é de BAIXO e perto, com a lente aberta: o rosto
+       enorme e o resto derretendo no desfoque. */
+    const dist = (pl.tipo === 'detalhe' ? 1.25 : pl.tipo === 'close' ? 1.7 : 2.7) * (vert ? 1.25 : 1);
+    fov = (pl.tipo === 'detalhe' ? 30 : pl.tipo === 'close' ? 32 : 34) * fovK;
+    const h = cabeca(quem), f = frente(quem);
+    const lado = pl.lado * 0.42;
+    const dir = [f[0] * Math.cos(lado) - f[2] * Math.sin(lado), 0, f[0] * Math.sin(lado) + f[2] * Math.cos(lado)];
+    const baixo = pl.tipo === 'medio' ? 0.05 : -0.32;
+    pos = [h[0] + dir[0] * dist, h[1] + baixo, h[2] + dir[2] * dist];
+    alvo = [h[0], h[1] + (pl.tipo === 'medio' ? -0.35 : -0.02), h[2]];
+  }
+  const m = suave(k);
+  if (pl.mov === 'entra' || pl.mov === 'sai') {
+    const s = pl.mov === 'entra' ? m : 1 - m;
+    pos = pos.map((v, i) => lerp(v, alvo[i], 0.12 * s));
+  } else if (pl.mov === 'lateral') {
+    pos = [pos[0] + (m - 0.5) * 0.45 * pl.lado, pos[1], pos[2]];
+  }
+  const mao = [Math.sin(t * 1.3) * 0.01 + Math.sin(t * 3.1) * 0.004, Math.sin(t * 1.1 + 1) * 0.008 + Math.sin(t * 2.7) * 0.003, 0];
+  pos = pos.map((v, i) => v + (mao[i] || 0));
+  alvo = alvo.map((v, i) => v + (mao[i] || 0) * 0.5);
+  /* O FOCO é no ROSTO, não no centro da cabeça: a cara fica 0,3 m mais perto
+     da câmera que o alvo. No plano aberto, no meio do set. A abertura é
+     pequena (a lente de perto já borra muito por metro), e o teto do
+     desfoque é que dá o fundo derretido da referência. */
+  const aoAlvo = Math.hypot(pos[0] - alvo[0], pos[1] - alvo[1], pos[2] - alvo[2]);
+  const deRosto = pl.tipo !== 'aberto' && pl.tipo !== 'largo';
+  const foco = deRosto ? Math.max(0.4, aoAlvo - 0.28) : aoAlvo;
+  const perto = pl.tipo === 'detalhe' || pl.tipo === 'close';
+  return { pos, alvo, fov, foco, abertura: perto ? 0.012 : pl.tipo === 'ombro' ? 0.01 : pl.tipo === 'medio' ? 0.008 : 0.003, desfoqueMax: perto ? 0.03 : pl.tipo === 'ombro' ? 0.024 : 0.012 };
+}
+
+/* ── POR CIMA: a legenda da referência ─────────────────────────────────── */
+const FONTE = "'Inter','SF Pro Display','Helvetica Neue',Arial,sans-serif";
+
+function pedacos(palavras) {
+  const out = [];
+  let cur = [];
+  for (const w of palavras) {
+    cur.push(w);
+    const letras = cur.reduce((n, x) => n + String(x.t).length + 1, 0);
+    if (letras > 30 || /[.!?;:]$/.test(w.t) || (cur.length >= 4 && /,$/.test(w.t))) { out.push(cur); cur = []; }
+  }
+  if (cur.length) out.push(cur);
+  return out;
+}
+
+function Legenda({ part, t, W, H }) {
+  const f = part.falas.find((x) => t >= x.de - 0.1 && t <= x.ate + 0.35);
+  if (!f) return null;
+  const grupos = pedacos(f.palavras);
+  const g = grupos.find((gr) => t <= gr[gr.length - 1].ate + 0.2) || grupos[grupos.length - 1];
+  const entra = suave((t - (g[0].de - 0.08)) / 0.18);
+  const sai = 1 - suave((t - (f.ate + 0.15)) / 0.2);
+  const tam = Math.round(H > W ? W * 0.052 : H * 0.05);
+  const texto = g.map((w) => w.t).join(' ');
+  return (
+    <div style={{ position: 'absolute', left: 0, right: 0, top: H * (H > W ? 0.36 : 0.74), display: 'flex', justifyContent: 'center', padding: `0 ${W * 0.1}px` }}>
+      <div style={{ fontFamily: FONTE, fontWeight: 600, fontSize: tam, lineHeight: 1.2, color: '#ffffff', textAlign: 'center', letterSpacing: '-0.005em',
+        opacity: entra * sai, transform: `translateY(${(1 - entra) * tam * 0.15}px)`,
+        textShadow: '0 2px 12px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.6)' }}>{texto}</div>
+    </div>
+  );
+}
+
+function Destaque({ part, t, W, H, acento }) {
+  const f = part.falas.find((x) => x.destaque && t >= x.de + 0.3 && t <= Math.min(x.ate + 0.3, x.de + 3));
+  if (!f) return null;
+  const k = t - (f.de + 0.3);
+  const fim = Math.min(f.ate + 0.3, f.de + 3) - (f.de + 0.3);
+  const s = suave(k / 0.3) * (1 - suave((k - fim + 0.3) / 0.3));
+  const tam = Math.round(Math.min(W, H) * 0.045);
+  return (
+    <div style={{ position: 'absolute', left: 0, right: 0, top: H * (H > W ? 0.12 : 0.08), display: 'flex', justifyContent: 'center' }}>
+      <div style={{ opacity: s, transform: `translateY(${(1 - s) * -12}px)`, background: 'rgba(12,14,32,0.72)', border: `2px solid ${acento}`, borderRadius: tam * 0.5,
+        padding: `${tam * 0.3}px ${tam * 0.7}px`, fontFamily: FONTE, fontWeight: 700, fontSize: tam, color: '#fff', boxShadow: `0 0 ${tam * 0.8}px ${acento}66` }}>{f.destaque}</div>
+    </div>
+  );
+}
+
+/* ── A PEÇA ────────────────────────────────────────────────────────────── */
+export function VoxelCena({ el, t }) {
+  const part = el.partitura || {};
+  const W = el.largura || part.largura || 1080, H = el.altura || part.altura || 1920;
+  const c = { parede: '#07061a', chao: '#4338ca', chao2: '#3b32b8', acento: '#ff7a45', luz: '#ffd2b0', tela: '#101734', recorte: '#8b7bff', ...(part.cenario || {}) };
+  const elenco = part.elenco || [];
+  const falas = part.falas || [];
+  const planos = part.planos || [{ de: 0, ate: part.duracao || 10, tipo: 'aberto', alvo: 0, mov: 'fixo', lado: 1 }];
+  const dois = elenco.length > 1;
+  const pl = planos.find((x) => t >= x.de && t < x.ate) || planos[planos.length - 1];
+  const cam = cameraDe(pl, t, part, W / H);
+
+  const falandoAgora = (i) => falas.some((f) => f.quem === i && t >= f.de && t <= f.ate);
+  const emocaoDe = (i) => {
+    let e = 'neutro';
+    for (const f of falas) if (f.quem === i && f.de <= t + 0.2) e = t <= f.ate + 2.5 ? f.emocao : 'neutro';
+    return e;
+  };
+  const estado = (i) => {
+    const fala = falandoAgora(i);
+    const outro = dois && falandoAgora(1 - i);
+    const enfase = gesto(falas, i, t);
+    const nod = Math.sin(t * (fala ? 5.2 : 1.4) + i) * (fala ? 0.04 : 0.015) + (outro ? Math.max(0, Math.sin(t * 2.1 + i)) * 0.04 : 0);
+    const emo = emocaoDe(i);
+    const e = EMO[emo] || EMO.neutro;
+    const micro = (hash(Math.floor(t * 1.5) + i * 7) - 0.5) * 0.6;
+    // Quem ouve vira um pouco para quem fala; quem fala olha para a câmera de vez em quando.
+    const paraOOutro = dois ? (elenco[i].lado < 0 ? 0.25 : -0.25) : 0;
+    return {
+      t, falando: fala, emocao: emo, boca: boca(falas, i, t), pisca: piscada(i, t),
+      gesto: enfase, enfase: Math.max(enfase[0], enfase[1]),
+      olhar: [micro + (outro ? (elenco[i].lado < 0 ? 0.8 : -0.8) : 0), 0.1],
+      cabeca: [Math.sin(t * 0.7 + i * 2) * 0.07 + (outro ? paraOOutro : 0), nod, (e.inclina || 0) * (i ? -1 : 1) + Math.sin(t * 0.5 + i) * 0.02],
+    };
+  };
+  const fadeIn = clamp(t / 0.5), fadeOut = clamp((part.duracao - t) / 0.6);
+
+  return (
+    <div style={{ position: 'absolute', left: el.x || 0, top: el.y || 0, width: W, height: H, overflow: 'hidden', background: '#000' }}>
+      <div style={{ position: 'absolute', inset: 0, opacity: Math.min(fadeIn, fadeOut) }}>
+        <ThreeCanvas width={W} height={H} shadows camera={{ position: [0, 2, 6], fov: 36 }}
+          gl={{ antialias: true, preserveDrawingBuffer: true, toneMapping: THREE.ACESFilmicToneMapping, toneMappingExposure: 1.0 }}>
+          <Camera pos={cam.pos} alvo={cam.alvo} fov={cam.fov} />
+          <Ambiente />
+          <color attach="background" args={[c.parede]} />
+          <fog attach="fog" args={[c.parede, 9, 20]} />
+          <hemisphereLight args={[c.recorte, escurecer(c.chao, 0.4), 0.55]} />
+          {/* a luz principal, quente, de cima e da frente: o que dá volume aos blocos */}
+          <spotLight position={[2.2, 5.2, 4.4]} angle={0.5} penumbra={0.8} intensity={120} distance={22} decay={2} color={c.luz} castShadow
+            shadow-mapSize-width={2048} shadow-mapSize-height={2048} shadow-bias={-0.0003} shadow-radius={4} />
+          {/* o recorte roxo por trás, que separa o boneco do fundo */}
+          <spotLight position={[-2.5, 3.6, -2.4]} angle={0.7} penumbra={1} intensity={60} distance={14} decay={2} color={c.recorte} />
+          <pointLight position={[0, 2, -2.6]} intensity={16} distance={8} color="#6f7dff" />
+          <directionalLight position={[-3, 2, 4]} intensity={0.35} color="#c9d4ff" />
+          <ChaoDeLadrilhos c={c} />
+          <ParedeDeTelas c={c} paineis={part.paineis} t={t} />
+          {elenco.map((p, i) => (
+            <group key={i} position={lugarDe(elenco, i)} rotation={[0, giroDe(elenco, i), 0]}>
+              {p.tipo === 'robo' ? <Mascote p={p} est={estado(i)} /> : <PessoaBloco p={p} est={estado(i)} />}
+            </group>
+          ))}
+          <Lente W={W} H={H} foco={cam.foco} abertura={cam.abertura} desfoqueMax={cam.desfoqueMax} brilho={0.5} />
+        </ThreeCanvas>
+        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%)' }} />
+        <Destaque part={part} t={t} W={W} H={H} acento={c.acento} />
+        {part.legenda !== false && <Legenda part={part} t={t} W={W} H={H} />}
+      </div>
+    </div>
+  );
+}
+
+export const VOXEL = { voxel: VoxelCena };

package/lib/estudio/kit.js

@@ -61,9 +61,13 @@ const PECAS = {
     fluido: { precisa: ['partitura'] },
     // O vídeo gravado em 3D (kit/personagem.jsx): o set, os personagens e a câmera (personagem.js).
     personagem: { precisa: ['partitura'] },
+    // O mesmo vídeo gravado, no visual de blocos da referência (kit/voxel.jsx): o padrão desde a 10.5.
+    voxel: { precisa: ['partitura'] },
+    // A animação pronta da biblioteca (kit/animacao.jsx, colecao.js): o Lottie tocado quadro a quadro.
+    animacao: { precisa: ['src'] },
 };
 
-const ARQUIVOS = ['base.jsx', 'vox.jsx', 'marca.jsx', 'tres.jsx', 'gerativo.jsx', 'fluido.jsx', 'personagem.jsx', 'index.jsx'];
+const ARQUIVOS = ['base.jsx', 'vox.jsx', 'marca.jsx', 'tres.jsx', 'gerativo.jsx', 'fluido.jsx', 'personagem.jsx', 'voxel.jsx', 'animacao.jsx', 'index.jsx'];
 
 /** Os arquivos do kit, para o projeto Remotion: [{nome: 'kit/base.jsx', conteudo}]. */
 function arquivos() {