> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inklyai.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Cover steps

> Intro, transition, closing, form, and embed screens in demo.config.json.

Cover steps are full-screen moments that are not tied to a captured product screen. Use them for introductions, transitions, endings, lead capture, embedded content, and calls to action.

A closing screen is usually just the final cover step, with a button to replay the demo or open another URL.

```json theme={null}
{
  "kind": "cover",
  "id": "intro",
  "widgets": [
    {
      "type": "headline",
      "id": "intro-headline",
      "title": "Your demo in *60 seconds*.",
      "description": "Spin up a sharable demo from a single prompt.",
      "cta": {
        "label": "Get started",
        "animation": "shimmer",
        "action": { "type": "next" }
      }
    }
  ],
  "advance": { "trigger": "click" }
}
```

| Field             | Type       | Required | Default                  | Notes                                                                            |
| ----------------- | ---------- | -------- | ------------------------ | -------------------------------------------------------------------------------- |
| `kind`            | `"cover"`  | Yes      | —                        | Step discriminator.                                                              |
| `id`              | `string`   | Yes      | —                        | Step id.                                                                         |
| `label`           | `string`   | No       | —                        | Optional label.                                                                  |
| `widgets`         | `object[]` | Yes      | —                        | Exactly one widget. See [Widgets](/schema/demo/widgets).                         |
| `background`      | `object`   | No       | —                        | Per-cover backdrop. See [Cover background](#cover-background).                   |
| `backgroundImage` | `object`   | No       | —                        | Backdrop image layer behind the widget. `{ src, alt? }`.                         |
| `backgroundDim`   | `number`   | No       | —                        | Dim overlay for contrast, `0` to `1`.                                            |
| `script`          | `string`   | No       | —                        | Narration script.                                                                |
| `voiceover`       | `object`   | No       | —                        | Voiceover audio. Same shape as content steps.                                    |
| `duration`        | `number`   | No       | —                        | Duration in milliseconds. Positive.                                              |
| `advance`         | `object`   | No       | `{ "trigger": "click" }` | `trigger` is `"auto"` or `"click"`. Covers default to waiting for viewer action. |

## Cover background

Use `background` when you want to style the cover canvas behind the widget.

| Field       | Type                                        | Required    | Default | Notes                                                                                                                     |
| ----------- | ------------------------------------------- | ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------- |
| `type`      | `"color"` \| `"image"` \| `"glassmorphism"` | Yes         | —       | `color` uses a flat fill or gradient, `image` uses `src`, and `glassmorphism` derives a blurred visual from demo imagery. |
| `color`     | `string`                                    | Conditional | —       | Hex color for a flat fill. Required for `type: "color"` unless `from`/`to` are set.                                       |
| `from`      | `string`                                    | Conditional | —       | Gradient start hex. Required together with `to` for a gradient.                                                           |
| `to`        | `string`                                    | Conditional | —       | Gradient end hex. Required together with `from`.                                                                          |
| `src`       | `string`                                    | Conditional | —       | Image source. Required for `type: "image"` and optional as a preview fallback for `glassmorphism`.                        |
| `alt`       | `string`                                    | No          | —       | Alt text for the image source.                                                                                            |
| `intensity` | `number`                                    | No          | —       | Blur intensity for `glassmorphism`. Accepted range is `-5` to `48`.                                                       |