1---
2name: compositions
3description: Defining compositions, stills, folders, default props and dynamic metadata
4metadata:
5  tags: composition, still, folder, props, metadata
6---
7 
8A `<Composition>` defines the component, width, height, fps and duration of a renderable video.
9 
10## Default Props
11 
12Pass `defaultProps` to provide initial values for your component.  
13Values must be JSON-serializable (`Date`, `Map`, `Set`, and `staticFile()` are supported).
14 
15```tsx
16import { Composition } from "remotion";
17import { MyComposition, MyCompositionProps } from "./MyComposition";
18 
19export const RemotionRoot = () => {
20  return (
21    <Composition
22      id="MyComposition"
23      component={MyComposition}
24      durationInFrames={100}
25      fps={30}
26      width={1080}
27      height={1080}
28      defaultProps={
29        {
30          title: "Hello World",
31          color: "#ff0000",
32        } satisfies MyCompositionProps
33      }
34    />
35  );
36};
37```
38 
39Use `type` declarations for props rather than `interface` to ensure `defaultProps` type safety.
40 
41## Folders
42 
43Use `<Folder>` to organize compositions in the sidebar.  
44Folder names can only contain letters, numbers, and hyphens.
45 
46```tsx
47import { Composition, Folder } from "remotion";
48 
49export const RemotionRoot = () => {
50  return (
51    <>
52      <Folder name="Marketing">
53        <Composition id="Promo" /* ... */ />
54        <Composition id="Ad" /* ... */ />
55      </Folder>
56      <Folder name="Social">
57        <Folder name="Instagram">
58          <Composition id="Story" /* ... */ />
59          <Composition id="Reel" /* ... */ />
60        </Folder>
61      </Folder>
62    </>
63  );
64};
65```
66 
67## Stills
68 
69Use `<Still>` for single-frame images. It does not require `durationInFrames` or `fps`.
70 
71```tsx
72import { Still } from "remotion";
73import { Thumbnail } from "./Thumbnail";
74 
75export const RemotionRoot = () => {
76  return (
77    <Still id="Thumbnail" component={Thumbnail} width={1280} height={720} />
78  );
79};
80```
81 
82## Calculate Metadata
83 
84Use `calculateMetadata` to make dimensions, duration, or props dynamic based on data.
85 
86```tsx
87import { Composition, CalculateMetadataFunction } from "remotion";
88import { MyComposition, MyCompositionProps } from "./MyComposition";
89 
90const calculateMetadata: CalculateMetadataFunction<
91  MyCompositionProps
92> = async ({ props, abortSignal }) => {
93  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
94    signal: abortSignal,
95  }).then((res) => res.json());
96 
97  return {
98    durationInFrames: Math.ceil(data.duration * 30),
99    props: {
100      ...props,
101      videoUrl: data.url,
102    },
103  };
104};
105 
106export const RemotionRoot = () => {
107  return (
108    <Composition
109      id="MyComposition"
110      component={MyComposition}
111      fps={30}
112      width={1080}
113      height={1080}
114      defaultProps={{ videoId: "abc123" }}
115      calculateMetadata={calculateMetadata}
116    />
117  );
118};
119```
120 
121The function can return `props`, `durationInFrames`, `width`, `height`, `fps`, and codec-related defaults. It runs once before rendering begins.
122 
123## Nesting compositions within another
124 
125To add a composition within another composition, you can use the `<Sequence>` component with a `width` and `height` prop to specify the size of the composition.
126 
127```tsx
128<AbsoluteFill>
129  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
130    <CompositionComponent />
131  </Sequence>
132</AbsoluteFill>
133```
134