padhle/.agents/skills/remotion-best-practices/remotion-markup/multi-scene-video.md

If the video being created is a multi-scene video, it should be structured in a special way. Create a new folder and put each scene in a separate file.

// SceneA.tsx
export const SceneA: React.FC = () => {
 return // ...
}

// SceneB.tsx
export const SceneB: React.FC = () => {
  return // ...
} 

Install @remotion/transitions if not yet available:

npx remotion add @remotion/transitions

// MyVideo.tsx

import {TransitionSeries} from '@remotion/transitions';

const MyVideo: React.FC = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={4 * fps} name="SceneA">
        <SceneA />
      </TransitionSeries.Sequence>
      <TransitionSeries.Sequence durationInFrames={4 * fps} name="SceneB">
        <SceneB />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  )
}

It could also make sense to register each scene individually in the root file so it can be edited there. If a composition with the same component is registered, one can double click the sequence in the main composition and jump to that composition.

export const Root: React.FC = () => {
  return (
    <>
      <Folder id="MyVideo-Scenes">
        <Composition
          id="Scene1"
          component={Scene1}
          durationInFrames={5 * fps}
          fps={30}
          width={1920}
          height={1080}
        />
        <Composition
          id="Scene2"
          component={Scene2}
          durationInFrames={5 * fps}
          fps={30}
          width={1920}
          height={1080}
        /> 
      </Folder>
      <Composition
        id="MyVideo"
        component={MyVideo}
        durationInFrames={10 * fps}
        fps={30}
        width={1920}
        height={1080}
      /> 
    </>
  )
}

This allows the user to trim the start and end of the durations visually and add transitions later. Prefer inlining the durationInFrames values, because only then they are editable. It's okay if the value is redundant.