primocode 9.10.0 → 10.0.9

package/lib/video/fx3d/modelos.jsx

@@ -0,0 +1,304 @@
+/* fx3d/modelos.jsx — os objetos 3D que flutuam na mão, feitos de geometria.
+ *
+ * Nenhum arquivo de marca é baixado: as duas "logos" são DESENHADAS aqui,
+ * como formas genéricas que lembram o tema — um nó hexagonal de seis elos
+ * vazados (o "assistente verde") e um sol de raios irregulares (o
+ * "assistente coral") — extrudadas com chanfro sobre uma placa arredondada,
+ * como ícone de app. O cérebro é procedural: dois hemisférios de esfera
+ * deformada, com os sulcos feitos de ruído.
+ *
+ * Todo modelo cabe numa caixa de ~1 unidade de lado, centrado na origem. */
+import React, { useMemo } from 'react';
+import * as THREE from 'three';
+
+function placa(lado = 1.15, raio = 0.28) {
+  const s = new THREE.Shape();
+  const m = lado / 2;
+  s.moveTo(-m + raio, -m);
+  s.lineTo(m - raio, -m); s.quadraticCurveTo(m, -m, m, -m + raio);
+  s.lineTo(m, m - raio); s.quadraticCurveTo(m, m, m - raio, m);
+  s.lineTo(-m + raio, m); s.quadraticCurveTo(-m, m, -m, m - raio);
+  s.lineTo(-m, -m + raio); s.quadraticCurveTo(-m, -m, -m + raio, -m);
+  return s;
+}
+
+const EXT = (prof, chanfro = 0.035) => ({ depth: prof, bevelEnabled: true, bevelThickness: chanfro, bevelSize: chanfro, bevelSegments: 6, curveSegments: 36 });
+
+function Placa({ cor }) {
+  const g = useMemo(() => { const x = new THREE.ExtrudeGeometry(placa(), EXT(0.16, 0.05)); x.translate(0, 0, -0.2); return x; }, []);
+  // Fosca o bastante para a cor aparecer: muito verniz e o reflexo da sala lava a placa para branco.
+  return (
+    <mesh geometry={g}>
+      <meshPhysicalMaterial color={cor} roughness={0.5} metalness={0} clearcoat={0.6} clearcoatRoughness={0.35} />
+    </mesh>
+  );
+}
+
+/* Um elo: a cápsula VAZADA (contorno grosso). Seis delas, giradas de 60° em
+   volta do centro e inclinadas, formam o nó hexagonal. */
+function elo(comp = 0.62, larg = 0.24, esp = 0.065) {
+  const capsula = (c, l) => {
+    const s = new THREE.Path();
+    const r = l / 2, m = c / 2 - r;
+    s.moveTo(-m, -r); s.lineTo(m, -r);
+    s.absarc(m, 0, r, -Math.PI / 2, Math.PI / 2, false);
+    s.lineTo(-m, r);
+    s.absarc(-m, 0, r, Math.PI / 2, (3 * Math.PI) / 2, false);
+    return s;
+  };
+  const fora = new THREE.Shape(capsula(comp, larg).getPoints(48));
+  fora.holes.push(new THREE.Path(capsula(comp - 2 * esp, larg - 2 * esp).getPoints(48).reverse()));
+  return fora;
+}
+
+function NoHexagonal() {
+  const g = useMemo(() => new THREE.ExtrudeGeometry(elo(), EXT(0.07, 0.018)), []);
+  return (
+    <group scale={[0.92, 0.92, 0.92]}>
+      {Array.from({ length: 6 }, (_, k) => {
+        const a = (k * Math.PI) / 3;
+        return (
+          <group key={k} rotation={[0, 0, a]}>
+            <mesh geometry={g} position={[0.04, 0.2, 0.02 + (k % 2) * 0.012]} rotation={[0, 0, Math.PI / 3.2]}>
+              <meshPhysicalMaterial color="#ffffff" roughness={0.18} metalness={0.1} clearcoat={1} clearcoatRoughness={0.08} />
+            </mesh>
+          </group>
+        );
+      })}
+    </group>
+  );
+}
+
+/* O sol de raios: onze raios de comprimento e largura um pouco diferentes
+   (a irregularidade é o que faz parecer desenhado à mão, não engrenagem). */
+function raio(comp, base, ponta) {
+  const s = new THREE.Shape();
+  s.moveTo(-base / 2, 0);
+  s.lineTo(-ponta / 2, comp - ponta / 2);
+  s.absarc(0, comp - ponta / 2, ponta / 2, Math.PI, 0, true);
+  s.lineTo(base / 2, 0);
+  s.lineTo(-base / 2, 0);
+  return s;
+}
+
+function Sol({ cor }) {
+  const raios = useMemo(() => {
+    const comps = [0.47, 0.42, 0.5, 0.44, 0.48, 0.4, 0.49, 0.43, 0.46, 0.41, 0.5];
+    return comps.map((c, k) => ({ g: new THREE.ExtrudeGeometry(raio(c, 0.07, 0.1 + (k % 3) * 0.012), EXT(0.08, 0.02)), a: (k / comps.length) * Math.PI * 2 + 0.12 * Math.sin(k * 2.3) }));
+  }, []);
+  return (
+    <group position={[0, 0, 0.02]}>
+      {raios.map((r, k) => (
+        <mesh key={k} geometry={r.g} rotation={[0, 0, r.a]}>
+          <meshPhysicalMaterial color={cor} roughness={0.35} metalness={0.05} clearcoat={0.8} clearcoatRoughness={0.2} />
+        </mesh>
+      ))}
+      <mesh position={[0, 0, 0.05]}><cylinderGeometry args={[0.09, 0.09, 0.1, 48]} /><meshPhysicalMaterial color={cor} roughness={0.35} clearcoat={0.8} /></mesh>
+    </group>
+  );
+}
+
+/* ── o cérebro ────────────────────────────────────────────────────────────
+ * Esfera → elipsoide → giros. O giro é RUÍDO DE CRISTA (1 − |simplex|, com o
+ * espaço torcido por outro ruído): dá as linhas sinuosas, contínuas e de
+ * largura parecida que o córtex tem — seno sobre seno dava papel amassado.
+ * O lado de dentro de cada hemisfério é achatado e a fenda fica no meio. */
+const GRAD = [[1, 1, 0], [-1, 1, 0], [1, -1, 0], [-1, -1, 0], [1, 0, 1], [-1, 0, 1], [1, 0, -1], [-1, 0, -1], [0, 1, 1], [0, -1, 1], [0, 1, -1], [0, -1, -1]];
+const PERM = (() => {
+  // Permutação fixa (semente constante): o cérebro sai igual em todo render.
+  const p = Array.from({ length: 256 }, (_, i) => i);
+  let x = 1234567;
+  for (let i = 255; i > 0; i--) { x = (x * 1103515245 + 12345) & 0x7fffffff; const j = x % (i + 1); [p[i], p[j]] = [p[j], p[i]]; }
+  return [...p, ...p];
+})();
+function simplex(xin, yin, zin) {
+  const F3 = 1 / 3, G3 = 1 / 6;
+  const s = (xin + yin + zin) * F3;
+  const i = Math.floor(xin + s), j = Math.floor(yin + s), k = Math.floor(zin + s);
+  const t = (i + j + k) * G3;
+  const x0 = xin - (i - t), y0 = yin - (j - t), z0 = zin - (k - t);
+  let i1, j1, k1, i2, j2, k2;
+  if (x0 >= y0) {
+    if (y0 >= z0) { i1 = 1; j1 = 0; k1 = 0; i2 = 1; j2 = 1; k2 = 0; } else if (x0 >= z0) { i1 = 1; j1 = 0; k1 = 0; i2 = 1; j2 = 0; k2 = 1; } else { i1 = 0; j1 = 0; k1 = 1; i2 = 1; j2 = 0; k2 = 1; }
+  } else if (y0 < z0) { i1 = 0; j1 = 0; k1 = 1; i2 = 0; j2 = 1; k2 = 1; } else if (x0 < z0) { i1 = 0; j1 = 1; k1 = 0; i2 = 0; j2 = 1; k2 = 1; } else { i1 = 0; j1 = 1; k1 = 0; i2 = 1; j2 = 1; k2 = 0; }
+  const cantos = [[x0, y0, z0, 0, 0, 0], [x0 - i1 + G3, y0 - j1 + G3, z0 - k1 + G3, i1, j1, k1],
+    [x0 - i2 + 2 * G3, y0 - j2 + 2 * G3, z0 - k2 + 2 * G3, i2, j2, k2], [x0 - 1 + 3 * G3, y0 - 1 + 3 * G3, z0 - 1 + 3 * G3, 1, 1, 1]];
+  let n = 0;
+  const ii = i & 255, jj = j & 255, kk = k & 255;
+  for (const [x, y, z, a, b, c] of cantos) {
+    let tt = 0.6 - x * x - y * y - z * z;
+    if (tt < 0) continue;
+    const g = GRAD[PERM[ii + a + PERM[jj + b + PERM[kk + c]]] % 12];
+    tt *= tt;
+    n += tt * tt * (g[0] * x + g[1] * y + g[2] * z);
+  }
+  return 32 * n;
+}
+/* 0 no fundo do sulco, 1 no alto do giro. O sulco é onde o ruído cruza o
+   zero — curvas fechadas e sinuosas; o giro é o resto, largo e redondo. */
+const liso = (a, b, x) => { const t = Math.max(0, Math.min(1, (x - a) / (b - a))); return t * t * (3 - 2 * t); };
+function sulcos(x, y, z) {
+  const w = 0.25 * simplex(x * 1.3 + 7, y * 1.3, z * 1.3);
+  const n1 = simplex(x * 2.6 + w, y * 2.6 - w, z * 2.6 + w);
+  const n2 = simplex(x * 5.2 - w + 3, y * 5.2 + w, z * 5.2);
+  return Math.min(liso(0.0, 0.3, Math.abs(n1)), 0.35 + 0.65 * liso(0.0, 0.22, Math.abs(n2)));
+}
+
+// Cor de vértice é linear no three: os valores parecem escuros, e saem rosados na tela.
+const ROSA_FUNDO = new THREE.Color('#3a0816');
+const ROSA_TOPO = new THREE.Color('#d65a7c');
+
+/* Cor por vértice: o fundo do sulco escurece (a "sombra" que a luz sozinha
+   não faz numa malha tão fina) e a crista do giro clareia. */
+function pintar(g, alturas) {
+  const cores = new Float32Array(alturas.length * 3);
+  const c = new THREE.Color();
+  for (let i = 0; i < alturas.length; i++) {
+    c.copy(ROSA_FUNDO).lerp(ROSA_TOPO, 0.25 + 0.75 * alturas[i]);
+    cores.set([c.r, c.g, c.b], i * 3);
+  }
+  g.setAttribute('color', new THREE.BufferAttribute(cores, 3));
+}
+
+function hemisferio(lado) {
+  const g = new THREE.SphereGeometry(1, 220, 170);
+  const p = g.attributes.position;
+  const v = new THREE.Vector3();
+  const alturas = new Float32Array(p.count);
+  for (let i = 0; i < p.count; i++) {
+    v.fromBufferAttribute(p, i);
+    const s = sulcos(v.x + lado * 0.3, v.y, v.z);
+    alturas[i] = s;
+    v.multiplyScalar(0.93 + 0.07 * s);
+    v.set(v.x * 0.46, v.y * 0.44, v.z * 0.74);
+    if (v.x * lado < 0) v.x *= 0.3;                // achata o lado de dentro (contínuo: sem degrau)
+    if (v.y < 0) v.y *= 0.72;                      // a base mais plana
+    p.setXYZ(i, v.x + lado * 0.16, v.y, v.z);
+  }
+  g.computeVertexNormals();
+  pintar(g, alturas);
+  return g;
+}
+
+function Cerebro({ cor }) {
+  const [e, d] = useMemo(() => [hemisferio(-1), hemisferio(1)], []);
+  const mat = <meshPhysicalMaterial vertexColors color={cor || '#ffffff'} roughness={0.5} metalness={0} clearcoat={0.35} clearcoatRoughness={0.4} sheen={0.3} sheenColor="#ffc2d2" />;
+  /* Visto de cima e de frente (o topo inclinado para a câmera): é assim que
+     se reconhece um cérebro — os dois hemisférios e a fenda no meio. */
+  return (
+    <group rotation={[0.95, 0, 0]} scale={[1.05, 1.05, 1.05]}>
+      <mesh geometry={e}>{mat}</mesh>
+      <mesh geometry={d}>{mat}</mesh>
+    </group>
+  );
+}
+
+/* Texto curto numa placa: desenhado num canvas (sem fonte 3D para baixar). */
+function PlacaTexto({ texto = '', cor = '#111827' }) {
+  const tex = useMemo(() => {
+    const cv = document.createElement('canvas');
+    cv.width = 512; cv.height = 512;
+    const ctx = cv.getContext('2d');
+    ctx.fillStyle = '#ffffff';
+    const t = String(texto).slice(0, 14).toUpperCase();
+    let tam = 200;
+    ctx.font = `900 ${tam}px system-ui, -apple-system, Helvetica, Arial`;
+    while (ctx.measureText(t).width > 440 && tam > 40) { tam -= 8; ctx.font = `900 ${tam}px system-ui, -apple-system, Helvetica, Arial`; }
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(t, 256, 270);
+    const x = new THREE.CanvasTexture(cv);
+    x.colorSpace = THREE.SRGBColorSpace;
+    return x;
+  }, [texto]);
+  return (
+    <group>
+      <Placa cor={cor} />
+      <mesh position={[0, 0, 0.05]}><planeGeometry args={[1.0, 1.0]} /><meshBasicMaterial map={tex} transparent toneMapped={false} /></mesh>
+    </group>
+  );
+}
+
+/* O navegador: o anel de três arcos (vermelho, amarelo, verde) em volta da
+   pupila azul, extrudado — lembra o tema sem copiar o arquivo da marca. */
+function Navegador() {
+  const arcos = useMemo(() => [0, 1, 2].map((k) => {
+    const s = new THREE.Shape();
+    const a0 = (k * 2 * Math.PI) / 3 + Math.PI / 2;
+    const a1 = a0 + (2 * Math.PI) / 3 - 0.06;
+    s.absarc(0, 0, 0.44, a0, a1, false);
+    s.absarc(0, 0, 0.2, a1, a0, true);
+    return new THREE.ExtrudeGeometry(s, EXT(0.09, 0.02));
+  }), []);
+  const cores = ['#db4437', '#f4b400', '#0f9d58'];
+  return (
+    <group position={[0, 0, -0.02]}>
+      {arcos.map((g, k) => (<mesh key={k} geometry={g}><meshPhysicalMaterial color={cores[k]} roughness={0.45} clearcoat={0.5} /></mesh>))}
+      <mesh position={[0, 0, 0.06]} rotation={[Math.PI / 2, 0, 0]}><cylinderGeometry args={[0.15, 0.15, 0.12, 48]} /><meshPhysicalMaterial color="#ffffff" roughness={0.4} /></mesh>
+      <mesh position={[0, 0, 0.1]} rotation={[Math.PI / 2, 0, 0]}><cylinderGeometry args={[0.11, 0.11, 0.12, 48]} /><meshPhysicalMaterial color="#4285f4" roughness={0.35} clearcoat={0.6} /></mesh>
+    </group>
+  );
+}
+
+/* A pasta na nuvem: o triângulo de três faixas (verde, azul, amarelo). */
+function Triangulo() {
+  const faixas = useMemo(() => {
+    const L = 0.5, h = L * Math.sqrt(3);
+    const v = [[0, h * 0.62], [-L, -h * 0.38], [L, -h * 0.38]];
+    return [0, 1, 2].map((k) => {
+      const a = v[k], b = v[(k + 1) % 3];
+      const nx = (b[1] - a[1]), ny = -(b[0] - a[0]);
+      const n = Math.hypot(nx, ny);
+      const e = 0.2;
+      const s = new THREE.Shape();
+      s.moveTo(a[0], a[1]); s.lineTo(b[0], b[1]);
+      s.lineTo(b[0] - (nx / n) * e * 0.9 + (a[0] - b[0]) * 0.18, b[1] - (ny / n) * e * 0.9 + (a[1] - b[1]) * 0.18);
+      s.lineTo(a[0] - (nx / n) * e * 0.9 + (b[0] - a[0]) * 0.18, a[1] - (ny / n) * e * 0.9 + (b[1] - a[1]) * 0.18);
+      s.closePath();
+      return new THREE.ExtrudeGeometry(s, EXT(0.09, 0.02));
+    });
+  }, []);
+  const cores = ['#0f9d58', '#4285f4', '#f4b400'];
+  return (
+    <group position={[0, 0.02, -0.02]} scale={[0.9, 0.9, 0.9]}>
+      {faixas.map((g, k) => (<mesh key={k} geometry={g}><meshPhysicalMaterial color={cores[k]} roughness={0.45} clearcoat={0.5} side={THREE.DoubleSide} /></mesh>))}
+    </group>
+  );
+}
+
+/* O foguete: corpo em revolução (o perfil girado), janela, três aletas e a
+   chama que pulsa — de geometria, como o resto. */
+function Foguete() {
+  const corpo = useMemo(() => {
+    const p = [[0, -0.42], [0.15, -0.4], [0.17, -0.1], [0.16, 0.12], [0.12, 0.28], [0.06, 0.4], [0, 0.46]].map(([x, y]) => new THREE.Vector2(x, y));
+    return new THREE.LatheGeometry(p, 48);
+  }, []);
+  const aleta = useMemo(() => {
+    const s = new THREE.Shape();
+    s.moveTo(0, 0); s.lineTo(0.16, -0.12); s.lineTo(0.16, -0.26); s.lineTo(0, -0.18); s.closePath();
+    return new THREE.ExtrudeGeometry(s, EXT(0.03, 0.01));
+  }, []);
+  return (
+    <group rotation={[0, 0, -0.35]} scale={[1.1, 1.1, 1.1]}>
+      <mesh geometry={corpo}><meshPhysicalMaterial color="#f3f4f6" roughness={0.3} metalness={0.2} clearcoat={0.8} /></mesh>
+      <mesh position={[0, 0.34, 0]}><sphereGeometry args={[0.075, 32, 32]} /><meshPhysicalMaterial color="#e5484d" roughness={0.35} clearcoat={0.6} /></mesh>
+      <mesh position={[0, 0.12, 0.15]}><sphereGeometry args={[0.055, 32, 32]} /><meshPhysicalMaterial color="#3b82f6" roughness={0.1} metalness={0.3} clearcoat={1} /></mesh>
+      {[0, 1, 2].map((k) => (
+        <group key={k} rotation={[0, (k * 2 * Math.PI) / 3, 0]}>
+          <mesh geometry={aleta} position={[0.14, -0.14, -0.015]}><meshPhysicalMaterial color="#e5484d" roughness={0.4} clearcoat={0.5} /></mesh>
+        </group>
+      ))}
+      <mesh position={[0, -0.52, 0]} rotation={[Math.PI, 0, 0]}><coneGeometry args={[0.1, 0.24, 32]} /><meshBasicMaterial color="#ffb020" toneMapped={false} /></mesh>
+      <mesh position={[0, -0.49, 0]} rotation={[Math.PI, 0, 0]}><coneGeometry args={[0.06, 0.14, 32]} /><meshBasicMaterial color="#fff3c4" toneMapped={false} /></mesh>
+    </group>
+  );
+}
+
+export function Modelo({ modelo, cor, texto }) {
+  if (modelo === 'foguete') return <Foguete />;
+  if (modelo === 'chrome') return (<group><Placa cor={cor || '#ffffff'} /><Navegador /></group>);
+  if (modelo === 'drive') return (<group><Placa cor={cor || '#ffffff'} /><Triangulo /></group>);
+  if (modelo === 'chatgpt') return (<group><Placa cor={cor || '#0b8a6a'} /><NoHexagonal /></group>);
+  if (modelo === 'claude') return (<group><Placa cor={cor || '#f4efe6'} /><Sol cor="#cf5f3c" /></group>);
+  if (modelo === 'cerebro') return <Cerebro cor={cor} />;
+  return <PlacaTexto texto={texto || modelo} cor={cor || '#111827'} />;
+}

