html-composition

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:

from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    b = p.chromium.launch()
    page = b.new_page(viewport={'width':1080,'height':1920})
    page.goto('file:///abs/path/panel.html')
    page.screenshot(path='panel.png')
    b.close()

• Always pass an absolute file:// path; a relative one silently loads nothing and screenshots a blank page.
• Set the viewport explicitly rather than relying on a default — the default is 1280x720 and will letterbox or crop your canvas without erroring.
• After each screenshot, verify the PNG exists and is not near-zero bytes. A blank page still writes a valid file, so file existence alone is not evidence the panel rendered.
• When type must not shift between frames, render once and animate with ffmpeg rather than screenshotting each frame — re-layout can nudge glyphs by a pixel and read as jitter.