Generates motion graphics videos (MP4) from a content brief. Multi-scene HTML/CSS animations rendered frame-by-frame in headless Chromium via Playwright, assembled with FFmpeg. 1080×1080 default, 16:9 (1920×1080) and 9:16 (1080×1920) supported. 5 style presets. Trigger when user says "create a video", "motion graphic", "animated video", "make a reel", "create an explainer", "animated infographic", or "short video".
Instrucciones de origen · Vista previa de solo lectura
name
vid-motion-graphics
description
Generates motion graphics videos (MP4) from a content brief. Multi-scene HTML/CSS animations rendered frame-by-frame in headless Chromium via Playwright, assembled with FFmpeg. 1080×1080 default, 16:9 (1920×1080) and 9:16 (1080×1920) supported. 5 style presets. Trigger when user says "create a video", "motion graphic", "animated video", "make a reel", "create an explainer", "animated infographic", or "short video".
compatibility
["claude-code","gemini-cli","github-copilot"]
author
OpenDirectory
version
1.0.0
vid-motion-graphics
Generates multi-scene motion graphics as MP4. Renders HTML/CSS animations in headless Chromium via Playwright (Web Animations API frame-seeking), assembles PNG frames with FFmpeg. No React, no AI APIs, no Python — zero new dependencies beyond the graphic-gif family.
CDN fonts only. No external libraries in HTML.
Critical Rules (read before every generation)
Use window.renderFrame(t) — no CSS @keyframes for scene transitions. CSS animation currentTime seeking is silently ignored for backward seeks in Chromium. The renderFrame approach: a pure JS function computes opacity/ directly from milliseconds. Playwright calls it once per frame. Deterministic, race-free.
transform
No animation-delay on ANY element. Not needed with renderFrame. If you catch yourself writing animation-delay, stop — you're using the wrong architecture.
window.__videoReady = true only inside document.fonts.ready.then(...). Never set synchronously — fonts must load before Playwright captures frame 1 or text renders with fallback fonts.
Expose window.__stopPreview(). The browser's rAF preview loop races with Playwright's evaluate/screenshot calls. capture-frames.mjs calls __stopPreview() before the frame loop. Always include it.
Use t < startMs (not <=) in scene boundary checks.t <= 0 at frame 0 makes scene 1 black. The correct guard is if (t < startMs || t >= endMs) return hidden.
Body = exact pixel dimensions. Width and height are integers (1080px, 1920px). No %, vw/vh, or responsive units.
No two scenes visible simultaneously (except 10% enter overlap). All scenes opacity: 0 outside their renderFrame window.
Transitions use opacity only. No display toggle, no visibility — GPU-composited opacity is frame-perfect.
Never dump HTML in chat. Save to file, show summary only.
Title states the message, not the topic. "3 Reasons Q4 Crushed Targets" not "Q4 2024 Performance Video".
Read references/scene-library.md before generating ANY HTML. Use exact HTML structure and CSS class names from that file.
Step 1: Intake
Required:content_brief
Optional parameters and defaults:
Parameter
Default
Description
content_brief
—
Text describing what the video communicates (required)
scenes
auto
Number of scenes (1–6). Auto = derived from brief.
