Content steps

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.

{
  "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.
`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.
`advance`	`object`	No	`{ "trigger": "auto" }`	Advance behavior. `trigger` is `"auto"` or `"click"`.
`annotations`	`object[]`	No	`[]`	Overlays. See Annotations.
`captions`	`object[]`	No	—	Caption cues. See Navigation and actions.

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

​Backgrounds

​Image

​Video

​HTML

​Transform

Backgrounds

Image

Video

HTML

Transform