Gallery | Motion

Every film below is compiled from the 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.

Lorem Cloud launchOpen fullscreen →

Lorem ipsum, the filmOpen fullscreen →

1:1

The square format of a feed.

Lorem Cloud launchOpen fullscreen →

Lorem ipsum, the filmOpen fullscreen →

9:16

The vertical format of stories and shorts.

Lorem Cloud launchOpen fullscreen →

Lorem ipsum, the filmOpen fullscreen →

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`

---
title: Lorem Cloud launch
description: A product film in 16:9 with a UI scene, saas-product theme
format: motion
aspectRatio: 16:9
theme: saas-product
---

--- id=open layout=cover

Lorem Cloud

# Ipsum, on autopilot.

--- id=chapter

## 01 · Dolor sit

--- id=speed unit=m

## Median response time

| label  | before | after |
| ------ | -----: | ----: |
| manual |     42 |     3 |
| triage |     18 |     2 |

--- id=features

## Consectetur adipiscing

- Sed do eiusmod
- Tempor incididunt
- Labore et dolore

--- type=ui-scene id=inbox chrome=window title="Lorem Cloud" caption="One reply, drafted and sent"

```yaml
states:
  - id: skeleton
    hold: 1
  - id: loaded
    hold: 2.5
root:
  kind: split
  children:
    - kind: col
      w: 300
      gap: 10
      children:
        - kind: listRow
          title: 52%
          sub: 80%
          active: true
        - kind: listRow
          title: 46%
          sub: 72%
          badge: Sent
    - kind: col
      gap: 12
      children:
        - kind: bar
          w: 60%
          h: 14
          text: Lorem ipsum · dolor sit
        - kind: card
          in:
            - loaded
          children:
            - kind: text
              value: Reply drafted · consectetur
              tone: primary
```

:::notes
Lorem ipsum dolor sit amet: the reply is drafted before the thread is opened.
:::

--- type=stat id=proof

# 92%

replies drafted

> before anyone opens the thread

import { defineConfig } from "@recit/core";

// Defaults of every motion story of this folder (the front matter wins):
// the narration pace sets the scene durations.
export default defineConfig({
  metadata: { lang: "en", author: "Lorem Cloud" },
  motion: { wordsPerSecond: 2.6 },
});