primocode 9.10.0 → 10.0.9

package/lib/video/filters.js

@@ -0,0 +1,280 @@
+/**
+ * filters.js — a linha do tempo vira UM filter_complex do ffmpeg.
+ *
+ * É uma função pura: entra o json, sai a lista de entradas e o texto do
+ * grafo. Quem roda é o render.js. Separado assim, o grafo inteiro é testável
+ * como string, sem ffmpeg na máquina de teste.
+ *
+ * ── COMO O GRAFO É MONTADO ───────────────────────────────────────────────
+ *   · um fundo preto do tamanho do projeto;
+ *   · cada clipe visual, da faixa de BAIXO para a de cima, entra como uma
+ *     entrada própria já cortada na origem (-ss/-t na entrada, que é o corte
+ *     rápido e exato), passa pela cadeia dele (velocidade, recorte, encaixe,
+ *     zoom, efeitos, opacidade, fade, giro) e é sobreposto na posição;
+ *   · cada faixa de TEXTO entra como uma sequência de PNGs transparentes (o
+ *     texto.js decide os estados, o studio/texto.py desenha) e cobre a tela
+ *     inteira — uma entrada por faixa, não uma por legenda;
+ *   · o áudio de cada clipe atrasa até o lugar dele e tudo vira um amix.
+ *
+ * ── POR QUE O ZOOM É zoompan E NÃO scale ─────────────────────────────────
+ * Um scale animado muda o TAMANHO do quadro no meio do fluxo, e o overlay
+ * não aceita isso. O zoompan devolve sempre o mesmo tamanho e aproxima por
+ * dentro — que é exatamente o "punch-in" de quem edita fala para a câmera.
+ */
+
+'use strict';
+
+const T = require('./timeline.js');
+
+// ── números e expressões ─────────────────────────────────────────────────
+
+function num(n) {
+    const s = Number(n).toFixed(4).replace(/0+$/, '').replace(/\.$/, '');
+    return s === '-0' ? '0' : s;
+}
+
+/**
+ * Keyframes → expressão do ffmpeg, em função do tempo `X` (segundos desde
+ * o começo do clipe). Antes do primeiro vale o primeiro; depois do último,
+ * o último.
+ */
+function expressao(keys, X, fps) {
+    if (!keys || !keys.length) return null;
+    const ks = keys.map((k) => ({ t: k.frame / fps, v: k.value, i: k.interp || 'ease' }));
+    let e = num(ks[ks.length - 1].v);
+    for (let j = ks.length - 2; j >= 0; j--) {
+        const a = ks[j];
+        const b = ks[j + 1];
+        const dt = Math.max(1e-6, b.t - a.t);
+        const p = `((${X})-${num(a.t)})/${num(dt)}`;
+        const curva = a.i === 'hold' ? '0' : a.i === 'linear' ? p : `(${p})*(${p})*(3-2*(${p}))`;
+        const seg = a.i === 'hold' ? num(a.v) : `${num(a.v)}+(${num(b.v - a.v)})*${curva}`;
+        e = `if(lt(${X},${num(b.t)}),${seg},${e})`;
+    }
+    return `if(lt(${X},${num(ks[0].t)}),${num(ks[0].v)},${e})`;
+}
+
+// ── efeitos ──────────────────────────────────────────────────────────────
+
+const PRESETS_COR = {
+    warm: { temperature: 0.35, saturation: 0.1 },
+    cool: { temperature: -0.35, saturation: 0.05 },
+    cinematic: { contrast: 0.18, saturation: -0.2, temperature: 0.12, curves: 'medium_contrast' },
+    punchy: { contrast: 0.2, saturation: 0.35 },
+    bw: { saturation: -1, contrast: 0.15 },
+    vintage: { curves: 'vintage', saturation: -0.15 },
+    bright: { exposure: 0.25, gamma: 1.1 },
+};
+
+const CURVAS = ['color_negative', 'cross_process', 'darker', 'increase_contrast', 'lighter', 'linear_contrast', 'medium_contrast', 'negative', 'strong_contrast', 'vintage'];
+
+const lim = (v, a, b) => Math.max(a, Math.min(b, Number(v)));
+
+// Cada efeito: parâmetros com padrão → os filtros do ffmpeg.
+const EFEITOS = {
+    'color.adjust': {
+        params: 'exposure contrast saturation temperature tint (-1..1), gamma (0.1..3), curves',
+        filtro(p) {
+            const f = [];
+            const eq = [];
+            if (p.exposure) eq.push(`brightness=${num(lim(p.exposure, -1, 1) * 0.3)}`);
+            if (p.contrast) eq.push(`contrast=${num(1 + lim(p.contrast, -1, 1))}`);
+            if (p.saturation) eq.push(`saturation=${num(1 + lim(p.saturation, -1, 2))}`);
+            if (p.gamma && Number(p.gamma) !== 1) eq.push(`gamma=${num(lim(p.gamma, 0.1, 3))}`);
+            if (eq.length) f.push('eq=' + eq.join(':'));
+            const t = lim(p.temperature || 0, -1, 1) * 0.25;
+            const g = lim(p.tint || 0, -1, 1) * -0.2;
+            if (t || g) f.push(`colorbalance=rs=${num(t)}:gs=${num(g)}:bs=${num(-t)}:rm=${num(t)}:gm=${num(g)}:bm=${num(-t)}`);
+            if (p.curves) {
+                if (!CURVAS.includes(p.curves)) throw T.erro(`curves "${p.curves}" (use ${CURVAS.join('/')})`);
+                f.push(`curves=preset=${p.curves}`);
+            }
+            return f;
+        },
+    },
+    'blur.gaussian': { params: 'sigma (px, 8)', filtro: (p) => [`gblur=sigma=${num(lim(p.sigma != null ? p.sigma : 8, 0.1, 200))}`] },
+    sharpen: { params: 'amount (0..3, 1)', filtro: (p) => [`unsharp=5:5:${num(lim(p.amount != null ? p.amount : 1, 0, 3))}`] },
+    'stylize.vignette': { params: 'strength (0..1, 0.5)', filtro: (p) => [`vignette=angle=${num(0.25 + 0.9 * lim(p.strength !== undefined ? p.strength : 0.5, 0, 1))}`] },
+    'stylize.grain': { params: 'strength (0..1, 0.3)', filtro: (p) => [`noise=alls=${Math.round(lim(p.strength != null ? p.strength : 0.3, 0, 1) * 40)}:allf=t+u`] },
+    'key.chroma': {
+        params: 'color (hex, #00FF00), similarity (0.12), blend (0.08)',
+        filtro: (p) => ['format=yuva420p', `chromakey=${String(p.color || '#00FF00').replace('#', '0x')}:${num(p.similarity || 0.12)}:${num(p.blend || 0.08)}`],
+    },
+    /* A pessoa recortada: a máscara (studio/rastrear.py) entra como uma
+       segunda entrada, cortada no MESMO trecho do clipe, e vira o alfa
+       (alphamerge) antes de qualquer outro filtro — ver montarGrafo. Aqui
+       só ficam os números: `choke` encolhe a borda (px), `feather` a suaviza. */
+    'key.matte': {
+        params: 'matte (arquivo, posto pelo separate_layers), choke (0..4, 1), feather (0..6, 1.2)',
+        filtro: () => [],
+        cadeiaDaMascara(p) {
+            const f = ['format=gray'];
+            for (let i = 0; i < Math.round(lim(p.choke ?? 1, 0, 4)); i++) f.push('erosion');
+            const fe = lim(p.feather ?? 1.2, 0, 6);
+            if (fe > 0) f.push(`gblur=sigma=${num(fe)}`);
+            return f;
+        },
+    },
+    /* A pessoa no fundo novo: um empurrão leve da cor dela para a luz do
+       fundo (ganho por canal perto de 1) — o "colado" some sem mudar a pele. */
+    'color.match': {
+        params: 'r g b (ganho por canal, 0.85..1.15), medido pelo replace_background',
+        filtro: (p) => [`colorchannelmixer=rr=${num(lim(p.r ?? 1, 0.85, 1.15))}:gg=${num(lim(p.g ?? 1, 0.85, 1.15))}:bb=${num(lim(p.b ?? 1, 0.85, 1.15))}`],
+    },
+};
+
+function filtrosDoEfeito(e) {
+    const def = EFEITOS[e.type];
+    if (!def) throw T.erro(`efeito "${e.type}" não existe (use ${Object.keys(EFEITOS).join('/')})`);
+    return def.filtro(e.params || {});
+}
+
+/** apply_color → o efeito color.adjust (preset + ajustes por cima). */
+function efeitoDeCor(args) {
+    const base = args.preset ? PRESETS_COR[args.preset] : {};
+    if (args.preset && !base) throw T.erro(`preset "${args.preset}" (use ${Object.keys(PRESETS_COR).join('/')})`);
+    const params = { ...base };
+    for (const k of ['exposure', 'contrast', 'saturation', 'temperature', 'tint', 'gamma', 'curves']) {
+        if (args[k] !== undefined) params[k] = args[k];
+    }
+    filtrosDoEfeito({ type: 'color.adjust', params });   // valida já
+    return { type: 'color.adjust', params };
+}
+
+// ── o grafo ──────────────────────────────────────────────────────────────
+
+/** O pedaço do clipe que cai na janela [from, to) — ou null. */
+function naJanela(c, from, to) {
+    const s = Math.max(c.startFrame, from);
+    const e = Math.min(T.fim(c), to);
+    if (e <= s) return null;
+    const corte = s - c.startFrame;
+    return { start: s - from, dur: e - s, corte, trim: c.trimStartFrame + Math.round(corte * (c.speed || 1)) };
+}
+
+function atempo(speed) {
+    // atempo aceita 0.5..2 por filtro: acima disso, em cadeia.
+    const f = [];
+    let s = speed;
+    while (s > 2) { f.push('atempo=2'); s /= 2; }
+    while (s < 0.5) { f.push('atempo=0.5'); s /= 0.5; }
+    if (Math.abs(s - 1) > 1e-6) f.push(`atempo=${num(s)}`);
+    return f;
+}
+
+/**
+ * Monta tudo. `camadasDeTexto`: {índiceDaFaixa: caminho do .ffconcat}.
+ * `escala`: 0.5 para prévia. Devolve {inputs, grafo, saidaV, saidaA, segundos}.
+ */
+function montarGrafo(tl, { from = 0, to, camadasDeTexto = {}, escala = 1, audio = true, video = true } = {}) {
+    const ate = to === undefined ? T.duracao(tl) : Math.min(to, T.duracao(tl));
+    if (!(ate > from)) throw T.erro('nada para renderizar nesse trecho');
+    const fps = tl.fps;
+    const W = T.par(tl.width * escala);
+    const H = T.par(tl.height * escala);
+    const D = (ate - from) / fps;
+    const inputs = [];
+    const linhas = [`color=c=black:s=${W}x${H}:r=${fps}:d=${num(D)}[base]`];
+    const audios = [];
+    let atual = 'base';
+    let n = 0;
+
+    for (let ti = tl.tracks.length - 1; ti >= 0; ti--) {
+        const faixa = tl.tracks[ti];
+        if (faixa.type === 'text') {
+            const arq = video ? camadasDeTexto[ti] : null;
+            if (!arq || faixa.hidden) continue;
+            const k = inputs.length;
+            inputs.push(['-f', 'concat', '-safe', '0', '-i', arq]);
+            linhas.push(`[${k}:v]fps=${fps},format=rgba,setpts=PTS-STARTPTS[tx${k}]`);
+            linhas.push(`[${atual}][tx${k}]overlay=0:0:eof_action=pass[v${++n}]`);
+            atual = `v${n}`;
+            continue;
+        }
+        for (const c of faixa.clips) {
+            const j = naJanela(c, from, ate);
+            if (!j) continue;
+            const a = tl.assets[c.asset];
+            if (!a) continue;
+            const speed = c.speed || 1;
+            const temSom = a.kind === 'audio' || (a.kind === 'video' && a.hasAudio);
+            // video:false — só o áudio (o export em partes faz o som numa passada à parte).
+            const visivel = video && faixa.type === 'video' && !c.hidden && !faixa.hidden;
+            if (!visivel && !(audio && temSom)) continue;
+            const k = inputs.length;
+            const startS = j.start / fps;
+            const durS = j.dur / fps;
+            if (a.kind === 'image') inputs.push(['-loop', '1', '-framerate', String(fps), '-t', num(durS), '-i', a.path]);
+            else inputs.push(['-ss', num(j.trim / fps), '-t', num(durS * speed + 0.05), '-i', a.path]);
+            const matte = visivel && c.effects.find((e) => e.type === 'key.matte' && e.params && e.params.matte);
+            let km = null;
+            if (matte) { km = inputs.length; inputs.push(['-ss', num(j.trim / fps), '-t', num(durS * speed + 0.05), '-i', matte.params.matte]); }
+            const X = `on/${fps}+${num(j.corte / fps)}`;          // tempo do clipe, dentro do zoompan
+            const Xt = `t+${num(j.corte / fps)}`;                   // tempo do clipe, nos filtros com t local
+            const Xo = `(t-${num(startS)})+${num(j.corte / fps)}`;  // tempo do clipe, no overlay (t global)
+
+            if (visivel) {
+                const bw = T.par(c.transform.w * W);
+                const bh = T.par(c.transform.h * H);
+                const f = [speed !== 1 ? `setpts=(PTS-STARTPTS)/${num(speed)}` : 'setpts=PTS-STARTPTS', `fps=${fps}`];
+                const cr = c.crop;
+                if (cr.l || cr.t || cr.r || cr.b) f.push(`crop=iw*${num(1 - cr.l - cr.r)}:ih*${num(1 - cr.t - cr.b)}:iw*${num(cr.l)}:ih*${num(cr.t)}`);
+                if (c.fit === 'contain') f.push(`scale=${bw}:${bh}:force_original_aspect_ratio=decrease`, 'format=yuva420p', `pad=${bw}:${bh}:(ow-iw)/2:(oh-ih)/2:color=black@0`);
+                else if (c.fit === 'stretch') f.push(`scale=${bw}:${bh}`);
+                else f.push(`scale=${bw}:${bh}:force_original_aspect_ratio=increase`, `crop=${bw}:${bh}`);
+                f.push('setsar=1');
+                const zoom = expressao(c.keyframes.zoom, X, fps);
+                if (zoom) f.push(`zoompan=z='max(1,${zoom})':x='iw/2-(iw/zoom/2)':y='ih/2-(ih/zoom/2)':d=1:s=${bw}x${bh}:fps=${fps}`);
+                for (const e of c.effects) f.push(...filtrosDoEfeito(e));
+                f.push('format=yuva420p');
+                const op = expressao(c.keyframes.opacity, Xt, fps);
+                if (op) f.push('format=rgba', `geq=r='r(X,Y)':g='g(X,Y)':b='b(X,Y)':a='alpha(X,Y)*max(0,min(1,${op}))'`);
+                else if (c.opacity < 1) f.push(`colorchannelmixer=aa=${num(Math.max(0, c.opacity))}`);
+                if (c.fadeIn && j.corte === 0) f.push(`fade=t=in:st=0:d=${num(c.fadeIn / fps)}:alpha=1`);
+                if (c.fadeOut && j.start + j.dur + from === T.fim(c)) f.push(`fade=t=out:st=${num(Math.max(0, durS - c.fadeOut / fps))}:d=${num(c.fadeOut / fps)}:alpha=1`);
+                const rot = expressao(c.keyframes.rotation, Xt, fps) || (c.transform.rotation ? num(c.transform.rotation) : null);
+                if (rot) f.push(`rotate=a='(${rot})*PI/180':c=none:ow='hypot(iw,ih)':oh='ow'`);
+                f.push(`setpts=PTS+${num(startS)}/TB`);
+                if (km !== null) {
+                    // O alfa vem da máscara, no mesmo tempo e no mesmo tamanho da origem.
+                    const pre = f.splice(0, 2);
+                    linhas.push(`[${k}:v]${pre.join(',')}[pre${k}]`);
+                    linhas.push(`[${km}:v]${[...EFEITOS['key.matte'].cadeiaDaMascara(matte.params), ...pre].join(',')}[mt${k}]`);
+                    linhas.push(`[pre${k}][mt${k}]alphamerge,${f.join(',')}[c${k}]`);
+                } else linhas.push(`[${k}:v]${f.join(',')}[c${k}]`);
+                const cx = expressao(c.keyframes.cx, Xo, fps) || num(c.transform.cx);
+                const cy = expressao(c.keyframes.cy, Xo, fps) || num(c.transform.cy);
+                const fimS = (j.start + j.dur) / fps;
+                linhas.push(`[${atual}][c${k}]overlay=x='(${cx})*W-w/2':y='(${cy})*H-h/2':eof_action=pass:enable='between(t,${num(startS)},${num(fimS - 0.0001)})'[v${++n}]`);
+                atual = `v${n}`;
+            }
+
+            if (audio && temSom && !faixa.muted && !(c.volume === 0 && !c.keyframes.volume)) {
+                const f = ['asetpts=PTS-STARTPTS', ...atempo(speed), 'aformat=sample_rates=48000:channel_layouts=stereo'];
+                const vol = expressao(c.keyframes.volume, Xt, fps);
+                if (vol) f.push(`volume='max(0,${vol})':eval=frame`);
+                else if (c.volume !== 1) f.push(`volume=${num(c.volume)}`);
+                if (c.fadeIn && j.corte === 0) f.push(`afade=t=in:st=0:d=${num(c.fadeIn / fps)}`);
+                if (c.fadeOut && j.start + j.dur + from === T.fim(c)) f.push(`afade=t=out:st=${num(Math.max(0, durS - c.fadeOut / fps))}:d=${num(c.fadeOut / fps)}`);
+                f.push(`atrim=0:${num(durS)}`);
+                const ms = Math.round(startS * 1000);
+                if (ms > 0) f.push(`adelay=${ms}:all=1`);
+                linhas.push(`[${k}:a]${f.join(',')}[a${k}]`);
+                audios.push(`[a${k}]`);
+            }
+        }
+    }
+
+    // Só o áudio: o vídeo (uma cor preta) termina num ralo — saída solta derruba o ffmpeg.
+    if (!video) linhas.push(`[${atual}]nullsink`);
+    else linhas.push(`[${atual}]format=yuv420p[vout]`);
+    if (!audio) return { inputs, grafo: linhas.join(';\n'), saidaV: '[vout]', saidaA: null, segundos: D, W, H };
+    if (audios.length) {
+        linhas.push(`${audios.join('')}amix=inputs=${audios.length}:duration=longest:dropout_transition=0:normalize=0,apad,atrim=0:${num(D)}[aout]`);
+    } else {
+        linhas.push(`anullsrc=r=48000:cl=stereo,atrim=0:${num(D)}[aout]`);
+    }
+    return { inputs, grafo: linhas.join(';\n'), saidaV: video ? '[vout]' : null, saidaA: '[aout]', segundos: D, W, H };
+}
+
+module.exports = { num, expressao, EFEITOS, PRESETS_COR, CURVAS, filtrosDoEfeito, efeitoDeCor, naJanela, atempo, montarGrafo };

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