Navigation and actions

Navigation and action fields control how viewers move through a demo. They group steps into chapters, show captions at the right time, and decide what buttons do. Use this section when you want to shape the viewer journey, not the visual content of a step.

Chapters

Chapters group related steps so viewers can understand the demo structure and jump between sections.

Field	Type	Required	Default	Notes
`id`	`string`	Yes	—	Chapter id, targetable by `chapter` button actions.
`title`	`string`	Yes	—	Chapter title.
`stepIds`	`string[]`	Yes	—	Ordered step ids. At least one.

Captions

Captions show timed text on a step. They can follow voiceover audio or simply appear during the step. Both start and end are optional. Omitted bounds default to 0 and +Infinity, so { id, text } keeps a caption visible for the whole step.

Field	Type	Required	Default	Notes
`id`	`string`	Yes	—	Caption id.
`text`	`string`	Yes	—	Caption text.
`start`	`number`	No	`0`	Start time in ms. Non-negative.
`end`	`number`	No	`+Infinity`	End time in ms. Non-negative.

CTA

CTAs define the buttons viewers click on cover screens and forms.

Field	Type	Required	Default	Notes
`label`	`string`	Yes	—	Button text. Non-empty.
`action`	`object`	No	`{ "type": "next" }`	Destination. See Button actions.
`animation`	`"shimmer"`	No	—	Opts the button into the shimmer visual variant.
`background`	`string`	No	—	CSS color override for the button background.
`textColor`	`string`	No	—	CSS color override for the button text.

Button actions

Button actions decide where a CTA sends the viewer: forward, backward, to a specific step or chapter, to a URL, or back to the beginning.

type ButtonAction =
  | { type: "next" }
  | { type: "prev" }
  | { type: "step"; stepId: string }
  | { type: "chapter"; chapterId: string }
  | { type: "url"; href: string; target?: "_self" | "_blank" }
  | { type: "restart" };

Action	Fields	Notes
`next`	—	Advance one step. The default action.
`prev`	—	Go back one step.
`step`	`stepId` (`string`, non-empty)	Seek to a step by id.
`chapter`	`chapterId` (`string`, non-empty)	Seek to the first step of a chapter by id.
`url`	`href` (`string`, non-empty), `target` (`"_self"` \| `"_blank"`, default `"_blank"`)	Open an external URL.
`restart`	—	Reset the demo to the first step.

​Chapters

​Captions

​CTA

​Button actions

Chapters

Captions

CTA

Button actions