Your complete guide to understanding Remotion's composition architecture—from basic composition setup to advanced sequence timing, scene organization, shared components, and best practices for scalable video projects.
Learn the fundamentals of Remotion compositions—the top-level containers that define your video's dimensions, duration, and frame rate.
A composition is the top-level container for a renderable video. It defines dimensions (width × height), frame rate (fps), duration (in frames), and the React component to render.
Use the <Composition> component in your Root file. Specify id, component, durationInFrames, fps, width, and height props to define your video.
A 10-second 1080p video at 30fps: durationInFrames={300}, fps={30}, width={1920}, height={1080}. Duration in seconds = frames ÷ fps.
Each composition requires a unique id string. This ID is used when rendering from the CLI (npx remotion render MyVideoId) and appears in the Studio sidebar.
Register multiple compositions in your Root file using React fragments. Each composition can be rendered independently, making it easy to manage intros, main content, and outros separately.
For single-frame outputs like thumbnails, use <Still> instead of <Composition>. Stills don't require duration or fps props and render with npx remotion still.
Master the Sequence component to control when elements appear and disappear on your video timeline.
The <Sequence> component controls when child elements appear on the timeline. Use from to set the start frame and durationInFrames to set how long it displays.
Wrap any component in a Sequence to control its timing: <Sequence from={60} durationInFrames={120}> makes content appear at frame 60 and last for 120 frames (4 seconds at 30fps).
Chain sequences for a slideshow effect: first sequence from frame 0-60, second from 60-120, third from 120-180. Each section appears after the previous one ends.
Sequences can overlap for transitions and layered effects. A fade transition might have the outgoing element from frames 60-90 and incoming element from frames 75-135, creating a 15-frame crossfade.
Add a name prop to sequences for better debugging: <Sequence name="Title Card">. Named sequences appear labeled in the Studio timeline for easier navigation.
Omit durationInFrames to make a sequence last until the composition ends. Useful for background elements or persistent UI that should remain visible throughout.
Build reusable scene components and create smooth transitions between different parts of your video.
Scenes are reusable React components that encapsulate a portion of your video. They use useCurrentFrame() for internal timing, which resets to 0 at the scene's start within a Sequence.
Design scenes as self-contained components with props for customization. A TitleScene might accept title, subtitle, and backgroundColor props for flexibility.
Inside a scene, useCurrentFrame() returns frames relative to the scene start. Frame 0 is when the scene begins, regardless of where it's placed in the composition timeline.
Create fade transitions using interpolate() with opacity. Fade in: interpolate(frame, [0, 20], [0, 1]). Fade out: interpolate(frame, [0, 20], [1, 0]).
For smooth transitions, overlap sequences by the transition duration. A 15-frame crossfade needs the outgoing scene to extend 15 frames into the incoming scene's start time.
Animate translateX or translateY for slide effects. Slide in from right: interpolate(frame, [0, 30], [width, 0]) applied to the transform property.
Create consistent video projects with shared components, layout systems, and reusable design patterns.
Access composition metadata anywhere with useVideoConfig(). Returns width, height, fps, and durationInFrames for responsive component design.
Use useVideoConfig() to create components that adapt to any composition size. Calculate font sizes, spacing, and positions as percentages of width/height.
Create a Layout component that provides consistent padding, background, and positioning. All scenes can use this layout for visual consistency across your video.
Define a theme object with colors, fonts, and spacing values. Pass it through props or React context to maintain consistent styling across all scenes and components.
Use calculateMetadata for dynamic composition properties. Calculate duration based on content length, adjust dimensions based on props, or fetch data before rendering.
For a slideshow, calculate duration from slide count: durationInFrames: slides.length * framesPerSlide. The composition automatically adjusts to content length.
Follow these proven patterns for organizing, scaling, and maintaining complex Remotion video projects.
Organize your project with clear folder structure: /compositions for top-level videos, /scenes for reusable scene components, /components for UI elements, /utils for helpers.
Keep compositions focused on one main purpose. Instead of one massive composition, create separate compositions for intro, main content, and outro that can be combined or rendered independently.
Use descriptive, consistent names: compositions as ProductLaunchVideo, scenes as FeatureShowcaseScene, components as AnimatedTitle. Clear names improve maintainability.
Make components configurable through props rather than hardcoding values. This enables visual editing in the Studio and makes components reusable across different videos.
Define timing values as constants at the top of your files: const FADE_DURATION = 15, const SCENE_GAP = 5. This makes timing adjustments easy and keeps values consistent.
Add JSDoc comments to scene components describing their purpose, expected props, and duration requirements. Future you (and collaborators) will thank you when revisiting the project.
Continue exploring with these related guides and tutorials.
Now that you understand composition structure, explore our template library to see these patterns in action, or dive into CLI rendering to export your creations.