Módulo 3.3 · Ritmo & Transições entre Cenas

📽️ Series.Sequence — cenas em fila

Series do pacote @remotion/transitions (ou do próprio Remotion) coloca cada Series.Sequence automaticamente uma após a outra. Você só declara a duração de cada cena — o offset acumulado é calculado internamente.

🎯 Por que usar Series em vez de Sequence manual

•Com Sequence manual: from={90}, from={240}… calcular na mão e manter sincronizado é trabalhoso.
•Com Series: só declare durationInFrames em cada cena — a posição é calculada automaticamente.
•Reordenar cenas no JSX reordena no vídeo — sem recalcular nenhum offset.

Series básico — 3 cenas 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

Ordem JSX

= ordem tempo

Frame local

0 em cada cena

Reordenar

Só mover linha

💨 Durações que respiram

Uma cena curta demais não dá tempo de absorver o conteúdo. Uma cena longa demais perde o ritmo e entedia. A duração ideal varia por tipo de conteúdo — mas há uma regra simples para calibrar: leia o texto em voz alta e certifique-se de que a cena dura pelo menos isso.

📊 Referências de duração por tipo de cena

Título só (3–5 palavras): 60–75 frames (2–2,5s)
Frase curta / subtítulo: 75–90 frames (2,5–3s)
Lista de 3–4 itens com stagger: 120–150 frames (4–5s)
Conceito explicativo (parágrafo): 180–240 frames (6–8s)
CTA final: 90–120 frames (3–4s) — mais tempo para absorver a ação

✓ Durações que respeitam o espectador

✓Cada cena dura o tempo necessário para o conteúdo ser lido.
✓Variação deliberada — cenas de ação mais curtas, contemplativas mais longas.
✓CTA sempre generoso — o espectador precisa de tempo para agir.

✗ Erros de duração

✗Todas as cenas com a mesma duração — ritmo mecânico e entediante.
✗Cenas de 30 frames com muito texto — ilegível.
✗CTA com 30 frames — o espectador não tem tempo de ler e agir.

Mínimo

2s para texto

Teste

Leia em voz alta

CTA

3–4s generoso

Variar

Deliberadamente

🌀 Transition entre cenas — suavizar o corte

O pacote @remotion/transitions oferece o TransitionSeries com transições prontas: fade, slide, wipe, flip. Elas sobrepõem automaticamente as cenas durante N frames, eliminando o corte seco sem código manual de sobreposição.

Instalar o pacote

npm install @remotion/transitions

Substituir Series por TransitionSeries

O componente aceita <TransitionSeries.Transition> entre as cenas para aplicar a transição.

Escolher a transição e duração

Tipicamente 10–20 frames para fade; 8–15 para slide. Transições longas demais roubam o tempo de cena.

TransitionSeries com fade e 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>
);

💡 Dica prática

Comece sempre com fade — é a transição mais neutra e funciona em 90% dos casos. Só adicione slide ou wipe quando quiser comunicar direção ou revelação explicitamente.

fade

Neutro universal

slide

Direção explícita

wipe

Revelação

Duração

10–20 frames

🥁 Ritmo de corte — rápido vs lento

O ritmo de corte é uma decisão de comunicação, não só técnica. Cortes rápidos (1–2s por cena) geram energia e urgência — perfeitos para highlights, trailers e conteúdo de ação. Cortes lentos (4–6s) criam peso, contemplação e autoridade — melhores para tutoriais, documentários e cursos.

⚡ Cortes rápidos (30–60 frames)

→Highlights de produto / trailer de curso
→Reels com batida acelerada
→Contagem regressiva / urgência
→Conteúdo para quem já conhece o tema

🐢 Cortes lentos (90–180 frames)

→Tutorial técnico / explicação passo a passo
→Apresentação de produto premium
→Conteúdo emocional / storytelling
→Público novo no assunto

💡 A variação é o segredo

Vídeos com ritmo 100% uniforme ficam hipnóticos (de um jeito ruim). A técnica profissional é manter um ritmo base e quebrar deliberadamente em momentos de impacto — uma cena mais longa antes de um pico, ou uma rafada de cortes rápidos num ponto climático.

Rápido

Energia / urgência

Lento

Peso / autoridade

Variação

Cria pico

Audiência

Define o ritmo

🎵 Casar com a batida

Sincronizar cortes de cena com a batida do áudio é o que dá ao vídeo aquela sensação de que "tudo se encaixa". A fórmula é direta: dado o BPM da música, calcule em que frame cai cada batida e alinhe os durationInFrames a esses valores.

Calcular frames por batida 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>

📊 BPMs comuns e frames por batida (30fps)

80 BPM (lento/lo-fi): 22,5 frames por batida · 90 frames por compasso
100 BPM (moderado): 18 frames por batida · 72 frames por compasso
120 BPM (pop padrão): 15 frames por batida · 60 frames por compasso
140 BPM (energético): 12,9 frames por batida · 51 frames por compasso

Fórmula

(60/BPM) × fps

120 BPM

15f por batida

Compasso

× 4 batidas

Efeito

Parece produzido

🔚 Fechamento limpo — a última cena

A última impressão do vídeo é tão importante quanto a primeira. Uma cena final abrupta estraga toda a narrativa construída. O fechamento ideal tem três partes: o conteúdo da cena, a resolução visual (fade-out ou logo) e, se houver, um CTA claro com tempo suficiente.

✓ Fechamento que funciona

✓Cena final com duração generosa (≥90 frames).
✓Fade-out de opacidade nos últimos 20–30 frames.
✓CTA aparece cedo o suficiente para ser lido antes do fade.

✗ Fechamento ruim

✗Vídeo termina abruptamente sem fade — parece erro técnico.
✗CTA aparece no último segundo — impossível de ler.
✗Fade-out muito rápido (5 frames) — parece corte seco.

Cena final com fade-out e 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 frames

CTA

Primeiro terço

Duração

≥90 frames

Logo

Na cena final

📌 Resumo do módulo

✓

Series.Sequence — cenas em fila automática; offset calculado internamente.

✓

Durações que respiram — mínimo 2s para texto; varie deliberadamente para criar ritmo.

✓

TransitionSeries — fade, slide e wipe entre cenas sem código de sobreposição manual.

✓

Ritmo de corte — rápido para energia, lento para peso; variação cria pico de impacto.

✓

Batida — (60/BPM) × fps = frames por batida; alinhar cortes à batida dá ar profissional.

✓

Fechamento — fade-out generoso, CTA visível, logo na cena final.

Você completou a Trilha 3!

Timing, camadas e ritmo são os três pilares da combinação. Na Trilha 4 você vai aplicar tudo isso em projetos completos — do zero ao render final.

← Módulo 3.2 Próxima trilha: Projetos →