Demo Video Creator

Create product demo videos by automating browser interactions and capturing frames. Use when the user wants to record a demo, walkthrough, product showcase, or interactive video of a web application.

Join 0+ developers using this skill

skill

Creative & Media

advanced

0 installs

View Source

Last updated: April 23, 2026

AI Skill Market Insights

Real data. Real impact.

Popularity

Rising

Emerging

Active Users

Developers

Quick Start

Manual Installation

No automatic installation available. Please visit the source repository for installation instructions.

View Installation Instructions

TEAR & SHARE

3-5hrs/WK

RISING

0.0K+ USING

Demo Video Creator

Create polished product demo videos by automating browser interactions.

Overview

Plan the demo sequence (pages, interactions, timing)
Record frames using Playwright CDP screencast
Encode to video with FFmpeg

Quick Start

Prerequisites

Clawdbot browser running (
```
browser action=start profile=clawd
```
)
App accessible via browser (localhost or remote)
FFmpeg installed for encoding

Recording Workflow

Start the Clawdbot browser if not running
Navigate to the app manually or via
```
browser action=open
```
Customize
```
scripts/record-demo.js
```
for the target app
Run:
```
node scripts/record-demo.js
```
Encode:
```
bash scripts/frames-to-video.sh
```

Planning a Demo

See

references/demo-planning.md

for guidance on:

Structuring demo sequences
Timing and pacing
Interaction patterns
What makes demos compelling

Scripts

scripts/record-demo.js

Template Playwright script that:

Connects to Clawdbot browser via CDP
Starts screencast capture (JPEG frames)
Executes demo sequence (navigation, clicks, hovers, typing)
Saves frames to output directory

Customize for each demo:

```
DEMO_SEQUENCES
```
array - define pages and interactions
```
OUTPUT_DIR
```
- where to save frames
```
FRAME_SKIP
```
- skip every Nth frame (lower = more frames)

scripts/frames-to-video.sh

FFmpeg encoding script with presets:

```
mp4
```
- H.264, good quality/size balance (default)
```
gif
```
- Animated GIF for embedding
```
webm
```
- VP9, smaller files

Usage:

./frames-to-video.sh [input_dir] [output_name] [format]

Interaction Patterns

// Navigation
await page.goto('http://localhost/dashboard');
await page.waitForTimeout(2000);
// Click element
await page.locator('button:has-text("Create")').click();
await page.waitForTimeout(500);
// Hover (show tooltips, hover states)
await page.locator('.card').first().hover();
await page.waitForTimeout(1000);
// Type text
await page.locator('input[placeholder="Search"]').fill('query');
await page.waitForTimeout(500);
// Press key
await page.keyboard.press('Enter');
await page.keyboard.press('Escape');
// Scroll
await page.evaluate(() => window.scrollBy(0, 300));

Tips

Timing: 2s on page load, 0.5-1s between interactions, 1.5s to show results
Frame skip: Use 3-5 for smooth video, 8-10 for smaller files
Quality: 85-90 JPEG quality balances size and clarity
Resolution: Browser window size determines output resolution
Loops: GIFs should loop seamlessly - end where you started

Demo Video Creator

AI Skill Market Insights

Quick Start

Manual Installation

TEAR & SHARE

Tags

Chart MCP Server

Be Part of the 0+ Developer Community

Demo Video Creator

Overview

Quick Start

Prerequisites

Recording Workflow

Planning a Demo

Scripts

`scripts/record-demo.js`

`scripts/frames-to-video.sh`

Interaction Patterns

Tips

Heddy IP — Brand Illustration

KiCad MCP Server

Shadcn UI MCP Server

Douyin MCP Server

Channels

Learn

Compare

Company

Agents