Skip to main content

​
Multi-scene architecture

Use TransitionSeries from @remotion/transitions for videos with multiple scenes: 
import { TransitionSeries, springTiming } from '@remotion/transitions';
import { fadeBlur, scaleFade, clipCircle } from '@oanim/core';

export const MyVideo: React.FC = () => {
  return (
    <AbsoluteFill>
      <TransitionSeries>
        <TransitionSeries.Sequence durationInFrames={120}>
          <Scene1 />
        </TransitionSeries.Sequence>

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

        <TransitionSeries.Sequence durationInFrames={120}>
          <Scene2 />
        </TransitionSeries.Sequence>
      </TransitionSeries>
    </AbsoluteFill>
  );
};

​
When to use Sequence vs TransitionSeries

PatternUse case
TransitionSeriesMultiple scenes with transitions between them
<Sequence>Sequencing elements within a single scene
Delay parameterStaggering elements that appear together

​
Persistent background layer

For a background that stays consistent across transitions, wrap it outside the TransitionSeries: 
<AbsoluteFill>
  <Background gradient="linear-gradient(135deg, #0a0a0a, #1a1a2e)" />
  <GlowOrb color="rgba(99, 102, 241, 0.2)" x={30} y={40} />

  <TransitionSeries>
    {/* Scenes transition on top of persistent background */}
  </TransitionSeries>
</AbsoluteFill>

​
Scene structure pattern

Each scene should follow this layering: 
<AbsoluteFill>
  {/* 1. Background */}
  <Background gradient="..." />

  {/* 2. Ambient elements */}
  <GlowOrb ... />
  <Grid ... />

  {/* 3. Overlays */}
  <Vignette intensity={0.4} />

  {/* 4. Content */}
  <SafeArea style={{ justifyContent: 'center', alignItems: 'center' }}>
    {/* Animated content here */}
  </SafeArea>
</AbsoluteFill>

​
Duration guidelines

Video typeTotal durationScenesPer scene
Social clip5-10s2-32-4s
Product launch15-30s4-63-5s
Explainer30-60s6-104-6s
Demo30-90s5-125-8s

​
Transition timing

  • Fast transitions (15-20 frames): energetic, snappy feel
  • Medium transitions (25-35 frames): professional, smooth
  • Slow transitions (40-60 frames): cinematic, dramatic
Use springTiming with high damping (200) for smooth transitions. Use linearTiming for constant-speed transitions.

​
Media layers

When using AI-generated media (images, video, audio), layer them into the scene structure. See the full Working with Media guide for generation commands and detailed examples.

​
Video or image background

import { OffthreadVideo, Img, staticFile } from 'remotion';

// Video background
<OffthreadVideo
  src={staticFile('clip.mp4')}
  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>

// Or image background
<Img
  src={staticFile('bg.png')}
  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>

// Always add dark overlay for text readability
<AbsoluteFill style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} />

​
Global audio track

Place <Audio> at the composition level (outside TransitionSeries) so it plays across all scenes: 
import { Audio, staticFile } from 'remotion';

<AbsoluteFill>
  <Audio src={staticFile('bg-music.mp3')} volume={0.25} />
  <TransitionSeries>
    {/* Scenes — music plays across all of them */}
  </TransitionSeries>
</AbsoluteFill>