Skip to main content
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.
FieldTypeRequiredDefaultNotes
idstringYes—Chapter id, targetable by chapter button actions.
titlestringYes—Chapter title.
stepIdsstring[]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.
FieldTypeRequiredDefaultNotes
idstringYes—Caption id.
textstringYes—Caption text.
startnumberNo0Start time in ms. Non-negative.
endnumberNo+InfinityEnd time in ms. Non-negative.

​
CTA

CTAs define the buttons viewers click on cover screens and forms.
FieldTypeRequiredDefaultNotes
labelstringYes—Button text. Non-empty.
actionobjectNo{ "type": "next" }Destination. See Button actions.
animation"shimmer"No—Opts the button into the shimmer visual variant.
backgroundstringNo—CSS color override for the button background.
textColorstringNo—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" };
ActionFieldsNotes
next—Advance one step. The default action.
prev—Go back one step.
stepstepId (string, non-empty)Seek to a step by id.
chapterchapterId (string, non-empty)Seek to the first step of a chapter by id.
urlhref (string, non-empty), target ("_self" | "_blank", default "_blank")Open an external URL.
restart—Reset the demo to the first step.