Automate browser-based product demos and interactive walkthroughs using Playwright and FFmpeg to generate high-quality video or GIF assets.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install demo-video
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install demo-video using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Demo Video Creator?
The Demo Video Creator is a technical solution designed to streamline the production of high-fidelity web application demonstrations. By integrating with Openclaw Skills, this tool enables developers to script complex browser interactions and capture them frame-by-frame via the Chrome DevTools Protocol (CDP). This ensures that every click, hover, and scroll is recorded with precision, providing a programmatic alternative to manual screen recording software.
This skill is particularly valuable for teams that need to maintain up-to-date visual documentation or marketing materials. It eliminates the inconsistency of manual recordings by allowing users to define repeatable sequences that can be re-run whenever the application UI changes. Whether you are building a product showcase or a technical tutorial, this addition to your library of Openclaw Skills ensures professional results with minimal manual effort.
Demo Video Creator Use Cases
- Generating automated product walkthroughs for technical documentation.
- Creating high-quality, looping animated GIFs for feature announcements on social media or GitHub.
- Producing consistent video demos for internal stakeholders and QA visual reviews.
- Automating the capture of complex UI interactions like tooltips and hover states that are difficult to record manually.
How Demo Video Creator Works
- Initialize the Clawdbot browser environment to prepare for automated interactions.
- Configure the recording sequence by defining pages, timing, and specific DOM interactions in the record script.
- Execute the Playwright-based script to connect to the browser via CDP and begin capturing JPEG frames.
- Store the captured frames sequentially in a local output directory.
- Run the provided FFmpeg encoding script to compile the frames into a final video or animated GIF format.
Demo Video Creator Setup
To get started, ensure you have Node.js and FFmpeg installed. Follow these steps within your Openclaw Skills environment:
# Start the required browser profile
browser action=start profile=clawd
# Customize and run the recording script
node scripts/record-demo.js
# Encode the captured frames into a video (e.g., mp4, gif, or webm)
bash scripts/frames-to-video.sh [input_dir] [output_name] [format]
Demo Video Creator Data Schema & Taxonomy
The Demo Video Creator organizes assets into a clear directory structure to manage the lifecycle from raw capture to final export:
| Component | Location | Description |
|---|---|---|
| Interaction Script | scripts/record-demo.js |
Contains the Playwright logic and interaction sequences. |
| Encoding Script | scripts/frames-to-video.sh |
Shell script utilizing FFmpeg for video synthesis. |
| Raw Frames | /frames/ |
Sequential JPEG files captured during the browser session. |
| Documentation | references/demo-planning.md |
Guidelines for timing, pacing, and interaction patterns. |
Demo Video Creator Advanced Features
- Playwright CDP Screencast integration for high-performance, low-latency frame capture.
- Multi-format encoding support including MP4 (H.264), WebM (VP9), and optimized GIFs.
- Configurable frame-skipping logic to optimize the balance between video smoothness and file size.
- Programmatic control over browser events including keyboard emulation, scrolling, and hover-state triggers.
- Seamless integration with the broader ecosystem of Openclaw Skills for end-to-end automation workflows.
SKILL.md
Loading
Related Openclaw Skills
Claw Werewolf
An automated AI bot variety show that allows agents to compete in strategic werewolf social deduction matches.
Claw Werewolf Live
A competitive variety show platform where AI bots participate in automated Werewolf matches with live spectator viewing.
Nudge Marketplace Skill
A specialized tool for registering and managing AI-native wellness and productivity agents on the Nudge marketplace.
Bland AI Voice Calling Skill
A powerful CLI-driven skill for automating AI-powered phone calls and voice interactions via the Bland AI API.
OpenClaw WhatsApp Bridge
A high-performance WhatsApp bridge for OpenClaw that enables AI-powered auto-replies, message synchronization, and full-text search through a single Go binary.
Shadow Number
A powerful utility for AI agents to acquire disposable phone numbers and automate OTP verification for website signups using crypto payments.
Featured*
