CaptureBeamDemo compiler
How it works

Record once. Re-render forever.

CaptureBeam is a demo compiler. The script is the source of truth. The video is an artifact. When the UI changes, the video regenerates from the same script — without you re-recording anything.

The pipeline

Four moving parts. One artifact.

Capture is expensive. Render is cheap. We split them so you only pay the capture cost when the UI actually changes.

demo.yaml

Source of truth. Reviewed in PR. Diffable.

Capture

Playwright resolves NL targets, records raw.webm + events.json + per-step anchors.

Render

Remotion composes the polished output from the events. Cursor, zoom, captions are computed.

demo.mp4

Artifact. Hosted with signed URLs, embeddable, swappable for any aspect ratio.

The flow

From flow to MP4 in four steps

01 · Author

Author the script

Two on-ramps. Paste a URL on the marketing site and we draft a starter YAML for you after sign-up. Or — if you've subscribed and want full control — write the YAML directly in the cloud editor's typed timeline, or have an agent author it against our JSON Schema and POST it to the API.

# A 5-step demo lives in 20 lines of YAML
title: "Acme onboarding"
preset: iris
aspect: "16:9"
steps:
  - goto: https://app.example.com
  - click: { role: "button", name: "New project" }
  - type: { label: "Project name", text: "Acme onboarding" }
  - click: { role: "button", name: "Create" }
  - assertVisible: { text: "Welcome to Acme" }
02 · Editor

Edit in a typed timeline

Open the editor at /dashboard/projects/[id]. Each step renders as a typed card with the right form fields. Drag to reorder, ⌘D to duplicate, ⌘Z to undo. The probe panel surfaces real ARIA targets from the live page so authors never type a non-existent target.

⌘ S    save
⌘ R    render
⌘ Z    undo
⌘ D    duplicate step
03 · Render

Render with computed polish

Click Render. A worker spins up Playwright, replays the script, captures raw video plus per-step metadata, and hands it to Remotion. Synthetic cursor, auto-zoom, click ripples, highlight rings, captions, title card — all computed from the events, never recorded. The polished MP4 streams back into the preview pane in 5–15 seconds.

# Programmatic equivalent
curl -X POST https://capturebeam.com/api/v1/renders \
  -H "Authorization: Bearer cb_live_…" \
  -H "Content-Type: application/json" \
  -d '{ "projectId": "prj_…" }'
04 · Reproduce

Re-render when the UI changes

This is the wedge. When your team ships a redesign, run the same script against the new UI. Cached selector → re-resolve from intent → visual anchor → needs-review diff. The video regenerates from the same source. Your demos track HEAD instead of staling out.

# Schedule it (cloud workflow on the roadmap)
on:
  push:
    branches: [main]
jobs:
  rerender:
    runs-on: ubuntu-latest
    steps:
      - run: capturebeam render --project onboarding
Why a compiler, not a recorder

Polish is computed, not captured

Every visual moment in the rendered video — cursor path, zoom, click ripple, highlight ring, caption fade, title card — comes from event metadata in events.json, not from pixels in raw.webm. That's why we can re-render at 4K, switch aspect ratios, swap brand presets, or change the cursor color without re-running the capture.

Capture is intent

The recorder writes { role: "button", name: "Create" }, not div.btn-primary:nth-child(3). NL targets survive redesigns; selectors don't.

Render is decoration

Cursor path is interpolated from rect-to-rect. Auto-zoom is keyed off click targets. Captions are per-step schema fields. Replace the entire stage CSS — it all just re-runs.

Re-runs are cheap

Running the same script against a fresh UI is the same code path as the first capture. No special "update" mode. No reconciliation. Just deterministic re-execution.

Recovery is layered

Cached selector → re-resolve from intent → visual anchor on the cached element screenshot → "needs review" diff with old vs. new side-by-side. Humans decide what they actually need to.

See it in action

Sign up for free, paste a URL, and render your first demo in under a minute.