# Films written in Markdown

**Récit motion** turns a Markdown story into a short film. The film below is one: it plays in your
browser with the same blocks engine that renders the MP4. Press :kbd[Space] to pause, ← and → to
seek.

<StoryEmbed slug="hero" />

## Three aspects, two themes

Every film has a layout per aspect: the same story plays in `16:9`, `1:1` and `9:16`. The
[gallery](/gallery) shows the examples of the repository in each of them, with the `warm-editorial`
and `saas-product` themes.

<div className="motion-grid">
  <StoryEmbed slug="hello" aspect="9:16" showOpenLink={false} />
  <StoryEmbed slug="launch" aspect="1:1" showOpenLink={false} />
</div>

## The motion format

<FeatureGrid cols={3}>
  <FeatureCard icon="📝" title="Markdown first" description="Front matter, scenes split by --- lines, attributes on the separator. The deck syntax, read as a film." site="docs" href="/formats/motion" />
  <FeatureCard icon="🔁" title="Deck to video" description="The same source renders as slides and as a film when its scenes fit the motion blocks." href="/deck-to-video" />
  <FeatureCard icon="🎞️" title="MP4 export" description="recit render produces the video with Remotion, frame for frame like the browser player." href="/video" />
  <FeatureCard icon="🧱" title="Eight blocks" description="Title, chapter, statement, stat, list, compare bars, UI mock and UI scene." site="docs" href="/formats/motion" />
  <FeatureCard icon="🧾" title="Typed JSON twin" description="Every story has a typed JSON form, and the film.json render model stays the single source of truth." site="docs" href="/formats/motion" />
  <FeatureCard icon="🤖" title="MCP server" description="Agents build, validate, edit and render films in Markdown or JSON through @recit/mcp." site="docs" href="/formats/motion" />
</FeatureGrid>

## Start a film

<TutorialSteps>
  <TutorialStep title="Create a story" duration="10 s">
    `recit init --format motion` writes a starter `story.md` with `format: motion`.

    ```bash
    npx recit init story.md --format motion
    ```

  </TutorialStep>
  <TutorialStep title="Preview with live reload" duration="1 min">
    `recit dev` plays the film in the browser and reloads it on every save.

    ```bash
    npx recit dev story.md
    ```

  </TutorialStep>
  <TutorialStep title="Render the MP4" duration="30 s">
    `recit render` loads `@recit/motion-render` on demand and writes the video.

    ```bash
    npx recit render story.md --aspect 9:16 --output out/
    ```

  </TutorialStep>
</TutorialSteps>

The full syntax is specified on [docs.recit.dev](https://docs.recit.dev/formats/motion).