🎬 Vista general — imitar el cine con matemáticas
Las plantillas cinemáticas comparten una filosofía: cada efecto físico de cámara o de posproducción puede describirse como una función matemática del frame. El temblor de cámara es sin(frame) con decaimiento. Film burn es un gradiente radial con intensidad variable. Ken Burns es escala + traslación lineal.
🎯 Tres categorías internas
- •Movimiento de cámara:
camera-shake,whip-pan,ken-burns,zoom-pulse— mueven la imagen o crean la ilusión de movimiento de lente. - •Composición de pantalla:
letterbox-reveal,parallax-pan,spotlight-reveal— controlan lo que es visible y cómo se relacionan las capas. - •Efectos de posproducción:
film-burn,vignette-pulse— superponen capas de textura o sombra sobre el contenido.
💡 Combinar con moderación
Los efectos cinemáticos son como condimentos: usa uno o dos por escena, no todos al mismo tiempo. camera-shake + film-burn en el mismo momento crea un clímax impactante. Los mismos dos efectos durante todo el video causan fatiga visual.
📳 camera-shake — temblor que decae
O camera-shake simula el temblor de una cámara en mano: comienza intenso y decae exponencialmente hasta que el movimiento se detiene. La técnica central es sin(frame) multiplicado por una amplitud que disminuye con el 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)`
💡 Por qué usar multiplicadores diferentes en X e Y
Los valores 1.7 e 2.3 son intencionalmente distintos entre sí, sin ser múltiplos. Si fueran iguales (o uno múltiplo del otro), los ciclos de X e Y se sincronizarían y crearían un patrón repetitivo visible. Los valores primos o irracionales generan una trayectoria más orgánica y caótica, parecida a un temblor real.
Frame 0 — impacto máximo
La amplitud está en su punto máximo. El desplazamiento puede ser de ±18px. Úsalo para simular una explosión, un golpe o un corte abrupto.
Frames intermedios — decaimiento
La amplitud cae linealmente mediante interpolate. El temblor persiste, pero se debilita, como la vibración después de un impacto físico que se disipa.
Después de decayFrames: estabilidad
extrapolateRight: "clamp" garantiza que la amplitud no se vuelva negativa. La cámara se detiene por completo y la escena permanece estable.
🔥 film-burn — light leak cálido
O film-burn superpone manchas de luz anaranjada y amarilla que crecen y desaparecen en loop, imitando el efecto de exposición a la luz en una película física. La intensidad de las manchas sigue una curva en forma de campana: aparece de la nada, alcanza el pico en el medio y desaparece.
🌡️ La curva en forma de campana de la intensidad
El pico en el medio crea la sensación de que la luz «se filtra» y después «se cierra». Tres gradientes radiales con posiciones oscilantes dan la apariencia orgánica e impredecible del film burn real.
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;
✓ Qué HACER
- ✓Usar en transiciones entre escenas para ocultar el corte.
- ✓Combinar con noise-grain para lograr el look completo de película antigua.
- ✓Ajusta la intensidad máxima (0.85) para que sea más o menos sutil.
✗ Qué NO hacer
- ✗Usar en videos con una paleta de colores fríos: el naranja cálido contrasta demasiado.
- ✗Dejar en loop continuo: pierde impacto después de la segunda aparición.
- ✗Intensidad muy alta (>0.9) sobre texto: ilegible.
🎞️ letterbox-reveal — barras negras que se retraen
O letterbox-reveal comienza con barras negras cubriendo la parte superior e inferior de la pantalla —el formato cinematográfico letterbox 2.35:1— y las retrae con el tiempo para revelar la imagen completa. El efecto comunica al instante «este es un momento cinematográfico».
💡 Las matemáticas de las barras
Cada barra tiene una altura inicial que cubre ~12% de la pantalla (el estándar del letterbox 2.35:1 en 16:9). El spring anima esta altura hasta llegar a cero. Como el spring usa clamp, las barras nunca van hacia valores negativos; desaparecen limpiamente.
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
🔦 spotlight-reveal — clip-path con círculo que se expande
O spotlight-reveal usa clip-path: circle() para revelar el contenido desde un punto central, como un foco que se abre. El radio del círculo aumenta desde cero hasta cubrir toda la pantalla con el paso del tiempo.
🔵 Clip-path circle en CSS
La propiedad clip-path: circle(rPx at xPx yPx) es compatible de forma nativa y eficiente en el browser. En el render de Remotion se renderiza mediante Puppeteer con soporte total. El radio puede calcularse como porcentaje de la diagonal de la pantalla para garantizar una cobertura total.
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%)`
✓ Qué HACER
- ✓Cambiar el centro (
at X% Y%) para revelar desde una esquina o desde donde debe dirigirse la mirada primero. - ✓Usar un damping alto (>18) para un reveal suave sin bounce.
- ✓Combinar con vignette-pulse para mantener el foco incluso después del reveal.
✗ Qué NO hacer
- ✗Usar un radio menor que la diagonal: deja visibles las esquinas oscuras.
- ✗Stiffness demasiado alto: un spring con bounce al revelar una imagen parece un glitch.
- ✗Aplicar en transiciones muy cortas (<15 frames): el efecto no aparece.
🌑 vignette-pulse vs. whip-pan — dos estilos opuestos
O vignette-pulse es sutil y emocional: oscurece los bordes de la pantalla en pulsos y enfoca la mirada en el centro. El whip-pan es agresivo y dinámico: un desplazamiento horizontal rápido con blur que simula el paneo de cámara a máxima velocidad.
vignette-pulse — sutil, enfoque
- •Degradado radial negro en los bordes con opacidad pulsante mediante una onda sinusoidal.
- •Opacidad:
0.3 + sin(frame * 0.1) * 0.15— pulso suave y lento. - •Ideal para documentales, entrevistas y enfoque narrativo.
whip-pan — enérgico, corte
- •TranslateX rápido con motion blur mediante
filter: blur()proporcional a la velocidad. - •Velocidad:
interpolate(frame, [0, dur/2, dur], [0, maxVel, 0]). - •Ideal para transiciones entre escenas, videos de acción y montajes rápidos.
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)` }
📚 Biblioteca completa — las 9 plantillas
Referencia rápida de todas las plantillas cinemáticas, con archivo, técnica principal y contexto de uso.
📌 Resumen del módulo
sin(frame) × amplitude con decaimiento mediante interpolate. Los multiplicadores que no son múltiplos crean una trayectoria orgánica.clip-path: circle() con el radio creciendo desde cero hasta la diagonal completa.Conclusión de la Ruta 2:
Dominaste las tres categorías de recursos visuales de Remotion: imagen y medios, fondos y efectos cinematográficos. La Ruta 3 — Combinación — muestra cómo encadenar estas plantillas en secuencias narrativas completas.