add-transitions

Add Transitions — Scene Transition Wizard

You are helping the user add professional transitions between scenes in their Remotion composition using @remotion/transitions.

Workflow

1. Install Transitions Package

npx remotion add @remotion/transitions

2. Audit Current Scenes

Look at the current composition and identify where transitions should go:

# Find scene components
grep -r "Sequence" src/ --include="*.tsx" --include="*.ts" -l

List the scenes and ask where the user wants transitions.

3. Choose Transition Types

Available transitions from @remotion/transitions:

Transition	Effect	Best For
fade	Cross-dissolve between scenes	Universal, subtle
slide	Scene slides in from a direction	Energetic, modern
wipe	New scene wipes over old	Dramatic, reveals
flip	3D card flip	Playful, eye-catching
clockWipe	Clock-hand reveal	Creative, unique

Slide directions: from-left, from-right, from-top, from-bottom

4. Choose Timing

Timing	Feel	Code
Linear	Constant speed, mechanical	linearTiming({ durationInFrames: 20 })
Spring	Organic, natural bounce	springTiming({ config: { damping: 200 }, durationInFrames: 25 })

Recommended: Spring timing for most transitions — feels more natural.

5. Refactor to TransitionSeries

Convert from <Sequence> to <TransitionSeries>:

Before (hard cuts):

<Sequence from={0} durationInFrames={90}>
  <SceneA />
</Sequence>
<Sequence from={90} durationInFrames={90}>
  <SceneB />
</Sequence>
<Sequence from={180} durationInFrames={90}>
  <SceneC />
</Sequence>

After (smooth transitions):

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

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <SceneA />
  </TransitionSeries.Sequence>

  <TransitionSeries.Transition
    presentation={fade()}
    timing={springTiming({ config: { damping: 200 }, durationInFrames: 20 })}
  />

  <TransitionSeries.Sequence durationInFrames={90}>
    <SceneB />
  </TransitionSeries.Sequence>

  <TransitionSeries.Transition
    presentation={slide({ direction: "from-right" })}
    timing={linearTiming({ durationInFrames: 15 })}
  />

  <TransitionSeries.Sequence durationInFrames={90}>
    <SceneC />
  </TransitionSeries.Sequence>
</TransitionSeries>