- Skill ID
- heygen-com/hyperframes/motion-graphics
- Publisher
- heygen-com
- Repository
- hyperframes
- Installs
- 4,459
- Files
- 23
- Synced
- Sep 16, 2026
Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.
heygen-com/hyperframes/motion-graphicsInstalls these files- agents/builder.md
- agents/director.md
- agents/finalize.md
- catalog-map.md
- categories/asset-fusion/module.md
- categories/charts/module.md
- categories/kinetic-type/module.md
- categories/logo-reveal/module.md
- categories/lower-thirds/module.md
- categories/maps/bake-basemap.mjs
- categories/maps/module.md
- categories/news/module.md
- categories/stat/module.md
- categories/tweet/module.md
- categories/webpage/module.md
- grounding/locate.mjs
- grounding/PROTOCOL.md
- phases/source/guide.md
- references/builder-contract.md
- references/motion-vocabulary.md
- references/shot-plan-ir.md
- samples/asset-fusion/_ref-circle-highlight.html
- SKILL.md
What this skill tells the agent
First, keep this skill fresh — confirm with the user before running: npx hyperframes skills update motion-graphics. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.figma source: If the logo/asset/animation to build from comes from a figma.com URL, run/figmafirst — asset export, brand tokens, and Motion→GSAP translation if the graphic is a Figma Motion import — then build from its output. Don't drive Figma via raw MCP tools directly: that skips SVG sanitization,.media/manifest.jsonlprovenance, and brand-tokenvar()binding, so a later brand change can't propagate without a full re-import.
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. Asset-first: decide the asset strategy and source real material _before_ designing the shot, then design the shot around what you have, then compose by reusing catalog capabilities. All artifacts go to PROJECT_DIR = videos/<project-name>/ (created in Step 0); all paths below are relative to it.
| Phase | Execution | Primary artifact | Detailed flow |
|---|---|---|---|
| init | Bash | hyperframes.json | Step 0 |
| plan | subagent — decide search? + classify + asset strategy | shot-plan.json (draft: category, asset_needs queries, brief) | agents/director.md (Part 1) |
| source ◇ | Bash — media-use resolve (skip if `asset_needs` is empty) | assets/ + assets/index.md | phases/source/guide.md |
| design | subagent — shot design around resolved assets | shot-plan.json (final: block(s) + layout + motion + positions) | agents/director.md (Part 2) |
| build | subagent — reuse-first composition | compositions/index.html | agents/builder.md |
| verify | Bash — lint, check, proof snapshots; repair on failure | snapshots/contact-sheet.jpg | Step 5 |
| approve | Ask preview or render; wait for the answer | explicit render approval | Step 6 |
| render | Bash — hyperframes render (MP4, or --format webm/mov for overlay) | renders/video.mp4 or transparent overlay | Step 6 |
◇ source runs only when the chosen category declares assets. Pure code/text categories (e.g. kinetic-type, most charts/stat) have asset_needs: [] and skip straight from plan to design.
Categories — split by the search decision
plan's first decision is: does this need a search? That fork splits the categories into two groups; then the specific category is picked — for search-driven, by the type of content the search returns. Each category is one categories/<id>/module.md (its planning + build rules); the shared motion vocabulary lives in references/motion-vocabulary.md (→ hyperframes-animation rules/blueprints + registry blocks).
Form categories — no search; the user supplies the content:
| Category | Intent | Leans on |
|---|---|---|
kinetic-type | punchy line / quote / title, motion-first text | caption-* blocks + animation rules |
stat | single hero number / count-up + ring | apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills} |
charts | bar / line / pie / race / % from data | data-chart block |
logo-reveal | logo sting / brand lockup (user logo) | logo-outro / rules/svg-path-draw |
lower-thirds | name / title bars, callouts, social overlays | caption-* + registry overlay blocks |
maps | geographic motion — highlight regions, connect places, zoom to a location (vector lane, or baked basemap lane) | us-map / world-map family + bake-basemap.mjs |
Search-driven categories — search first, then animate by content type (the RWA path):
| Returned content | Category | Animation |
|---|---|---|
| webpage / link | webpage | webpage / UI animation (scroll, reveal, cursor, callouts) |
| news article | news | headline reveal + source card + key-fact callouts |
| tweet | tweet | animated tweet card |
| image / entity | asset-fusion | the asset's geometry _becomes_ the chart (RWA diegetic fusion) |
Build order: one at a time, coverage-first (rough is fine). kinetic-type ported from the prototype; the rest follow.
Prerequisites
macOS Apple Silicon or Linux x64. System tools: brew install node ffmpeg. npx hyperframes doctor once. macOS GPU render: export PRODUCER_BROWSER_GPU_MODE=hardware.
Optional keys (local fallbacks if unset) — only needed by categories that source/generate assets via media-use:
| Key | Used for | Fallback |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | image generation (media-use resolve) | skip generate / search-only |
| (asset_scout / search providers) | webpage/news/tweet + asset-fusion real-asset search | category degrades to asset-free |