Create an MP4 video of a web page scrolling at a steady speed

· devtools web · Source ↗

TLDR

  • Node.js CLI tool using headless Chrome and ffmpeg to render deterministic scroll videos of web pages as H.264 1080p MP4s.

Key Takeaways

  • Captures PNG frames via headless Chrome DevTools, pipes them into ffmpeg; no npm runtime dependencies beyond Node.js 22.
  • Cue sheet scripting supports pauses, clicks, typing, zooms, highlights, and scroll-to-text targeting for complex demo recordings.
  • Default output: 1920x1080, 30fps, H.264 CRF 18; configurable via CLI flags including --speed, --duration, --width, --height.
  • Designed as an OpenAI Codex skill: plain-English prompts generate cue sheets, which Codex iterates on like editor notes.
  • Docker/sandbox users must handle Chromium --no-sandbox separately; cue step failures produce .error.json and .error.png debug artifacts.

Hacker News Comment Review

  • One commenter pointed out the whole thing can be approximated with a single ffmpeg crop filter on a full-page screenshot PNG, skipping Chrome entirely for static pages.

Notable Comments

  • @andrewstuart: Pure ffmpeg one-liner using animated crop filter on a screenshot PNG achieves similar output without any browser automation.

Original | Discuss on HN