> ## Documentation Index
> Fetch the complete documentation index at: https://www.opendirectory.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# vid-motion-graphics

> Generates multi-scene motion graphics as MP4 from a content brief. HTML/CSS animations rendered frame-by-frame in headless Chromium via Playwright, assembled...

<Info>
  **Category:** Visual & Media · **Version:** `1.0.0` · **Author:** `OpenDirectory` · **Compatibility:** All targets (claude, codex, opencode, gemini, anti-gravity, openclaw, hermes)
</Info>

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.

<img width="1920" height="1072" alt="vid-motion-graphics-cover-image" src="https://github.com/user-attachments/assets/51d085a4-9216-4da5-948c-82ed7e5e0818" />

## Install

<Tabs>
  <Tab title="npx CLI (Recommended)">
    ```bash theme={null}
    npx "@opendirectory.dev/skills" install vid-motion-graphics --target claude
    ```
  </Tab>

  <Tab title="skills.sh">
    ```bash theme={null}
    npx skills add Varnan-Tech/opendirectory --skill vid-motion-graphics
    ```
  </Tab>

  <Tab title="Claude Code Native">
    ```bash theme={null}
    /plugin marketplace add Varnan-Tech/opendirectory
    /plugin install opendirectory-gtm-skills@opendirectory-marketplace
    ```
  </Tab>

  <Tab title="Claude Desktop">
    <video controls className="w-full aspect-video rounded-xl mb-4" src="https://github.com/user-attachments/assets/cea8b565-2002-4a87-8857-d902bfcfdc1c" />

    1. Copy `https://github.com/Varnan-Tech/opendirectory/tree/main/skills/vid-motion-graphics` into [download-directory.github.io](https://download-directory.github.io/) to download the ZIP.
    2. Open **Claude Desktop** -> **Customize** -> **Skills** -> **+** -> **Upload a skill** and drop the folder containing `SKILL.md`.
  </Tab>

  <Tab title="Manus AI">
    <video controls className="w-full aspect-video rounded-xl mb-4" src="https://github.com/user-attachments/assets/17cbee2a-9e17-4bd4-ac46-68e0e92ffab4" />

    [**Install vid-motion-graphics in Manus AI**](https://manus.im/import-skills?githubUrl=https%3A%2F%2Fgithub.com%2FVarnan-Tech%2Fopendirectory%2Ftree%2Fmain%2Fskills%2Fvid-motion-graphics\&utm_source=opendirectory)
  </Tab>
</Tabs>

## 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

| Type | Best for |
| - | - |
| `title-card` | Opening hook, brand intro |
| `stat-reveal` | Single oversized metric |
| `bullet-list` | 2–4 supporting points |
| `split-screen` | Before/after, two values |
| `quote-card` | Testimonial, pull quote |
| `cta-card` | Final scene, call to action |

## Style presets

| Preset | Feel |
| - | - |
| `kinetic-dark` | Dark bg, electric yellow, tight grotesque (default) |
| `editorial-light` | White bg, serif display, refined |
| `data-pulse` | Deep navy, mono, terminal/dashboard |
| `bold-type` | White bg, Bebas Neue, red accent, slam-in |
| `minimal-clean` | Off-white, Cormorant, gentle rise |

## Requirements

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

## Usage

```
Create a 9-second motion graphic. Brief: 'Q4 revenue hit $4.2M — 85% growth.
Three drivers: enterprise deals, churn 1.2%, price increase.
CTA: acme.com/q4'. Style: data-pulse. Aspect: 1:1.
```

## Quick export

```bash theme={null}
bash scripts/export-video.sh chart/[slug]/video.html --duration 9
```

## 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.