Module 3.3 · Pacing & Transitions Between Scenes

📽️ Series.Sequence — scenes in a row

Series from the package @remotion/transitions (or Remotion itself) puts each Series.Sequence automatically one after another. You only declare the duration of each scene—the cumulative offset is calculated internally.

🎯 Why use Series instead of a manual Sequence

•With manual Sequence: from={90}, from={240}… calculating it by hand and keeping it synchronized is tedious.
•With Series: just declare durationInFrames in each scene — the position is calculated automatically.
•Reordering scenes in JSX reorders them in the video — without recalculating any offsets.

Basic Series — 3 scenes 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

JSX order

= time order

Local frame

0 in each scene

Reorder

Move line only

💨 Durations that breathe

A scene that's too short doesn't give you time to absorb the content. A scene that's too long loses its rhythm and becomes boring. The ideal duration varies by content type—but there's a simple rule for calibrating it: read the text aloud and make sure the scene lasts at least that long.

📊 Duration references by scene type

Title only (3–5 words): 60–75 frames (2–2.5s)
Short phrase / subtitle: 75–90 frames (2.5–3s)
List of 3–4 items with stagger: 120–150 frames (4–5s)
Explanatory concept (paragraph): 180–240 frames (6–8s)
Final CTA: 90–120 frames (3–4s)—more time to absorb the action

✓ Durations that respect the viewer

✓Each scene lasts as long as needed for the content to be read.
✓Deliberate variation—shorter action scenes, longer contemplative ones.
✓Always allow plenty of time for the CTA — the viewer needs time to act.

✗ Duration mistakes

✗Every scene has the same duration—mechanical, boring pacing.
✗30-frame scenes with lots of text — unreadable.
✗CTA with 30 frames — the viewer doesn't have time to read and act.

Minimum

2s for text

Test

Read aloud

CTA

3–4s, generous

Vary

Deliberately

🌀 Transition between scenes — smooth the cut

The package @remotion/transitions provides the TransitionSeries with ready-made transitions: fade, slide, wipe, flip. They automatically overlap scenes for N frames, eliminating hard cuts without manually coding overlaps.

Install the package

npm install @remotion/transitions

Replace Series with TransitionSeries

The component accepts <TransitionSeries.Transition> between scenes to apply the transition.

Choosing the transition and duration

Typically 10–20 frames for a fade; 8–15 for a slide. Transitions that are too long steal time from the scene.

TransitionSeries with fade and 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>
);

💡 Practical tip

Always start with fade — it's the most neutral transition and works in 90% of cases. Only add slide or wipe when you want to explicitly communicate direction or reveal.

fade

Universal neutral

slide

Explicit direction

wipe

Reveal

Duration

10–20 frames

🥁 Cut Rhythm — Fast vs. Slow

Cutting pace is a communication decision, not just a technical one. Fast cuts (1–2s per scene) create energy and urgency — perfect for highlights, trailers, and action content. Slow cuts (4–6s) create weight, contemplation, and authority — better for tutorials, documentaries, and courses.

⚡ Quick cuts (30–60 frames)

→Product highlights / course trailer
→Reels with a fast beat
→Countdown / urgency
→Content for people who already know the topic

🐢 Slow cuts (90–180 frames)

→Technical tutorial / step-by-step explanation
→Premium product presentation
→Emotional content / storytelling
→New to the subject

💡 Variation is the secret

Videos with a 100% uniform rhythm become hypnotic (in a bad way). The professional technique is to maintain a base rhythm and break deliberately at high-impact moments — a longer scene before a peak, or a flurry of quick cuts at a climactic point.

Fast

Energy / urgency

Slow

Weight / authority

Variation

Creates a peak

Audience

Define the pace

🎵 Match the beat

Synchronizing scene cuts with the audio beat is what gives the video that feeling that “everything fits together.” The formula is straightforward: given the music's BPM, calculate which frame each beat falls on and align the durationInFrames these values.

Calculate frames per 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>

📊 Common BPMs and frames per beat (30fps)

80 BPM (slow/lo-fi): 22.5 frames per beat · 90 frames per measure
100 BPM (moderate): 18 frames per beat · 72 frames per measure
120 BPM (standard pop): 15 frames per beat · 60 frames per measure
140 BPM (energetic): 12.9 frames per beat · 51 frames per measure

Formula

(60/BPM) × fps

120 BPM

15f per beat

Beat

× 4 beats

Effect

Looks produced

🔚 Clean Closing — the Last Scene

The video's final impression is just as important as its first. An abrupt final scene ruins the whole story you've built. The ideal ending has three parts: the scene's content, the visual resolution (fade-out or logo), and, if applicable, a clear CTA with enough time to read it.

✓ A closing that works

✓Final scene with a generous duration (≥90 frames).
✓Opacity fade-out over the last 20–30 frames.
✓CTA appears early enough to be read before the fade.

✗ Bad ending

✗Video ends abruptly without a fade — it looks like a technical error.
✗CTA appears in the last second — impossible to read.
✗Very fast fade-out (5 frames)—looks like a hard cut.

Final scene with fade-out and 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

First third

Duration

≥90 frames

Logo

In the final scene

📌 Module summary

✓

Series.Sequence — scenes queued automatically; offset calculated internally.

✓

Durations that breathe — minimum 2s for text; vary deliberately to create rhythm.

✓

TransitionSeries — fade, slide, and wipe between scenes without manual overlay code.

✓

Cutting pace — fast for energy, slow for weight; variation creates a peak of impact.

✓

Beat — (60/BPM) × fps = frames per beat; aligning cuts to the beat gives a professional feel.

✓

Closing — generous fade-out, visible CTA, logo in the final scene.

You completed Track 3!

Timing, layers, and rhythm are the three pillars of the combination. In Track 4, you’ll apply all of this in complete projects—from scratch to the final render.

← Module 3.2 Next track: Projects →