mkhtml-video

# HTML → MP4 Render Pipeline Render a local HTML/CSS/JS animation to MP4 with Playwright frame capture and ffmpeg encoding. ## Route by Intent - **Check dependencies or choose dimensions/fps:** load [render workflow](references/render-workflow.md). - **Implement deterministic JavaScript, canvas, WebGL, or GSAP animation stepping:** load [template contract](references/html-template-contract.md). - **Capture frames directly:** execute `node .claude/skills/html-video/scripts/capture-frames.mjs <html-file> <frame-dir> <fps> <duration-seconds> <width> <height> [background-color]`. - **Render a complete MP4:** execute `bash .claude/skills/html-video/scripts/render-html-to-mp4.sh <html-file> <output.mp4> [fps] [duration-seconds] [width] [height] [background-color]`. - **Resolve module, `file://`, codec, cleanup, or dimension failures:** load [troubleshooting](references/troubleshooting.md). ## Quick Start ```bash bash .claude/skills/html-video/scripts/render-html-to-mp4.sh template.html output.mp4 30 5 1920 1080 ``` The final optional argument supplies a background colour. The script captures `fps × duration` PNG frames, encodes H.264 MP4 with `yuv420p`, cleans its temporary frame directory, and prints the output path. ## Delivery 1. Verify `ffmpeg` and Playwright before rendering; install Chromium only when missing and only with user approval. 2. Use an even viewport width and height. 3. Prefer a `window.onFrame` hook for fast deterministic animation; otherwise capture runs...