Skip to main content
Category: Visual & Media · Version: 1.0.0 · Author: OpenDirectory · Compatibility: All targets (claude, codex, opencode, gemini, anti-gravity, openclaw, hermes)
Generates multi-scene motion graphics as MP4 from a content brief. HTML/CSS animations rendered frame-by-frame in headless Chromium via Playwright, assembled with FFmpeg. No React, no AI APIs, no Python. vid-motion-graphics-cover-image

​
Install

​
What it does

  1. Takes a content brief (what each scene should say) and style params
  2. Generates a multi-scene HTML/CSS animation file
  3. Captures frames via Playwright + Web Animations API seeking
  4. Assembles PNG sequence → H.264 MP4 with FFmpeg
  5. Optionally mixes in background audio

​
Output

  • Format: H.264 MP4, -pix_fmt yuv420p (compatible with QuickTime, iOS, Android, Twitter, LinkedIn, Instagram)
  • Default: 1080×1080px @2× retina (2160×2160 actual)
  • Supports: 1:1, 16:9 (1920×1080), 9:16 (1080×1920)
  • FPS: 24, 30, or 60

​
Scene types

​
Style presets

​
Requirements

  • Node.js (for Playwright frame capture)
  • FFmpeg (for MP4 assembly)
  • Internet access for Google Fonts CDN during capture

​
Usage

​
Quick export

​
Differentiator vs SkillsMP

All top SkillsMP motion-graphic skills require Remotion (React build step) or AI video APIs (Runway, Kling — cost + rate limits). This skill uses the proven HTML/CSS → Playwright → FFmpeg pipeline from the graphic-gif family: zero new dependencies, pixel-perfect output, full CSS control.