# Intro templates

An intro is an optional title card prepended to the start of `demo.mp4` (and `demo.gif` when GIF output is enabled). The intro is rendered separately from the workflow recording, fades into the first frame of the demo, and is best-effort: if any part of it fails, the run still ships the demo without the intro.

## When to use an intro

Add an intro when the viewer needs context up front: a feature name, a campaign, or a date.

- Launch announcements where the first second sets the tone.
- Feature explainers that should name the feature before the workflow starts.
- Release recap videos where viewers expect a "what's new" frame.
- Customer-facing walkthroughs that need consistent branding.

Skip the intro for raw docs walkthroughs and internal recordings where the title card is just friction.

## Template choices

Six templates are available today. All take `content` (text and/or logo) plus `style` (colors). Pick by the look you want for the first frame.

### `simple`

Single line of text on a solid or gradient background. The quietest template; good for docs intros where the goal is to name the feature without distraction.

{% docsVideoExample title="simple" description="Placeholder preview while we add dedicated intro examples." videoSrc="/videos/landing/producthunt.mp4" /%}

```json
{
  "intro": {
    "template": "simple",
    "content": { "text": "Analytics, now in 60 seconds" },
    "style": {
      "background": { "type": "solid", "color": "#0B1220" },
      "textColor": "#FFFFFF"
    }
  }
}
```

### `simple-spring-scale-in`

Same as `simple`, with a spring-scale entrance on the text. Use it when the demo opens a launch or feature explainer and the intro should feel kinetic.

{% docsVideoExample title="simple-spring-scale-in" description="Placeholder preview while we add dedicated intro examples." videoSrc="/videos/landing/slideshot.mp4" /%}

```json
{
  "intro": {
    "template": "simple-spring-scale-in",
    "content": { "text": "Meet the new home tab" },
    "style": {
      "background": { "type": "gradient", "from": "#0B1220", "to": "#101A33", "direction": "diagonal" },
      "textColor": "#FFFFFF"
    }
  }
}
```

### `simple-line-by-line-slide`

Multi-line text staggered in line by line. The default for most launch and feature cards. It gives a one-line headline plus a supporting line room to breathe.

{% docsVideoExample title="simple-line-by-line-slide" description="Placeholder preview while we add dedicated intro examples." videoSrc="/videos/landing/linear.mp4" /%}

```json
{
  "intro": {
    "template": "simple-line-by-line-slide",
    "content": { "text": "Analytics, now in 60 seconds" },
    "style": {
      "background": { "type": "gradient", "from": "#0B1220", "to": "#101A33", "direction": "diagonal" },
      "textColor": "#FFFFFF"
    }
  }
}
```

### `simple-line-by-line-slide-with-logo`

Same line-by-line motion, with a logo placed above the text. Use it when the demo is for a customer-facing campaign and the brand mark should sit above the headline.

{% docsVideoExample title="simple-line-by-line-slide-with-logo" description="Placeholder preview while we add dedicated intro examples." videoSrc="/videos/landing/notion.mp4" /%}

```json
{
  "intro": {
    "template": "simple-line-by-line-slide-with-logo",
    "content": {
      "text": "Analytics, now in 60 seconds",
      "logoUrl": "https://cdn.example.com/brand/logo.svg"
    },
    "style": {
      "background": { "type": "gradient", "from": "#0B1220", "to": "#101A33", "direction": "diagonal" },
      "textColor": "#FFFFFF"
    }
  }
}
```

### `simple-line-by-line-slide-with-logo-and-backdrop`

Logo and text composited over the first frame of the recorded workflow, with a diagonal opacity ramp using `backdropColor`. The intro feels rooted in the product because viewers see the destination UI behind the title.

Use `backdropColor` instead of `style.background` for this template.

{% docsVideoExample title="simple-line-by-line-slide-with-logo-and-backdrop" description="Placeholder preview while we add dedicated intro examples." videoSrc="/videos/examples/waydev/demo.mp4" /%}

```json
{
  "intro": {
    "template": "simple-line-by-line-slide-with-logo-and-backdrop",
    "content": {
      "text": "Analytics, now in 60 seconds",
      "logoUrl": "https://cdn.example.com/brand/logo.svg"
    },
    "style": {
      "backdropColor": "#0B1220",
      "textColor": "#FFFFFF"
    }
  }
}
```

### `simple-logo`

Logo only, no text. Use it for short social clips where the brand mark alone is the title card.

{% docsVideoExample title="simple-logo" description="Placeholder preview while we add dedicated intro examples." videoSrc="/videos/examples/woop/demo.mp4" /%}

```json
{
  "intro": {
    "template": "simple-logo",
    "content": { "logoUrl": "https://cdn.example.com/brand/logo.svg" },
    "style": {
      "background": { "type": "solid", "color": "#0B1220" }
    }
  }
}
```

## Field rules

- `content.text`: 1 to 120 characters. Required for every template except `simple-logo`.
- `content.logoUrl`: required for logo-bearing templates. SVG or PNG hosted anywhere reachable.
- `style.background`: either `{ "type": "solid", "color": "#RRGGBB" }` or `{ "type": "gradient", "from": "#RRGGBB", "to": "#RRGGBB", "direction": "vertical" | "horizontal" | "diagonal" }`. Used by every template except the backdrop variant.
- `style.backdropColor`: used only by `simple-line-by-line-slide-with-logo-and-backdrop`. The intro composites the logo and text over the first frame of the demo with a diagonal opacity ramp using this color.
- `style.textColor`: `#RRGGBB`. Required for every text-bearing template.

## Agent prompt pattern

```text
Create a Slideshot video with a short intro that names the feature, sets
context for product marketers, and then transitions into the product
walkthrough. Use the line-by-line template with a dark gradient background
unless the brand asset suggests otherwise.
```

## Failure behavior

The intro stage is best-effort. If template rendering or the final concat fails, the run still completes successfully and `demo.mp4` ships without the intro. Failures surface in the run's event log; the run status itself stays `succeeded`.

## Related

- [Background](/docs/customizing-video/background): pair an intro with a brand-aligned background.
- [Video and content size](/docs/customizing-video/video-and-content-size): pick the output dimensions the intro is rendered into.
- [Brand extraction](/docs/api/brand): fetch logos and colors to auto-fill intro templates.