Mapa de la ruta
Contenido detallado
🕐 El motor del tiempo
Todo empieza aquí: el fotograma actual. En Remotion, el video es una función pura del número de fotograma: no hay «play», sino «qué imagen dibujar en el fotograma N».
Hook que devuelve el número del frame actual que se está renderizando (0, 1, 2, …). Es la única entrada de tiempo que necesitas.
Toda animación en Remotion parte de este número. Sin él, nada se mueve.
Reactivo al frame · se vuelve a renderizar en cada frame · base de interpolate y spring.
fps = frames por segundo; durationInFrames = duración del video en frames. 90 frames a 30fps = 3 segundos.
Define la ventana de tiempo que tienes para animar y cómo los segundos se convierten en frames.
segundos × fps = frames · definidos en la Composition · constantes durante el render.
Hook que devuelve width, height, fps y durationInFrames de la composición actual.
Hace que el componente responda al tamaño del video (16:9, 9:16) sin hardcode.
centrar con width/2 · convertir segundos con fps · reutilizar entre formatos.
La imagen de cada frame depende SOLO del número del frame — no de clics, temporizadores ni estados acumulados.
Es lo que hace que el render sea paralelizable y predecible. Nada de setInterval ni requestAnimationFrame.
función pura frame→píxeles · sin useState para animar · sin efectos en tiempo real.
Renderizar el frame 42 hoy o mañana produce exactamente la misma imagen.
Permite que Remotion renderice frames en paralelo en varias máquinas sin inconsistencias.
evita Math.random sin seed · evita Date.now() · usa random() de Remotion.
La unidad de trabajo es el frame. "Aparece en 0,5s" se convierte en "aparece en 15 frames" (a 30fps).
Toda la API (interpolate, spring, Sequence) se expresa en frames. Pensar así elimina conversiones confusas.
frame = unidad · segundos solo en el límite (entrada del usuario) · fps convierte.
📈 interpolate() — el frame se convierte en valor
La función más utilizada de Remotion. Mapea el frame (o cualquier número) de un intervalo de entrada a uno de salida: opacidad, posición, escala, rotación.
interpolate(frame, [in0,in1], [out0,out1], options) — entra un frame, sale un valor.
Es la herramienta universal de animación lineal. El 90% de las plantillas empiezan con ella.
1.er arg. = valor que se va a mapear · arrays del mismo tamaño · devuelve un número.
inputRange es el dominio (ej.: fotogramas 0→30); outputRange es el codominio (ej.: opacidad 0→1).
Controlar estos dos pares es controlar cuándo y cuánto cambia algo.
input creciente · output en cualquier orden · unidades libres (px, %, deg).
extrapolateLeft/Right: 'clamp' fija el valor en los límites; 'extend' permite que los sobrepase.
Sin clamp, la opacidad supera 1 y el elemento «se desborda». Es el bug más común entre principiantes.
clamp = patrón seguro · extend para movimiento continuo · identity rara vez.
Arrays con 3+ puntos: [0,15,75,90] → [0,1,1,0] hace fade-in, mantiene, fade-out.
Una sola llamada describe un ciclo completo de entrada y salida.
input siempre creciente · mesetas = valores repetidos · ahorra código.
La opción easing reemplaza la interpolación lineal por curvas (Easing.out, cubic, bezier).
El movimiento lineal parece robótico. Easing da naturalidad sin cambiar de función.
ease-out para entradas · ease-in para salidas · bezier para un control preciso.
Tres recetas: opacidad (fade), translateX/Y (slide) y scale (zoom), todas con interpolate.
Combinadas, estas tres cubren la mayoría de las entradas de elementos en video.
aplicar en style/transform · combinar 2-3 al mismo tiempo · base de toda la T2.
🌊 spring y composición
Movimiento con física (spring) y cómo organizar varias escenas en el tiempo y el espacio (Sequence, AbsoluteFill, Series). Es lo que separa una "animación aceptable" de una "animación que parece viva".
Función que simula un resorte: va de 0 a 1 con aceleración y un ligero overshoot natural.
Da ese «pop» orgánico en las entradas de títulos y logos que interpolate lineal no consigue.
recibe frame y fps · devuelve 0→1 · multiplica por escala/posición.
Parámetros del resorte: damping (fricción), stiffness (rigidez), mass (peso).
Se ajustan de «elástico y saltarín» a «suave y firme» sin tocar el resto del código.
damping alto = sin overshoot · stiffness alto = más rápido · mass alto = más lento.
interpolate = control exacto del tiempo/valor; spring = naturalidad física automática.
Elegir mal hace que la animación sea robótica o que la duración sea impredecible.
spring para entradas/pop · interpolate para fades/timing preciso · se pueden combinar.
Componente que desplaza el tiempo de los elementos secundarios: from retrasa el inicio, durationInFrames limita.
Dentro de una Sequence, el frame «se reinicia» desde cero — facilita crear escenas independientes.
from = offset · frame local · base del stagger y de la T3.
Div que ocupa el 100% de la composición con position absolute; apila el fondo, el contenido y el overlay.
Es la forma de superponer un título sobre un fondo animado sin calcular el layout.
orden = capas (z) · centrar con flex · base de toda composición visual.
Series.Sequence coloca las escenas una tras otra automáticamente, sin calcular offsets a mano.
Arma un video de varias escenas (intro → contenido → outro) de forma legible.
duración por escena · orden = tiempo · ideal para los proyectos de la T4.