Subchapter 1.71

Multi Scene Video

remotion-markup/multi-scene-video.mdMarkdown2 KBView on GitHub

Multi-scene videos

Put each substantial scene in its own component and file.
Register those components as connected compositions so each scene has an editable Studio timeline.

Multi Scene Video · Remotion Best Practices · remotion-dev/skills · Skills Docs

// MyVideo.tsx
import {TransitionSeries} from '@remotion/transitions';
import {OpeningScene} from './OpeningScene';
import {FeatureScene} from './FeatureScene';

export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence
      name="Opening"
      durationInFrames={90}
    >
      <OpeningScene />
    </TransitionSeries.Sequence>
    <TransitionSeries.Sequence
      name="Feature"
      durationInFrames={120}
    >
      <FeatureScene />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

// Root.tsx
import {Composition, Folder} from 'remotion';
import {OpeningScene} from './OpeningScene';
import {FeatureScene} from './FeatureScene';
import {MyVideo} from './MyVideo';

export const RemotionRoot = () => (
  <>
    <Folder name="MyVideo-Scenes">
      <Composition
        id="Opening"
        component={OpeningScene}
        width={1920}
        height={1080}
        fps={30}
        durationInFrames={90}
      />
      <Composition
        id="Feature"
        component={FeatureScene}
        width={1920}
        height={1080}
        fps={30}
        durationInFrames={120}
      />
    </Folder>
    <Composition
      id="MyVideo"
      component={MyVideo}
      width={1920}
      height={1080}
      fps={30}
      durationInFrames={210}
    />
  </>
);