primocode 10.5.0 → 10.7.0

package/lib/estudio/kit/voxel.jsx

@@ -30,6 +30,7 @@ import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPa
 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';
+import { Mundo, Animal, Coisa, alturaDoBicho, useIcones } from './mundo.jsx';
 
 const clamp = (x, a = 0, b = 1) => Math.max(a, Math.min(b, x));
 const lerp = (a, b, k) => a + (b - a) * k;
@@ -261,11 +262,121 @@ function RostoPixel({ p, est }) {
   );
 }
 
-function BracoBloco({ lado, g, cor, pele, t }) {
+
+/* ── A CABEÇA FACETADA (o padrão desde a 2ª referência, 11/10) ────────────
+   "olha como quero o 3D": o rosto da referência é LOW-POLY — uma esfera de
+   poucas faces com sombreado chapado, nariz de pirâmide, sobrancelha grossa,
+   o cabelo cacheado feito de dezenas de pedrinhas facetadas. O corpo segue
+   de blocos. `cabeca: 'cubo'` volta ao rosto de pixel da 10.5. */
+const GEO_FACETA = new Map();
+function faceta(det) {
+  if (!GEO_FACETA.has(det)) GEO_FACETA.set(det, new THREE.IcosahedronGeometry(1, det));
+  return GEO_FACETA.get(det);
+}
+const Faceta = ({ p = [0, 0, 0], s = [1, 1, 1], rot, c, det = 1, rough = 0.75, sombra = true }) => (
+  <mesh position={p} scale={s} rotation={rot} geometry={faceta(det)} castShadow={sombra} receiveShadow>
+    <meshStandardMaterial color={c} roughness={rough} flatShading />
+  </mesh>
+);
+
+function CabeloFacetado({ estilo, cor }) {
+  const pedras = useMemo(() => {
+    if (estilo === 'careca') return [];
+    const out = [];
+    const n = estilo === 'cacheado' ? 46 : estilo === 'longo' ? 34 : estilo === 'coque' ? 22 : 24;
+    for (let i = 0; i < n; i++) {
+      // Espalhadas na calota de cima e de trás da cabeça (nunca na testa baixa nem no rosto).
+      const u = hash(i * 3.7 + 1), v = hash(i * 9.1 + 4);
+      const az = u * Math.PI * 2;
+      const el = estilo === 'longo' ? -0.9 + v * 2.2 : 0.15 + v * 1.25;
+      const atras = Math.cos(az) < 0.35 || el > 0.75;
+      if (!atras) continue;
+      const r = estilo === 'cacheado' ? 0.105 + hash(i) * 0.05 : 0.09 + hash(i) * 0.03;
+      out.push({ p: [Math.sin(az) * Math.cos(el) * 0.33, 0.04 + Math.sin(el) * 0.38, -Math.cos(az) * Math.cos(el) * 0.34 + (Math.cos(az) > 0 ? 0.0 : -0.02)], r, k: i });
+    }
+    if (estilo === 'coque') out.push({ p: [0, 0.36, -0.3], r: 0.16, k: 99 });
+    return out;
+  }, [estilo]);
+  // A franja: a frente do cabelo, um pouco acima da sobrancelha.
+  return (
+    <group>
+      {estilo !== 'careca' && <Faceta p={[0, 0.2, -0.02]} s={[0.36, 0.26, 0.36]} c={cor} det={1} rough={0.9} />}
+      {pedras.map((x) => <Faceta key={x.k} p={x.p} s={[x.r, x.r * 0.9, x.r]} rot={[hash(x.k) * 3, hash(x.k + 1) * 3, 0]} c={escurecer(cor, 0.85 + hash(x.k + 2) * 0.3)} det={0} rough={0.95} />)}
+    </group>
+  );
+}
+
+function CabecaFacetada({ 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 = '#17110f';
+  const fz = 0.335;   // a frente do rosto
+  return (
+    <group>
+      {/* o crânio e o queixo: dois volumes facetados */}
+      <Faceta s={[0.34, 0.39, 0.35]} c={p.pele} det={1} rough={0.7} />
+      <Faceta p={[0, -0.17, 0.05]} s={[0.26, 0.2, 0.27]} c={p.pele} det={1} rough={0.7} />
+      {[-1, 1].map((k) => <Faceta key={'o' + k} p={[k * 0.335, -0.01, -0.02]} s={[0.05, 0.08, 0.06]} c={escurecer(p.pele, 0.9)} det={0} />)}
+      {/* os olhos: amêndoa escura que fecha na piscada, e a sobrancelha grossa */}
+      {[-1, 1].map((k) => (
+        <group key={k} position={[k * 0.125, 0.04, fz - 0.03]} rotation={[0, k * 0.28, 0]}>
+          <mesh scale={[0.045, 0.05 * (1 - pisca * 0.88), 0.02]}><sphereGeometry args={[1, 8, 6]} /><meshStandardMaterial color={escuro} roughness={0.4} /></mesh>
+          <mesh position={[0.012, 0.015, 0.016]} scale={[0.012, 0.012, 0.006]}><sphereGeometry args={[1, 6, 4]} /><meshStandardMaterial color="#ffffff" roughness={0.3} /></mesh>
+          <mesh position={[0, 0.085 + sobr * 0.025, 0.012]} rotation={[0, 0, k * (est.emocao === 'serio' ? 0.25 : 0.05) - k * sobr * 0.06]}>
+            <boxGeometry args={[0.14, 0.035, 0.04]} /><meshStandardMaterial color={p.corCabelo} roughness={0.9} flatShading />
+          </mesh>
+        </group>
+      ))}
+      {/* o nariz: uma pirâmide de quatro faces */}
+      <mesh position={[0, -0.045, fz + 0.025]} rotation={[Math.PI / 2 - 0.25, Math.PI / 4, 0]} scale={[0.05, 0.11, 0.05]} castShadow>
+        <coneGeometry args={[1, 1, 4]} /><meshStandardMaterial color={escurecer(p.pele, 0.95)} roughness={0.7} flatShading />
+      </mesh>
+      {/* a boca: abre com a vogal e estica no "i" */}
+      <mesh position={[0, -0.17 - abre * 0.012, fz - 0.03]} scale={[0.05 + 0.04 * larg, 0.008 + 0.04 * abre, 0.02]}>
+        <sphereGeometry args={[1, 8, 6]} /><meshStandardMaterial color="#3a1416" roughness={0.6} />
+      </mesh>
+      {p.bigode && [-1, 1].map((k) => (
+        <mesh key={'b' + k} position={[k * 0.06, -0.115, fz + 0.005]} rotation={[0, 0, k * -0.35]} scale={[0.075, 0.03, 0.03]}>
+          <icosahedronGeometry args={[1, 0]} /><meshStandardMaterial color={p.corCabelo} roughness={0.9} flatShading />
+        </mesh>
+      ))}
+      {p.barba && <Faceta p={[0, -0.2, 0.08]} s={[0.27, 0.17, 0.26]} c={p.corCabelo} det={1} rough={0.95} />}
+      {p.oculos && (
+        <group position={[0, 0.04, fz + 0.02]}>
+          {[-1, 1].map((k) => <mesh key={k} position={[k * 0.125, 0, 0]}><torusGeometry args={[0.065, 0.012, 6, 12]} /><meshStandardMaterial color="#111114" roughness={0.4} /></mesh>)}
+          <mesh><boxGeometry args={[0.06, 0.012, 0.012]} /><meshStandardMaterial color="#111114" /></mesh>
+        </group>
+      )}
+      <CabeloFacetado estilo={p.cabelo} cor={p.corCabelo} />
+    </group>
+  );
+}
+
+/* A AÇÃO da fala mexe o braço por cima do gesto: acenar (a mão direita no
+   alto, abanando), apontar (o braço esticado para a frente), comemorar (os
+   dois para cima), pensar (a mão no queixo), dançar (os dois balançando). */
+function poseDoBraco(acao, lado, t, k) {
+  if (!acao || k <= 0) return null;
+  const dir = lado > 0;
+  if (acao === 'acenar' && dir) return { x: -0.25, z: 2.55 + Math.sin(t * 9) * 0.25, c: -0.55 + Math.sin(t * 9) * 0.35 };
+  if (acao === 'apontar' && dir) return { x: -1.45, z: 0.12, c: -0.05 };
+  if (acao === 'comemorar') return { x: -0.2, z: lado * (2.7 + Math.sin(t * 8 + lado) * 0.15), c: -0.25 };
+  if (acao === 'pensar' && dir) return { x: -1.5, z: -0.35, c: -2.1 };
+  if (acao === 'dancar') return { x: -0.6 + Math.sin(t * 6 + lado) * 0.5, z: lado * (0.6 + Math.sin(t * 6) * 0.3), c: -1.1 };
+  if (acao === 'correr') return { x: Math.sin(t * 13 + (lado > 0 ? 0 : Math.PI)) * 0.9, z: lado * 0.1, c: -1.3 };
+  if (acao === 'andar') return { x: Math.sin(t * 7 + (lado > 0 ? 0 : Math.PI)) * 0.45, z: lado * 0.06, c: -0.25 };
+  return null;
+}
+
+function BracoBloco({ lado, g, cor, pele, t, acao, k = 1 }) {
   // 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;
+  let ombroX = lerp(0.08, -0.85, g) + Math.sin(t * 6 + lado) * 0.06 * g;
+  let ombroZ = lado * lerp(0.06, 0.22, g);
+  let cotovelo = lerp(-0.12, -1.05, g) + Math.sin(t * 7.3 + lado * 2) * 0.14 * g;
+  const pose = poseDoBraco(acao, lado, t, k);
+  if (pose) { ombroX = lerp(ombroX, pose.x, k); ombroZ = lerp(ombroZ, pose.z, k); cotovelo = lerp(cotovelo, pose.c, k); }
   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} />
@@ -281,54 +392,92 @@ 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);
+  const a = est.acao, ka = est.forcaAcao || 0;
+  // O corpo inteiro: pular e comemorar sobem, dançar balança, andar e correr marcham.
+  const pulo = (a === 'pular' || a === 'comemorar') ? Math.abs(Math.sin(est.t * 6.5)) * 0.32 * ka : 0;
+  const balanco = a === 'dancar' ? Math.sin(est.t * 6) * 0.14 * ka : 0;
+  const marcha = (a === 'andar' || a === 'correr') ? (a === 'correr' ? 13 : 7) : 0;
   return (
-    <group>
+    <group position={[0, pulo, 0]} rotation={[0, 0, balanco]}>
       {/* 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>
-      ))}
+      {[-1, 1].map((k) => {
+        const passo = marcha ? Math.sin(est.t * marcha + (k > 0 ? 0 : Math.PI)) * (a === 'correr' ? 0.7 : 0.4) * ka : 0;
+        return (
+          <group key={k} position={[k * 0.15, 0.76, 0]} rotation={[passo, 0, 0]}>
+            <Bloco s={[0.25, 0.72, 0.27]} p={[0, -0.36, 0]} c={calca} r={0.03} rough={0.85} />
+            <Bloco s={[0.27, 0.1, 0.36]} p={[0, -0.71, 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} />
+      <BracoBloco lado={-1} g={est.gesto[0]} cor={p.roupa} pele={p.pele} t={est.t} acao={a} k={ka} />
+      <BracoBloco lado={1} g={est.gesto[1]} cor={p.roupa} pele={p.pele} t={est.t} acao={a} k={ka} />
       <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} />
+        {p.cabeca === 'cubo' ? (
+          <>
+            <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} />
+          </>
+        ) : <CabecaFacetada p={p} est={est} />}
       </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. */
+   O da 2ª referência (11/10): um CUBO laranja de quina viva, dois olhos
+   quadrados pretos, uma orelha de bloco de cada lado e uma fileira de
+   perninhas, em pé no chão. Não tem boca: ele fala com o CORPO — estica para
+   cima na vogal aberta, encolhe no "m" — e pisca fechando o olho em traço.
+   `bigode: true` põe o bigode da referência. */
 function Mascote({ p, est }) {
-  const cor = p.cor || '#d97757';
+  const cor = p.cor || '#d9532b';
   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 pulo = (est.acao === 'pular' || est.acao === 'comemorar') ? Math.abs(Math.sin(est.t * 6)) * 0.25 * (est.forcaAcao || 0) : 0;
+  const respira = Math.sin(est.t * 1.9 + 0.7) * 0.012;
+  const estica = 1 + abre * 0.07 + respira, achata = 1 - abre * 0.035;
   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} />;
+  const W = 1.0, H = 0.92, D = 0.78, perna = 0.46;
+  const pernas = [-0.38, -0.19, 0, 0.19, 0.38];
   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 position={[0, pulo, 0]} rotation={[0, cy * 0.8, cr * 0.5]}>
+      {pernas.map((x, i) => (
+        <group key={i}>
+          <Bloco s={[0.13, perna, 0.13]} p={[x, perna / 2 + Math.max(0, Math.sin(est.t * 9 + i)) * (est.falando ? 0.015 : 0), D / 2 - 0.12]} c={escurecer(cor, 0.9)} r={0.015} rough={0.6} />
+          {i % 2 === 0 && <Bloco s={[0.13, perna, 0.13]} p={[x, perna / 2, -D / 2 + 0.12]} c={escurecer(cor, 0.8)} r={0.015} rough={0.6} />}
+        </group>
+      ))}
+      <group position={[0, perna, 0]} rotation={[cp * 0.5, 0, 0]}>
+        <group scale={[achata, estica, achata]}>
+          <Bloco s={[W, H, D]} p={[0, H / 2, 0]} c={cor} r={0.025} rough={0.55} />
+          {[-1, 1].map((k) => (
+            <Bloco key={k} s={[0.16, 0.34, 0.3]} p={[k * (W / 2 + 0.08), H * 0.5 + (est.gesto[k > 0 ? 1 : 0] * 0.08), 0]} c={escurecer(cor, 0.93)} r={0.015} rough={0.55} />
+          ))}
+          {[-1, 1].map((k) => (
+            <Chapa key={'o' + k} s={[0.13, pisca > 0.5 ? 0.025 : 0.155, 0.012]} p={[k * 0.23, H * 0.66, D / 2 + 0.006]} c="#0d0a0b" />
+          ))}
+          {/* o bigode da referência: a barra grossa no meio e as pontas que sobem em curva */}
+          {p.bigode && (
+            <group position={[0, H * 0.43, D / 2 + 0.012]}>
+              {/* grosso no meio (dois gomos), afinando e subindo nas pontas */}
+              {[-1, 1].map((k) => (
+                <group key={k}>
+                  <Chapa s={[0.2, 0.14, 0.024]} p={[k * 0.09, -0.005, 0]} rot={[0, 0, k * 0.12]} c="#0d0a0b" />
+                  <Chapa s={[0.14, 0.1, 0.024]} p={[k * 0.235, 0.012, 0]} rot={[0, 0, k * 0.38]} c="#0d0a0b" />
+                  <Chapa s={[0.08, 0.07, 0.024]} p={[k * 0.32, 0.07, 0]} rot={[0, 0, k * 0.95]} c="#0d0a0b" />
+                </group>
+              ))}
+            </group>
+          )}
+        </group>
       </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>
   );
 }
@@ -426,12 +575,37 @@ function ChaoDeLadrilhos({ c }) {
 }
 
 /* ── A CÂMERA ──────────────────────────────────────────────────────────── */
+/* O LUGAR de cada um: um sozinho no meio; dois frente a frente; três e
+   quatro num arco aberto para a câmera, todos virados para o centro. Bicho
+   pequeno fica um passo à frente, para não sumir atrás de quem é alto. */
+const ARCO = { 1: [[0, 0]], 2: [[-0.78, 0], [0.78, 0]], 3: [[-1.35, 0.1], [0, -0.35], [1.35, 0.1]], 4: [[-1.9, 0.25], [-0.65, -0.25], [0.65, -0.25], [1.9, 0.25]] };
 function lugarDe(el, i) {
-  const dois = el.length > 1;
-  return dois ? [(el[i].lado || 0) * 0.78, 0, 0] : [0, 0, 0];
+  const n = Math.min(4, el.length) || 1;
+  const [x, z] = (ARCO[n] || ARCO[1])[Math.min(i, n - 1)];
+  const baixo = el[i] && (el[i].tipo === 'animal' || el[i].tipo === 'coisa') && alturaDaCabeca(el[i]) < 1.2;
+  return [x, 0, z + (baixo && n > 1 ? 0.35 : 0)];
+}
+function giroDe(el, i) {
+  const n = el.length;
+  if (n < 2) return 0;
+  const [x] = lugarDe(el, i);
+  return clamp(-x * 0.5, -0.45, 0.45);
+}
+function alturaDaCabeca(p) {
+  if (!p) return 1.8;
+  if (p.tipo === 'robo') return 0.46 + 0.62;   // o meio dos olhos do cubo
+  if (p.tipo === 'animal') return alturaDoBicho(p.especie);
+  if (p.tipo === 'coisa') return 1.1;
+  return 1.8;
+}
+/* Os figurantes ficam nas pontas do arco, um pouco atrás: estão na cena, mas não roubam o plano. */
+function lugarDoFigurante(el, fig, j) {
+  const n = Math.max(1, el.length);
+  const borda = n === 1 ? 1.15 : n === 2 ? 1.75 : 2.5;
+  const lado = j % 2 ? 1 : -1;
+  const baixo = fig.tipo === 'animal' || fig.tipo === 'coisa';
+  return [lado * (borda + Math.floor(j / 2) * 0.9), 0, baixo ? 0.45 : -0.5];
 }
-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;
@@ -443,14 +617,22 @@ function cameraDe(pl, t, part, aspecto) {
   const k = clamp((t - pl.de) / Math.max(0.5, pl.ate - pl.de));
   const fovK = vert ? 1.45 : 1;
   let pos, alvo, fov;
+  // Bicho e coisa falam DE FRENTE: por cima do ombro, o focinho ficava de perfil.
+  if (pl.tipo === 'ombro' && el[quem] && (el[quem].tipo === 'animal' || el[quem].tipo === 'coisa')) pl = { ...pl, tipo: 'medio' };
   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];
+    // Mais gente no set, a câmera recua; elenco baixo (bichos), ela desce.
+    const largura = el.length > 2 ? 1 + (el.length - 2) * (vert ? 0.42 : 0.28) : 1;
+    const dist = (pl.tipo === 'largo' ? (vert ? 8.2 : 6.6) : (vert ? 6.6 : 5.2)) * largura;
+    const alturaMedia = el.length ? el.reduce((s, p) => s + alturaDaCabeca(p), 0) / el.length : 1.8;
+    pos = [pl.lado * (el.length > 2 ? 0.2 : 0.5), (pl.tipo === 'largo' ? 3.1 : 2.5) * (0.55 + 0.45 * alturaMedia / 1.8), dist];
+    alvo = [0, Math.max(0.6, alturaMedia - 0.35), -0.6];
   } else if (pl.tipo === 'ombro' && dois) {
-    const o = 1 - quem, h = cabeca(o), s = cabeca(quem);
+    // Por cima do ombro de quem está MAIS PERTO de quem fala (com 3 ou 4 no set).
+    let o = quem === 0 ? 1 : 0;
+    for (let j = 0; j < el.length; j++) if (j !== quem && Math.abs(lugarDe(el, j)[0] - lugarDe(el, quem)[0]) < Math.abs(lugarDe(el, o)[0] - lugarDe(el, quem)[0])) o = j;
+    const 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;
@@ -466,6 +648,8 @@ function cameraDe(pl, t, part, aspecto) {
     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]];
   }
