# motion-graphics

> Claude/Codex skill by [@heygen-com](https://omgskills.com/library/heygen-com/index.md) · 53k stars · 304k installs · Updated 2026-09-26

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

Tags: ai, animation, ffmpeg, framework, gsap, html, mcp, puppeteer, rendering, typescript, video

## Install

```sh
git clone https://github.com/heygen-com/hyperframes /tmp/hyperframes && ln -s /tmp/hyperframes/skills/motion-graphics ~/.claude/skills/motion-graphics
```

## From README

motion-graphics — dispatch entry The front door is /hyperframes. This skill makes a short, design-led, unnarrated motion graphic (motion is the message; under 10s, no voice-over). Anything longer, narrated, or multi-scene — or any uncertainty → read /hyperframes first: the intent layer owns every route decision. This workflow is autonomous by design — at most one clarifying question (agents/director.md), then build through verification without intermediate review. The intent layer (/hyperframes → references/intent-interview.md) routes here directly without run-shape questions; a storyboard and companion session add little to a piece this short. Rendering is still user-gated: after checks and proof snapshots pass, ask the canonical “preview first, or render?” question from ../hyperframes/references/brief-contract.md. When a BRIEF.md exists, read it before the director's question. A short design-led motion graphic.

## Links

- HTML page: https://omgskills.com/skills/heygen-com/hyperframes/motion-graphics/
- GitHub: https://github.com/heygen-com/hyperframes
- Author: [@heygen-com](https://omgskills.com/library/heygen-com/index.md)

## More from this repo

- [product-launch-video](https://omgskills.com/skills/heygen-com/hyperframes/product-launch-video/index.md) — Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature...
   - [@heygen-com](https://omgskills.com/library/heygen-com/index.md) · 53k stars
- [canopy-part-title](https://omgskills.com/skills/heygen-com/hyperframes/canopy-part-title/index.md) — Leaves sweep through the frame and part to reveal the headline.
   - [@heygen-com](https://omgskills.com/library/heygen-com/index.md) · 53k stars
- [captions-overlay](https://omgskills.com/skills/heygen-com/hyperframes/captions-overlay/index.md) — Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that...
   - [@heygen-com](https://omgskills.com/library/heygen-com/index.md) · 53k stars