primocode 10.0.0 → 10.0.9

package/lib/estudio/kit/index.jsx

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

package/lib/estudio/kit/tres.jsx

@@ -0,0 +1,308 @@
+/* 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",
+ *  "cor":"#1b1c20","corAcento":"#ff5a1f","t":0,"giro":0.35,
+ *  "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, emissivo }) {
+  return <meshPhysicalMaterial color={cor} roughness={brilho} metalness={metal} clearcoat={verniz} clearcoatRoughness={0.25}
+    {...(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.
+function Fone({ cor, acento }) {
+  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} />
+      </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} />
+      </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 }) {
+  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} /></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 }) {
+  return (
+    <group>
+      <mesh><cylinderGeometry args={[0.55, 0.55, 1.9, 96]} /><Material cor={cor} brilho={0.2} metal={0.85} /></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 }) {
+  return (
+    <group>
+      <mesh><boxGeometry args={[1.5, 1.5, 1.5]} /><Material cor={cor} brilho={0.3} metal={0.3} /></mesh>
+      <mesh position={[0, 0, 0.752]}><planeGeometry args={[1.0, 0.18]} /><Material cor={acento} emissivo={acento} /></mesh>
+    </group>
+  );
+}
+
+const MODELOS = { fone: Fone, headset: Fone, celular: Celular, phone: Celular, lata: Lata, garrafa: Lata, caixa: Caixa };
+
+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 giro = (el.giro0 ?? -0.9) + (1 - k) * 1.4 + tl * (el.giro ?? 0.35);
+  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, 0.35, 4.4], fov: el.fov || 32 }} gl={{ antialias: true, preserveDrawingBuffer: true }}>
+        <Ambiente forca={0.8} />
+        <hemisphereLight args={['#ffffff', '#202020', 0.5]} />
+        <ambientLight intensity={0.35} />
+        <directionalLight position={[3, 4, 5]} intensity={3.2} />
+        <directionalLight position={[-2, 3, 4]} intensity={1.1} />
+        <directionalLight position={[-4, 1.5, -3]} intensity={3.2} color={acento} />
+        <pointLight position={[0, -2, 3]} intensity={0.8} />
+        <group position={[0, flutua - 0.05, 0]} rotation={[0.18 + (1 - k) * 0.3, giro, 0]} scale={[escala, escala, escala]}>
+          <Modelo cor={cor} acento={acento} />
+        </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,15 @@ 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'] },
 };
 
-const ARQUIVOS = ['base.jsx', 'vox.jsx', 'marca.jsx', 'index.jsx'];
+const ARQUIVOS = ['base.jsx', 'vox.jsx', 'marca.jsx', 'tres.jsx', 'gerativo.jsx', 'index.jsx'];
 
 /** Os arquivos do kit, para o projeto Remotion: [{nome: 'kit/base.jsx', conteudo}]. */
 function arquivos() {

package/lib/estudio/lancamento.js

@@ -326,7 +326,29 @@ 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 = (txt) => (/fone|headset|headphone|auricular/i.test(txt) ? 'fone'
+        : /celular|smartphone|iphone|phone|telefone/i.test(txt) ? 'celular'
+            : /lata|bebida|refri|cerveja|energ[eé]tico|garrafa/i.test(txt) ? 'lata' : 'caixa');
     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,
+                    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 +397,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/referencias.js

@@ -0,0 +1,105 @@
+/**
+ * referencias.js — de onde o vídeo tira as referências, decidido pela
+ * PESSOA antes de começar.
+ *
+ *   "A IA deve pedir: pegar referências da web com escopo aberto, pegar
+ *    referências da web com escopo que você define (escopo fechado), ou sem
+ *    referências — só motion." (29/09)
+ *
+ * Três modos:
+ *   aberto   pesquisa, site da marca e b-roll de banco à vontade (o híbrido)
+ *   fechado  só o que a pessoa disse: os sites e termos do escopo, nada além
+ *   sem      nenhuma foto nem vídeo de fora: motion puro (o kit), sem b-roll
+ *
+ * A escolha vale para o pedido (o terminal pergunta a cada vídeo novo) e é
+ * lida em dois lugares: a instrução que vai para o agente e o Estúdio, que
+ * não baixa b-roll no "sem" e só busca o escopo no "fechado".
+ */
+
+'use strict';
+
+let ATUAL = { modo: null, escopo: '' };
+
+function definir(modo, escopo = '') {
+    ATUAL = { modo: ['aberto', 'fechado', 'sem'].includes(modo) ? modo : null, escopo: String(escopo || '').trim() };
+    return ATUAL;
+}
+function atual() { return ATUAL; }
+function limpar() { ATUAL = { modo: null, escopo: '' }; }
+
+/** Os termos do escopo fechado: "site:anthropic.com, claude ai, sonnet" → lista. */
+function termos(escopo = ATUAL.escopo) {
+    return String(escopo || '').split(/[,;\n]+/).map((x) => x.trim()).filter(Boolean).slice(0, 8);
+}
+
+/** A resposta da pergunta ("1", "2", "aberto", "só motion"…) → modo. */
+function entender(resposta) {
+    const r = String(resposta || '').toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '').trim();
+    if (/^1\b|aberto|livre|qualquer/.test(r)) return 'aberto';
+    if (/^2\b|fechad|escopo|defino|so (d|n)(e|o)ss/.test(r)) return 'fechado';
+    if (/^3\b|sem ref|nenhum|so motion|motion|sem foto|sem imagem/.test(r)) return 'sem';
+    return null;
+}
+
+/* O MODO DEDUZIDO DO PEDIDO. Quem diz no pedido não é perguntado:
+     "só motion", "sem referência", "sem foto"          → sem
+     "só do site x.com", "usa apenas anthropic.com e …" → fechado (o escopo)
+     "web aberta", "escopo aberto", "pesquisa à vontade" → aberto
+   O resto volta com `explicito: false` e o terminal pergunta antes de
+   começar: "eu posso pedir um vídeo mas estar me referindo ao motion"
+   (Joel, 02/10) — chutar o aberto fazia vídeo com foto e b-roll quando a
+   pessoa queria só motion. */
+function inferir(texto) {
+    const t = String(texto || '').toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '');
+    if (/so (o )?motion|motion puro|sem refer|sem (foto|imagem|imagens|video de banco|pesquisa)|nao (pesquis|busqu)|so anima/.test(t)) return { modo: 'sem', escopo: '', explicito: true };
+    const dominios = String(texto || '').match(/\b[a-z0-9-]+(\.[a-z0-9-]+)+\.?[a-z]{2,}(\/[^\s,]*)?/gi) || [];
+    if (/\b(so|apenas|somente|unicamente)\b[^.]{0,30}\b(site|sites|link|links|fonte|fontes|pagina|de|do|da|em)\b/.test(t) && dominios.length) {
+        return { modo: 'fechado', escopo: dominios.join(', '), explicito: true };
+    }
+    if (/escopo aberto|web aberta|pesquis\w* (a vontade|na web|na internet)|busc\w* (imagens|fotos|videos) na (web|internet)|com (imagens|fotos) da (web|internet)/.test(t)) {
+        return { modo: 'aberto', escopo: '', explicito: true };
+    }
+    return { modo: 'aberto', escopo: '', explicito: false };
+}
+
+/** A instrução para o agente, conforme o modo. */
+function instrucao({ modo, escopo } = ATUAL) {
+    if (modo === 'sem') {
+        return '[REFERÊNCIAS: NENHUMA] A pessoa quer SÓ MOTION: não pesquise (nada de pesquisar_referencia nem estudio_site), '
+            + 'não busque foto nem vídeo, não use estudio_midia de banco. Escreva o roteiro com o que o pedido já diz e deixe '
+            + 'o motion gerativo fazer o trabalho (roteiro.estilo "gerativo": a tipografia anima sozinha, sem template).';
+    }
+    if (modo === 'fechado') {
+        const t = termos(escopo);
+        return `[REFERÊNCIAS: ESCOPO FECHADO] Use SÓ estas fontes e termos: ${t.join(' · ') || escopo}. `
+            + 'Pesquise apenas dentro delas (em pesquisar_referencia, cite o site ou o termo no próprio texto da busca). '
+            + 'Nada de fato, foto ou vídeo de fora desse escopo; se faltar algo, diga no fim em uma linha. '
+            + `No roteiro, ponha roteiro.busca = ${JSON.stringify(t)} para o b-roll.`;
+    }
+    if (modo === 'aberto') {
+        return '[REFERÊNCIAS: ESCOPO ABERTO] Pesquise o assunto à vontade (pesquisar_referencia; estudio_site se for de uma marca) '
+            + 'e dê em cada parte do roteiro um "busca" em inglês com o que mostrar de fundo — gente, lugar, tela, objeto de verdade.';
+    }
+    return '';
+}
+
+/** Os domínios do escopo fechado: "só do site anthropic.com" → ['anthropic.com']. */
+function dominios(escopo = ATUAL.escopo) {
+    return termos(escopo).map((t) => t.replace(/^site:/, '').replace(/^https?:\/\//, '').replace(/^www\./, '').split('/')[0].toLowerCase())
+        .filter((t) => /^[a-z0-9-]+(\.[a-z0-9-]+)+$/.test(t));
+}
+
+/** O resultado da pesquisa sem o que está fora do escopo fechado (subdomínios valem: www-cdn.anthropic.com). */
+function filtrar(r, { modo, escopo } = ATUAL) {
+    if (modo !== 'fechado' || !r || !Array.isArray(r.referencias)) return r;
+    const ds = dominios(escopo);
+    if (!ds.length) return r;
+    const dentro = (u) => { try { const h = new URL(u).hostname.toLowerCase(); return ds.some((d) => h === d || h.endsWith('.' + d)); } catch { return false; } };
+    const refs = r.referencias.filter((x) => dentro(x.url));
+    const fora = r.referencias.length - refs.length;
+    if (!refs.length) return { ok: false, consulta: r.consulta, error: `nada desta busca é de ${ds.join(', ')} (escopo fechado)`,
+        comoCorrigir: `Abra o site direto: browser_open https://${ds[0]} e browser_read. Não use fonte de fora.` };
+    return { ...r, fontes: refs.length, referencias: refs, ...(fora ? { foraDoEscopo: fora } : {}) };
+}
+
+module.exports = { definir, atual, limpar, termos, entender, inferir, instrucao, dominios, filtrar };

package/lib/estudio/remotion.js

@@ -74,6 +74,10 @@ function pkgJson(nome) {
             remotion: VERSAO_REMOTION,
             react: '19.0.0',
             'react-dom': '19.0.0',
+            // O produto em 3D (kit/tres.jsx). Instalado uma vez na base compartilhada.
+            '@remotion/three': VERSAO_REMOTION,
+            three: '0.186.1',
+            '@react-three/fiber': '9.8.1',
         },
     }, null, 2) + '\n';
 }
