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. Supports Playwright CDP screencast for high-quality capture and FFmpeg for video encoding.
Create polished product demo videos by automating browser interactions.
browser action=start profile=clawd)browser action=openscripts/record-demo.js for the target appnode scripts/record-demo.jsbash scripts/frames-to-video.shSee references/demo-planning.md for guidance on:
scripts/record-demo.jsTemplate Playwright script that:
Customize for each demo:
DEMO_SEQUENCES array - define pages and interactionsOUTPUT_DIR - where to save framesFRAME_SKIP - skip every Nth frame (lower = more frames)scripts/frames-to-video.shFFmpeg encoding script with presets:
mp4 - H.264, good quality/size balance (default)gif - Animated GIF for embeddingwebm - VP9, smaller filesUsage: ./frames-to-video.sh [input_dir] [output_name] [format]
// 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));