# Gallery

Every film below is compiled from the
[`examples/`](https://github.com/vguerand/recit/tree/main/examples) folder of the repository and
played by the browser engine. The aspect is a setting: each block has a layout per aspect, so one
story gives the three formats.

## 16:9

The landscape format of a talk, a page or a product video.

<StoryEmbed slug="launch" aspect="16:9" />

<StoryEmbed slug="hello" aspect="16:9" />

## 1:1

The square format of a feed.

<div className="motion-grid">
  <StoryEmbed slug="launch" aspect="1:1" />
  <StoryEmbed slug="hello" aspect="1:1" />
</div>

## 9:16

The vertical format of stories and shorts.

<div className="motion-grid">
  <StoryEmbed slug="launch" aspect="9:16" />
  <StoryEmbed slug="hello" aspect="9:16" />
</div>

## Themes

| Story    | Source                                 | Theme            | Default aspect |
| -------- | -------------------------------------- | ---------------- | -------------- |
| `hello`  | `examples/motion-hello/hello.story.md` | `warm-editorial` | `9:16`         |
| `launch` | `examples/motion-saas/launch.story.md` | `saas-product`   | `16:9`         |

<SourceFile deck="launch" title="examples/motion-saas/launch.story.md" />

<SourceFile deck="launch" part="config" title="examples/motion-saas/recit.config.ts" language="ts" />