motion-graphicsby HeyGen

Motion Graphics Skill.

A Claude Code and Codex skill for motion and video: short design-led motion graphics: kinetic type, stat count-ups, logo stings, lower thirds.

Motion & Video
Video

Download OpenDesign View usage guide

heygen-com/hyperframes · skills/motion-graphics/SKILL.mdSKILL.md

--- name: motion-graphics description: 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 … --- ## Categories — split by the search decision ## Prerequisites ## Flow ## Resume table ## Design notes (maintainers — execution does not read this)

Front matter and section headings read from the upstream file on 2026-09-14 · 15,566 characters in full

01 What it does

What the motion-graphics Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A routing-first skill for one short, design-led, unnarrated motion graphic — kinetic typography, stat count-up, chart hit, logo sting, lower third, animated map, tweet or webpage — usually under 10s and no longer than about 30s, rendered to MP4 or a transparent overlay.

It is asset-first and reuse-first: the first fork is whether the piece needs a search, form categories run on user-supplied content with empty asset_needs, search-driven categories animate by the content type returned, and the Builder composes catalog blocks before hand-authoring gaps. The workflow is autonomous with at most one clarifying question, but rendering stays user-gated behind lint, check and proof snapshots.

What it produces

A draft then final shot-plan.json holding the envelope, chosen category or search intent, asset_needs and the block, layout, motion and positions.
compositions/index.html honoring the HF contract with a paused GSAP timeline on window.__timelines, clip classes and stable ids, and a deterministic tl.seek(0).
A contact or snapshot sheet under snapshots/ for inspecting the proof times.
renders/video.mp4, or a transparent overlay when rendering with the webm or mov format.

See the example prompt ↗

How It Works

01
Initialize the Project
Step 0 creates PROJECT_DIR = videos/<project-name>/ and runs hyperframes init with the blank example and this skill, skipping it entirely when hyperframes.json already exists.
02
Plan and Decide on Search
The first fork is whether the piece needs a search: no means a form category with asset_needs: [], yes means emitting search queries into asset_needs[].
03
Source Assets When Needed
Step 2 resolves assets through media-use into frozen project-local paths plus a ledger, and is skipped straight to design when asset_needs is empty.
04
Design Around What You Have
A second Director pass picks catalog blocks and hyperframes-animation rules and blueprints around the resolved assets, then finalizes the shot plan.
05
Compose reuse-first
The Builder adds catalog blocks with npx hyperframes add and customizes in place, hand-authoring only the gaps and the asset-fusion affordance to produce compositions/index.html.
06
Take Proof Snapshots
Choose proof times that show the opening state, the signature move and the final hold, then inspect the generated contact or snapshot sheet.

02 Find your fit

When to Use the motion-graphics Skill

Use the motion-graphics skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

A punchy line, quote or title where text motion is the whole idea.
A single hero number with a count-up and ring.
A logo sting or brand lockup built from the user's own logo.
Geographic motion such as highlighting regions, connecting places or zooming to a location.
Animated tweet, news-article or headline treatments when a search supplies the source content.

Know the Boundaries

Longer, narrated or multi-scene pieces route elsewhere.
Anything with narration or a live-action subject, or that runs long past the short-form window.
Search-driven categories lose their found assets when a provider is unavailable, falling back to asset-free.
Driving Figma through raw MCP tools skips sanitization, provenance and brand-token binding, so that route is excluded.

What to Provide

The content itselfkinetic-type, stat, charts, logo-reveal and lower-thirds take user-supplied content, so the line, number, data or logo comes from you rather than a search.
A figma.com URL, if that is where the asset livesRun /figma first for asset export, brand tokens and Motion to GSAP translation, then build from its output.
Optional keys for asset sourcingGEMINI_API_KEY or GOOGLE_API_KEY for image generation, plus asset_scout and search providers for webpage, news, tweet and asset-fusion real-asset search.

03 Inside the skill

Rules the motion-graphics Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Route Through /hyperframes
The front door is /hyperframes; this skill only makes a short, design-led, unnarrated motion graphic, roughly under 10s with no voice-over and no live-action subject.
One Question, Then Build
The workflow is autonomous by design: at most one clarifying question from agents/director.md, then it builds through verification with no intermediate review.
Confirm Before Refreshing the Skill
Ask the user before running the update command; it is a fast no-op when current, otherwise it refreshes this skill plus the core domain skills it depends on.
Rendering Is user-gated
After checks and proof snapshots pass, ask the canonical preview first or render question, and render only after an explicit render answer.
Never Init at the Workspace Root
Never run hyperframes init in the workspace root, and never nest another hyperframes/ directory inside PROJECT_DIR.
Subshell Every Command
Every Bash command, whether issued by the master flow or a subagent, is a (cd "$PROJECT_DIR" && ...) subshell; bare cd is not allowed.
Derive the Project Name
Use the directory the user gave, otherwise a short kebab-case name from the intent shaped like <subject>-motion; not the workspace basename or a timestamp.
Do Not Mask a Defect with Timing
When a gate fails, never change a fixed duration merely to hide the defect; repair the composition in place instead.

04 Put it to work

Install motion-graphics in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add motion-graphics to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill motion-graphics

Generic skills CLI form for skills/motion-graphics/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Make a short motion graphic, about 8 seconds, from [our launch tagline] — kinetic type, motion-first, no narration, using the kinetic-type category and the caption blocks. Then close with a logo sting built from [our logo.svg], and render it to MP4.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Run lint and check against the project before anything else; both run as subshells from PROJECT_DIR.
Inspect the generated contact or snapshot sheet before moving on.
On a lint, check or snapshot failure, dispatch the repair subagent for one in-place fix pass and rerun the failed gate.
Confirm the render output exists, is non-empty and has the intended duration, and that the handoff names the artifact, duration, frame id and proof times.

In OpenDesign import motion-graphics from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
Skill file: skills/motion-graphics/SKILL.md Content checksum recorded at verification; commit 558c11b
License: Apache-2.0 From LICENSE.
Repository stars: 49,761 GitHub snapshot taken 2026-09-14 for the whole heygen-com/hyperframes repository, which contains 9 skills in this catalog. Not a rating or usage count for motion-graphics.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

motion-graphics — dispatch entryStates the front door, autonomous flow, project dir and the phase table from init to render.
Categories — split by the search decisionLists form categories needing no search and search-driven categories chosen by returned content.
PrerequisitesPlatform, system tools, macOS GPU env var, optional API keys and their local fallbacks.
FlowSteps 0 through 6: initialize, plan, source, design, build, verify, approve, render.
Resume tableWhich step to continue from for each partial project state.
Design notes (maintainers — execution does not read this)Asset-first rationale, reuse-first mapping, category module contract, directory shape and router registration.

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 15,566 characters. Read the full file on GitHub.

Motion Graphics

Run motion-graphics on a Real Motion and Video Task.

Download OpenDesign, import motion-graphics from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill motion-graphics

What the motion-graphics Skill Does in Claude Code and Codex

In the Skill's Own Terms

How It Works

When to Use the motion-graphics Skill

Good Fit

Know the Boundaries

What to Provide

Rules the motion-graphics Skill Gives Claude Code and Codex

Route Through /hyperframes

One Question, Then Build

Confirm Before Refreshing the Skill

Rendering Is user-gated

Never Init at the Workspace Root

Subshell Every Command

Derive the Project Name

Do Not Mask a Defect with Timing