Chapter 6: <Composition>

Core Idea

This is the component to use to register a video to make it renderable and make it show up in the sidebar of the Remotion development interface.

Key Concepts

• API
• id
• fps
• durationInFrames
• height
• width
• component or lazyComponent
• defaultProps?

Code Examples

const Component: React.FC = () => null;

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition component={Component} durationInFrames={300} width={1080} height={1080} fps={30} id="test-render" defaultProps={{}} />
      {/* Additional compositions can be rendered */}
    </>
  );
};

• What it demonstrates: Usage pattern for <Composition> from the official docs.

Key Takeaways

1. Understand api when working with <Composition>.
2. Understand id when working with <Composition>.
3. Understand fps when working with <Composition>.
4. Understand durationinframes when working with <Composition>.
5. Understand height when working with <Composition>.

Connects To

• Absolute Fill: related page in the Fundamentals & Core Concepts section.
• Animating Properties: related page in the Fundamentals & Core Concepts section.
• Animation Math: related page in the Fundamentals & Core Concepts section.