Módulo 1.3 · spring & composición

🌊 spring() — simulación de resorte

O spring() no recibe un inputRange y outputRange; simula física. Dado el frame actual y los fps, calcula un valor que parte de 0 y tiende a 1, pasa un poco de 1 (overshoot) y luego se asienta. Ese rebote es lo que le da vida a la animación.

🎯 Llamada mínima

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// retorna 0 → 1 (com overshoot natural)
const progress = spring({ frame, fps });

return <div style={{ transform: `scale(${progress})` }}>Pop!</div>;

📊 spring() vs interpolate() — resultados diferentes

interpolate: controlas cada keyframe; el movimiento es predecible y exacto.
spring: defines la física; el movimiento surge de la simulación con naturalidad.
El spring devuelve un valor ≈ 0→1, pero puede superar 1 antes de asentarse — eso es el overshoot.

Entrada

frame + fps

Salida

≈ 0 → 1

Overshoot

Supera 1 brevemente

Física

Simulación de resorte

⚙️ config: damping, stiffness y mass

El comportamiento del resorte se ajusta con el objeto config. Tres parámetros principales: damping (amortiguamiento), stiffness (rigidez) y mass (peso). Combinando los tres, puedes pasar de un pop rápido a una oscilación larga y suave.

damping — amortiguamiento (predeterminado: 10)

Alto (ej.: 200): sin overshoot, movimiento directo como un CSS ease-out. Bajo (ej.: 5): mucha oscilación, efecto «trampolín».

stiffness — rigidez (predeterminado: 100)

Alto (ej.: 300): movimiento más rápido y agresivo. Bajo (ej.: 40): se mueve más despacio, resorte «flojo».

mass — peso (predeterminado: 1)

Alto (ej.: 3): «objeto pesado», movimiento lento con más oscilación. Bajo (ej.: 0.5): objeto liviano, se resuelve rápido.

Variaciones de config SpringConfig.tsx

// Pop rápido sem bounce
spring({ frame, fps, config: { damping: 200 } })

// Bounce divertido
spring({ frame, fps, config: { damping: 8, stiffness: 120 } })

// Entrada pesada e lenta
spring({ frame, fps, config: { damping: 15, stiffness: 60, mass: 2.5 } })

damping alto

Sin bounce

damping bajo

Mucha oscilación

stiffness

Velocidad del resorte

mass

Peso del objeto

⚖️ spring vs interpolate — cuándo usar cada uno

Las dos funciones tienen propósitos diferentes. Elegir la correcta ahorra tiempo y hace que el video quede más pulido. Una regla sencilla: spring para entradas con vida, interpolate para timing exacto y fades.

✓ Usa spring() cuando…

✓El elemento «salta» a la posición: ícono, badge, tarjeta de entrada.
✓Quieres un overshoot natural sin definir keyframes manualmente.
✓Scale de 0→1 con bounce (aparece el logo).

↔ Usa interpolate() cuando…

→Fade-in/out con timing exacto (sabes cuál es el frame correcto).
→Color, opacidad: valores que no deben superar un límite.
→Animación con múltiples keyframes (pausa, secuencia).

💡 ¡Combina los dos!

Es muy común usar spring() para la escala de entrada y interpolate() para la opacidad del mismo elemento — cada uno donde destaca. No hay conflicto al llamar a ambos en el mismo componente.

spring

Entradas con pop

interpolate

Timing exacto

Combinación

Sin conflictos

Regla

Física vs. keyframe

⏩ Sequence — escenas con retraso y frame local

O <Sequence> es un wrapper que retrasa el inicio de un componente hijo. Con la prop from, el hijo solo empieza a existir en el frame especificado y, lo que es crucial, el frame local dentro del hijo se reinicia en 0 en ese punto.

Dos títulos en secuencia Titles.tsx

import { Sequence } from "remotion";

// Título 1: frame global 0–59 → frame local 0–59
<Sequence from={0} durationInFrames={60}>
  <Title1 />  // useCurrentFrame() aqui retorna 0..59
</Sequence>

// Título 2: começa no frame global 60 → frame local reinicia em 0
<Sequence from={60} durationInFrames={60}>
  <Title2 />  // useCurrentFrame() aqui também retorna 0..59
</Sequence>

✓ Qué HACER con Sequence

✓Usar from para retrasar cualquier componente sin cambiar el código interno.
✓Usar durationInFrames para limitar la ventana de visibilidad del hijo.
✓Reutiliza el mismo componente en varias Sequences con diferentes offsets.

