Contenido detallado
🗺️ Descripción general — cuándo usar transiciones
Una transición no es solo un efecto visual: es lenguaje narrativo. El corte seco dice "continuidad inmediata"; el fade through black dice "pausa, salto en el tiempo". Elegir mal desinforma al espectador aunque técnicamente funcione.
🎯 Regla de oro
La transición más imperceptible suele ser la mejor. Usa efectos llamativos solo cuando quieras que el espectador siente el cambio — salto en el tiempo, cambio de emoción, revelación de algo nuevo.
🪟 blinds-transition — efecto de persianas
La plantilla blinds-transition divide la pantalla en N franjas verticales (8 por defecto) que giran como persianas, revelando la siguiente escena. El efecto está pasado de moda, pero funciona muy bien en contextos retro o de presentación corporativa.
import { useCurrentFrame, useVideoConfig, interpolate } from "remotion"; const blindCount = 8; const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // cada persiana abre com delay sequencial blinds.map((_, i) => { const delay = (i / blindCount) * (fps * 0.4); const rotation = interpolate( frame - delay, [0, fps * 0.6], [0, 90], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } ); })
✓ Usa cuando
- •Presentaciones corporativas con una estética limpia
- •Videos con un tono nostálgico o retro
- •Slideshow de productos con un corte por cada elemento
✗ Evita cuando
- •El contenido exige fluidez emocional (música, documental)
- •Videos cortos: el efecto consume demasiados frames
- •Más de 2× en el mismo video — cansa rápido
🕐 clock-wipe — barrido radial
O clock-wipe usa un clip-path circular que barre de 0° a 360° como la manecilla de un reloj, revelando la nueva escena. La matemática detrás implica calcular el ángulo con Math.atan2 y SVG clipPath.
💡 Consejo práctico
Combina clock-wipe con un countdown-intro: el anillo del countdown gira mientras cuenta 3-2-1 y, al llegar a GO, el clock-wipe revela la escena principal. Narrativa visual coherente sin una línea de código extra.
Calcular el ángulo del frame
Mapear frame / durationInFrames para grados (0–360) usando interpolate.
Construir path del clipPath SVG
Usando coordenadas polares → cartesianas para dibujar el sector circular que cubre la escena B.
Aplicar clipPath en el div de la escena B
La escena B queda "detrás" y solo aparece donde el sector se expandió — un efecto limpio sin composición adicional.
🎭 cross-dissolve — el cross-fade clásico
O cross-dissolve es el más simple y más usado: la escena A va de opacity: 1 a 0 mientras la escena B recorre el camino inverso, ambas al mismo tiempo. El secreto está en la superposición simultánea — no en la ejecución en serie.
const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const totalFrames = fps * 2.5; const progress = Math.min(frame / totalFrames, 1); // A sai enquanto B entra — simultâneo const sceneAOpacity = 1 - progress; const sceneBOpacity = progress;
✓ Ideal para
- •Transición entre clips de naturaleza similar
- •Transición de tiempo fluida en documentales
- •Slideshow emocional o narrativo
✗ No lo uses cuando
- •Escenas con fondo blanco o muy claro (quedarán deslavadas)
- •Cortes rápidos: un dissolve lento rompe el ritmo
- •Cuando los elementos de A y B se superponen de forma extraña
⬛ fade-through-black — fundido a negro
O fade-through-black (también llamado "dip to black") interpone un frame completamente negro entre dos escenas. A diferencia del cross-dissolve, las escenas nunca se superponen: la pantalla negra es el "separador" que le indica al espectador: el cambio más grande ocurrió aquí.
💡 Consejo práctico
Usa fade-through-black al inicio y al final de los videos de YouTube — fade in from black en la apertura y fade out to black en el cierre. Da una sensación cinematográfica que el público asocia con la calidad de producción.
// Estágio 1: cena A → preto const fadeOutOpacity = interpolate( frame, [0, halfDuration], [1, 0], { extrapolateRight: "clamp" } ); // Estágio 2: preto → cena B const fadeInOpacity = interpolate( frame, [halfDuration, totalDuration], [0, 1], { extrapolateLeft: "clamp" } );
🌀 zoom-through — reveal con zoom in/out
O zoom-through es la plantilla más épica: la escena A hace zoom in hasta cubrir toda la pantalla (scale infinito), y la escena B aparece haciendo zoom out desde el infinito. Crea la sensación de «entrar» en un portal. Se usa mucho en tráileres e intros.
import { spring, interpolate, useCurrentFrame, useVideoConfig } from "remotion"; // Cena A cresce até sumir const scaleA = interpolate(frame, [0, halfFrames], [1, 8], { extrapolateRight: "clamp" }); // Cena B começa grande e encolhe ao lugar const scaleB = interpolate(frame, [halfFrames, totalFrames], [8, 1], { extrapolateLeft: "clamp" });
📚 Biblioteca completa de transiciones
Todas las 9 plantillas de esta categoría están en templates/. Referencia rápida:
📌 Resumen del módulo
Próximo módulo:
2.8 — Intro y Outro: plantillas de apertura y cierre para tus videos