🏗️ AbsoluteFill anidado — la pila de capas
AbsoluteFill es un componente de Remotion que renderiza una div con position: absolute; top: 0; left: 0; width: 100%; height: 100%. Cuando colocas dos o más como hermanos (no como hijos uno del otro), se apilan —exactamente como transparencias fotográficas colocadas una sobre otra.
import { AbsoluteFill } from "remotion"; export const LayeredScene = () => ( {/* Container principal */} <AbsoluteFill> {/* CAMADA 1 — fundo (renderizado primeiro = mais atrás) */} <AbsoluteFill> <Background /> </AbsoluteFill> {/* CAMADA 2 — conteúdo principal */} <AbsoluteFill style={{ display: "flex", alignItems: "center" }}> <Title /> </AbsoluteFill> {/* CAMADA 3 — overlay (renderizado por último = mais na frente) */} <AbsoluteFill style={{ background: "rgba(0,0,0,0.3)" }} /> </AbsoluteFill> );
💡 Consejo práctico
El orden de declaración en JSX es el orden de renderizado (z-index implícito). El último hijo queda al frente. Esto es distinto de z-index en CSS — aquí la estructura del código es la documentación visual.
🎨 Fondo → contenido → overlay
La convención de 3 capas es universal en la edición de video: el fondo (Background) aporta la atmósfera visual, el contenido (Contenido) transmite el mensaje y, por último, el overlay lo une todo y garantiza la legibilidad. Invertir cualquier capa rompe de inmediato la jerarquía.
✓ Orden correcto
- 1.Background — video, gradiente, imagen de fondo.
- 2.Contenido — título, lista, ícono principal.
- 3.Overlay — viñeta, gradiente, fade-out de borde.
✗ Errores comunes de orden
- ✗Overlay antes del contenido — el contenido queda debajo del oscurecimiento.
- ✗Fondo después del contenido — el fondo cubre el texto.
- ✗Todo dentro de un único AbsoluteFill con position manual.
🌫️ Viñeta y overlay oscuro — legibilidad
El problema más común al combinar video de fondo con texto es la legibilidad. Un fondo colorido y vibrante puede tener exactamente los mismos tonos que el texto blanco, lo que lo vuelve invisible. La solución es una capa negra semitransparente entre ambos.
📊 Valores de opacidad para overlay
- rgba(0,0,0,0.2) — sutil, para fondos ya oscuros. Apenas perceptible.
- rgba(0,0,0,0.4) — patrón para la mayoría de los casos. Buen equilibrio.
- rgba(0,0,0,0.6) — fondos muy claros o coloridos. Puede oscurecer demasiado.
- rgba(0,0,0,0.8) — casi opaco. Úsalo solo para el fade-out de una escena.
const frame = useCurrentFrame(); // Overlay entra gradualmente nos primeiros 20 frames const overlayOpacity = interpolate( frame, [0, 20], [0, 0.4], { extrapolateRight: "clamp" } ); return ( <AbsoluteFill style={{ backgroundColor: `rgba(0,0,0,${overlayOpacity})` }} /> );
💡 Consejo práctico
Antes de definir el valor del overlay, abre el frame más «problemático» (generalmente con el fondo más claro o colorido) y ajústalo hasta que el texto se lea cómodamente, no solo «técnicamente legible».
🎚️ Opacidad por capa — fundido independiente
Cada AbsoluteFill puede tener su propia opacidad animada de forma independiente. Esto crea efectos de revelado en cascada: el fondo puede aparecer gradualmente durante los primeros 20 frames, mientras el contenido espera hasta el frame 30. El espectador percibe el contexto antes que el mensaje.
El fondo aparece con fade-in (frames 0–20)
El Background revela el entorno visual: el espectador ya sabe dónde está antes de ver el mensaje.
Overlay acompaña el fondo (frames 5–25)
Garantiza que, cuando aparezca el texto, el fondo ya esté lo suficientemente oscuro para ofrecer contraste.
El contenido aparece al final (frame 25+)
Con el contexto establecido y el overlay listo, el contenido aparece sobre un canvas legible.
⚖️ No competir por la atención
El diseño de video es una cuestión de enfoque. En cada momento, debe haber uno elemento principal que capta la atención. Cuando el fondo, el texto y el ícono se animan con la misma intensidad al mismo tiempo, el espectador se desorienta: mira todo sin ver nada.
✓ Jerarquía de atención
- ✓Fondo: animación sutil y lenta (no distrae).
- ✓Contenido: animación de entrada expresiva (este es el foco).
- ✓Decoración: baja opacidad, sin movimiento.
✗ Caos visual
- ✗Fondo con partículas rápidas y brillantes por todo el video.
- ✗Título y subtítulo con springs diferentes animándose juntos.
- ✗4 o más elementos con colores saturados compitiendo en la misma escena.
💡 Regla del foco único
Pausa el video en cualquier frame y hazte esta pregunta: "¿hacia dónde va la mirada de forma natural?". Si la respuesta no es inmediata y clara, el frame está sobrecargado. Reduce la intensidad de los elementos de apoyo hasta que el foco sea obvio.
🔍 Depurar capas en Studio
Cuando una capa «desaparece» o queda invisible inesperadamente, la técnica de depuración más rápida es dar un outline temporal en cada AbsoluteFill o aumenta su opacidad para identificar exactamente dónde está en la pila.
// Técnica 1: outline colorido para ver bordas <AbsoluteFill style={{ outline: "2px solid red" }}> <Background /> </AbsoluteFill> // Técnica 2: opacidade 0.5 para revelar sobreposição <AbsoluteFill style={{ opacity: 0.5 }}> <Overlay /> </AbsoluteFill> // Técnica 3: comentar camadas individualmente {/* <AbsoluteFill><Background /></AbsoluteFill> */}
📌 Resumen del módulo
Próximo módulo:
3.3 — Ritmo y transiciones entre escenas: Series, duraciones que dan respiro y cómo sincronizar con el ritmo.