render-vo-anchored-motion-listicle

Assemble a narrated motion-graphic listicle ad from a config: a spoken voiceover carries a numbered listicle (hook + N points + CTA) and every visual beat is anchored to the VO's word-level timestamps. Each beat is a web-animated hyperframe (an HTML page + the Web Animations API driven by window.renderAt(t)) rendered to video frame-by-frame with Playwright, all in ONE branded design system (alternating background tiles, big hero numerals, body type, decorative accents, callouts). Optional color-graded breather windows give visual breath, and captions burn only on the B-roll windows. The shipped master is pure motion-graphic + VO — there is NO lipsync (the still headshot is kept only for a future lipsync variant). This capability is the FREE, deterministic assembly — the Playwright beat render, the ffmpeg concat, the window-masked caption burn, the VO+music mix, and the final composite.

scripts/config.example.json is the worked example (Truehour "doctor-educator" listicle, ~66s 1080×1920 9:16 at 25fps) — copy its structure, never its creative values; scripts/PIPELINE.md maps every config block to its source step and scripts/README.md documents the free assembly.

Choices