# Formats

Every video plays in three formats from the same scenes: 9:16 for stories, 1:1 for feeds, 16:9 for screens and slides. A scene is laid out against a frame whose short side is 1080 pixels, and is fitted to the frame when its content would not fit.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/formats/
>
> Switch the format under the preview.

| Format | Label | Size |
| --- | --- | --- |
| `story` | 9:16 | 1080 x 1920 |
| `square` | 1:1 | 1080 x 1080 |
| `landscape` | 16:9 | 1920 x 1080 |

## Set the format

```tsx
import { DEFAULT_WRAPPED_CONFIG, type WrappedConfig } from "@react-wrapped/kit";

const config: WrappedConfig = { ...DEFAULT_WRAPPED_CONFIG, format: "landscape" };
```

## How a scene fits

- The stage is always drawn at its real size and scaled down to the room it has, so type and spacing never reflow between a preview and an export.
- A scene that is too tall for the frame is scaled as a whole, down to 60 percent, before anything animates. Nothing is ever cut off at the edge.
- A scene's `animate` gets the format in its context, for the rare scene that wants a different move in a wide frame.

## Related

- [Theming](https://bettertyped.github.io/react-wrapped/docs/theming/)
- [Video export](https://bettertyped.github.io/react-wrapped/docs/player/video-export/)
- [Scenes](https://bettertyped.github.io/react-wrapped/docs/scenes/)
- [Designs](https://bettertyped.github.io/react-wrapped/designs/)

Source: https://bettertyped.github.io/react-wrapped/docs/formats/