Capture Demo GIF for a Web App

Record a scripted walkthrough of a web application as an animated GIF for README embedding. Uses headless Playwright for screenshots and ffmpeg for GIF encoding.

Prerequisites

• Node.js 20+
• ffmpeg installed (brew install ffmpeg)
• Dev server running for the target app

Workflow

1. Plan the Demo Scenes

Before writing code, decide which interactions to show. A good demo GIF has 8-15 frames covering: