// Create professional demo videos with browser automation (GIF recording), ElevenLabs voiceover generation, and Remotion video composition. Automates the full workflow from script to rendered video.
| name | mastra-demo |
| description | Create professional demo videos with browser automation (GIF recording), ElevenLabs voiceover generation, and Remotion video composition. Automates the full workflow from script to rendered video. |
Create professional product demo videos by combining:
| Command | Purpose |
|---|---|
/mastra-demo:init <name> | Create new demo project from templates |
/mastra-demo:script | Generate or validate DEMO_SCRIPT.md |
/mastra-demo:record | Record browser actions as GIFs |
/mastra-demo:audio | Generate voiceovers via ElevenLabs |
/mastra-demo:compose | Build Remotion composition |
/mastra-demo:render | Export final video |
/mastra-demo:status | Show progress and next steps |
# 1. Create a new demo project
/mastra-demo:init my-awesome-demo
# 2. Edit DEMO_SCRIPT.md with your content (or generate interactively)
/mastra-demo:script
# 3. Record browser GIFs for each segment
/mastra-demo:record
# 4. Generate voiceovers
/mastra-demo:audio
# 5. Build the video composition
/mastra-demo:compose
# 6. Render the final video
/mastra-demo:render
Demo projects created by this skill have this structure:
my-demo/
├── .env # ELEVENLABS_API_KEY
├── .mastra-demo-state.json # Execution state
├── DEMO_SCRIPT.md # Script with segments
├── package.json # Remotion dependencies
├── public/ # Assets (GIFs, audio)
│ ├── segment-01.gif
│ ├── segment-01.mp3
│ └── ...
├── out/ # Rendered output
│ └── demo.mp4
└── src/
├── Root.tsx
├── DemoVideo.tsx
└── scenes/
DEMO_SCRIPT.md defines your demo:
# Demo: Feature Name
## Narrative
Write the full story as continuous prose first.
This ensures natural flow across segments.
## Settings
fps: 30
voice: Daniel
## Title
text: "Feature Name"
subtitle: "Tagline"
duration: 5s
## Segments
### segment-01-intro
url: http://localhost:4111
voiceover: |
This is the opening narration that connects
naturally to the narrative above.
actions:
- navigate: http://localhost:4111
- wait: 2s
- find: "Sign In button"
- click: found element
## Outro
heading: "Get Started"
command: "npx create-mastra@latest"
links:
- mastra.ai/docs
The key to great demos is narrative flow. Even though we record individual GIFs and audio segments, the voiceover must tell a cohesive story.
Good transitions:
Bad patterns:
Available actions for recording:
| Action | Format | Example |
|---|---|---|
| Navigate | navigate: <url> | navigate: http://localhost:4111 |
| Wait | wait: <time> | wait: 2s |
| Find | find: "<query>" | find: "Sign In button" |
| Click | click: <target> | click: found element |
| Type | type: "<text>" | type: "Hello world" |
| Scroll | scroll: <dir> | scroll: down |
Recommended ElevenLabs settings for professional demos:
For detailed documentation:
references/script-format-reference.md - Complete DEMO_SCRIPT.md formatreferences/gif-recording-reference.md - Browser automation patternsreferences/audio-generation-reference.md - ElevenLabs integrationThe templates/ directory contains Remotion project files: