An agent skill ("motion graphics as code") for building frame-exact animated logos, kinetic typography, and brand videos as a single HTML file using the Web Animations API, exported via Playwright frame capture to MP4 in 1:1, 4:5, and 9:16. Documents failure modes like an unpaused seek() corrupting frames, with a measurement-based verification script.
STACK
PlaywrightFFmpegWeb Animations API
“Motion graphics as code. An agent skill for building frame-exact animated logos, kinetic typography and brand videos as a single HTML file, then exporting them to MP4 in 1:1, 4:5 and 9:16.”
agent-skillsai-agentsanimationffmpeggenerative-videokinetic-typographyllm-toolsmotion-graphicsplaywrightvideo-generationweb-animations-api
About Motion graphics
Motion graphics: kinetic type, transitions and animated layouts rendered from HTML, SVG or canvas.