> ## 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.

# Content steps

> Media-backed demo steps, backgrounds, zoom, narration, and captions.

Content steps are the product moments in your demo. Each one shows a captured screen, video, or HTML snapshot and can include guidance such as messages, zoom, narration, and captions.

Use content steps for the main walkthrough: the places where you show what the product does.

```json theme={null}
{
  "kind": "content",
  "id": "s2",
  "label": "Live preview",
  "background": {
    "type": "image",
    "src": "asset:cap-002",
    "naturalWidth": 2800,
    "naturalHeight": 1600,
    "alt": "Live preview"
  },
  "transform": { "zoom": 1.25, "x": 0.62, "y": 0.42 },
  "advance": { "trigger": "auto" },
  "captions": [
    { "id": "s2_caption", "text": "See your changes come to life." }
  ],
  "annotations": []
}
```

| Field         | Type        | Required | Default                 | Notes                                                                                       |
| ------------- | ----------- | -------- | ----------------------- | ------------------------------------------------------------------------------------------- |
| `kind`        | `"content"` | No       | `"content"`             | Step discriminator.                                                                         |
| `id`          | `string`    | Yes      | —                       | Step id, referenced by chapters and button actions.                                         |
| `label`       | `string`    | No       | —                       | Optional human-readable label.                                                              |
| `duration`    | `number`    | No       | —                       | Step duration in milliseconds. Positive.                                                    |
| `background`  | `object`    | Yes      | —                       | Media background. See [Backgrounds](#backgrounds).                                          |
| `script`      | `string`    | No       | —                       | Narration script. Persists independently of generated `voiceover` audio.                    |
| `voiceover`   | `object`    | No       | —                       | Voiceover audio. `{ src, duration? }` where `src` is required and `duration` is in seconds. |
| `transform`   | `object`    | No       | —                       | Zoom and pan. See [Transform](#transform).                                                  |
| `advance`     | `object`    | No       | `{ "trigger": "auto" }` | Advance behavior. `trigger` is `"auto"` or `"click"`.                                       |
| `annotations` | `object[]`  | No       | `[]`                    | Overlays. See [Annotations](/schema/demo/annotations).                                      |
| `captions`    | `object[]`  | No       | —                       | Caption cues. See [Navigation and actions](/schema/demo/navigation-and-actions#captions).   |

## Backgrounds

A content `background` is a discriminated union on `type`: `image`, `video`, or `html`.

### Image

| Field            | Type                                 | Required | Default | Notes                                                                            |
| ---------------- | ------------------------------------ | -------- | ------- | -------------------------------------------------------------------------------- |
| `type`           | `"image"`                            | Yes      | —       | Discriminator.                                                                   |
| `src`            | `string`                             | Yes      | —       | Image source. Non-empty.                                                         |
| `naturalWidth`   | `number`                             | Yes      | —       | Intrinsic width in px. Positive.                                                 |
| `naturalHeight`  | `number`                             | Yes      | —       | Intrinsic height in px. Positive.                                                |
| `alt`            | `string`                             | No       | —       | Alt text.                                                                        |
| `sourceUrl`      | `string`                             | No       | —       | Original capture source URL.                                                     |
| `title`          | `string`                             | No       | —       | Optional title metadata.                                                         |
| `objectFit`      | `"contain"` \| `"cover"` \| `"fill"` | No       | —       | How the media fits the stage box.                                                |
| `objectPosition` | enum                                 | No       | —       | Nine-point anchor, such as `"left top"`, `"center center"`, or `"right bottom"`. |

### Video

`video` background uses the same `src`, `naturalWidth`, `naturalHeight`, `alt`, `sourceUrl`, `title`, `objectFit`, and `objectPosition` fields as `image`.

| Field       | Type      | Required | Default | Notes                                   |
| ----------- | --------- | -------- | ------- | --------------------------------------- |
| `type`      | `"video"` | Yes      | —       | Discriminator.                          |
| `posterSrc` | `string`  | No       | —       | Poster image source.                    |
| `autoplay`  | `boolean` | No       | `true`  | Whether the video starts automatically. |
| `muted`     | `boolean` | No       | `true`  | Whether the video starts muted.         |

### HTML

| Field           | Type     | Required | Default                            | Notes                                                                        |
| --------------- | -------- | -------- | ---------------------------------- | ---------------------------------------------------------------------------- |
| `type`          | `"html"` | Yes      | —                                  | Discriminator.                                                               |
| `path`          | `string` | Yes      | —                                  | Workspace-relative HTML entry point, such as `snapshots/cap-001/index.html`. |
| `naturalWidth`  | `number` | Yes      | —                                  | Intrinsic width in px. Positive.                                             |
| `naturalHeight` | `number` | Yes      | —                                  | Intrinsic height in px. Positive.                                            |
| `zoom`          | `number` | No       | `1`                                | Render scale for the captured document. `1` equals 100%.                     |
| `scroll`        | `object` | No       | `{ x: 0, y: 0, maxX: 0, maxY: 0 }` | Scroll state. All four fields are non-negative numbers.                      |
| `sourceUrl`     | `string` | No       | —                                  | Original capture source URL.                                                 |
| `title`         | `string` | No       | —                                  | Optional title metadata.                                                     |

## Transform

| Field  | Type     | Required | Default | Notes                                 |
| ------ | -------- | -------- | ------- | ------------------------------------- |
| `zoom` | `number` | No       | `1`     | Zoom factor. Minimum `1`.             |
| `x`    | `number` | No       | `0.5`   | Normalized focal point x, `0` to `1`. |
| `y`    | `number` | No       | `0.5`   | Normalized focal point y, `0` to `1`. |