render-vo-anchored-motion-listicle

Assemble an expert/educator motion-graphic listicle ad from a config: an authoritative 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 SVG accents, glass-pill callouts). Periodic color-graded B-roll 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 expert 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 (Everself "doctor-educator" listicle, ~66s 1080×1920 9:16 at 25fps); scripts/PIPELINE.md maps every config block to its source step and scripts/README.md documents the free assembly.

Run