demo-video

claude-demo-video

Turn your app into a beautiful ~50-second feature film — record your real UI, narrate how it works, and the skill scores it with music, burns in synced captions, and composites it into a polished launch video. One brand.yaml drives everything. Zero paid services.

What it makes

A single videos/final-framed.mp4 (1920×1080, ~50s) that shows how your application works — in the polished aesthetic of an Anthropic/Linear-style product film:

• 🎬 Your real app, on screen — drive a live URL (click, type, scroll, hover) and record the interaction, or render a designed HTML mockup for a feature you haven't built yet, or capture a terminal/CLI. Mix scene types freely.
• 🎙️ AI voiceover narrating the feature — Microsoft Edge TTS (free, no API key, many languages/voices).
• 📝 Karaoke word-highlight captions synced to the voice, readable on light and dark UI.
• 🎵 Music bed — procedural ambient pad, your own CC0 track, or none — auto-ducked under the voice.
• 🖼️ Beautiful framing — your brand palette, fonts, logo and end cards; the demo can play inside a styled window composited on a real workspace photo.

Built entirely with free tools — ffmpeg, Playwright headless Chromium, VHS (Charm), edge-tts. No Synthesia / HeyGen / After Effects subscription.

Free to render — no API keys, no per-video fees, no subscriptions; the whole toolchain runs locally. Authoring the brand, scenes, and script is the real work — a few minutes by hand, or with an AI assistant like Claude Code (which is where the time and tokens go).

Scene types — compose your own video

You pick the scenes and their order in brand.yaml (scenes.sequence). Every scene gets the same voiceover, captions, music and framing treatment:

Pin any scene to an exact duration: for deterministic timing, and run /demo-video plan to preview the total length before rendering.

Install

This is a Claude Code plugin.

# From GitHub:
/plugin marketplace add MarcinSufa/claude-demo-video
/plugin install demo-video@claude-demo-video

git clone https://github.com/MarcinSufa/claude-demo-video
# In Claude Code:
/plugin marketplace add file:///absolute/path/to/claude-demo-video
/plugin install demo-video@claude-demo-video

Usage

# In your app's repo:
/demo-video init        # scaffolds demo-video/ (brand.yaml, package.json, mockup starter)
# → edit brand.yaml: brand palette/fonts/logo, voiceover script, and the scenes
#   (point browser_capture at your running app, e.g. http://localhost:3000)
/demo-video plan        # ~1s dry run: estimates voiceover vs video length, PASS/WARN
/demo-video build       # runs the pipeline → videos/final-framed.mp4
/demo-video preview     # local server + cloudflared tunnel to review on your phone

See SKILL.md for the full workflow and references/scene-config.md for every scene option.

Example — a feature launch for a real app

project: { name: "Asistel", url: "asistel.io" }
palette: { bg: "#0b0f14", fg: "#e8eef5", accent: "#5eb0a0" }
typography: { display: "Fraunces", body: "Inter", mono: "JetBrains Mono" }
voice:
  voice_id: "en-US-AndrewNeural"     # or pl-PL-MarekNeural, de-DE-..., 100+ voices
  # pronounce: { Asistel: "Assystel" }  # respell English names for a non-English voice

scenes:
  speedup: 1.15
  sequence:
    - { type: browser_capture, url: "http://localhost:3000/dashboard", duration: 7,
        actions: [ { wait: 1 }, { click: "button.new" }, { scroll: 300 } ] }
    - { type: html_mockup, source: "mockups/inventory.html", duration: 6 }   # unbuilt feature
    - endcards

voiceover:
  - { text: "Every order used to mean three phone calls.", pause_after: 1.0 }
  - { text: "Now it's one screen.", pause_after: 0.6 }
  # ... ~12-15 short lines, ~80 words, ~45s of speech