@@ -877,9 +881,15 @@ function fontesCSS(plano) {
     for (const cena of plano.cenas || []) andar(cena.elementos || []);
     andar(plano.hud);
     if (!usadas.size) return '/* nenhuma fonte externa neste vídeo */\n';
+    /* A FONTE VARIÁVEL: o motion gerativo anima os eixos (wght, wdth, GRAD…)
+       e precisa do arquivo variável inteiro, pedido pela faixa de cada eixo
+       ("Roboto+Flex:opsz,slnt,wdth,wght,GRAD@8..144,…"). As outras seguem
+       com os pesos fixos. */
+    const variaveis = plano.fontesVariaveis || {};
     const familias = [...usadas]
         // O Google devolve o que a família tem e ignora o resto: pedir todos os pesos e o itálico não quebra.
-        .map((f) => 'family=' + encodeURIComponent(f).replace(/%20/g, '+') + ':ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600')
+        .map((f) => 'family=' + encodeURIComponent(f).replace(/%20/g, '+')
+            + (variaveis[f] ? ':' + variaveis[f] : ':ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600'))
         .join('&');
     return `@import url('https://fonts.googleapis.com/css2?${familias}&display=block');\n`;
 }
@@ -904,15 +914,47 @@ function citarWin(a) {
     return '"' + t.replace(/"/g, '""') + '"';
 }
 
+/* O REMOTION COMPARTILHADO. Cada projeto rodava o próprio `npm install`
+   (minutos, e ~300 MB por vídeo) — e um 404 passageiro do registro no meio
+   dele derrubava o vídeo inteiro (medido em 30/09: source-map-js 1.2.2).
+   Agora a instalação mora UMA vez em ~/.primocode/studio/remotion-base, com
+   as mesmas dependências, e o projeto aponta para ela. Dependência diferente
+   (versão nova do Remotion) reinstala a base. */
+const os = require('os');
+function baseCompartilhada(raiz) {
+    const base = path.join(os.homedir(), '.primocode', 'studio', 'remotion-base');
+    let deps = '';
+    try { const pj = JSON.parse(fs.readFileSync(path.join(raiz, 'package.json'), 'utf8')); deps = JSON.stringify({ d: pj.dependencies || {}, v: pj.devDependencies || {} }); } catch { return null; }
+    return { base, deps, pronta: (() => {
+        try { return fs.existsSync(path.join(base, 'node_modules', '.bin')) && fs.readFileSync(path.join(base, 'deps.json'), 'utf8') === deps; } catch { return false; }
+    })() };
+}
+
 function renderizar({ raiz, saida, minutos = 30, aoFalar = () => {} }) {
     return new Promise((resolve) => {
-        const temNodeModules = fs.existsSync(path.join(raiz, 'node_modules'));
-        const passos = temNodeModules ? [] : [['npm', ['install', '--no-audit', '--no-fund']]];
-        passos.push(['npx', ['remotion', 'render', 'Video', saida, '--log=warn']]);
-
-        const correr = (i) => {
+        let temNodeModules = fs.existsSync(path.join(raiz, 'node_modules'));
+        const comp = temNodeModules || process.platform === 'win32' ? null : baseCompartilhada(raiz);
+        if (comp && comp.pronta) {
+            try { fs.symlinkSync(path.join(comp.base, 'node_modules'), path.join(raiz, 'node_modules'), 'dir'); temNodeModules = true; } catch { /* instala aqui mesmo */ }
+        }
+        const passos = [];
+        if (!temNodeModules && comp) {
+            // Instala na base (com uma segunda tentativa: o registro às vezes devolve 404 por instantes) e liga.
+            try { fs.mkdirSync(comp.base, { recursive: true }); fs.copyFileSync(path.join(raiz, 'package.json'), path.join(comp.base, 'package.json')); } catch { /* segue */ }
+            passos.push(['npm', ['install', '--no-audit', '--no-fund'], { cwd: comp.base, tentativas: 2, depois: () => {
+                fs.writeFileSync(path.join(comp.base, 'deps.json'), comp.deps);
+                try { fs.symlinkSync(path.join(comp.base, 'node_modules'), path.join(raiz, 'node_modules'), 'dir'); } catch { /* já existe */ }
+            } }]);
+        } else if (!temNodeModules) passos.push(['npm', ['install', '--no-audit', '--no-fund'], { tentativas: 2 }]);
+        // Vídeo de b-roll pesado (Pexels HD) levava mais de 30 s para o primeiro quadro.
+        /* VÁRIOS TRABALHADORES no render: o Remotion usa metade dos núcleos por
+           padrão; aqui vão quase todos (um fica para o terminal respirar). */
+        const nucleos = Math.max(2, (require('os').cpus() || []).length - 1);
+        passos.push(['npx', ['remotion', 'render', 'Video', saida, '--log=warn', '--timeout=120000', `--concurrency=${nucleos}`]]);
+
+        const correr = (i, tentativa = 1) => {
             if (i >= passos.length) return resolve({ ok: true, arquivo: saida });
-            const [cmd, args] = passos[i];
+            const [cmd, args, op = {}] = passos[i];
             aoFalar(i === 0 && !temNodeModules
                 ? 'instalando o Remotion nesta pasta (uma vez só, alguns minutos)'
                 : 'renderizando quadro a quadro');
@@ -926,7 +968,7 @@ function renderizar({ raiz, saida, minutos = 30, aoFalar = () => {} }) {
                CVE-2024-27980 o Node recusa spawnar npm.cmd/npx.cmd sem shell.
                Então as aspas entram na mão, só onde o shell existe. */
             const citados = process.platform === 'win32' ? args.map(citarWin) : args;
-            const p = spawn(cmd, citados, { cwd: raiz, shell: process.platform === 'win32' });
+            const p = spawn(cmd, citados, { cwd: op.cwd || raiz, shell: process.platform === 'win32' });
             let erro = '';
             p.stderr.on('data', (d) => { erro += d.toString().slice(0, 2000); });
             p.stdout.on('data', (d) => {
@@ -937,8 +979,10 @@ function renderizar({ raiz, saida, minutos = 30, aoFalar = () => {} }) {
             p.on('close', (code) => {
                 clearTimeout(relogio);
                 if (code !== 0) {
+                    if (tentativa < (op.tentativas || 1)) { aoFalar('o npm tropeçou — tentando de novo'); return setTimeout(() => correr(i, tentativa + 1), 3000); }
                     return resolve({ ok: false, error: `${cmd} saiu com ${code}: ${erro.slice(-600).trim()}` });
                 }
+                try { if (op.depois) op.depois(); } catch { /* segue */ }
                 correr(i + 1);
             });
             p.on('error', (e) => {
@@ -961,4 +1005,4 @@ function renderizar({ raiz, saida, minutos = 30, aoFalar = () => {} }) {
     });
 }
 
-module.exports = { montar, renderizar, fontesCSS, VERSAO_REMOTION, CENA_JSX };
+module.exports = { montar, renderizar, fontesCSS, VERSAO_REMOTION, CENA_JSX, pkgJson, baseCompartilhada, TSCONFIG };

package/lib/estudio/ritmo.js

@@ -25,7 +25,7 @@ const r2 = (n) => Math.round(n * 100) / 100;
  *
  * @returns {{ini:number[], dur:number[], total:number, temVoz:boolean}}
  */
-function tempoDasPartes(partes, tempos = [], { semVoz = () => 2.6, antes = 0.12, cauda = 1.1, minimo = 1.1 } = {}) {
+function tempoDasPartes(partes, tempos = [], { semVoz = () => 2.0, antes = 0.08, cauda = 0.6, minimo = 0.9 } = {}) {
     const temVoz = tempos.length === partes.length && tempos.every((t) => t && t.ate > t.de);
     const ini = [];
     if (temVoz) partes.forEach((_, i) => ini.push(i === 0 ? 0 : r2(Math.max(ini[i - 1] + minimo, tempos[i].de - antes))));
@@ -60,7 +60,7 @@ function palavrasNaCena(tempo, inicio) {
 }
 
 /** O volume da trilha no tempo: cheia no respiro, baixa quando a voz fala, some no fim. */
-function volumesDaTrilha(tempos, total, { alto = 0.22, baixo = 0.11 } = {}) {
+function volumesDaTrilha(tempos, total, { alto = 0.4, baixo = 0.2 } = {}) {
     const k = (t, v) => ({ t: r2(t), v });
     const vs = [k(0, 0.05), k(0.4, alto)];
     // Um quadro-chave de cada vez, sempre depois do anterior: fala colada na outra não volta no tempo.