demo-video-pipeline

What problem does it solve?

This Skill eliminates the painful, manual process of recording, editing, and synchronizing polished product demo videos by providing an end-to-end pipeline that turns a web UI walkthrough into a finished 30–90s marketing-ready MP4 with overlays and timed voiceover.

Core Features & Use Cases

• Cinematic, keyboard-driven recording: drives scene-by-scene zoom transitions while Playwright records the browser output for consistent demo takes.
• Frame-perfect Remotion overlays: layers intro/outro, callouts, count-ups, and pulsing highlights aligned to recorded scenes using a shared timing/markers contract.
• ElevenLabs voiceover + final mixing: generates multilingual voiceover, syncs it to the scene timeline, and assembles the final video with optional music ducking and LUFS normalization.
• Use case: create a product walkthrough for LinkedIn/YouTube/Reels where each KPI update is highlighted with a pulsing box and a scripted voice narration.

Quick Start

Generate a voiceover mp3 and render the final demo by following the pipeline phases in the skill rules after you record a Playwright take to public/recording.mp4 and public/markers.json.