reszta poprawek

2026-08-09 09:47:34 +02:00
parent 966dd3f209
commit a0c9d7947b
439 changed files with 112891 additions and 0 deletions
@@ -0,0 +1,108 @@
+---
+name: compositions
+description: Defining compositions, stills, folders, default props and dynamic metadata
+metadata:
+  tags: composition, still, folder, props, metadata
+---
+
+A `<Composition>` defines the component, width, height, fps and duration of a renderable video.
+
+## Default Props and scaffold metadata
+
+Pass `defaultProps` to provide initial values for your component.  
+Values must be JSON-serializable (`Date`, `Map`, `Set`, and `staticFile()` are supported).
+Use `defaultProps` for composition-wide values that should be visible and editable before the video renders.
+
+For Studio editing, keep `defaultProps` as an inline object literal on `<Composition>` or `<Still>`.
+Do not store it in a variable, import it, spread it, create it with a helper, or wrap it in `satisfies`.
+When scaffolding, keep the component and `<Composition>` registration in the same file so `width`, `height`, `fps`, `durationInFrames`, and `defaultProps` are visible next to the code that uses them.
+Use `type` declarations for props rather than `interface` to ensure `defaultProps` type safety.
+
+```tsx
+type Props = {
+  readonly title: string;
+};
+
+export const MyComposition = ({ title }: Props) => <h1>{title}</h1>;
+
+const defaultProps = { title: "Hello World" };
+
+// 👍 Inline metadata and defaults
+<Composition
+  id="MyComposition"
+  component={MyComposition}
+  durationInFrames={100}
+  fps={30}
+  width={1080}
+  height={1080}
+  defaultProps={{ title: "Hello World" }}
+/>;
+
+// 👎 Hidden defaults cannot be saved back by Studio
+<Composition
+  id="OtherComposition"
+  component={MyComposition}
+  durationInFrames={100}
+  fps={30}
+  width={1080}
+  height={1080}
+  defaultProps={defaultProps}
+/>;
+```
+
+## Folders
+
+Use `<Folder>` to organize compositions in the sidebar.  
+Folder names can only contain letters, numbers, and hyphens.
+
+```tsx
+import { Composition, Folder } from "remotion";
+
+export const RemotionRoot = () => {
+  return (
+    <>
+      <Folder name="Marketing">
+        <Composition id="Promo" /* ... */ />
+        <Composition id="Ad" /* ... */ />
+      </Folder>
+      <Folder name="Social">
+        <Folder name="Instagram">
+          <Composition id="Story" /* ... */ />
+          <Composition id="Reel" /* ... */ />
+        </Folder>
+      </Folder>
+    </>
+  );
+};
+```
+
+## Stills
+
+Use `<Still>` for single-frame images. It does not require `durationInFrames` or `fps`.
+
+```tsx
+import { Still } from "remotion";
+import { Thumbnail } from "./Thumbnail";
+
+export const RemotionRoot = () => {
+  return (
+    <Still id="Thumbnail" component={Thumbnail} width={1280} height={720} />
+  );
+};
+```
+
+## Dynamic duration, width, and height
+
+Use [`calculateMetadata`](./calculate-metadata.md) to make dimensions, duration, or props dynamic based on input props, fetched data, or asset metadata.
+
+## Nesting compositions within another
+
+To 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.
+
+```tsx
+<AbsoluteFill>
+  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
+    <CompositionComponent />
+  </Sequence>
+</AbsoluteFill>
+```