Compose video frames in HTML

For laid-out visuals — type, charts, product cards, stat panels — HTML and CSS are a better authoring surface than ffmpeg filters. You get real typography, flexbox/grid layout, gradients, shadows, and SVG, then screenshot the result and let ffmpeg handle time.

The rule this skill exists to enforce: HTML owns the look, ffmpeg owns the timeline. Do not try to lay out a panel with drawtext, and do not try to sequence scenes in CSS.

Canvas discipline

• Set the page to the exact output size. For 9:16 vertical that is body { width:1080px; height:1920px; margin:0 }; render at that viewport so no scaling is needed later.
• Use box-sizing: border-box globally — padding must not silently push content past the canvas.
• Keep every element inside a safe area: at least 120px from the top and 220px from the bottom on a 1920px canvas. Platform UI covers those bands.
• Never depend on a webfont being installed. Use a stack that degrades honestly (-apple-system, Helvetica, Arial, sans-serif), or embed the font as a data URI.
• One idea per frame. A panel that needs a scrollbar is two panels.

Render frames with headless Chrome

Screenshot through Playwright's Chromium with an explicit viewport, using your native Bash tool: