Módulo 3.3 · Ritmo y transiciones entre escenas

📽️ Series.Sequence — escenas en fila

Series del paquete @remotion/transitions (o del propio Remotion) coloca cada Series.Sequence automáticamente una tras otra. Tú solo declaras la duración de cada escena; el offset acumulado se calcula internamente.

🎯 Por qué usar Series en lugar de Sequence manual

•Con Sequence manual: from={90}, from={240}… calcularlo a mano y mantenerlo sincronizado es trabajoso.
•Con Series: solo declara durationInFrames en cada escena — la posición se calcula automáticamente.
•Reordenar escenas en el JSX las reordena en el video — sin recalcular ningún offset.

Series básico — 3 escenas MultiScene.tsx

import { Series } from "remotion";

export const MultiScene = () => (
  <Series>
    {/* Cena 1: Intro — 3 segundos a 30fps */}
    <Series.Sequence durationInFrames={90}>
      <IntroScene />
    </Series.Sequence>

    {/* Cena 2: Conteúdo — 5 segundos */}
    <Series.Sequence durationInFrames={150}>
      <ContentScene />
    </Series.Sequence>

    {/* Cena 3: CTA — 3 segundos */}
    <Series.Sequence durationInFrames={90}>
      <CTAScene />
    </Series.Sequence>
  </Series>
);
// Total: 330 frames = 11 segundos — calculado automaticamente

Series

Auto-offset

Orden JSX

= orden temporal

Frame local

0 en cada escena

Reordenar

Solo mover la línea

💨 Duraciones que respiran

Una escena demasiado corta no da tiempo para asimilar el contenido. Una escena demasiado larga pierde el ritmo y aburre. La duración ideal varía según el tipo de contenido, pero hay una regla sencilla para calibrarla: lee el texto en voz alta y asegúrate de que la escena dure al menos eso.

📊 Referencias de duración por tipo de escena

Solo el título (3–5 palabras): 60–75 frames (2–2,5s)
Frase corta / subtítulo: 75–90 frames (2,5–3s)
Lista de 3–4 elementos con stagger: 120–150 fotogramas (4–5s)
Concepto explicativo (párrafo): 180–240 fotogramas (6–8s)
CTA final: 90–120 frames (3–4s): más tiempo para asimilar la acción

✓ Duraciones que respetan al espectador

✓Cada escena dura lo necesario para que se pueda leer el contenido.
✓Variación deliberada: escenas de acción más cortas y escenas contemplativas más largas.
✓El CTA siempre debe tener tiempo suficiente: el espectador necesita tiempo para actuar.

✗ Errores de duración

✗Todas las escenas tienen la misma duración: ritmo mecánico y aburrido.
✗Escenas de 30 frames con mucho texto: ilegibles.
✗CTA de 30 frames: el espectador no tiene tiempo para leer y actuar.

Mínimo

2s para texto

Prueba

Lee en voz alta

CTA

3–4s generoso

Variar

Deliberadamente

🌀 Transition entre escenas — suavizar el corte

El paquete @remotion/transitions ofrece el TransitionSeries con transiciones listas: fade, slide, wipe, flip. Se superponen automáticamente a las escenas durante N frames, eliminando el corte seco sin código manual de superposición.

Instalar el paquete

npm install @remotion/transitions

Reemplazar Series por TransitionSeries

El componente acepta <TransitionSeries.Transition> entre las escenas para aplicar la transición.

Elegir la transición y la duración

Por lo general, 10–20 frames para el fade; 8–15 para el slide. Las transiciones demasiado largas le quitan tiempo a la escena.

TransitionSeries con fade y slide TransitionScene.tsx

