Scene

A scene is a named sequence of steps. Scenes are the unit of camera continuity and caption flow: within a scene, the camera and overlays behave coherently; between scenes, you can cut or crossfade.

Defining a scene

Inside demo.run, call demo.scene(...) for each scene:

await demo.scene("introduction", async (scene) => {
  await scene.goto("/dashboard");
  await scene.establish("dashboard");
  await scene.caption("Create a workspace in seconds.");
  await scene.hold("5000ms");
});
 
await demo.scene("configure-project", async (scene) => {
  await scene.click("new-project-button");
  await scene.focus("create-project-dialog");
  await scene.fill("project-name-input", "Oddworks");
});

The first argument is the scene id (stable, used in diagnostics and the timeline). The second is an async callback receiving a DemoScene builder. You can also pass scene metadata as the second argument:

await demo.scene(
  "configure-project",
  { title: "Configure the project" },
  async (scene) => { /* ... */ },
);

The DemoScene builder

The builder has fifteen methods — one per step kind. Each is async and returns Promise<void>:

See steps for the semantics of each.

Scene ordering

The order of demo.scene(...) calls is the order of scenes in the final video. There is no separate ordering field.

Optional id on steps

Every step method accepts an optional { id } in its options. This id is stable across edits and is how the Studio and diagnostics refer to a specific step. If you omit it, Democraft generates one — but explicit IDs make diffs and diagnostics far easier to read.

await scene.click("new-project-button", { id: "open-dialog" });

Camera continuity

Within a scene, establish and focus moves compose: a focus after an establish animates from the established framing to the focused target. Across scenes, the camera resets unless you bridge them with a transition.

See capture vs render for how camera state is resolved into the timeline.