package/lib/video/fx3d.js

@@ -0,0 +1,108 @@
+/**
+ * fx3d.js — as mídias GERADAS do editor: o momento 3D das camadas e a
+ * camada dos objetos que seguem as mãos. Cada uma é um asset da timeline
+ * (`asset.gerado`), renderizado no Remotion na primeira vez que o export ou
+ * o inspect precisa dele, e guardado pelo hash da receita.
+ *
+ * ── POR QUE O 3D SAI COMO UMA CAMADA, E O RESTO CONTINUA NO ffmpeg ───────
+ * O editor inteiro é um grafo de ffmpeg (filters.js): corte, ripple, cor,
+ * legenda. Levar tudo para o Remotion obrigaria a reescrever o editor e
+ * deixaria cada export lento como um render de navegador. O contrário é
+ * o robusto: só o que PRECISA de GPU (o three.js, a perspectiva das
+ * camadas) passa pelo Remotion, numa camada com canal alfa (ProRes 4444 —
+ * o ffmpeg lê o alfa dele sem decodificador especial, ao contrário do VP9),
+ * e entra no grafo como um clipe qualquer. O clipe "espelha" a fala na
+ * timeline, então um corte de silêncio corta a camada no mesmo quadro.
+ *
+ * A receita fica na timeline (pequena); as trilhas por quadro saem do
+ * rastro na hora do render — mudar a receita muda o hash e refaz só ela.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const crypto = require('crypto');
+const { spawn } = require('child_process');
+const RM = require('../estudio/remotion.js');
+
+const FONTES = path.join(__dirname, 'fx3d');
+const ARQUIVOS = ['Root.jsx', 'Camadas.jsx', 'Objetos.jsx', 'modelos.jsx'];
+
+const CONFIG = `import { Config } from '@remotion/cli/config';
+// O three.js precisa de WebGL de verdade no Chromium sem tela.
+Config.setChromiumOpenGlRenderer('angle');
+`;
+
+function trabalhadores() { return Math.max(1, (os.cpus() || []).length - 1); }
+
+/** A versão das fontes JSX: mudou o desenho, muda o hash, e o render refaz. */
+let _versao = null;
+function versao() {
+    if (_versao) return _versao;
+    return (_versao = hash(ARQUIVOS.map((a) => fs.readFileSync(path.join(FONTES, a), 'utf8')).join('\n')));
+}
+
+function hash(obj) { return crypto.createHash('sha1').update(JSON.stringify(obj)).digest('hex').slice(0, 12); }
+
+function escrever(arq, txt) {
+    fs.mkdirSync(path.dirname(arq), { recursive: true });
+    if (!fs.existsSync(arq) || fs.readFileSync(arq, 'utf8') !== txt) fs.writeFileSync(arq, txt);
+}
+
+function rodar(cmd, args, { cwd, minutos = 30 } = {}) {
+    return new Promise((resolve) => {
+        const p = spawn(cmd, args, { cwd, shell: process.platform === 'win32' });
+        let erro = '';
+        p.stderr.on('data', (d) => { erro = (erro + d.toString()).slice(-3000); });
+        p.stdout.on('data', (d) => { erro = (erro + d.toString()).slice(-3000); });
+        const rel = setTimeout(() => { try { p.kill(); } catch {} }, minutos * 60000);
+        p.on('error', (e) => { clearTimeout(rel); resolve({ ok: false, error: e.message }); });
+        p.on('close', (code) => { clearTimeout(rel); resolve(code === 0 ? { ok: true } : { ok: false, error: `${cmd} saiu com ${code}: ${erro.slice(-700)}` }); });
+    });
+}
+
+/** O projeto Remotion do editor, em <projeto>/cache/fx3d (um por projeto de vídeo). */
+async function projeto(pasta) {
+    const raiz = path.join(pasta, 'cache', 'fx3d');
+    escrever(path.join(raiz, 'package.json'), RM.pkgJson('fx3d'));
+    escrever(path.join(raiz, 'remotion.config.ts'), CONFIG);
+    escrever(path.join(raiz, 'tsconfig.json'), RM.TSCONFIG);
+    for (const a of ARQUIVOS) escrever(path.join(raiz, 'src', a), fs.readFileSync(path.join(FONTES, a), 'utf8'));
+    fs.mkdirSync(path.join(raiz, 'public'), { recursive: true });
+    if (fs.existsSync(path.join(raiz, 'node_modules'))) return { ok: true, raiz };
+    const comp = RM.baseCompartilhada(raiz);
+    if (comp && !comp.pronta) {
+        // A mesma base do Estúdio (~/.primocode/studio/remotion-base): instala uma vez.
+        fs.mkdirSync(comp.base, { recursive: true });
+        fs.copyFileSync(path.join(raiz, 'package.json'), path.join(comp.base, 'package.json'));
+        const r = await rodar('npm', ['install', '--no-audit', '--no-fund'], { cwd: comp.base, minutos: 20 });
+        if (!r.ok) return r;
+        fs.writeFileSync(path.join(comp.base, 'deps.json'), comp.deps);
+    }
+    if (comp) {
+        try { fs.symlinkSync(path.join(comp.base, 'node_modules'), path.join(raiz, 'node_modules'), 'dir'); return { ok: true, raiz }; } catch { /* instala aqui */ }
+    }
+    const r = await rodar('npm', ['install', '--no-audit', '--no-fund'], { cwd: raiz, minutos: 20 });
+    return r.ok ? { ok: true, raiz } : r;
+}
+
+/** Renderiza uma composição. `alfa`: ProRes 4444 com transparência. */
+async function renderizar(raiz, comp, props, saida, { alfa = false } = {}) {
+    const arqProps = path.join(raiz, `props-${hash(props)}.json`);
+    fs.writeFileSync(arqProps, JSON.stringify(props));
+    const tmp = saida.replace(/(\.\w+)$/, `.tmp$1`);
+    fs.mkdirSync(path.dirname(saida), { recursive: true });
+    const formato = alfa
+        ? ['--codec=prores', '--prores-profile=4444', '--pixel-format=yuva444p10le', '--image-format=png']
+        : ['--codec=h264', '--crf=14', '--image-format=jpeg', '--jpeg-quality=95'];
+    const r = await rodar('npx', ['remotion', 'render', 'src/Root.jsx', comp, tmp, `--props=${arqProps}`,
+        `--concurrency=${trabalhadores()}`, ...formato, '--log=error', '--timeout=120000'], { cwd: raiz, minutos: 40 });
+    try { fs.unlinkSync(arqProps); } catch {}
+    if (!r.ok) return r;
+    fs.renameSync(tmp, saida);
+    return { ok: true, arquivo: saida };
+}
+
+module.exports = { projeto, renderizar, hash, versao, trabalhadores, rodar, ARQUIVOS };

