/* 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 ![]()
— 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 (
{texto}
);
}
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 (
{/* o chão de grade, que dá a noção de espaço */}
);
};