primocode 10.0.0 → 10.0.9

package/lib/video/fx3d/Camadas.jsx

@@ -0,0 +1,64 @@
+/* fx3d/Camadas.jsx — o momento "separa em camadas": o fundo e a pessoa
+ * viram duas placas no espaço, se afastam em profundidade, a câmera gira um
+ * pouco para mostrar que são duas, e tudo volta a encostar.
+ *
+ * POR QUE CSS 3D E NÃO three.js AQUI: as camadas são PLANOS. A perspectiva
+ * do CSS (perspective + translateZ + rotateY) projeta plano exatamente como
+ * uma câmera, e a imagem de cada quadro entra como <Img> — o Remotion espera
+ * cada uma carregar antes de fotografar o quadro. Com three seria preciso
+ * subir uma textura por quadro para a GPU e esperar por ela à mão.
+ *
+ * O primeiro e o último quadro são a composição plana (k = 0): o corte para
+ * o vídeo normal, antes e depois, não aparece.
+ *
+ * props: {n, fps, w, h, dir, fundo, rotulos:{fundo, pessoa}} */
+import React from 'react';
+import { AbsoluteFill, Img, staticFile, useCurrentFrame } from 'remotion';
+
+const clamp = (x) => Math.max(0, Math.min(1, x));
+const suave = (x) => { const t = clamp(x); return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; };
+
+function Rotulo({ texto, k, cor, lado = 'left' }) {
+  if (!texto) return null;
+  return (
+    <div style={{ position: 'absolute', [lado]: '6%', top: '4%', padding: '14px 26px', borderRadius: 999, background: 'rgba(10,14,22,0.72)',
+      border: `3px solid ${cor}`, color: '#fff', font: '800 44px/1 system-ui, -apple-system, Helvetica, Arial', letterSpacing: 3,
+      opacity: clamp((k - 0.5) * 2.5), transform: `translateZ(2px)` }}>{texto}</div>
+  );
+}
+
+export const Camadas = (p) => {
+  const f = useCurrentFrame();
+  const { w, h, n, fps } = p;
+  const ent = Math.round(fps * 0.75);
+  const sai = Math.round(fps * 0.75);
+  const k = f < ent ? suave(f / ent) : f > n - 1 - sai ? suave((n - 1 - f) / sai) : 1;
+  const t = f / fps;
+  const rotY = -34 * k + Math.sin(t * 1.3) * 7 * k;
+  const rotX = 10 * k;
+  const escala = 1 - 0.34 * k;
+  const pessoa = staticFile(`${p.dir}/p${String(f + 1).padStart(4, '0')}.png`);
+  const placa = { position: 'absolute', left: 0, top: 0, width: w, height: h, transformStyle: 'preserve-3d' };
+  const borda = (cor) => ({ position: 'absolute', inset: 0, border: `${Math.round(6 * k)}px solid ${cor}`, borderRadius: 18 * k, opacity: k, boxShadow: `0 40px 120px rgba(0,0,0,${0.55 * k})` });
+  return (
+    <AbsoluteFill style={{ background: 'radial-gradient(ellipse at 50% 40%, #1d2433 0%, #07090f 75%)', perspective: 2600, perspectiveOrigin: '50% 45%', overflow: 'hidden' }}>
+      {/* o chão de grade, que dá a noção de espaço */}
+      <div style={{ position: 'absolute', left: -w, top: h * 0.62, width: w * 3, height: h, opacity: 0.45 * k,
+        transform: 'rotateX(78deg)', transformOrigin: '50% 0%',
+        backgroundImage: 'linear-gradient(rgba(120,200,255,0.35) 2px, transparent 2px), linear-gradient(90deg, rgba(120,200,255,0.35) 2px, transparent 2px)',
+        backgroundSize: '120px 120px' }} />
+      <div style={{ ...placa, transform: `scale(${escala}) rotateX(${rotX}deg) rotateY(${rotY}deg)` }}>
+        <div style={{ ...placa, transform: `translateZ(${-560 * k}px)` }}>
+          <Img src={staticFile(p.fundo)} style={{ width: w, height: h, borderRadius: 18 * k, filter: `brightness(${1 - 0.18 * k})` }} />
+          <div style={borda('rgba(255,190,90,0.95)')} />
+          <Rotulo texto={(p.rotulos || {}).fundo} k={k} cor="rgba(255,190,90,0.95)" lado="right" />
+        </div>
+        <div style={{ ...placa, transform: `translateZ(${300 * k}px)` }}>
+          <Img src={pessoa} style={{ width: w, height: h, filter: `drop-shadow(0 0 ${Math.round(22 * k)}px rgba(90,210,255,${0.85 * k}))` }} />
+          <div style={{ ...borda('rgba(90,210,255,0.9)'), background: 'transparent' }} />
+          <Rotulo texto={(p.rotulos || {}).pessoa} k={k} cor="rgba(90,210,255,0.9)" />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/video/fx3d/Objetos.jsx

@@ -0,0 +1,128 @@
+/* fx3d/Objetos.jsx — a camada TRANSPARENTE dos objetos que seguem as mãos.
+ *
+ * Tudo o que é decisão (onde fica cada objeto em cada quadro, quando entra,
+ * quando funde) já vem calculado do lib/video/camadas.js nas props: aqui só
+ * se desenha. Assim a conta é testada no node, e o 3D só gira, brilha e voa.
+ *
+ * props: {n, fps, w, h, objetos:[{modelo, cor?, texto?, f0, f1, trilha:[[x,y,s]|0], funde?}],
+ *         fusao?: {fj, fm, trilha:[[x,y,s]|0]}}
+ *   x,y = centro do objeto em frações da tela; s = diâmetro em fração da altura. */
+import React, { useMemo } from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+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';
+import { Modelo } from './modelos';
+
+const FOV = 30;
+const DIST = 10;
+const ALTO = 2 * DIST * Math.tan((FOV * Math.PI) / 360);   // altura do mundo visível no plano z=0
+
+const clamp = (x) => Math.max(0, Math.min(1, x));
+const saida = (x) => 1 - Math.pow(1 - clamp(x), 3);
+const volta = (x) => { const c = 1.9, t = clamp(x) - 1; return 1 + (c + 1) * t * t * t + c * t * t; };   // easeOutBack
+const lerp = (a, b, k) => a + (b - a) * k;
+
+function Ambiente() {
+  const { gl, scene } = useThree();
+  useMemo(() => {
+    const pm = new THREE.PMREMGenerator(gl);
+    scene.environment = pm.fromScene(new RoomEnvironment(), 0.04).texture;
+    scene.environmentIntensity = 0.9;
+    pm.dispose();
+  }, [gl, scene]);
+  return null;
+}
+
+// Frações da tela → mundo (no plano z=0 da câmera em perspectiva).
+const mundo = (x, y, asp) => [(x - 0.5) * ALTO * asp, (0.5 - y) * ALTO, 0];
+
+function Objeto({ o, f, fps, asp, fusao }) {
+  const p = o.trilha[f - o.f0] || o.trilha[Math.min(o.trilha.length - 1, Math.max(0, f - o.f0))];
+  if (!p) return null;
+  let [x, y, s] = p;
+  const local = (f - o.f0) / fps;
+  let escala = volta(local / 0.5);                         // entra com mola em 0,5 s
+  let giro = -Math.PI * 1.2 * (1 - saida(local / 0.7)) + Math.sin(local * 1.1) * 0.35;
+  if (!o.funde && o.f1 - f < fps * 0.3) escala *= saida((o.f1 - f) / (fps * 0.3));   // sai encolhendo
+  if (o.funde && fusao && f >= fusao.fj) {
+    const m = fusao.trilha[Math.max(0, Math.min(fusao.trilha.length - 1, f - fusao.fj))];
+    const k = saida((f - fusao.fj) / Math.max(1, fusao.fm - fusao.fj));
+    if (m) { x = lerp(x, m[0], k); y = lerp(y, m[1], k); }
+    escala *= 1 - 0.55 * k;
+    giro += k * Math.PI * 3;
+    if (f >= fusao.fm) return null;
+  }
+  const flutua = Math.sin(local * 2.4 + o.f0) * 0.012;
+  const [wx, wy] = mundo(x, y + flutua, asp);
+  const tam = s * ALTO * Math.max(0, escala);
+  return (
+    <group position={[wx, wy, 0]} rotation={[0.12 + Math.sin(local * 0.9) * 0.08, giro, Math.sin(local * 0.7) * 0.05]} scale={[tam, tam, tam]}>
+      <Modelo modelo={o.modelo} cor={o.cor} texto={o.texto} />
+      <pointLight position={[0, -0.6, 0.6]} intensity={0.6} distance={3} color={o.modelo === 'cerebro' ? '#ff9fb8' : '#ffffff'} />
+    </group>
+  );
+}
+
+/* O clarão da fusão: uma esfera que abre e some, um anel que corre e
+   faíscas que saem do centro (semente fixa: o mesmo quadro sai igual). */
+function Clarao({ fusao, f, fps, asp }) {
+  const faiscas = useMemo(() => Array.from({ length: 46 }, (_, i) => {
+    const a = (i * 2.399963) % (Math.PI * 2);
+    const z = ((i * 0.618) % 1) * 2 - 1;
+    const r = Math.sqrt(1 - z * z);
+    return { d: [Math.cos(a) * r, Math.sin(a) * r, z], v: 0.7 + ((i * 0.37) % 1) * 0.9, c: i % 3 === 0 ? '#ffd27a' : i % 3 === 1 ? '#9fe8ff' : '#ffffff' };
+  }), []);
+  if (!fusao || f < fusao.fm) return null;
+  const t = (f - fusao.fm) / fps;
+  if (t > 0.9) return null;
+  const m = fusao.trilha[Math.max(0, Math.min(fusao.trilha.length - 1, f - fusao.fj))];
+  if (!m) return null;
+  const [wx, wy] = mundo(m[0], m[1], asp);
+  const R = m[2] * ALTO;
+  const k = saida(t / 0.35);
+  return (
+    <group position={[wx, wy, 0.5]}>
+      <mesh scale={[R * (0.3 + 1.4 * k), R * (0.3 + 1.4 * k), R * (0.3 + 1.4 * k)]}>
+        <sphereGeometry args={[0.5, 32, 32]} />
+        <meshBasicMaterial color="#fff6e0" transparent opacity={Math.max(0, 0.9 * (1 - t / 0.35))} blending={THREE.AdditiveBlending} depthWrite={false} />
+      </mesh>
+      <mesh scale={[R * (0.4 + 2.2 * k), R * (0.4 + 2.2 * k), 1]}>
+        <ringGeometry args={[0.46, 0.5, 96]} />
+        <meshBasicMaterial color="#bfefff" transparent opacity={Math.max(0, 0.8 * (1 - t / 0.5))} blending={THREE.AdditiveBlending} depthWrite={false} side={THREE.DoubleSide} />
+      </mesh>
+      {faiscas.map((p, i) => {
+        const dd = R * p.v * (0.2 + 1.8 * saida(t / 0.8));
+        const a = Math.max(0, 1 - t / 0.85);
+        return (
+          <mesh key={i} position={[p.d[0] * dd, p.d[1] * dd, p.d[2] * dd]} scale={[R * 0.035 * a + 0.001, R * 0.035 * a + 0.001, R * 0.035 * a + 0.001]}>
+            <sphereGeometry args={[1, 10, 10]} />
+            <meshBasicMaterial color={p.c} transparent opacity={a} blending={THREE.AdditiveBlending} depthWrite={false} />
+          </mesh>
+        );
+      })}
+    </group>
+  );
+}
+
+export const Objetos = (props) => {
+  const f = useCurrentFrame();
+  const { w, h, fps } = props;
+  const asp = w / h;
+  const vivos = (props.objetos || []).filter((o) => f >= o.f0 && f < o.f1);
+  return (
+    <AbsoluteFill>
+      <ThreeCanvas width={w} height={h} camera={{ position: [0, 0, DIST], fov: FOV, near: 0.1, far: 100 }}
+        gl={{ antialias: true, alpha: true, preserveDrawingBuffer: true, premultipliedAlpha: false }}>
+        <Ambiente />
+        <ambientLight intensity={0.35} />
+        <directionalLight position={[3, 5, 6]} intensity={2.6} />
+        <directionalLight position={[-4, 2, 3]} intensity={1.0} color="#cfe6ff" />
+        <directionalLight position={[0, -3, -4]} intensity={1.6} color="#ffd9b0" />
+        {vivos.map((o, i) => <Objeto key={i} o={o} f={f} fps={fps} asp={asp} fusao={props.fusao} />)}
+        <Clarao fusao={props.fusao} f={f} fps={fps} asp={asp} />
+      </ThreeCanvas>
+    </AbsoluteFill>
+  );
+};

package/lib/video/fx3d/Root.jsx

@@ -0,0 +1,18 @@
+/* fx3d/Root.jsx — as duas composições do editor. O tamanho, o fps e a
+ * duração vêm das props de cada render (calculateMetadata), não daqui. */
+import React from 'react';
+import { Composition, registerRoot } from 'remotion';
+import { Camadas } from './Camadas';
+import { Objetos } from './Objetos';
+
+const meta = ({ props }) => ({ durationInFrames: Math.max(1, props.n || 1), fps: props.fps || 30, width: props.w || 1080, height: props.h || 1920 });
+const padrao = { n: 30, fps: 30, w: 1080, h: 1920 };
+
+const Root = () => (
+  <>
+    <Composition id="Camadas" component={Camadas} durationInFrames={30} fps={30} width={1080} height={1920} defaultProps={padrao} calculateMetadata={meta} />
+    <Composition id="Objetos" component={Objetos} durationInFrames={30} fps={30} width={1080} height={1920} defaultProps={padrao} calculateMetadata={meta} />
+  </>
+);
+
+registerRoot(Root);

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 };