+  // No vertical a legenda está no alto: a câmera mira acima, e o rosto desce no quadro.
+  if (vert) alvo = [alvo[0], alvo[1] + (pl.tipo === 'aberto' || pl.tipo === 'largo' ? 0.45 : pl.tipo === 'medio' ? 0.3 : pl.tipo === 'ombro' ? 0.22 : 0.17), alvo[2]];
   const m = suave(k);
   if (pl.mov === 'entra' || pl.mov === 'sai') {
     const s = pl.mov === 'entra' ? m : 1 - m;
@@ -490,18 +674,39 @@ function cameraDe(pl, t, part, aspecto) {
 /* ── POR CIMA: a legenda da referência ─────────────────────────────────── */
 const FONTE = "'Inter','SF Pro Display','Helvetica Neue',Arial,sans-serif";
 
+// Palavra que não fecha frase: o pedaço da legenda não termina nela ("uma fogueira no").
+const FRACA = /^(no|na|nos|nas|de|do|da|dos|das|o|a|os|as|e|que|um|uma|com|em|pra|pro|por|para|ao|se|mais|muito|meu|minha|seu|sua)$/i;
 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 (letras > 30 || /[.!?;:]$/.test(w.t) || (cur.length >= 4 && /,$/.test(w.t))) {
+      // Terminou numa palavra fraca: ela desce para o próximo pedaço.
+      if (cur.length > 2 && FRACA.test(String(w.t).replace(/[^\p{L}]/gu, '')) && !/[.!?;:,]$/.test(w.t)) { out.push(cur.slice(0, -1)); cur = [w]; continue; }
+      out.push(cur); cur = [];
+    }
   }
   if (cur.length) out.push(cur);
   return out;
 }
 
