primocode 10.0.0 → 10.1.0

package/lib/video/camadas.js

@@ -0,0 +1,207 @@
+/**
+ * camadas.js — as peças comuns das operações "de efeito" (separar, trocar
+ * fundo, objeto na mão, legenda na cabeça): achar a fala, espelhar clipes
+ * sobre ela, ordenar as faixas por papel e converter "o estalo", "quando eu
+ * falar camadas" ou um quadro em SEGUNDO DA ORIGEM.
+ *
+ * ── POR QUE TUDO MORA EM SEGUNDO DA ORIGEM ───────────────────────────────
+ * O que se rastreia (a mão, a cabeça, o estalo) aconteceu na GRAVAÇÃO. Se a
+ * receita de um efeito guardasse quadro da timeline, o primeiro corte de
+ * silêncio a deixaria apontando para o lugar errado. Guardando o segundo da
+ * origem, o efeito é redesenhado em cima da timeline que existir — e a
+ * camada gerada entra "espelhando" os clipes da fala: o corte que pega a
+ * fala pega a camada no mesmo quadro.
+ *
+ * ── AS FAIXAS TÊM PAPEL ──────────────────────────────────────────────────
+ * De cima para baixo: textos, objetos 3D, o momento das camadas, a pessoa
+ * recortada, o fundo novo e, por baixo de tudo, a gravação (que segue
+ * levando o áudio). `arrumar` impõe essa ordem depois de cada operação, em
+ * qualquer ordem que o pedido venha.
+ */
+
+'use strict';
+
+const T = require('./timeline.js');
+
+const ORDEM = { objetos: 1, camadas3d: 2, pessoa: 3, fundo: 4 };
+
+/** A gravação: a mídia de vídeo pedida, ou a primeira com áudio que está na timeline. */
+function base(tl, ref) {
+    if (ref) {
+        const a = T.acharAsset(tl, ref);
+        if (a.kind !== 'video' || a.gerado) throw T.erro(`a mídia ${a.id} não é uma gravação de vídeo`);
+        return a;
+    }
+    const usados = new Set(clipesBase(tl).map((c) => c.asset));
+    const lista = Object.values(tl.assets).filter((a) => a.kind === 'video' && !a.gerado && usados.has(a.id));
+    const achada = lista.find((a) => a.hasAudio) || lista[0];
+    if (!achada) throw T.erro('não há gravação de vídeo na timeline: comece com import {"path":"..."}');
+    return achada;
+}
+
+/** Os clipes da gravação "de verdade": faixa de vídeo sem papel. */
+function clipesBase(tl, assetId) {
+    const out = [];
+    for (const t of tl.tracks) {
+        if (t.type !== 'video' || t.role) continue;
+        for (const c of t.clips) if (c.type === 'video' && (!assetId || c.asset === assetId) && !(tl.assets[c.asset] || {}).gerado) out.push(c);
+    }
+    return out.sort((a, b) => a.startFrame - b.startFrame);
+}
+
+/** Quadro da timeline → segundo da origem da gravação (ou null fora dela). */
+function quadroParaOrigem(tl, assetId, f) {
+    for (const c of clipesBase(tl, assetId)) {
+        if (f >= c.startFrame && f < T.fim(c)) return T.segundos(tl, c.trimStartFrame + (f - c.startFrame) * (c.speed || 1));
+    }
+    return null;
+}
+
+/** Segundo da origem → quadro da timeline (null se o trecho foi cortado). */
+function origemParaQuadro(tl, assetId, seg) {
+    for (const c of clipesBase(tl, assetId)) {
+        const f = T.origemParaQuadro(tl, c, seg);
+        if (f !== null && f < T.fim(c)) return f;
+    }
+    // O fim exato da gravação (o "até o fim") cai no fim do último clipe.
+    const ult = clipesBase(tl, assetId).slice(-1)[0];
+    if (ult && Math.abs(T.janelaOrigem(tl, ult).ate - seg) < 0.5 / tl.fps) return T.fim(ult);
+    return null;
+}
+
+/** O clipe da gravação que está no quadro f (para saber o encaixe na tela). */
+function clipeNoQuadro(tl, assetId, f) {
+    return clipesBase(tl, assetId).find((c) => f >= c.startFrame && f < T.fim(c)) || null;
+}
+
+function arrumar(tl) {
+    const rank = (t) => (t.type === 'text' ? 0 : t.type === 'audio' ? 9 : ORDEM[t.role] || 5);
+    tl.tracks = tl.tracks.map((t, i) => ({ t, i })).sort((a, b) => rank(a.t) - rank(b.t) || a.i - b.i).map((x) => x.t);
+    return tl;
+}
+
+/** A faixa com aquele papel (cria se não houver). Devolve o índice já na ordem certa. */
+function faixa(tl, papel) {
+    let t = tl.tracks.find((x) => x.role === papel);
+    if (!t) {
+        const i = T.faixaPara(tl, 'video', 'new');
+        t = tl.tracks[i];
+        t.role = papel;
+    }
+    arrumar(tl);
+    return tl.tracks.indexOf(t);
+}
+
+/** Tira os clipes de um papel (de uma gravação), e a faixa se esvaziar. */
+function limparPapel(tl, papel, assetId) {
+    for (const t of tl.tracks) {
+        if (t.role !== papel) continue;
+        t.clips = t.clips.filter((c) => assetId && c.base !== assetId);
+    }
+    tl.tracks = tl.tracks.filter((t) => t.role !== papel || t.clips.length);
+}
+
+/** Apaga os assets gerados que nenhum clipe usa mais. */
+function limparGerados(tl) {
+    const usados = new Set(T.todosOsClipes(tl).map((x) => x.clip.asset));
+    for (const [id, a] of Object.entries(tl.assets)) if (a.gerado && !usados.has(id)) delete tl.assets[id];
+}
+
+/**
+ * Cria, na faixa `ti`, um clipe por clipe da gravação que cai em [de, ate)
+ * (segundos da origem), no MESMO lugar da timeline. `asset`: a mídia do
+ * clipe novo; `origemDe`: o segundo da gravação que corresponde ao 0 dela
+ * (a própria gravação: 0; uma camada gerada a partir de `de`: `de`).
+ */
+function espelhar(tl, assetId, ti, { de = 0, ate = Infinity, asset = assetId, origemDe = 0, props = {}, papel } = {}) {
+    const criados = [];
+    for (const c of clipesBase(tl, assetId)) {
+        const j = T.janelaOrigem(tl, c);
+        const i0 = Math.max(j.de, de);
+        const i1 = Math.min(j.ate, ate);
+        if (i1 - i0 < 0.5 / tl.fps) continue;
+        const s = T.origemParaQuadro(tl, c, i0);
+        const e = Math.min(T.fim(c), T.origemParaQuadro(tl, c, i1));
+        if (s === null || e === null || e <= s) continue;
+        const o = s - c.startFrame;
+        const kf = {};
+        for (const [k, keys] of Object.entries(c.keyframes || {})) if (k !== 'volume') kf[k] = keys.map((x) => ({ ...x, frame: x.frame - o }));
+        const novo = T.clipe(tl, {
+            type: 'video', asset, startFrame: s, durationFrames: e - s,
+            trimStartFrame: Math.max(0, Math.round((i0 - origemDe) * tl.fps)), speed: c.speed,
+            transform: { ...c.transform }, crop: { ...c.crop }, fit: c.fit, volume: 0, ...props,
+        });
+        novo.keyframes = kf;
+        novo.base = assetId;
+        if (papel) novo.papel = papel;
+        tl.tracks[ti].clips.push(novo);
+        criados.push(novo);
+    }
+    T.ordenar(tl);
+    return criados;
+}
+
+// ── os momentos ──────────────────────────────────────────────────────────
+
+const sem = (s) => String(s || '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().replace(/[^a-z0-9]+/g, '');
+
+/** A primeira palavra da transcrição que casa (sem acento, sem espaço: "chat gpt" casa "chatgpt"). */
+function acharPalavra(palavras, alvo, { desde = 0 } = {}) {
+    const a = sem(alvo);
+    if (!a) return null;
+    for (let i = 0; i < palavras.length; i++) {
+        const p = palavras[i];
+        if (p.de < desde) continue;
+        const um = sem(p.texto);
+        const dois = um + sem((palavras[i + 1] || {}).texto);
+        if (um.startsWith(a) || (a.length > 4 && um.length >= 4 && a.startsWith(um) && dois.startsWith(a))) return p;
+    }
+    return null;
+}
+
+/** Cor por nome (português ou inglês) → hex. Hex passa direto. */
+const CORES = {
+    azul: '#2F80FF', blue: '#2F80FF', 'azul claro': '#5AC8FA', ciano: '#22D3EE', cyan: '#22D3EE',
+    vermelho: '#EF4444', vermelha: '#EF4444', red: '#EF4444', verde: '#22C55E', green: '#22C55E',
+    amarelo: '#FFD400', amarela: '#FFD400', yellow: '#FFD400', laranja: '#FF8A00', orange: '#FF8A00',
+    rosa: '#FF4FA3', pink: '#FF4FA3', roxo: '#8B5CF6', roxa: '#8B5CF6', purple: '#8B5CF6', lilas: '#C084FC',
+    branco: '#FFFFFF', branca: '#FFFFFF', white: '#FFFFFF', preto: '#000000', preta: '#000000', black: '#000000',
+    dourado: '#F5C542', dourada: '#F5C542', gold: '#F5C542', cinza: '#9CA3AF', gray: '#9CA3AF',
+};
+function cor(nome) {
+    if (nome === undefined || nome === null) return undefined;
+    const s = String(nome).trim();
+    if (/^#?[0-9a-f]{6}$/i.test(s)) return s.startsWith('#') ? s.toUpperCase() : '#' + s.toUpperCase();
+    const k = s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+    if (CORES[k]) return CORES[k];
+    throw T.erro(`cor "${nome}" (use #RRGGBB ou azul/vermelho/verde/amarelo/laranja/rosa/roxo/ciano/branco/preto/dourado/cinza)`);
+}
+
+/** Fundo pedido por palavra → termo de busca que acha foto boa (o acervo é em inglês). */
+const FUNDOS = {
+    praia: 'tropical beach turquoise sea', beach: 'tropical beach turquoise sea', mar: 'ocean waves', espaco: 'outer space nebula stars',
+    space: 'outer space nebula stars', cidade: 'city skyline night', floresta: 'green forest', montanha: 'mountain landscape',
+    escritorio: 'modern office interior', deserto: 'desert dunes', neve: 'snowy mountains', estudio: 'dark studio backdrop',
+    paris: 'paris eiffel tower', 'nova york': 'new york skyline', por_do_sol: 'sunset sky', 'por do sol': 'sunset sky',
+};
+function termoDeFundo(pedido) {
+    const k = String(pedido || '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().trim();
+    return FUNDOS[k] || FUNDOS[k.replace(/^(uma?|o|a|na|no|numa|num)\s+/, '')] || k;
+}
+
+/** Objeto pedido → modelo do fx3d/modelos.jsx. */
+function modeloDe(nome) {
+    const k = sem(nome);
+    if (/^(chatgpt|gpt|openai|chat)/.test(k)) return 'chatgpt';
+    if (/^(claude|claud|anthropic)/.test(k)) return 'claude';
+    if (/^(brain|cerebro)/.test(k)) return 'cerebro';
+    if (/^(chrome|google ?chrome|navegador)/.test(k)) return 'chrome';
+    if (/^(drive|google ?drive)/.test(k)) return 'drive';
+    if (/^(foguete|rocket|nave)/.test(k)) return 'foguete';
+    return null;
+}
+
+module.exports = {
+    ORDEM, base, clipesBase, quadroParaOrigem, origemParaQuadro, clipeNoQuadro, arrumar, faixa, limparPapel, limparGerados,
+    espelhar, acharPalavra, sem, cor, CORES, termoDeFundo, FUNDOS, modeloDe,
+};

package/lib/video/cli.js

@@ -52,7 +52,7 @@ async function main(argv, { out = process.stdout, err = process.stderr } = {}) {
     try {
         const { op, args } = lerArgs(argv);
         if (!op || op === 'help' || op === '--help' || op === '-h') {
-            out.write(ajuda() + '\n');
+            out.write(ajuda(argv[1]) + '\n');
             return 0;
         }
         const nome = ALIAS[op] || op;

package/lib/video/filters.js

@@ -100,6 +100,27 @@ const EFEITOS = {
         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) {
@@ -145,7 +166,7 @@ function atempo(speed) {
  * 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 } = {}) {
+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;
@@ -161,7 +182,7 @@ function montarGrafo(tl, { from = 0, to, camadasDeTexto = {}, escala = 1, audio
     for (let ti = tl.tracks.length - 1; ti >= 0; ti--) {
         const faixa = tl.tracks[ti];
         if (faixa.type === 'text') {
-            const arq = camadasDeTexto[ti];
+            const arq = video ? camadasDeTexto[ti] : null;
             if (!arq || faixa.hidden) continue;
             const k = inputs.length;
             inputs.push(['-f', 'concat', '-safe', '0', '-i', arq]);
@@ -177,13 +198,17 @@ function montarGrafo(tl, { from = 0, to, camadasDeTexto = {}, escala = 1, audio
             if (!a) continue;
             const speed = c.speed || 1;
             const temSom = a.kind === 'audio' || (a.kind === 'video' && a.hasAudio);
-            const visivel = faixa.type === 'video' && !c.hidden && !faixa.hidden;
+            // 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)
@@ -210,7 +235,13 @@ function montarGrafo(tl, { from = 0, to, camadasDeTexto = {}, escala = 1, audio
                 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`);
-                linhas.push(`[${k}:v]${f.join(',')}[c${k}]`);
+                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;
@@ -234,14 +265,16 @@ function montarGrafo(tl, { from = 0, to, camadasDeTexto = {}, escala = 1, audio
         }
     }
 
-    linhas.push(`[${atual}]format=yuv420p[vout]`);
+    // 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: '[vout]', saidaA: '[aout]', segundos: D, W, H };
+    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);