🎬 Cinemático

Os templates cinemáticos compartilham uma filosofia: cada efeito físico de câmera ou pós-produção pode ser descrito como uma função matemática do frame. Tremor de câmera é sin(frame) com decaimento. Film burn é um gradiente radial com intensidade que varia. Ken Burns é escala + translação linear.

O camera-shake simula o tremor de câmera de mão: começa intenso e decai exponencialmente até o movimento parar. A técnica central é sin(frame) multiplicado por uma amplitude que diminui com o frame.

const { fps } = useVideoConfig();
// amplitude decai de maxAmp até 0 ao longo do impacto
const maxAmp = 18;
const decayFrames = fps * 1.5;   // 1.5s de tremor
const amplitude = interpolate(
  frame, [0, decayFrames], [maxAmp, 0], { extrapolateRight: "clamp" }
);
const shakeX = Math.sin(frame * 1.7) * amplitude;
const shakeY = Math.cos(frame * 2.3) * amplitude * 0.6;
// aplicar: transform: `translate(${shakeX}px, ${shakeY}px)`

O film-burn sobrepõe manchas de luz alaranjada e amarela que crescem e somem em loop, imitando o efeito de exposição de luz em filme físico. A intensidade das manchas segue uma curva em sino — aparece do nada, atinge o pico no meio e desaparece.

const totalFrames = fps * 3;
// intensidade em sino: 0 → 0.85 → 0
const intensity = interpolate(
  frame,
  [0, totalFrames * 0.5, totalFrames],
  [0, 0.85, 0],
  { extrapolateRight: "clamp" }
);
// posição oscilante para parecer "vazamento" orgânico
const xShift1 = 50 + Math.sin(frame * 0.05) * 30;

O letterbox-reveal começa com barras pretas cobrindo o topo e o fundo da tela — o formato letterbox cinematográfico 2.35:1 — e as retrai ao longo do tempo para revelar a imagem completa. O efeito comunica instantaneamente "este é um momento cinematográfico".

const { height, fps } = useVideoConfig();
const barH = height * 0.12;  // 12% = letterbox 2.35:1
const s = spring({ frame, fps, config: { damping: 18, stiffness: 60 } });
// barra superior: começa em barH e vai para 0
const topBarH = interpolate(s, [0, 1], [barH, 0]);
// div: position absolute, top: 0, height: topBarH, bg: black

O spotlight-reveal usa clip-path: circle() para revelar o conteúdo a partir de um ponto central — como um holofote que se abre. O raio do círculo aumenta de zero até cobrir a tela inteira ao longo do tempo.

const { width, height, fps } = useVideoConfig();
const maxRadius = Math.sqrt(width ** 2 + height ** 2) / 2;
const s = spring({ frame, fps, config: { damping: 20, stiffness: 50 } });
const radius = s * maxRadius;
// style: clipPath: `circle(${radius}px at 50% 50%)`

O vignette-pulse é sutil e emocional: escurece as bordas da tela em pulso, focando o olhar no centro. O whip-pan é agressivo e dinâmico: um deslocamento horizontal rápido com blur simulando o pan de câmera em velocidade máxima.

const velocity = interpolate(
  frame, [0, durationInFrames / 2, durationInFrames],
  [0, 400, 0], { extrapolateRight: "clamp" }
);
const blurAmount = Math.abs(velocity) / 80;
// style: { transform: `translateX(${velocity}px)`, filter: `blur(${blurAmount}px)` }

Referência rápida para todos os templates cinemáticos com arquivo, técnica central e contexto de uso.