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