@xcelsior/demo-pipeline

Scaffold an automated demo-video pipeline into any repo. Records the real app (Playwright web + iOS sim), generates an open-source voice-over (Kokoro), and edits it OpenScreen/Screen-Studio style (event-driven zoom, moving cursor, click ripples, captions, branding) with Remotion. Driven interactively by Claude via /demo-video.

Install into a repo

npx @xcelsior/demo-pipeline init        # or: pnpm dlx @xcelsior/demo-pipeline init

Drops two things (never overwrites existing):

• tools/demo-pipeline/ — capture scripts + Remotion engine + setup.sh + demo.config.json
• .claude/commands/demo-video.md — the Claude command

Use

# 1. configure for this project
edit tools/demo-pipeline/demo.config.json   # baseUrl, brand logo, voice, iOS sim

# 2. one-time machine setup
pnpm --dir tools/demo-pipeline setup        # uv, Playwright Chromium, Kokoro model, deps

# 3. produce a video
#    in Claude:
/demo-video                                  # authors/uses a flow, captures, edits, renders
#    or CLI:
LNG_PWD='…' pnpm --dir tools/demo-pipeline demo:all

Outputs per run: raw/ (recordings) · vo/ (voice-over) · edited/ (visual edit) · final/.

What's app-specific vs reusable

• Reusable (this package): the capture harness, Kokoro VO, the Remotion edit engine (camera/cursor/captions derived from captured events), setup, the Claude command.
• Per-project: demo.config.json + the capture flow (pipeline/capture_web.py) — Claude authors/extends the flow interactively by exploring the UI.

Updating

Re-run npx @xcelsior/demo-pipeline@latest init to pull engine improvements (won't clobber your edited config/flow). See tools/demo-pipeline/README.md (copied in) for the full guide.

Origin

Extracted from the Load & Go pipeline. First consumer: load-go (tools/demo-pipeline/).