Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →varnan-tech/vid-motion-graphics
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.
Passed 16 of 21 test cases with the skill, and 8 of 21 without it.
and 12 more in the full report
10 fixed7 passed either way4 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.
Where are the HTML source file and exported MP4 video stored in the project directory structure for a brief with slug q3-growth?
| Checked | Without skill | With skill |
|---|---|---|
| The response places the files in chart/q3-growth/video.html and chart/q3-growth/video.mp4. | Missed | Passed |
The instructions your model reads when the skill loads.
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.
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/transform directly from milliseconds. Playwright calls it once per frame. Deterministic, race-free.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.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.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.1080px, 1920px). No %, vw/vh, or responsive units.opacity: 0 outside their renderFrame window.opacity only. No display toggle, no visibility — GPU-composited opacity is frame-perfect.references/scene-library.md before generating ANY HTML. Use exact HTML structure and CSS class names from that file.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. |
| duration_per_scene | 3s | Duration per scene in seconds (1–8s) |
| style | kinetic-dark | kinetic-dark / editorial-light / data-pulse / bold-type / minimal-clean |
| aspect_ratio | 1:1 | 1:1 (1080×1080) / 16:9 (1920×1080) / 9:16 (1080×1920) |
| fps | 30 | Frames per second (24, 30, or 60) |
| music | none | Path to audio file for background track (mp3/m4a/wav) |
| source | — | Source attribution shown in final frame footer |
test cases passed, vs 8 / 21 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.