Skip to main content
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": []
}
FieldTypeRequiredDefaultNotes
kind"content"No"content"Step discriminator.
idstringYes—Step id, referenced by chapters and button actions.
labelstringNo—Optional human-readable label.
durationnumberNo—Step duration in milliseconds. Positive.
backgroundobjectYes—Media background. See Backgrounds.
scriptstringNo—Narration script. Persists independently of generated voiceover audio.
voiceoverobjectNo—Voiceover audio. { src, duration? } where src is required and duration is in seconds.
transformobjectNo—Zoom and pan. See Transform.
advanceobjectNo{ "trigger": "auto" }Advance behavior. trigger is "auto" or "click".
annotationsobject[]No[]Overlays. See Annotations.
captionsobject[]No—Caption cues. See Navigation and actions.

​
Backgrounds

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

​
Image

FieldTypeRequiredDefaultNotes
type"image"Yes—Discriminator.
srcstringYes—Image source. Non-empty.
naturalWidthnumberYes—Intrinsic width in px. Positive.
naturalHeightnumberYes—Intrinsic height in px. Positive.
altstringNo—Alt text.
sourceUrlstringNo—Original capture source URL.
titlestringNo—Optional title metadata.
objectFit"contain" | "cover" | "fill"No—How the media fits the stage box.
objectPositionenumNo—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.
FieldTypeRequiredDefaultNotes
type"video"Yes—Discriminator.
posterSrcstringNo—Poster image source.
autoplaybooleanNotrueWhether the video starts automatically.
mutedbooleanNotrueWhether the video starts muted.

​
HTML

FieldTypeRequiredDefaultNotes
type"html"Yes—Discriminator.
pathstringYes—Workspace-relative HTML entry point, such as snapshots/cap-001/index.html.
naturalWidthnumberYes—Intrinsic width in px. Positive.
naturalHeightnumberYes—Intrinsic height in px. Positive.
zoomnumberNo1Render scale for the captured document. 1 equals 100%.
scrollobjectNo{ x: 0, y: 0, maxX: 0, maxY: 0 }Scroll state. All four fields are non-negative numbers.
sourceUrlstringNo—Original capture source URL.
titlestringNo—Optional title metadata.

​
Transform

FieldTypeRequiredDefaultNotes
zoomnumberNo1Zoom factor. Minimum 1.
xnumberNo0.5Normalized focal point x, 0 to 1.
ynumberNo0.5Normalized focal point y, 0 to 1.