import { TransitionSeries, springTiming, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
import { slide } from "@remotion/transitions/slide";

export const TransitionScene = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={90}>
      <IntroScene />
    </TransitionSeries.Sequence>

    {/* Fade de 15 frames entre Intro e Conteúdo */}
    <TransitionSeries.Transition
      presentation={fade()}
      timing={linearTiming({ durationInFrames: 15 })}
    />

    <TransitionSeries.Sequence durationInFrames={150}>
      <ContentScene />
    </TransitionSeries.Sequence>

    {/* Slide de 12 frames entre Conteúdo e CTA */}
    <TransitionSeries.Transition
      presentation={slide({ direction: "from-right" })}
      timing={springTiming({ config: { damping: 15 } })}
    />

    <TransitionSeries.Sequence durationInFrames={90}>
      <CTAScene />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

💡 Consejo práctico

Empieza siempre con fade — es la transición más neutra y funciona en el 90% de los casos. Solo agrega slide o wipe cuando quieras comunicar dirección o revelación explícitamente.

fade

Neutro universal

deslizar

Dirección explícita

wipe

Revelación

Duración

10–20 fotogramas

🥁 Ritmo de corte — rápido vs. lento

El ritmo de los cortes es una decisión de comunicación, no solo técnica. Los cortes rápidos (1–2s por escena) generan energía y urgencia — perfectos para highlights, tráilers y contenido de acción. Los cortes lentos (4–6s) crean peso, contemplación y autoridad — mejores para tutoriales, documentales y cursos.

⚡ Cortes rápidos (30–60 frames)

→Destacados de producto / tráiler de curso
→Reels con ritmo acelerado
→Cuenta regresiva / urgencia
→Contenido para quienes ya conocen el tema

🐢 Cortes lentos (90–180 frames)

→Tutorial técnico / explicación paso a paso
→Presentación de producto premium
→Contenido emocional / storytelling
→Público nuevo en el tema

💡 La variación es el secreto

Los videos con un ritmo 100 % uniforme resultan hipnóticos (en el mal sentido). La técnica profesional consiste en mantener un ritmo base y romper deliberadamente en momentos de impacto: una escena más larga antes de un pico o una ráfaga de cortes rápidos en un punto climático.

Rápido

Energía / urgencia

Lento

Peso / autoridad

Variación

Crea un pico

Audiencia

Define el ritmo

🎵 Sincronizar con el ritmo

Sincronizar los cortes de escena con el ritmo del audio es lo que le da al video esa sensación de que «todo encaja». La fórmula es directa: dado el BPM de la música, calcula en qué frame cae cada compás y alinea los durationInFrames a estos valores.

Calcular frames por beat beatSync.ts

const BPM = 120;         // batidas por minuto da música
const FPS = 30;          // frames por segundo do vídeo

// Frames por batida
const framesPerBeat = (60 / BPM) * FPS;  // 15 frames @ 120bpm/30fps

// Frames por compasso (4 batidas)
const framesPerBar  = framesPerBeat * 4;    // 60 frames = 2s

// Duração de 2 compassos para a cena 1:
const SCENE1_DUR = framesPerBar * 2;  // 120 frames = 4s

// Resultado: cena corta exatamente na batida
<TransitionSeries.Sequence durationInFrames={SCENE1_DUR}>
  <Scene1 />
</TransitionSeries.Sequence>

📊 BPM comunes y frames por tiempo (30fps)

80 BPM (lento/lo-fi): 22,5 fotogramas por pulso · 90 fotogramas por compás
100 BPM (moderado): 18 fotogramas por pulso · 72 fotogramas por compás
120 BPM (pop estándar): 15 fotogramas por pulso · 60 fotogramas por compás
140 BPM (enérgico): 12,9 fotogramas por pulso · 51 fotogramas por compás

Fórmula

(60/BPM) × fps

120 BPM

15f por pulso

Compás

× 4 pulsos

Efecto

Parece producido

🔚 Cierre limpio — la última escena

La impresión final del video es tan importante como la primera. Una escena final abrupta arruina toda la narrativa construida. El cierre ideal tiene tres partes: el contenido de la escena, la resolución visual (fade-out o logo) y, si lo hay, un CTA claro con tiempo suficiente.

✓ Cierre que funciona

✓Escena final con una duración generosa (≥90 frames).
✓Fade-out de opacidad en los últimos 20–30 frames.
✓El CTA aparece con suficiente anticipación para que se pueda leer antes del fade.

✗ Mal cierre

✗El video termina abruptamente sin fade: parece un error técnico.
✗El CTA aparece en el último segundo: es imposible leerlo.
✗Fade-out muy rápido (5 frames) — parece un corte seco.

Escena final con fade-out y CTA FinalScene.tsx

const SCENE_DUR = 120;  // 4 segundos
const FADE_START = 90;   // fade começa no frame 90 (3s)

const frame = useCurrentFrame();

// Fade-out global nos últimos 30 frames
const fadeOut = interpolate(
  frame,
  [FADE_START, SCENE_DUR],
  [1, 0],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

return (
  <AbsoluteFill style={{ opacity: fadeOut }}>
    <CTAContent />
    <Logo />
  </AbsoluteFill>
);

Fade-out

20–30 fotogramas

CTA

Primer tercio

Duración

≥90 frames

Logo

En la escena final

📌 Resumen del módulo

✓

Series.Sequence — escenas en fila automática; el offset se calcula internamente.

✓

Duraciones que dan respiro — mínimo 2s para el texto; varía deliberadamente para crear ritmo.

✓

TransitionSeries — fade, slide y wipe entre escenas sin código de superposición manual.

✓

Ritmo de corte — rápido para transmitir energía, lento para dar peso; la variación crea un pico de impacto.

✓

Golpe — (60/BPM) × fps = frames por pulso; alinear los cortes con el pulso da un aspecto profesional.

✓

Cierre — fade-out generoso, CTA visible, logo en la escena final.

¡Completaste la Ruta 3!

Timing, capas y ritmo son los tres pilares de la combinación. En la Ruta 4 aplicarás todo esto en proyectos completos, desde cero hasta el render final.

← Módulo 3.2 Próxima ruta: Proyectos →