Mapa de la ruta
Contenido detallado
⏱️ Timing & Sincronización
Cómo usar Sequence from= para escalonar entradas, calcular offsets en frames, crear un stagger con index * N y sincronizar el final de una escena con el inicio de la siguiente — sin que todo aparezca junto en el frame cero.
La prop from de la Sequence indica en qué frame empieza a existir ese bloque de contenido en la línea de tiempo.
Es la base de todo stagger y de toda sincronización entre elementos; sin él, todo aparece simultáneamente en el frame 0.
from = retraso en frames · el frame local se reinicia en 0 · se combina con durationInFrames.
Patrón en el que cada elemento de una lista comienza N frames después del anterior: from={index * 5}.
Crea la sensación de "cascada" que hace que las listas y los menús sean mucho más elegantes que si todos aparecen al mismo tiempo.
N = 4–8 frames es el punto ideal · demasiado grande = demasiado lento · el índice viene de .map().
Iniciar el elemento B unos frames antes de que termine A crea una superposición intencional y fluidez.
Elimina los espacios de «pantalla vacía» que hacen que el video parezca amateur y desplaza la atención suavemente.
from_B = from_A + dur_A - overlap · overlap típico = 6–12 frames.
Guardar los offsets en variables con nombre (const TITLE_START = 0; const LIST_START = 20;) en lugar de números mágicos sueltos.
Cuando necesitas cambiar un timing, solo cambias un número y todo lo que depende de él se actualiza junto.
constantes en la parte superior del componente · derivar: LIST_START = TITLE_START + TITLE_DUR · sin magic numbers.
Cuando varios elementos no tienen from, todos aparecen en el frame 0, creando un flash de información sobrecargado.
El frame 0 es la primera impresión del video: poner todo ahí equivale a gritarlo todo al mismo tiempo.
regla: cada elemento tiene su from · frame 0 = solo el elemento principal · stagger los demás.
Dentro de una Sequence, el frame local empieza en 0 — entonces spring({frame, fps}) se activa de nuevo en cada entrada.
Combinar Sequence + spring es el patrón de entrada escalonada más natural de Remotion, usado en el 70% de los 81 templates.
frame local · spring empieza en 0 · cada elemento tiene su propio resorte independiente.
🗂️ Capas y composición visual
AbsoluteFill apilando fondo → contenido → overlay, control del z-index según el orden de declaración, combina fondo + texto + viñeta y mantén la legibilidad sin competir por la atención.
Varios <AbsoluteFill> hermanos — cada uno ocupa el 100% del espacio, apilados como transparencias.
Sin esto, intentarías usar position/z-index manualmente y romperías el layout responsivo de Remotion.
posición absolute · fill 100% · orden = z · hermanos, no hijos.
La convención estándar: primero el Background (video/degradado), después el contenido principal (título, lista) y, por último, el overlay (viñeta, fade).
Invertir el orden hace que el fondo cubra el texto: un error visual inmediato que confunde al espectador.
último hijo = más al frente · fondo = primero · overlay = último.
Una capa negra semitransparente entre el fondo y el texto aumenta el contraste sin ocultar el Background.
El texto blanco sobre un video colorido sin overlay es ilegible en el 80% de los casos: el overlay lo resuelve en 2 líneas.
rgba(0,0,0,0.4) · probar con contenido real · no exagerar (≤0.6).
Cada AbsoluteFill puede tener su propia opacidad animada: el fondo aparece gradualmente mientras el contenido todavía espera.
Permite revelar el fondo antes que el texto, creando una jerarquía visual temporal sin código complicado.
style={{opacity}} · se combina con Sequence · la opacidad 0 oculta, pero mantiene el espacio.
Regla de diseño: como máximo 1–2 elementos deben ser el foco principal. Los demás son de apoyo.
Cuando el fondo, el texto y el ícono se animan con la misma intensidad, el espectador no sabe dónde mirar.
fondo = sutil · contenido = destacado · el overlay enmascara el exceso.
En Remotion Studio puedes inspeccionar cada elemento, ver su posición en la jerarquía e identificar qué está cubriendo a qué.
Sin esta habilidad, depurar un overlay que «desapareció» puede llevar horas; con ella, segundos.
DevTools · outline temporal · opacity: 0.5 para revelar capas ocultas.
🥁 Ritmo y transiciones entre escenas
Series.Sequence para escenas en fila, duraciones que respiran, usar una Transition entre escenas, ritmo de corte (rápido vs. lento) y cómo sincronizarlo con el ritmo — para un cierre que se vea profesional.
<Series> coloca cada <Series.Sequence> automáticamente una tras otra, calculando los offsets.
Montar 3+ escenas con Sequence manual requiere calcular from; Series elimina ese trabajo y mantiene el código legible.
durationInFrames por escena · orden = tiempo · fácil de reordenar.
Cada escena debe durar lo suficiente para que el espectador asimile el contenido: mínimo ~60 frames (2s a 30fps) para los textos.
Las escenas demasiado cortas generan ansiedad; las demasiado largas aburren. El equilibrio es lo que diferencia una producción amateur de una profesional.
mínimo 2s para texto · 3–5s para conceptos complejos · prueba leyendo en voz alta.
@remotion/transitions ofrece TransitionSeries con fade, slide, wipe, sin calcular la superposición manualmente.
Una transición bien elegida conecta las escenas emocionalmente; un corte seco también puede ser intencional: saber cuándo usar cada uno es lo que cuenta.
fade = neutro · slide = movimiento · wipe = revelación · duración = 10–20 frames.
Los cortes rápidos (1–2s por escena) crean energía; los lentos (4–6s), peso y contemplación. La elección comunica intención.
Un tutorial técnico funciona mejor con un ritmo lento; un highlight reel, con uno rápido. Un ritmo incorrecto sabotea el contenido.
el tipo de contenido define el ritmo · consistencia dentro del video · la variación intencional crea un pico.
Calcular en qué frame cae cada beat (frame = beat * fps * (60/bpm)) y alinear los cortes de escena con esos frames.
Los videos con cortes al ritmo de la música parecen producidos profesionalmente, incluso con recursos visuales simples.
frameDaBatida = (60/bpm) * fps · múltiplos de 4 compases · usar Audio de Remotion como referencia.
La última escena debe resolver: fade-out suave, aparece un logo/CTA o simplemente la pantalla se oscurece — sin cortar abruptamente.
Un mal cierre deshace toda la impresión positiva construida durante el video — es lo que recuerda el espectador.
fade-out final = obligatorio · duración generosa para la última escena · CTA en el último tercio.