✗ Qué NO hacer

✗Usar frame - offset manualmente en el componente hijo; Sequence ya se encarga de eso.
✗Dejar de usar durationInFrames: el hijo permanece «vivo» para siempre (visible después de su tiempo).
✗Confundir el frame global con el frame local — dentro de Sequence el reloj se reinicia.

from

Offset de inicio

durationInFrames

Ventana de visibilidad

Frame local

Se reinicia en 0

Reutilizable

El mismo comp, N veces

🪟 AbsoluteFill — apilamiento de capas

O <AbsoluteFill> es un div que ocupa el 100% del ancho y alto de la composición, con position: absolute. Al apilarlo con otros AbsoluteFills, crea capas —fondo, contenido, overlay— sin interferir con el layout.

🎯 La estructura de tres capas

import { AbsoluteFill } from "remotion";

export const Scene = () => (
  <>
    {/* Camada 1 — fundo (z mais baixo) */}
    <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }} />

    {/* Camada 2 — conteúdo principal */}
    <AbsoluteFill>
      <div>Título e elementos</div>
    </AbsoluteFill>

    {/* Camada 3 — overlay (z mais alto) */}
    <AbsoluteFill style={{ opacity: 0.15, background: "radial-gradient(...)" }} />
  </>
);

💡 El orden = z-index implícito

En React, los elementos hermanos con position: absolute y aun así z-index se superponen por la orden en JSX: el último queda al frente. Los AbsoluteFills en secuencia crean una pila de capas predecible: no hace falta un z-index explícito en la mayoría de los casos.

100% × 100%

Completa la composición

position: absolute

Sin afectar el layout

Orden JSX

= z implícito

Apilar

Fondo/contenido/overlay

🎞️ Series.Sequence — escenas en fila automática

Con el <Series>, no necesitas calcular manualmente el from de cada escena. Coloca elementos hijos dentro de <Series.Sequence durationInFrames={N}> y Remotion calcula los offsets automáticamente. Es la base de cualquier proyecto con varias escenas de la Trilha 4.

Tres escenas sin calcular el offset Video.tsx

import { Series } from "remotion";

export const MyVideo = () => (
  <Series>
    {/* Cena 1: frames 0–89 */}
    <Series.Sequence durationInFrames={90}>
      <Intro />
    </Series.Sequence>

    {/* Cena 2: frames 90–179 (calculado auto) */}
    <Series.Sequence durationInFrames={90}>
      <MainContent />
    </Series.Sequence>

    {/* Cena 3: frames 180–269 */}
    <Series.Sequence durationInFrames={90}>
      <Outro />
    </Series.Sequence>
  </Series>
);

✓ Ventajas de Series

✓Offsets calculados automáticamente — agregar una escena no afecta a las demás.
✓Cada escena recibe un frame local que se reinicia en 0: la misma lógica de Sequence.
✓Estructura declarativa: el orden en JSX = el orden en el video.

↔ Series vs Sequence manual

→Series: escenas lineales en secuencia — proyectos con cortes directos.
→Secuencia manual: capas simultáneas superpuestas, timing preciso.
→Los proyectos reales suelen usar los dos: Series para escenas, Sequence para elementos internos.

Series

Escenas en fila

Auto-offset

Sin cálculos manuales

Frame local

Se reinicia por escena

Base T4

Todos los proyectos

📌 Resumen del módulo

✓

spring({ frame, fps }) — simula un resorte, devuelve 0→1 con overshoot natural; perfecto para entradas con vida.

✓

config: damping / stiffness / mass — un damping alto elimina el rebote; la stiffness define la velocidad; la mass define la inercia.

✓

spring vs interpolate — spring para pop/entrada; interpolate para timing exacto y opacidad. Combina ambos sin problema.

✓

Sequence — retrasa el inicio de un componente con from; el frame local se reinicia en 0 dentro del hijo.

✓

AbsoluteFill — ocupa el 100% de la composición; apilado en capas de fondo/contenido/overlay según el orden JSX.

✓

Series.Sequence — escenas en fila con offsets automáticos; base de todos los proyectos de la Trilha 4.

Próxima ruta:

Trayecto 2 — Recursos: imágenes, videos, audio, fuentes y assets externos en Remotion. Ya dominas el motor; ahora viene el combustible.

← Volver a la ruta Próxima ruta: Recursos →