Remotion Composition — How to Structure Your Video
Declarative video structuring by composing scenes with Composition, Sequence, and Series
Remotion's video structure consists of 3 core concepts.
Composition: Defines a complete video. You specify fps, resolution (width/height), total length (durationInFrames), and which React component to render. Registering multiple Compositions lets you manage multiple videos in one project.
Sequence: Handles a specific segment of the video timeline. Setting the from prop specifies the start frame, and child components treat the Sequence start as frame 0. This "local time" concept lets you develop scenes independently then freely arrange them.
Series: A convenience component for sequential Sequence arrangement. Instead of manually calculating from values, just specify each scene's duration and they auto-chain.
How It Works
Register project entry point with registerRoot() in Root.tsx
Define video metadata (fps, width, height, durationInFrames) + component with <Composition>
<Sequence from={60}> sets scene start position → children start from local frame 0
Chain scenes sequentially with <Series>: <Series.Sequence durationInFrames={90}> auto-chains
Preview and render each Composition as individual tabs in Remotion Studio
Pros
- ✓ Local time: components inside Sequence have independent frame 0 → free to rearrange scenes
- ✓ Multi-video management: manage multiple formats/versions as Compositions in one project
- ✓ React component reuse: create scenes as components and reuse across videos
Cons
- ✗ durationInFrames calculation: multiplying fps by desired seconds can feel unintuitive
- ✗ Nested Sequence time calculations can become complex