package/lib/video/gerados.js

@@ -0,0 +1,119 @@
+/**
+ * gerados.js — na hora do export (ou do inspect), o que a timeline PEDE e
+ * ainda não existe em disco: as camadas 3D renderizadas no Remotion, e a
+ * posição de cada legenda que segue a cabeça.
+ *
+ * Uma operação de efeito só escreve a receita (rápido, com undo). O render
+ * pesado acontece uma vez, aqui, e fica no disco pelo hash da receita:
+ * desfazer e refazer não renderiza de novo.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const T = require('./timeline.js');
+const C = require('./camadas.js');
+const R = require('./rastro.js');
+const RT = require('./rastrear.js');
+const OB = require('./objetos.js');
+const FX = require('./fx3d.js');
+const video = require('../estudio/video.js');
+
+function propsObjetos(tl, a, rastro) {
+    const baseAsset = tl.assets[a.gerado.base];
+    const clip = C.clipesBase(tl, baseAsset.id)[0];
+    const tela = clip ? (x, y) => R.origemParaTela(tl, clip, baseAsset, x, y) : (x, y) => ({ x, y });
+    const p = OB.plano({ receita: a.gerado, trilhas: R.trilhasDasMaos(rastro), rostos: (rastro.quadros || []).map((q) => (q && q.f) || null), rfps: rastro.fps, fps: tl.fps, tela, asp: tl.width / tl.height });
+    return { ...p, fps: tl.fps, w: tl.width, h: tl.height };
+}
+
+/** Os quadros da pessoa recortada (PNG com alfa) e a placa do fundo, no public/ do projeto Remotion. */
+async function quadrosDasCamadas(raiz, tl, a, arqs) {
+    const g = a.gerado;
+    const baseAsset = tl.assets[g.base];
+    const dir = path.join(raiz, 'public', a.id + '-' + FX.hash(g));
+    fs.rmSync(dir, { recursive: true, force: true });
+    fs.mkdirSync(dir, { recursive: true });
+    const n = Math.max(1, Math.round((g.ate - g.de) * tl.fps));
+    const W = tl.width;
+    const H = tl.height;
+    const encaixe = `scale=${W}:${H}:force_original_aspect_ratio=increase,crop=${W}:${H}`;
+    const ss = Math.max(0, g.de - 0.5 / (baseAsset.fps || tl.fps)).toFixed(6);
+    const r = await video.rodar(video.ffmpeg(), ['-hide_banner', '-loglevel', 'error', '-y',
+        '-ss', ss, '-i', baseAsset.path, '-ss', ss, '-i', arqs.matte,
+        '-filter_complex', `[0:v]fps=${tl.fps},${encaixe}[v];[1:v]format=gray,fps=${tl.fps},${encaixe}[m];[v][m]alphamerge[p]`,
+        '-map', '[p]', '-frames:v', String(n), '-compression_level', '1', path.join(dir, 'p%04d.png')]);
+    if (!r.ok) return { ok: false, error: `não extraí os quadros das camadas: ${r.erro.slice(-300)}` };
+    const r2 = await video.rodar(video.ffmpeg(), ['-hide_banner', '-loglevel', 'error', '-y', '-i', arqs.fundo, '-vf', encaixe, path.join(dir, 'fundo.png')]);
+    if (!r2.ok) return { ok: false, error: 'não preparei a placa do fundo' };
+    return { ok: true, dir, rel: path.basename(dir), n };
+}
+
+/** Renderiza o que falta. Devolve {ok, feitos, tookS} ou o erro. */
+async function garantir(pasta, tl, { aoFalar = () => {} } = {}) {
+    const falta = Object.values(tl.assets).filter((a) => a.gerado && !fs.existsSync(a.path));
+    if (!falta.length) return { ok: true, feitos: 0 };
+    const inicio = Date.now();
+    const pj = await FX.projeto(pasta);
+    if (!pj.ok) return { ok: false, error: `o Remotion do editor não subiu: ${pj.error}` };
+    for (const a of falta) {
+        const baseAsset = tl.assets[a.gerado.base];
+        if (!baseAsset) return { ok: false, error: `a camada ${a.id} aponta para a mídia ${a.gerado.base}, que não existe` };
+        const rs = await RT.garantir(pasta, baseAsset);
+        if (!rs.ok) return rs;
+        aoFalar(`renderizando ${a.nome} (Remotion, ${FX.trabalhadores()} trabalhadores)`);
+        let r;
+        if (a.gerado.tipo === 'objetos') {
+            r = await FX.renderizar(pj.raiz, 'Objetos', propsObjetos(tl, a, rs.rastro), a.path, { alfa: true });
+        } else if (a.gerado.tipo === 'camadas') {
+            const q = await quadrosDasCamadas(pj.raiz, tl, a, rs.arquivos);
+            if (!q.ok) return q;
+            r = await FX.renderizar(pj.raiz, 'Camadas', { n: q.n, fps: tl.fps, w: tl.width, h: tl.height, dir: q.rel, fundo: `${q.rel}/fundo.png`, rotulos: a.gerado.rotulos || null }, a.path);
+            fs.rmSync(q.dir, { recursive: true, force: true });
+        } else r = { ok: false, error: `tipo gerado "${a.gerado.tipo}"` };
+        if (!r.ok) return { ok: false, error: `o render 3D falhou (${a.nome}): ${r.error}` };
+    }
+    return { ok: true, feitos: falta.length, tookS: Math.round((Date.now() - inicio) / 100) / 10 };
+}
+
+// ── a legenda que segue a cabeça ─────────────────────────────────────────
+
+const Q = (v) => Math.round(v / 0.004) * 0.004;   // passo de ~8 px: menos estados de PNG, sem tremer
+
+/**
+ * Uma função (clipe, quadroDaTimeline) → {cx, cy} | null para as legendas
+ * com `text.follow`, ou null se nenhuma segue. `avisos` recebe o que faltou.
+ */
+function posicoesDeLegenda(pasta, tl, avisos = []) {
+    const seguem = T.todosOsClipes(tl).some((x) => x.clip.text && x.clip.text.follow);
+    if (!seguem) return null;
+    const cabecas = {};
+    const cabecaDe = (assetId) => {
+        if (assetId in cabecas) return cabecas[assetId];
+        const a = tl.assets[assetId];
+        const arq = a && RT.arquivos(pasta, a).rastro;
+        if (!arq || !fs.existsSync(arq)) { avisos.push(`legenda na cabeça: a mídia ${assetId} não foi rastreada (rode track)`); return (cabecas[assetId] = null); }
+        const rastro = RT.lerRastro(arq);
+        return (cabecas[assetId] = { rastro, trilha: R.trilhaDaCabeca(rastro) });
+    };
+    return (c, f) => {
+        const fw = c.text && c.text.follow;
+        if (!fw) return null;
+        const cab = cabecaDe(fw.asset);
+        if (!cab) return null;
+        const clip = C.clipeNoQuadro(tl, fw.asset, f);
+        if (!clip) return null;
+        const seg = C.quadroParaOrigem(tl, fw.asset, f);
+        const i = Math.max(0, Math.min(cab.trilha.length - 1, Math.round(seg * cab.rastro.fps)));
+        const h = cab.trilha[i];
+        if (!h) return null;
+        const asset = tl.assets[fw.asset];
+        const topo = R.origemParaTela(tl, clip, asset, h.cx, h.top);
+        const tam = (c.text.style && c.text.style.size) || 0.048;
+        const p = R.acimaDaCabeca({ cx: topo.x, top: topo.y }, { altura: tam * 1.45, largura: Math.min(c.transform.w, 0.9), margem: fw.margem ?? 0.02 });
+        return p && { cx: Q(p.cx), cy: Q(p.cy) };
+    };
+}
+
+module.exports = { garantir, propsObjetos, posicoesDeLegenda };

