Scenes

The DemoScene builder is what you drive inside demo.scene(id, run). It has fifteen async methods — one per step kind. This page is the method-by-method reference.

Browser actions

goto(path)

await scene.goto(path: string, options?: { id?: string }): Promise<void>

Navigate to path (relative to source.baseUrl). Produces a browser.goto step and captures a screenshot.

click(target)

await scene.click(target: string, options?: { id?: string }): Promise<void>

Click the named target. Captures a screenshot after the click settles.

fill(target, value)

await scene.fill(target: string, value: string, options?: { id?: string }): Promise<void>

Fill an input identified by target with value. Captures after the input settles.

select(target, value)

await scene.select(target: string, value: string, options?: { id?: string }): Promise<void>

Choose value from a <select> identified by target.

Assertions

expectVisible(target)

await scene.expectVisible(target: string, options?: { id?: string }): Promise<void>

Assert the target is present and visible. Produces an assert.visible step. Fails capture if unmet.

expectText(target, text)

await scene.expectText(target: string, text: string, options?: { id?: string }): Promise<void>

Assert the target contains text. Fails capture if unmet.

expectUrl(path)

await scene.expectUrl(path: string, options?: { id?: string }): Promise<void>

Assert the current URL path equals path.

Camera

establish(target?)

await scene.establish(target?: string, options?: { id?: string }): Promise<void>

Pull the camera back to show the whole viewport, or the context around target if given. Produces a camera.establish step.

focus(target, options?)

await scene.focus(
  target: string,
  options?: { id?: string; padding?: number },
): Promise<void>

Zoom/pan the camera to target. Within a scene, establish → focus interpolates smoothly.

Timeline

hold(duration)

await scene.hold(duration: string, options?: { id?: string }): Promise<void>

Hold the current state for duration. Accepts strings like "5000ms", "1s", "2s".

transition(options?)

await scene.transition(options?: {
  id?: string;
  type?: "cut" | "crossfade";
  duration?: string;
}): Promise<void>

Cut or crossfade into the next step. duration accepts the same format as hold.

Overlays

caption(text, options?)

await scene.caption(
  text: string,
  options?: { id?: string; renderer?: string },
): Promise<void>

Display a caption. renderer selects a visual component from the registry. Built-in renderers: motion.caption (default), remocn.kinetic-title. See Components and remocn for the full catalog and custom components.

callout(target, options)

await scene.callout(
  target: string,
  options: { title: string; description?: string; renderer?: string; id?: string },
): Promise<void>

Display an annotated callout pointing at target. title is required.

visual(id, props, options?)

await scene.visual(
  "local.launch-title",
  { text: "New analytics", speed: 1.2 },
  { duration: "1.5s", id: "launch-title" },
);

Render an arbitrary component declared in the demo's visuals map. The visual ID and props are inferred from defineVisual(Component). Props must be JSON-serializable; the component itself remains in demo.ts and is wired into Remotion automatically by render and Studio.

Cue

cue(name)

await scene.cue(name: string, options?: { id?: string }): Promise<void>

Drop a named bookmark in the timeline. Cues do not render visually — they are reference points for the Studio and programmatic consumers.