+/* O LAYOUT DO QUE VAI POR CIMA (11/10, "nada fora do lugar nem sobrepondo"):
+   - a legenda mora no ALTO no vertical (25% da altura, como na 2ª
+     referência) e embaixo no horizontal (80%); a câmera do vertical mira
+     acima do rosto (cameraDe), então o rosto fica do meio para baixo e a
+     legenda nunca passa por cima dele;
+   - cabe em no máximo DUAS linhas na largura útil (84%): a fonte encolhe para
+     o pedaço mais longo, em vez de quebrar em três ou vazar da tela;
+   - o cartão de destaque fica no alto (12% / 8%), numa linha só, e também
+     encolhe para caber — os dois nunca dividem a mesma faixa. */
+const LARGURA_LETRA = 0.54;   // a largura média de uma letra da Inter, em "em"
+function tamanhoQueCabe(texto, base, largura, linhas) {
+  const porLinha = Math.ceil(String(texto).length / linhas) + 2;
+  return Math.max(Math.round(base * 0.6), Math.min(base, Math.floor(largura / (porLinha * LARGURA_LETRA))));
+}
+
 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;
@@ -509,12 +714,14 @@ function Legenda({ part, t, W, H }) {
   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 vertical = H > W;
+  const util = W * 0.84;
   const texto = g.map((w) => w.t).join(' ');
+  const tam = tamanhoQueCabe(texto, Math.round(vertical ? W * 0.05 : H * 0.05), util, 2);
   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)`,
+    <div style={{ position: 'absolute', left: 0, right: 0, top: H * (vertical ? 0.25 : 0.8), display: 'flex', justifyContent: 'center' }}>
+      <div style={{ maxWidth: util, fontFamily: FONTE, fontWeight: 600, fontSize: tam, lineHeight: 1.18, color: '#ffffff', textAlign: 'center', letterSpacing: '-0.005em',
+        overflowWrap: 'break-word', textWrap: 'balance', 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>
   );
@@ -526,10 +733,11 @@ function Destaque({ part, t, W, H, acento }) {
   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);
+  const util = W * 0.86;
+  const tam = tamanhoQueCabe(f.destaque, Math.round(Math.min(W, H) * 0.045), util - Math.min(W, H) * 0.07, 1);
   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,
+      <div style={{ maxWidth: util, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', 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>
   );
@@ -553,23 +761,50 @@ export function VoxelCena({ el, t }) {
     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);
+  // A ação da fala vale da voz até 0,6 s depois, entrando e saindo suave.
+  const acaoDe = (i) => {
+    for (const f of falas) {
+      if (f.quem !== i || !f.acao || f.acao === 'falar') continue;
+      if (t >= f.de - 0.3 && t <= f.ate + 0.6) return [f.acao, Math.min(suave((t - f.de + 0.3) / 0.4), 1 - suave((t - f.ate - 0.1) / 0.5))];
+    }
+    return [null, 0];
+  };
+  const quemFala = () => { const f = falas.find((x) => t >= x.de && t <= x.ate); return f ? f.quem : -1; };
+  const estado = (i, figurante = false) => {
+    const fala = !figurante && falandoAgora(i);
+    const qf = quemFala();
+    const outro = qf >= 0 && qf !== i;
+    const enfase = figurante ? [0, 0] : 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 emo = figurante ? 'feliz' : 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;
+    const dx = outro && !figurante ? lugarDe(elenco, qf)[0] - lugarDe(elenco, i)[0] : 0;
+    const paraQuemFala = clamp(dx * 0.35, -0.35, 0.35);
+    const [acao, forcaAcao] = figurante ? [null, 0] : acaoDe(i);
     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],
+      t, falando: fala, emocao: emo, boca: figurante ? [0, 0.55] : boca(falas, i, t), pisca: piscada(i + (figurante ? 5 : 0), t),
+      gesto: enfase, enfase: Math.max(enfase[0], enfase[1]), acao, forcaAcao,
+      olhar: [micro + (outro ? Math.sign(dx) * 0.8 : 0), 0.1],
+      cabeca: [Math.sin(t * 0.7 + i * 2) * 0.07 + paraQuemFala, nod, (e.inclina || 0) * (i % 2 ? -1 : 1) + Math.sin(t * 0.5 + i) * 0.02],
     };
   };
+  const desenhar = (p, est) => (p.tipo === 'robo' ? <Mascote p={p} est={est} />
+    : p.tipo === 'animal' ? <Animal p={p} est={est} />
+    : p.tipo === 'coisa' ? <Coisa p={p} est={est} icones={icones} />
+    : <PessoaBloco p={p} est={est} />);
+  /* O MUNDO da hora: o da fala que está (ou acabou de estar) no ar. A troca
+     acontece no começo da fala — junto com o corte de câmera. */
+  const mundos = part.mundos || [];
+  let iMundo = 0;
+  for (const f of falas) if (f.de - 0.1 <= t && f.mundo != null) iMundo = f.mundo;
+  const mundo = mundos[iMundo];
+  const ehTelas = !mundo || mundo.telas;
+  const figurantes = part.figurantes || [];
+  // Todo PNG que vira bloco (peças fora do catálogo e coisas que falam), lido antes do quadro.
+  const srcs = useMemo(() => [...new Set([...mundos.flatMap((m) => m.props.map((p) => p.src)), ...elenco.map((e) => e.src), ...figurantes.map((e) => e.src)].filter(Boolean))].sort(), [part]);
+  const icones = useIcones(srcs);
   const fadeIn = clamp(t / 0.5), fadeOut = clamp((part.duracao - t) / 0.6);
 
   return (
@@ -579,24 +814,34 @@ export function VoxelCena({ el, t }) {
           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} />
+          {ehTelas ? (
+            <>
+              <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} />
+            </>
+          ) : <Mundo key={iMundo} m={mundo} t={t} icones={icones} paineis={part.paineis} />}
           {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)} />}
+              {desenhar(p, estado(i))}
+            </group>
+          ))}
+          {figurantes.map((p, j) => (
+            <group key={'f' + j} position={lugarDoFigurante(elenco, p, j)} rotation={[0, (j % 2 ? -1 : 1) * 0.5, 0]}>
+              {desenhar(p, estado(10 + j, true))}
             </group>
           ))}
-          <Lente W={W} H={H} foco={cam.foco} abertura={cam.abertura} desfoqueMax={cam.desfoqueMax} brilho={0.5} />
+          {/* Fora do set de telas o céu é claro: o brilho cai, senão o céu inteiro estoura. */}
+          <Lente W={W} H={H} foco={cam.foco} abertura={cam.abertura} desfoqueMax={cam.desfoqueMax} brilho={ehTelas ? 0.5 : mundo.cobertura ? 0.5 : mundo.estrelas || mundo.hora === 'noite' ? 0.45 : 0.18} />
         </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} />

package/lib/estudio/kit.js

@@ -67,7 +67,7 @@ const PECAS = {
     animacao: { precisa: ['src'] },
 };
 
-const ARQUIVOS = ['base.jsx', 'vox.jsx', 'marca.jsx', 'tres.jsx', 'gerativo.jsx', 'fluido.jsx', 'personagem.jsx', 'voxel.jsx', 'animacao.jsx', 'index.jsx'];
+const ARQUIVOS = ['base.jsx', 'vox.jsx', 'marca.jsx', 'tres.jsx', 'gerativo.jsx', 'fluido.jsx', 'personagem.jsx', 'mundo.jsx', 'voxel.jsx', 'animacao.jsx', 'index.jsx'];
 
 /** Os arquivos do kit, para o projeto Remotion: [{nome: 'kit/base.jsx', conteudo}]. */
 function arquivos() {

package/lib/estudio/kokoro.js

@@ -87,11 +87,25 @@ async function narrar(lista, mp3, { voz, uv, espeak = acharEspeak(), executar =
     }
 }
 
-/** A ordem das vozes: pedida → Kokoro e depois o Edge; senão Gemini → Kokoro → Edge.
-    `motorVoz: 'edge'` no roteiro pula as outras. */
+/** A ordem das vozes: pedida → Kokoro e depois o Edge; senão Gemini → Edge → Kokoro.
+    O Edge (vozes neurais da Microsoft, ou a ElevenLabs quando há chave) vem
+    ANTES do Kokoro desde 11/10: com a cota do Gemini no fim, o Kokoro em
+    português era a "voz robótica" que a pessoa ouvia. `motorVoz: 'edge'` no
+    roteiro pula as outras. */
 function ordem(voz, env = process.env, { soEdge = false } = {}) {
     if (soEdge) return ['edge'];
-    return querKokoro(voz, env) ? ['kokoro', 'edge'] : ['gemini', 'kokoro', 'edge'];
+    return querKokoro(voz, env) ? ['kokoro', 'edge'] : ['gemini', 'edge', 'kokoro'];
+}
+
+/* A voz do Gemini no Edge: o narrar.py só conhece antonio, francisca e
+   thalita — o nome do Gemini ("Kore") caía na primeira, e toda fala de mulher
+   saía na voz do Antonio. Mantém o GÊNERO de quem fala. */
+const GEMINI_FEMININAS = new Set(['kore', 'aoede', 'leda', 'zephyr', 'sulafat', 'achird', 'despina', 'erinome', 'laomedeia', 'pulcherrima', 'vindemiatrix', 'callirrhoe', 'autonoe', 'gacrux']);
+function vozNoEdge(voz, reserva = 'thalita') {
+    const v = String(voz || '').trim().toLowerCase();
+    if (['antonio', 'francisca', 'thalita'].includes(v)) return v;
+    if (!v || querKokoro(v, {})) return reserva;
+    return GEMINI_FEMININAS.has(v) ? 'francisca' : 'antonio';
 }
 
 /** Roda a corrente: a primeira voz que der certo ganha; a falha de uma nunca derruba. */
@@ -108,4 +122,4 @@ async function corrente(passos, provedores) {
     return ultimo;
 }
 
-module.exports = { querKokoro, pronuncia, vozKokoro, acharEspeak, comando, narrar, ordem, corrente, DEPS, SCRIPT };
+module.exports = { vozNoEdge, querKokoro, pronuncia, vozKokoro, acharEspeak, comando, narrar, ordem, corrente, DEPS, SCRIPT };

package/lib/estudio/margem.js

@@ -44,7 +44,7 @@ function areaSegura(W, H, m = MARGEM) {
 /* As peças do kit que são o QUADRO inteiro (textura, padrão, o gerativo que
    tem a própria conta) ou enfeite de fundo. */
 const PECAS_FUNDO = new Set(['textura', 'padrao', 'particulas', 'papel', 'grade', 'orbe', 'cromo', 'esfera', 'estrela',
-    'gerativo', 'fluido', 'personagem', 'site']);
+    'gerativo', 'fluido', 'personagem', 'voxel', 'site']);
 
 const num = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : null);