package/lib/video/objetos.js

@@ -0,0 +1,111 @@
+/**
+ * objetos.js — a receita dos objetos na mão vira, quadro a quadro, ONDE
+ * cada um está (as props do fx3d/Objetos.jsx). Conta pura: entra a receita
+ * (segundos da origem) e as trilhas das mãos, sai posição e tamanho.
+ *
+ *   · o objeto flutua ACIMA da palma (um tanto do tamanho da palma), e não
+ *     em cima dela: a mão aberta segura o objeto no ar;
+ *   · o TAMANHO é fixo durante a vida do objeto (a mediana da palma): a
+ *     palma medida pulsa com o gesto, e um logo que incha e murcha a cada
+ *     quadro parece defeito, não perspectiva;
+ *   · quadro sem mão segura a última posição — o objeto não some porque o
+ *     detector piscou;
+ *   · nunca sai da tela: quem fala para a câmera tem a mão na borda de
+ *     baixo, e o objeto "acima da palma" ficaria cortado.
+ */
+
+'use strict';
+
+const r4 = (n) => Math.round(n * 10000) / 10000;
+
+function mediana(v) {
+    const s = v.filter((x) => Number.isFinite(x)).sort((a, b) => a - b);
+    return s.length ? s[Math.floor(s.length / 2)] : null;
+}
+
+/** A trilha de uma mão no intervalo [i0, i1) de quadros da ORIGEM, segurando o último valor. */
+function segurar(trilha, i0, i1) {
+    const out = [];
+    let ult = null;
+    for (let i = i0; i < i1; i++) { const h = trilha[i] || null; if (h) ult = h; out.push(ult); }
+    // O começo sem mão herda a primeira que aparecer.
+    const primeira = out.find(Boolean) || null;
+    return out.map((h) => h || primeira);
+}
+
+/**
+ * {receita, trilhas:{left,right}, rfps (fps do rastro), fps (do projeto),
+ *  tela(x,y) → {x,y} (origem → quadro do projeto), asp (largura/altura do projeto)}
+ * → {n, objetos:[{modelo,cor,texto,f0,f1,trilha:[[x,y,s]|0],funde}], fusao?}
+ */
+function plano({ receita, trilhas, rfps, fps, tela = (x, y) => ({ x, y }), asp = 9 / 16, rostos = null }) {
+    const n = Math.max(1, Math.round((receita.ate - receita.de) * fps));
+    const iDe = (seg) => Math.round((seg - receita.de) * fps);          // segundo da origem → quadro da camada
+    const iOrig = (f) => Math.round((receita.de + f / fps) * rfps);      // quadro da camada → quadro do rastro
+    const posicao = (h, tam) => {
+        const p = tela(h.x, h.y - 1.2 * h.s);
+        // A placa do objeto tem ~1,2× o "tamanho" de largura (girando, um pouco mais).
+        const mx = (1.25 * tam / asp) / 2 + 0.015;
+        const my = 1.25 * tam / 2 + 0.015;
+        return [r4(Math.max(mx, Math.min(1 - mx, p.x))), r4(Math.max(my, Math.min(0.93 - my, p.y))), r4(tam)];
+    };
+    const fusao = receita.fusao || null;
+    const fj = fusao && fusao.junta !== null && fusao.junta !== undefined ? iDe(fusao.junta) : null;
+    const fm = fj !== null ? fj + Math.round(0.4 * fps) : null;
+    const objetos = [];
+    let tamBase = null;
+    for (const o of receita.objetos || []) {
+        const trilha = trilhas[o.mao] || trilhas.right;
+        const f0 = Math.max(0, iDe(o.de));
+        let f1 = Math.min(n, iDe(o.ate));
+        const funde = fj !== null && f0 < fj && f1 > fj;
+        if (funde) f1 = Math.min(n, fm);
+        if (f1 <= f0) continue;
+        const brutos = segurar(trilha, iOrig(f0), iOrig(f1) + 1);
+        const tam = Math.max(0.085, Math.min(0.2, 1.45 * (mediana(brutos.map((h) => h && h.s)) || 0.08)));
+        tamBase = tamBase || tam;
+        const lista = [];
+        for (let f = f0; f < f1; f++) {
+            const h = brutos[iOrig(f) - iOrig(f0)] || brutos[brutos.length - 1];
+            lista.push(h ? posicao(h, tam) : 0);
+        }
+        if (!lista.some(Boolean)) continue;
+        objetos.push({ modelo: o.modelo, ...(o.cor ? { cor: o.cor } : {}), ...(o.texto ? { texto: o.texto } : {}), f0, f1, trilha: lista, ...(funde ? { funde: true } : {}) });
+    }
+    const out = { n, objetos };
+    const fundidos = objetos.filter((o) => o.funde);
+    if (fusao && fj !== null && fundidos.length) {
+        // O meio das duas mãos (ou a mão que houver), um pouco acima: onde a fusão acontece e o cérebro nasce.
+        const ate = Math.min(n, fusao.depoisAte !== undefined ? iDe(fusao.depoisAte) : n);
+        const L = segurar(trilhas.left, iOrig(fj), iOrig(ate) + 1);
+        const R = segurar(trilhas.right, iOrig(fj), iOrig(ate) + 1);
+        const tam = Math.min(0.26, (tamBase || 0.12) * 1.6);
+        const meio = [];
+        for (let f = fj; f < ate; f++) {
+            const k = iOrig(f) - iOrig(fj);
+            const a = L[k];
+            const b = R[k];
+            const h = a && b ? { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, s: (a.s + b.s) / 2 } : a || b;
+            let q = h ? posicao({ ...h, y: h.y - 0.25 * h.s }, tam) : 0;
+            /* As mãos abertas ficam na altura do rosto (o gesto de "nasceu"), e o
+               meio delas é a cara da pessoa: o cérebro desce para logo abaixo do
+               queixo. Visto no primeiro vídeo de verdade (01/10). */
+            const fc = q && rostos && rostos[iOrig(f)];
+            if (fc) {
+                const a0 = tela(fc[0], fc[1]);
+                const a1 = tela(fc[2], fc[3]);
+                const cobre = q[0] + tam / asp / 2 > a0.x && q[0] - tam / asp / 2 < a1.x && q[1] - tam / 2 < a1.y && q[1] + tam / 2 > a0.y;
+                if (cobre) q = [q[0], r4(Math.min(0.93 - 1.25 * tam / 2 - 0.015, a1.y + 0.62 * tam)), q[2]];
+            }
+            meio.push(q);
+        }
+        out.fusao = { fj, fm, trilha: meio };
+        if (fusao.depois) {
+            const fa = fusao.abre !== null && fusao.abre !== undefined ? Math.max(fm, iDe(fusao.abre)) : fm + Math.round(0.3 * fps);
+            if (fa < ate) objetos.push({ modelo: fusao.depois, f0: fa, f1: ate, trilha: meio.slice(fa - fj) });
+        }
+    }
+    return out;
+}
+
+module.exports = { plano, segurar, mediana };