Democraft

Basic demo

A minimal end-to-end demo with one scene and three steps.

This is the smallest useful Democraft demo: one scene, a goto, an establish, and a caption. It compiles, captures, and renders end-to-end.

The demo file

demo.ts
import { byTestId, defineDemo } from "@democraft/core";
 
export default defineDemo({
  id: "basic-walkthrough",
  title: "Basic walkthrough",
  source: {
    baseUrl: "http://localhost:4173",
    initialPath: "/",
  },
  targets: {
    hero: byTestId("hero"),
  },
  async run({ demo }) {
    await demo.scene("landing", async (scene) => {
      await scene.goto("/");
      await scene.establish("hero");
      await scene.caption("Welcome to our product.");
      await scene.hold("3000ms");
    });
  },
});

That is the complete demo. A separate targets.ts or config file is not required. You can extract them later when a larger demo benefits from shared organization.

What this produces

When captured and rendered, this demo yields a roughly 3-second clip:

  1. Browser navigates to /.
  2. Camera establishes on the hero element (whole viewport).
  3. A caption "Welcome to our product." appears.
  4. The state holds for 3 seconds.

The hold("3000ms") plus the default frame allocations for goto/establish/caption determine the total duration. At 60fps, this demo is ~180+ frames.

Running it

# start your app at :4173, then:
pnpm exec democraft render ./demo.ts -o out.mp4

Or iterate in the Studio:

pnpm exec democraft studio ./demo.ts

Next

Add a second scene and a camera focus — see callouts for a richer example.

Previous

CLI overview

Next

Captions and callouts

On This Page

On this page