html-compositionlisted

# 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: ```python 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')