primocode 10.0.0 → 10.1.0

package/lib/estudio/kit/index.jsx

@@ -6,6 +6,9 @@
 import { VOX } from './vox';
 import { MARCA } from './marca';
 import { Papel } from './base';
+import { TRES } from './tres';
+import { GERATIVO } from './gerativo';
+import { FLUIDO } from './fluido';
 
-export const KIT = { ...VOX, ...MARCA, papel: Papel };
+export const KIT = { ...VOX, ...MARCA, ...TRES, ...GERATIVO, ...FLUIDO, papel: Papel };
 export { Filtros, Acabamento, Hud, CURVAS_KIT, bolhaCaminho } from './base';

package/lib/estudio/kit/tres.jsx

@@ -0,0 +1,375 @@
+/* kit/tres.jsx — o PRODUTO EM 3D, feito de geometria, sem arquivo de fora.
+ *
+ *   "Crie um vídeo para anunciar um headset — o vídeo deve ter um 3D do fone"
+ *   (30/09), com "sem referências": nada de foto, então o produto é modelado
+ *   aqui, com as peças do three.js, e iluminado como em estúdio.
+ *
+ * {"tipo":"kit","peca":"produto3d","modelo":"fone"|"celular"|"lata"|"caixa"|"notebook"|"garrafa"|"relogio",
+ *  "cor":"#1b1c20","corAcento":"#ff5a1f","t":0,"giro":0.35,
+ *  "acabamento":"metal","camera":"alto","luz":"recorte","ritmo":"pendulo",   (variacao3d.js)
+ *  "x":0,"y":0,"largura":1920,"altura":1080}
+ *
+ * O movimento: entra pequeno e girado e assenta com mola (0,9 s), depois gira
+ * devagar e flutua — produto de vitrine, nunca pião. A luz de recorte vem na
+ * cor de acento: é ela que desenha a silhueta no fundo escuro. */
+import React, { useMemo } from 'react';
+import { ThreeCanvas } from '@remotion/three';
+import * as THREE from 'three';
+import { useThree } from '@react-three/fiber';
+import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
+
+/* A LUZ DE ESTÚDIO: sem um ambiente, material brilhante ou metálico não tem o
+   que refletir e sai preto ("a engrenagem parecia uma mancha", 30/09). A sala
+   do three (RoomEnvironment, local, sem rede) vira o reflexo de tudo. */
+function Ambiente({ forca = 1 }) {
+  const { gl, scene } = useThree();
+  useMemo(() => {
+    const pm = new THREE.PMREMGenerator(gl);
+    scene.environment = pm.fromScene(new RoomEnvironment(), 0.04).texture;
+    scene.environmentIntensity = forca;
+    pm.dispose();
+  }, [gl, scene]);
+  return null;
+}
+
+const saida = (x) => 1 - Math.pow(1 - Math.max(0, Math.min(1, x)), 3);
+
+function Material({ cor, brilho = 0.35, metal = 0.25, verniz = 0.8, iris = 0, emissivo }) {
+  return <meshPhysicalMaterial color={cor} roughness={brilho} metalness={metal} clearcoat={verniz} clearcoatRoughness={0.25} iridescence={iris}
+    {...(emissivo ? { emissive: emissivo, emissiveIntensity: 1.2 } : {})} />;
+}
+
+// O fone: o arco, os deslizadores, as conchas com o anel de acento, as almofadas e o logo aceso.
+/* AS VARIAÇÕES (variacao3d.js sorteia os nomes): o acabamento do corpo, o
+   enquadramento, a luz e o ritmo. Sem nome, o de sempre. */
+const ACABAMENTOS = {
+  verniz: { brilho: 0.3, metal: 0.3, verniz: 0.8 }, metal: { brilho: 0.18, metal: 0.92, verniz: 0.3 },
+  fosco: { brilho: 0.78, metal: 0, verniz: 0 }, perola: { brilho: 0.25, metal: 0.1, verniz: 1, iris: 1 },
+  acetinado: { brilho: 0.5, metal: 0.45, verniz: 0.4 },
+};
+const CAMERAS = {
+  frente: {}, alto: { y: 1.5, inclina: 0.12 }, baixo: { y: -0.6, inclina: -0.1 },
+  perfil: { giro0: -1.7, roll: 0.07 }, perto: { fov: 25 },
+};
+// [chave, preenchimento, recorte na cor de acento, ambiente]
+const LUZES = { estudio: [3.2, 1.1, 3.2, 0.35], recorte: [1.6, 0.4, 5.5, 0.15], suave: [2.2, 2.0, 1.4, 0.7], lateral: [4.2, 0.2, 2.6, 0.2] };
+const RITMOS = { lento: 0.18, medio: 0.35, rapido: 0.6 };
+
+function Fone({ cor, acento, fin }) {
+  const R = 1.05;
+  const concha = (lado) => (
+    <group position={[lado * R, -0.12, 0]}>
+      <mesh rotation={[0, 0, Math.PI / 2]}>
+        <cylinderGeometry args={[0.44, 0.46, 0.26, 64]} />
+        <Material cor={cor} brilho={0.3} metal={0.35} {...fin} />
+      </mesh>
+      <mesh position={[lado * 0.135, 0, 0]} rotation={[0, Math.PI / 2, 0]}>
+        <torusGeometry args={[0.43, 0.035, 24, 96]} />
+        <Material cor={acento} brilho={0.18} metal={0.9} verniz={1} />
+      </mesh>
+      <mesh position={[lado * 0.14, 0, 0]} rotation={[0, Math.PI / 2, 0]}>
+        <circleGeometry args={[0.16, 48]} />
+        <Material cor={acento} brilho={0.2} metal={0.2} emissivo={acento} />
+      </mesh>
+      <mesh position={[-lado * 0.16, 0, 0]} rotation={[0, Math.PI / 2, 0]}>
+        <torusGeometry args={[0.3, 0.11, 32, 96]} />
+        <Material cor="#141416" brilho={0.85} metal={0} verniz={0} />
+      </mesh>
+    </group>
+  );
+  return (
+    <group>
+      <mesh>
+        <torusGeometry args={[R, 0.075, 32, 160, Math.PI]} />
+        <Material cor={cor} brilho={0.28} metal={0.4} {...fin} />
+      </mesh>
+      <mesh position={[0, -0.06, 0]} scale={[1, 1, 1.6]}>
+        <torusGeometry args={[R - 0.07, 0.05, 24, 140, Math.PI]} />
+        <Material cor="#141416" brilho={0.9} metal={0} verniz={0} />
+      </mesh>
+      {[-1, 1].map((lado) => (
+        <mesh key={lado} position={[lado * R, 0.1, 0]}>
+          <boxGeometry args={[0.07, 0.34, 0.12]} />
+          <Material cor={acento} brilho={0.15} metal={0.95} verniz={1} />
+        </mesh>
+      ))}
+      {concha(-1)}
+      {concha(1)}
+    </group>
+  );
+}
+
+function Celular({ cor, acento, fin }) {
+  return (
+    <group rotation={[0, 0, 0.05]}>
+      <mesh><boxGeometry args={[1.0, 2.05, 0.1]} /><Material cor={cor} brilho={0.22} metal={0.7} {...fin} /></mesh>
+      <mesh position={[0, 0, 0.052]}><planeGeometry args={[0.92, 1.96]} /><Material cor="#0b0c10" brilho={0.1} metal={0} emissivo="#0d1830" /></mesh>
+      <mesh position={[0, 0.3, 0.054]}><circleGeometry args={[0.22, 48]} /><Material cor={acento} emissivo={acento} /></mesh>
+      <mesh position={[0.26, 0.78, -0.07]} rotation={[Math.PI / 2, 0, 0]}><cylinderGeometry args={[0.14, 0.14, 0.05, 48]} /><Material cor="#222" brilho={0.1} metal={0.9} /></mesh>
+    </group>
+  );
+}
+
+function Lata({ cor, acento, fin }) {
+  return (
+    <group>
+      <mesh><cylinderGeometry args={[0.55, 0.55, 1.9, 96]} /><Material cor={cor} brilho={0.2} metal={0.85} {...fin} /></mesh>
+      <mesh position={[0, 0.2, 0]}><cylinderGeometry args={[0.556, 0.556, 0.5, 96, 1, true]} /><Material cor={acento} brilho={0.3} metal={0.3} /></mesh>
+      <mesh position={[0, 0.97, 0]}><cylinderGeometry args={[0.5, 0.55, 0.06, 96]} /><Material cor="#c9ccd2" brilho={0.25} metal={1} /></mesh>
+    </group>
+  );
+}
+
+function Caixa({ cor, acento, fin }) {
+  return (
+    <group>
+      <mesh><boxGeometry args={[1.5, 1.5, 1.5]} /><Material cor={cor} brilho={0.3} metal={0.3} {...fin} /></mesh>
+      <mesh position={[0, 0, 0.752]}><planeGeometry args={[1.0, 0.18]} /><Material cor={acento} emissivo={acento} /></mesh>
+    </group>
+  );
+}
+
+// O notebook: a base, o teclado escuro, a tampa aberta a ~105° e a tela acesa.
+function Notebook({ cor, acento, fin }) {
+  return (
+    <group position={[0, -0.3, 0.1]} rotation={[0.1, 0, 0]} scale={[0.7, 0.7, 0.7]}>{/* a 1,0 a tela saía cortada no topo (05/10) */}
+      <mesh><boxGeometry args={[2.2, 0.08, 1.45]} /><Material cor={cor} brilho={0.25} metal={0.75} {...fin} /></mesh>
+      <mesh position={[0, 0.042, -0.12]}><boxGeometry args={[1.9, 0.01, 0.75]} /><Material cor="#141416" brilho={0.8} metal={0} verniz={0} /></mesh>
+      <mesh position={[0, 0.042, 0.45]}><boxGeometry args={[0.7, 0.01, 0.38]} /><Material cor="#26272c" brilho={0.4} metal={0.2} /></mesh>
+      <group position={[0, 0.04, -0.72]} rotation={[-0.26, 0, 0]}>
+        <mesh position={[0, 0.72, 0]}><boxGeometry args={[2.2, 1.44, 0.06]} /><Material cor={cor} brilho={0.25} metal={0.75} {...fin} /></mesh>
+        <mesh position={[0, 0.74, 0.032]}><planeGeometry args={[2.0, 1.25]} /><Material cor="#0b0c10" brilho={0.1} metal={0} emissivo="#0d1830" /></mesh>
+        <mesh position={[0, 0.74, 0.034]}><circleGeometry args={[0.2, 48]} /><Material cor={acento} emissivo={acento} /></mesh>
+      </group>
+    </group>
+  );
+}
+
+// A garrafa: o corpo, o ombro, o gargalo, a tampa e o rótulo na cor de acento.
+function Garrafa({ cor, acento, fin }) {
+  return (
+    <group position={[0, -0.15, 0]}>
+      <mesh><cylinderGeometry args={[0.5, 0.5, 1.5, 96]} /><Material cor={cor} brilho={0.15} metal={0.6} {...fin} /></mesh>
+      <mesh position={[0, 0.95, 0]}><cylinderGeometry args={[0.2, 0.5, 0.4, 96]} /><Material cor={cor} brilho={0.15} metal={0.6} {...fin} /></mesh>
+      <mesh position={[0, 1.3, 0]}><cylinderGeometry args={[0.2, 0.2, 0.3, 64]} /><Material cor={cor} brilho={0.15} metal={0.6} {...fin} /></mesh>
+      <mesh position={[0, 1.52, 0]}><cylinderGeometry args={[0.23, 0.23, 0.18, 64]} /><Material cor={acento} brilho={0.3} metal={0.8} /></mesh>
+      <mesh position={[0, 0.05, 0]}><cylinderGeometry args={[0.506, 0.506, 0.55, 96, 1, true]} /><Material cor={acento} brilho={0.5} metal={0.1} verniz={0.3} /></mesh>
+    </group>
+  );
+}
+
+// O relógio: a caixa redonda, o aro de acento, o mostrador aceso e a pulseira.
+function Relogio({ cor, acento, fin }) {
+  return (
+    <group>
+      <mesh rotation={[Math.PI / 2, 0, 0]}><cylinderGeometry args={[0.62, 0.62, 0.22, 96]} /><Material cor={cor} brilho={0.2} metal={0.85} {...fin} /></mesh>
+      <mesh position={[0, 0, 0.11]}><torusGeometry args={[0.6, 0.045, 24, 96]} /><Material cor={acento} brilho={0.15} metal={0.95} verniz={1} /></mesh>
+      <mesh position={[0, 0, 0.112]}><circleGeometry args={[0.55, 64]} /><Material cor="#0b0c10" brilho={0.1} metal={0} emissivo="#0d1830" /></mesh>
+      <mesh position={[0, 0.16, 0.116]}><boxGeometry args={[0.04, 0.32, 0.01]} /><Material cor={acento} emissivo={acento} /></mesh>
+      <mesh position={[0.1, 0, 0.118]} rotation={[0, 0, -Math.PI / 2]}><boxGeometry args={[0.05, 0.22, 0.01]} /><Material cor="#f4f4f6" emissivo="#9aa0aa" /></mesh>
+      <mesh position={[0.66, 0, 0]} rotation={[Math.PI / 2, 0, 0]}><cylinderGeometry args={[0.06, 0.06, 0.14, 24]} /><Material cor={cor} brilho={0.2} metal={0.85} {...fin} /></mesh>
+      {[-1, 1].map((l) => <mesh key={l} position={[0, l * 1.0, -0.02]}><boxGeometry args={[0.6, 0.85, 0.08]} /><Material cor="#1a1a1d" brilho={0.7} metal={0} verniz={0.2} /></mesh>)}
+    </group>
+  );
+}
+
+const MODELOS = { fone: Fone, headset: Fone, celular: Celular, phone: Celular, lata: Lata, garrafa: Garrafa, caixa: Caixa,
+  notebook: Notebook, laptop: Notebook, relogio: Relogio, watch: Relogio };
+export const MODELOS_3D = Object.keys(MODELOS);
+
+export function Produto3D({ el, t }) {
+  const W = el.largura || 1920, H = el.altura || 1080;
+  const t0 = el.t || 0;
+  const tl = Math.max(0, t - t0);
+  const k = saida(tl / 0.9);
+  const Modelo = MODELOS[el.modelo] || Caixa;
+  const cor = el.cor || '#1b1c20';
+  const acento = el.corAcento || '#ff5a1f';
+  const cam = CAMERAS[el.camera] || {};
+  const luz = LUZES[el.luz] || LUZES.estudio;
+  const fin = ACABAMENTOS[el.acabamento];
+  // O ritmo: o giro contínuo em três velocidades, ou o pêndulo, que vai e volta mostrando a frente.
+  const anda = el.ritmo === 'pendulo' ? Math.sin(tl * 0.9) * 0.7 : tl * (RITMOS[el.ritmo] ?? el.giro ?? 0.35);
+  const giro = (el.giro0 ?? cam.giro0 ?? -0.9) + (1 - k) * 1.4 + anda;
+  const escala = (el.escala || 1) * (0.72 + 0.28 * k);
+  const flutua = Math.sin(tl * 1.3) * 0.05;
+  return (
+    <div style={{ position: 'absolute', left: el.x || 0, top: el.y || 0, width: W, height: H, opacity: t >= t0 ? Math.min(1, tl / 0.25) : 0 }}>
+      <ThreeCanvas width={W} height={H} camera={{ position: [0, cam.y ?? 0.35, 4.4], fov: el.fov || cam.fov || 32 }} gl={{ antialias: true, preserveDrawingBuffer: true }}>
+        <Ambiente forca={0.8} />
+        <hemisphereLight args={['#ffffff', '#202020', 0.5]} />
+        <ambientLight intensity={luz[3]} />
+        <directionalLight position={el.luz === 'lateral' ? [5, 1.5, 1.5] : [3, 4, 5]} intensity={luz[0]} />
+        <directionalLight position={[-2, 3, 4]} intensity={luz[1]} />
+        <directionalLight position={[-4, 1.5, -3]} intensity={luz[2]} color={acento} />
+        <pointLight position={[0, -2, 3]} intensity={0.8} />
+        <group position={[0, flutua - 0.05, 0]} rotation={[0.18 + (cam.inclina || 0) + (1 - k) * 0.3, giro, cam.roll || 0]} scale={[escala, escala, escala]}>
+          <Modelo cor={cor} acento={acento} fin={fin} />
+        </group>
+        {/* O chão. O gerativo dispensa (semChao): o disco virava uma faixa escura atrás do texto. */}
+        {!el.semChao && (
+          <mesh position={[0, -1.25, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+            <circleGeometry args={[2.4, 64]} />
+            <meshStandardMaterial color="#0a0a0c" roughness={0.35} metalness={0.6} transparent opacity={0.85} />
+          </mesh>
+        )}
+      </ThreeCanvas>
+    </div>
+  );
+}
+
+/* ── OS ÍCONES 3D ─────────────────────────────────────────────────────────
+ * "A gente não tem ícone 3D" (30/09). Nada de emoji-3D de banco: cada ícone
+ * é geometria daqui — forma 2D extrudada com chanfro (raio, coração,
+ * estrela, escudo, balão, play, check, seta, engrenagem) ou primitivas
+ * compostas (bateria, cadeado, relógio, barras, fone, celular, sol, onda) —
+ * no material e na paleta do vídeo (argila, verniz ou metal), com a luz de
+ * recorte na cor de acento.
+ *
+ * {"tipo":"kit","peca":"icone3d","icone":"raio","x":0,"y":0,"tamanho":360,
+ *  "material":"argila","cor":"#efe8da","cor2":"#7a1f1f","luz":"#7a1f1f","t":0} */
+function forma(pts, curvas) {
+  const sh = new THREE.Shape();
+  pts.forEach(([x, y], i) => (i ? sh.lineTo(x, y) : sh.moveTo(x, y)));
+  if (curvas) curvas(sh);
+  sh.closePath();
+  return sh;
+}
+const FORMAS = {
+  raio: () => forma([[0.15, 1], [-0.55, -0.1], [-0.05, -0.1], [-0.25, -1], [0.55, 0.15], [0.05, 0.15], [0.35, 1]]),
+  estrela: () => forma(Array.from({ length: 10 }, (_, i) => { const a = Math.PI / 2 + (i * Math.PI) / 5, r = i % 2 ? 0.42 : 1; return [Math.cos(a) * r, Math.sin(a) * r]; })),
+  play: () => forma([[-0.55, 0.85], [0.85, 0], [-0.55, -0.85]]),
+  check: () => forma([[-0.95, 0.05], [-0.6, 0.4], [-0.25, 0.05], [0.6, 0.9], [0.95, 0.55], [-0.25, -0.65]]),
+  seta: () => forma([[-0.9, 0.22], [0.2, 0.22], [0.2, 0.62], [0.95, 0], [0.2, -0.62], [0.2, -0.22], [-0.9, -0.22]]),
+  coracao: () => {
+    const sh = new THREE.Shape();
+    sh.moveTo(0, -0.9);
+    sh.bezierCurveTo(-0.2, -0.65, -1, -0.2, -1, 0.3);
+    sh.bezierCurveTo(-1, 0.75, -0.6, 0.95, -0.35, 0.95);
+    sh.bezierCurveTo(-0.15, 0.95, 0, 0.8, 0, 0.62);
+    sh.bezierCurveTo(0, 0.8, 0.15, 0.95, 0.35, 0.95);
+    sh.bezierCurveTo(0.6, 0.95, 1, 0.75, 1, 0.3);
+    sh.bezierCurveTo(1, -0.2, 0.2, -0.65, 0, -0.9);
+    return sh;
+  },
+  escudo: () => {
+    const sh = new THREE.Shape();
+    sh.moveTo(0, 1); sh.lineTo(0.85, 0.7); sh.lineTo(0.8, 0);
+    sh.bezierCurveTo(0.75, -0.55, 0.35, -0.85, 0, -1);
+    sh.bezierCurveTo(-0.35, -0.85, -0.75, -0.55, -0.8, 0);
+    sh.lineTo(-0.85, 0.7); sh.closePath();
+    return sh;
+  },
+  balao: () => {
+    const sh = new THREE.Shape();
+    const r = 0.3, x0 = -0.95, x1 = 0.95, y0 = -0.45, y1 = 0.8;
+    sh.moveTo(x0 + r, y1); sh.lineTo(x1 - r, y1); sh.quadraticCurveTo(x1, y1, x1, y1 - r); sh.lineTo(x1, y0 + r);
+    sh.quadraticCurveTo(x1, y0, x1 - r, y0); sh.lineTo(-0.15, y0); sh.lineTo(-0.55, -0.95); sh.lineTo(-0.5, y0);
+    sh.lineTo(x0 + r, y0); sh.quadraticCurveTo(x0, y0, x0, y0 + r); sh.lineTo(x0, y1 - r); sh.quadraticCurveTo(x0, y1, x0 + r, y1);
+    return sh;
+  },
+  engrenagem: () => {
+    const n = 8, pts = [];
+    for (let i = 0; i < n * 4; i++) { const a = (i / (n * 4)) * Math.PI * 2, r = i % 4 < 2 ? 1 : 0.74; pts.push([Math.cos(a) * r, Math.sin(a) * r]); }
+    const sh = forma(pts);
+    const furo = new THREE.Path(); furo.absarc(0, 0, 0.34, 0, Math.PI * 2, true); sh.holes.push(furo);
+    return sh;
+  },
+};
+
+function Mat({ tipo, cor }) {
+  // Metal escovado, bala (verniz) ou argila — os três refletem a sala (Ambiente).
+  if (tipo === 'metal') return <meshPhysicalMaterial color={cor} roughness={0.32} metalness={0.85} clearcoat={0.4} envMapIntensity={1.2} />;
+  if (tipo === 'verniz') return <meshPhysicalMaterial color={cor} roughness={0.18} metalness={0} clearcoat={1} clearcoatRoughness={0.08} sheen={0.3} />;
+  return <meshPhysicalMaterial color={cor} roughness={0.72} metalness={0} clearcoat={0.15} />;   // argila: fosca, macia
+}
+
+function Extrudado({ nome, m, cor }) {
+  const geo = useMemo(() => new THREE.ExtrudeGeometry(FORMAS[nome](), { depth: 0.42, bevelEnabled: true, bevelThickness: 0.12, bevelSize: 0.08, bevelSegments: 4, curveSegments: 18 }), [nome]);
+  return <mesh geometry={geo} position={[0, 0, -0.27]}><Mat tipo={m} cor={cor} /></mesh>;
+}
+
+function Composto({ nome, m, cor, cor2, tl }) {
+  const caixa = (pos, tam, c = cor, rot) => <mesh position={pos} rotation={rot}><boxGeometry args={tam} /><Mat tipo={m} cor={c} /></mesh>;
+  switch (nome) {
+    case 'bateria': return (
+      <group>
+        {caixa([0, 0, 0], [1.7, 0.95, 0.5])}
+        {caixa([0.95, 0, 0], [0.16, 0.4, 0.3])}
+        {[0, 1, 2].map((i) => caixa([-0.52 + i * 0.52, 0, 0.27], [0.36, 0.62, 0.08], i <= Math.floor(tl * 4) % 3 + 0.5 ? cor2 : cor))}
+      </group>
+    );
+    case 'cadeado': return (
+      <group>
+        {caixa([0, -0.3, 0], [1.3, 1.0, 0.5])}
+        <mesh position={[0, 0.25, 0]}><torusGeometry args={[0.42, 0.11, 20, 48, Math.PI]} /><Mat tipo={m} cor={cor2} /></mesh>
+        <mesh position={[0, -0.3, 0.27]} rotation={[Math.PI / 2, 0, 0]}><cylinderGeometry args={[0.1, 0.1, 0.06, 24]} /><Mat tipo={m} cor={cor2} /></mesh>
+      </group>
+    );
+    case 'relogio': return (
+      <group>
+        <mesh rotation={[Math.PI / 2, 0, 0]}><cylinderGeometry args={[1, 1, 0.32, 64]} /><Mat tipo={m} cor={cor} /></mesh>
+        <mesh position={[0, 0, 0.17]}><torusGeometry args={[0.98, 0.07, 16, 64]} /><Mat tipo={m} cor={cor2} /></mesh>
+        <group position={[0, 0, 0.2]} rotation={[0, 0, -tl * 2.2]}>{caixa([0, 0.33, 0], [0.09, 0.66, 0.05], cor2)}</group>
+        <group position={[0, 0, 0.22]} rotation={[0, 0, -tl * 0.4 - 1]}>{caixa([0, 0.22, 0], [0.12, 0.44, 0.05], cor2)}</group>
+      </group>
+    );
+    case 'barras': return (
+      <group>{[0.55, 0.95, 1.5].map((h, i) => caixa([-0.6 + i * 0.6, -0.75 + (h * Math.min(1, tl * 2.4 - i * 0.25 > 0 ? Math.min(1, tl * 2.4 - i * 0.25) : 0.05)) / 2, 0],
+        [0.42, Math.max(0.05, h * Math.min(1, Math.max(0.05, tl * 2.4 - i * 0.25))), 0.42], i === 2 ? cor2 : cor))}</group>
+    );
+    case 'fone': return (
+      <group>
+        <mesh><torusGeometry args={[0.85, 0.11, 20, 64, Math.PI]} /><Mat tipo={m} cor={cor} /></mesh>
+        {[-1, 1].map((l) => <mesh key={l} position={[l * 0.85, -0.25, 0]} rotation={[0, 0, Math.PI / 2]}><cylinderGeometry args={[0.36, 0.36, 0.3, 40]} /><Mat tipo={m} cor={cor2} /></mesh>)}
+      </group>
+    );
+    case 'celular': return (
+      <group>
+        {caixa([0, 0, 0], [1.05, 1.9, 0.16])}
+        {caixa([0, 0.02, 0.085], [0.9, 1.65, 0.02], cor2)}
+      </group>
+    );
+    case 'sol': return (
+      <group rotation={[0, 0, tl * 0.5]}>
+        <mesh><sphereGeometry args={[0.52, 48, 32]} /><Mat tipo={m} cor={cor2} /></mesh>
+        {Array.from({ length: 8 }, (_, i) => <mesh key={i} position={[Math.cos(i * Math.PI / 4) * 0.85, Math.sin(i * Math.PI / 4) * 0.85, 0]} rotation={[0, 0, i * Math.PI / 4 - Math.PI / 2]}>
+          <coneGeometry args={[0.13, 0.36, 20]} /><Mat tipo={m} cor={cor} /></mesh>)}
+      </group>
+    );
+    case 'onda': return (
+      <group>{[0.5, 1.1, 1.7, 1.1, 0.5].map((h, i) => { const k = 0.55 + 0.45 * Math.abs(Math.sin(tl * 5 + i * 1.1)); return caixa([-0.9 + i * 0.45, 0, 0], [0.26, h * k, 0.26], i === 2 ? cor2 : cor); })}</group>
+    );
+    default: return null;
+  }
+}
+
+export const ICONES = [...Object.keys(FORMAS), 'bateria', 'cadeado', 'relogio', 'barras', 'fone', 'celular', 'sol', 'onda'];
+
+export function Icone3D({ el, t }) {
+  const tam = Math.round(el.tamanho || 360);
+  const tl = Math.max(0, t - (el.t || 0));
+  // Entra com mola que passa um pouco (o ícone tem peso) e gira até de frente.
+  const k = 1 - Math.exp(-7 * tl) * Math.cos(9 * tl);
+  const giro = (1 - saida(tl / 0.8)) * -1.6 + Math.sin(tl * 1.1) * 0.35;
+  const m = el.material || 'argila';
+  return (
+    <div style={{ position: 'absolute', left: el.x || 0, top: el.y || 0, width: tam, height: tam, opacity: t >= (el.t || 0) ? Math.min(1, tl / 0.12) : 0 }}>
+      {/* A sombra de contato: o objeto pousa, não flutua solto. */}
+      <div style={{ position: 'absolute', left: '18%', width: '64%', top: '84%', height: '10%', borderRadius: '50%', background: 'radial-gradient(ellipse, rgba(0,0,0,0.42) 0%, transparent 70%)', transform: 'scale(' + (0.8 + 0.2 * k).toFixed(3) + ')' }} />
+      <ThreeCanvas width={tam} height={tam} camera={{ position: [0, 0, 5.2], fov: 30 }} gl={{ antialias: true, preserveDrawingBuffer: true, alpha: true }}>
+        <Ambiente forca={1.1} />
+        <hemisphereLight args={['#ffffff', '#3a3a3a', 0.6]} />
+        <ambientLight intensity={0.25} />
+        <directionalLight position={[2.5, 3, 4]} intensity={2.6} />
+        <directionalLight position={[-3, -1, -2]} intensity={2.4} color={el.luz || '#ffffff'} />
+        <pointLight position={[0, 0, 3]} intensity={0.5} />
+        <group rotation={[0.25 + Math.sin(tl * 0.8) * 0.08, giro, Math.sin(tl * 0.6) * 0.06]} scale={[k, k, k]} position={[0, Math.sin(tl * 1.4) * 0.06, 0]}>
+          {FORMAS[el.icone] ? <Extrudado nome={el.icone} m={m} cor={el.cor || '#eeeeee'} /> : <Composto nome={el.icone} m={m} cor={el.cor || '#eeeeee'} cor2={el.cor2 || el.cor || '#ff5a1f'} tl={tl} />}
+        </group>
+      </ThreeCanvas>
+    </div>
+  );
+}
+
+export const TRES = { produto3d: Produto3D, icone3d: Icone3D };

package/lib/estudio/kit.js

@@ -49,9 +49,17 @@ const PECAS = {
     esfera: {},
     grade: {},
     site: {},
+    // O produto em 3D (kit/tres.jsx): fone, celular, lata ou caixa, de geometria.
+    produto3d: { precisa: ['modelo'] },
+    // Os ícones 3D de geometria (kit/tres.jsx): raio, coração, bateria, relógio, fone…
+    icone3d: { precisa: ['icone'] },
+    // O motion gerativo (kit/gerativo.jsx): a partitura inteira, numa peça só (gerativo.js).
+    gerativo: { precisa: ['partitura'] },
+    // O estilo fluido (kit/fluido.jsx): a forma que vira a próxima, numa peça só (fluido.js).
+    fluido: { precisa: ['partitura'] },
 };
 
-const ARQUIVOS = ['base.jsx', 'vox.jsx', 'marca.jsx', 'index.jsx'];
+const ARQUIVOS = ['base.jsx', 'vox.jsx', 'marca.jsx', 'tres.jsx', 'gerativo.jsx', 'fluido.jsx', 'index.jsx'];
 
 /** Os arquivos do kit, para o projeto Remotion: [{nome: 'kit/base.jsx', conteudo}]. */
 function arquivos() {

package/lib/estudio/kokoro.js

@@ -0,0 +1,111 @@
+/* A VOZ LOCAL (Kokoro-82M): roda na CPU desta máquina, sem cota e sem
+   servidor. Entra quando o Gemini falha (cota, voz cortada) ou quando o
+   roteiro pede `voz: 'kokoro'` (ou PRIMOCODE_VOZ=kokoro). Sem `uv` ou sem
+   espeak-ng ela diz que não está disponível e a corrente segue — nunca
+   derruba a narração.
+
+   Provado nesta máquina em 05/10: 11 s de áudio em 3,5 s (+4,3 s de carga
+   do modelo), sem o corte no fim que o Gemini às vezes deixa. */
+const fs = require('fs');
+const path = require('path');
+const { spawn, execFileSync } = require('child_process');
+
+const SCRIPT = path.join(__dirname, '..', '..', 'studio', 'voz_kokoro.py');
+// Sem `transformers>=4.45` o uv escolhe a 4.12 e o tokenizers não compila (05/10).
+const DEPS = ['kokoro>=0.9.4', 'transformers>=4.45', 'soundfile', 'misaki[en]'];
+// As vozes do Studio viram as do Kokoro em português: pf_dora (feminina), pm_alex (masculina).
+const VOZES = { thalita: 'pf_dora', francisca: 'pf_dora', feminina: 'pf_dora', antonio: 'pm_alex', masculina: 'pm_alex' };
+
+/** O roteiro (ou quem usa) pediu a voz local? */
+function querKokoro(voz, env = process.env) {
+    return String(voz || '').toLowerCase() === 'kokoro' || String(env.PRIMOCODE_VOZ || '').toLowerCase() === 'kokoro';
+}
+
+/** "PrimoCode" sai "Primo Kodi" no Kokoro; escrito assim, sai certo. */
+function pronuncia(texto) {
+    return String(texto || '').replace(/primo\s*code/gi, 'Primo Côude');
+}
+
+function vozKokoro(voz) {
+    const v = String(voz || '').toLowerCase();
+    if (/^p[fm]_/.test(v)) return v;
+    return VOZES[v] || 'pm_alex';
+}
+
+/** Onde está o espeak-ng (o Kokoro precisa dele para o português). */
+function acharEspeak({ existe = fs.existsSync, brew = () => execFileSync('brew', ['--prefix', 'espeak-ng'], { stdio: ['ignore', 'pipe', 'ignore'], timeout: 10000 }).toString().trim() } = {}) {
+    const bases = [];
+    try { bases.push(brew()); } catch { /* sem brew */ }
+    bases.push('/opt/homebrew/opt/espeak-ng', '/usr/local/opt/espeak-ng', '/usr');
+    for (const b of bases) {
+        if (!b) continue;
+        const dados = path.join(b, 'share', 'espeak-ng-data');
+        const lib = ['lib/libespeak-ng.dylib', 'lib/libespeak-ng.so.1', 'lib/x86_64-linux-gnu/libespeak-ng.so.1', 'lib/aarch64-linux-gnu/libespeak-ng.so.1']
+            .map((l) => path.join(b, l)).find(existe);
+        if (existe(dados) && lib) return { dados, lib };
+    }
+    return null;
+}
+
+/** O comando inteiro (uv + deps fixadas + env do espeak), ou null se falta peça. */
+function comando({ uv, espeak, arquivo, saida, voz, env = process.env }) {
+    if (!uv || !espeak) return null;
+    const args = ['run', '--quiet', '--python', '3.11'];
+    for (const d of DEPS) args.push('--with', d);
+    args.push('python', SCRIPT, 'roteiro', '--arquivo', arquivo, '--saida', saida, '--voz', vozKokoro(voz));
+    return { cmd: uv, args, env: { ...env, ESPEAK_DATA_PATH: espeak.dados, PHONEMIZER_ESPEAK_LIBRARY: espeak.lib } };
+}
+
+function rodar({ cmd, args, env }, timeout) {
+    return new Promise((resolve) => {
+        const p = spawn(cmd, args, { env });
+        let saida = '', erro = '';
+        p.stdout.on('data', (d) => { saida += d.toString(); });
+        p.stderr.on('data', (d) => { erro += d.toString(); });
+        const relogio = setTimeout(() => { try { p.kill(); } catch {} }, timeout);
+        p.on('close', () => {
+            clearTimeout(relogio);
+            try { resolve(JSON.parse(saida.trim().split('\n').pop())); }
+            catch { resolve({ ok: false, error: (erro || saida).slice(-400).trim() || 'o kokoro não respondeu' }); }
+        });
+        p.on('error', (e) => { clearTimeout(relogio); resolve({ ok: false, error: e.message }); });
+    });
+}
+
+/** Narra a lista [{texto}] em mp3 com o Kokoro. Devolve o mesmo formato do narrar.py. */
+async function narrar(lista, mp3, { voz, uv, espeak = acharEspeak(), executar = rodar, timeout = 15 * 60000 } = {}) {
+    const arquivo = mp3.replace(/\.mp3$/, '') + '.kokoro.json';
+    const c = comando({ uv, espeak, arquivo, saida: mp3, voz });
+    if (!c) return { ok: false, indisponivel: true, error: !uv ? 'kokoro: falta o uv' : 'kokoro: falta o espeak-ng (brew install espeak-ng)' };
+    try {
+        fs.writeFileSync(arquivo, JSON.stringify(lista.map((x) => ({ ...x, texto: pronuncia(x.texto) }))));
+        return await executar(c, timeout);
+    } catch (e) {
+        return { ok: false, error: e.message };
+    } finally {
+        try { fs.unlinkSync(arquivo); } catch { /* fica */ }
+    }
+}
+
+/** A ordem das vozes: pedida → Kokoro e depois o Edge; senão Gemini → Kokoro → Edge.
+    `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'];
+}
+
+/** Roda a corrente: a primeira voz que der certo ganha; a falha de uma nunca derruba. */
+async function corrente(passos, provedores) {
+    let ultimo = { ok: false, error: 'nenhuma voz disponível' };
+    for (const nome of passos) {
+        const f = provedores[nome];
+        if (!f) continue;
+        let r;
+        try { r = await f(); } catch (e) { r = { ok: false, error: e.message }; }
+        if (r && r.ok) return r;
+        if (r) ultimo = r;
+    }
+    return ultimo;
+}
+
+module.exports = { querKokoro, pronuncia, vozKokoro, acharEspeak, comando, narrar, ordem, corrente, DEPS, SCRIPT };

package/lib/estudio/lancamento.js

@@ -29,6 +29,7 @@ const { caber } = require('./composicao.js');
 const { misturarCor, ehCor } = require('./morfar.js');
 const { tempoDasPartes, gatilhos, volumesDaTrilha, r2 } = require('./ritmo.js');
 const { tese, termoDef } = require('./vox.js');
+const { modeloDoPedido } = require('./variacao3d.js');
 
 const FPS = 30;
 const k = (t, v, e) => (e ? { t: r2(t), v, e } : { t: r2(t), v });
@@ -326,7 +327,27 @@ function montarLancamento({ roteiro, variante = 'lancamento', largura = 1920, al
     };
 
     // ── as peças que qualquer parte pode pedir pelo nome ("visual") ────
+    /* Qual modelo 3D: o que a parte ou o roteiro disser, ou o que o texto
+       deixa claro. Sem pista, a caixa — um produto genérico que ainda gira. */
+    const modeloDe = modeloDoPedido;
     const VISUAL = {
+        /* O PRODUTO EM 3D (kit/tres.jsx): modelado e iluminado aqui, sem foto
+           de fora — girando devagar no centro, o nome embaixo. */
+        '3d'(p, d, tp, t0) {
+            const texto = `${p.titulo || ''} ${p.texto || ''} ${nome}`;
+            const modelo = p.modelo || roteiro.modelo3d || modeloDe(texto);
+            const f = fit(p.titulo || nome, W - 2 * M, 1, deitado ? 84 : 96);
+            const yT = deitado ? H * 0.8 : H * 0.76;
+            const els = [
+                { tipo: 'kit', peca: 'produto3d', modelo, cor: p.cor3d || roteiro.cor3d || '#1b1c20', corAcento: ACENTO, t: 0, giro: 0.4, ...(roteiro.variacao3d || {}),
+                    x: 0, y: r2(deitado ? -H * 0.02 : -H * 0.08), largura: W, altura: H, escala: deitado ? 0.8 : 1.15 },   // deitado a 1,0 o arco saía cortado no topo
+                { tipo: 'kit', peca: 'manchete', modo: 'desfoque', texto: p.titulo || nome, x: W / 2, y: r2(yT), largura: W - 2 * M, alinhamento: 'center',
+                    tamanho: f.tamanho, peso: 800, cor: '#f4f4f6', t: Math.min(0.9, gatilhos([p.titulo || nome], tp, t0, d)[0] || 0.6), ...base },
+            ];
+            if (p.texto) els.push({ tipo: 'kit', peca: 'manchete', modo: 'desfoque', texto: p.texto, x: W / 2, y: r2(yT + f.tamanho * 1.25), largura: W - 2 * M, alinhamento: 'center',
+                tamanho: r2(fit(p.texto, W - 2 * M, 2, 40).tamanho), peso: 500, cor: '#b8bcc8', t: 1.1, ...base });
+            return [cena(d, ESCURO, true, els, { zoom: 1.06 })];
+        },
         esfera(p, d, tp, t0) {
             const f = fit(p.titulo || '', W - 2 * M, 1, 64);
             return [cena(d, ESCURO, true, [
@@ -375,6 +396,12 @@ function montarLancamento({ roteiro, variante = 'lancamento', largura = 1920, al
 
     // ── montar ─────────────────────────────────────────────────────────
     const cenas = [];
+    /* Com modelo 3D no roteiro (ou "3d" pedido), a parte de produto — ou a
+       abertura, se não houver produto — ganha o produto girando. */
+    if (roteiro.modelo3d) {
+        const alvo = partes.find((p) => p.tipo === 'produto' && !p.visual) || partes.find((p) => p.tipo === 'abertura' && !p.visual);
+        if (alvo) alvo.visual = '3d';
+    }
     partes.forEach((p, i) => {
         const fazer = (p.visual && VISUAL[p.visual]) || CENAS[p.tipo] || CENAS.titulo;
         const feitas = fazer(p, dur[i], tempos[i], ini[i], i);

package/lib/estudio/legibilidade.js

@@ -0,0 +1,20 @@
+/**
+ * legibilidade.js — a lei da legibilidade do /brag, em número (comum/desmontados/
+ * latent-spaces-brag.md): rótulo curto fica PARADO ~0,8 s; frase, 0,3 s por
+ * palavra; "fast-in, then hold — never fast-in, then gone".
+ *
+ * "Parado" é o tempo entre o fim da entrada e o começo da saída. Quando a cena
+ * é curta, quem encolhe é a animação (entrada e saída), nunca a leitura.
+ */
+
+'use strict';
+
+const nPalavras = (t) => String(t || '').split(/\s+/).filter(Boolean).length;
+
+/** Quanto tempo o texto precisa ficar parado na tela: max(0,8 s; 0,3 s por palavra). */
+const minimoLeitura = (t) => Math.max(0.8, 0.3 * nPalavras(t));
+
+/** O que sobra para a animação depois da leitura, entre um piso e o tempo cheio. */
+const sobra = (vida, leitura, piso, cheio) => Math.min(cheio, Math.max(piso, vida - leitura));
+
+module.exports = { minimoLeitura, nPalavras, sobra };