|
| 1 | +--- |
| 2 | +name: demo-video |
| 3 | +description: | |
| 4 | + Generate polished demo videos from a single prompt. Use when the user asks |
| 5 | + to create a demo video, product walkthrough, feature showcase, or animated |
| 6 | + presentation. Trigger with "make a demo video", "create a product video", |
| 7 | + "demo walkthrough", or "feature showcase video". |
| 8 | +allowed-tools: Read, Write, Edit, Bash, Glob |
| 9 | +version: 1.0.0 |
| 10 | +author: Srinivas Vaddisrinivas <[email protected]> |
| 11 | +license: MIT |
| 12 | +compatible-with: claude-code |
| 13 | +tags: [video, demo, playwright, ffmpeg, edge-tts, mcp] |
| 14 | +--- |
| 15 | +# Demo Video Generator |
| 16 | + |
| 17 | +## Overview |
| 18 | + |
| 19 | +Generate 1920x1080 demo videos with voiceover, transitions, and CSS animations from a single prompt. Orchestrates Playwright (HTML-to-frame rendering), FFmpeg (compositing and transitions), and Edge TTS (neural voiceover) MCP servers. |
| 20 | + |
| 21 | +## Prerequisites |
| 22 | + |
| 23 | +- Python 3.11+ and `uv` package manager |
| 24 | +- FFmpeg installed (`ffmpeg -version`) |
| 25 | +- Playwright chromium browser (`uv run playwright install chromium`) |
| 26 | +- Internet connection for Edge TTS voice synthesis |
| 27 | + |
| 28 | +## Instructions |
| 29 | + |
| 30 | +Install the framecraft plugin from the marketplace: |
| 31 | + |
| 32 | +```bash |
| 33 | +claude plugin marketplace add jeremylongshore/claude-code-plugins-plus-skills |
| 34 | +claude plugin install framecraft@claude-code-plugins-plus |
| 35 | +``` |
| 36 | + |
| 37 | +### Quick Start |
| 38 | + |
| 39 | +```bash |
| 40 | +uv run python framecraft.py init my-demo # scaffold a project |
| 41 | +uv run python framecraft.py render scenes.json --auto-duration |
| 42 | +uv run python framecraft.py validate output.mp4 # quality check |
| 43 | +``` |
| 44 | + |
| 45 | +### MCP Orchestration |
| 46 | + |
| 47 | +When Playwright, FFmpeg, and Edge TTS MCP servers are available, framecraft orchestrates them directly for maximum control over each frame and audio segment. |
| 48 | + |
| 49 | +### Pipeline Fallback |
| 50 | + |
| 51 | +When MCP servers are not available, framecraft runs an atomic CLI pipeline that handles everything in one call. |
| 52 | + |
| 53 | +### Workflow |
| 54 | + |
| 55 | +1. **Story design** -- Choose a narrative arc (problem-solution, hero journey, before-after) |
| 56 | +2. **Scene authoring** -- Write HTML scenes with CSS animations, or use built-in templates |
| 57 | +3. **Rendering** -- Playwright captures frames, Edge TTS generates voiceover, FFmpeg composites |
| 58 | + |
| 59 | +## Output |
| 60 | + |
| 61 | +- 1920x1080 MP4 video with voiceover and transitions |
| 62 | +- Individual scene previews for iteration |
| 63 | +- Validation report for quality assurance |
| 64 | + |
| 65 | +## Error Handling |
| 66 | + |
| 67 | +| Error | Cause | Fix | |
| 68 | +|-------|-------|-----| |
| 69 | +| `ffmpeg: command not found` | FFmpeg not installed | Install via `brew install ffmpeg` or system package manager | |
| 70 | +| `playwright._impl._errors.Error` | Chromium not installed | Run `uv run playwright install chromium` | |
| 71 | +| `edge_tts.exceptions.NoAudioReceived` | TTS service unavailable | Check internet connection; retry after a few seconds | |
| 72 | +| `FileNotFoundError: scenes.json` | Missing scene config | Run `uv run python framecraft.py init my-demo` first | |
| 73 | +| Blank or black frames | HTML scene rendering failed | Check HTML syntax and ensure assets are accessible | |
| 74 | + |
| 75 | +## Examples |
| 76 | + |
| 77 | +```json |
| 78 | +{ |
| 79 | + "scenes": [ |
| 80 | + { |
| 81 | + "title": "Meet YourApp", |
| 82 | + "subtitle": "The smarter way to manage tasks", |
| 83 | + "narration": "24 tasks. One dashboard. Zero stress.", |
| 84 | + "voice": "en-US-AndrewNeural", |
| 85 | + "bullets": ["Smart priorities", "Team sync", "One-click reports"], |
| 86 | + "duration": 0 |
| 87 | + } |
| 88 | + ], |
| 89 | + "output": "demo.mp4", |
| 90 | + "width": 1920, "height": 1080, |
| 91 | + "voice": "en-US-AndrewNeural", |
| 92 | + "transition": "crossfade" |
| 93 | +} |
| 94 | +``` |
| 95 | + |
| 96 | +`duration: 0` = auto-detect from TTS length + 1.5s buffer. |
| 97 | + |
| 98 | +## Resources |
| 99 | + |
| 100 | +- Source repository with templates and pipeline: [github.com/vaddisrinivas/framecraft](https://github.com/vaddisrinivas/framecraft) |
| 101 | +- [Edge TTS voice list](https://learn.microsoft.com/en-us/azure/ai-services/speech-service/language-support) |
| 102 | +- [Playwright documentation](https://playwright.dev/python/docs/intro) |
| 103 | +- [FFmpeg documentation](https://ffmpeg.org/documentation.html) |
0 commit comments