Motion Graphics Skill: Short Design-Led Video Workflow

What is the motion-graphics skill?

It is one of the HyperFrames creation workflows, the skills that turn a request into a finished render. This one is for a short, design-led piece where motion itself is the message, with no narration and usually under about 10 seconds, up to roughly 30.

Anything longer, narrated or made of several scenes routes to the general-video workflow instead. The skill names itself autonomous: it asks at most one clarifying question, then builds through its own checks before asking whether to render.

The six form categories

• Kinetic type: a punchy line, quote or title where the text itself carries the motion.
• Stat: one hero number with a count-up and a ring.
• Charts: a bar, line, pie or race view built from supplied data.
• Logo reveal: a sting or brand lockup built around the user's own logo.
• Lower-thirds: name and title bars, callouts or social overlays.
• Maps: geographic motion that highlights regions, connects places or zooms to a location.

Search-driven categories

Four more categories search for content first and animate it by type: a webpage becomes scroll and cursor motion, a news article becomes a headline reveal with source and fact callouts, a tweet becomes an animated card, and a sourced image can fuse its own geometry into a chart.

How a graphic gets made

1. Plan: a subagent decides whether a search is needed and drafts a shot plan with the chosen category.
2. Source: if the plan needs assets, resolve them into frozen project-local copies.
3. Design: a subagent finalizes the shot around the resolved assets, layout and motion beats.
4. Build: a subagent composes the scene, reusing catalog blocks and the hyperframes-animation rules first.
5. Verify: lint, check and proof snapshots run, with a repair pass on any failure.
6. Render: after an explicit go-ahead, the composition renders to MP4 or a transparent overlay.

Who the motion-graphics skill is for

Best for

• A single short hit, such as a stat reveal, a logo sting or a lower-third, that needs motion more than a narrative.
• Turning a webpage, a news article, a tweet or a real image into an animated card or chart without hand-authoring every tween.
• Pipelines that need the same short format produced over and over from different inputs.

Not for

• Turning an existing multi-screen app tour into a longer narrated walkthrough video, where Stitch Remotion Skill pulls screens from a Stitch project and renders them with Remotion.
• Building a full interactive dashboard of fifty chart types for an application, where Data Visualization Mastery Skill covers chart selection and dashboard composition.
• Rendering one animated SVG icon from a JSON config with no video output, where nakkas MCP Server returns a PNG preview for each render, locally.
• Wiring ready-made motion components into a live website's interface rather than rendering a video clip, where Animated Component Libraries Skill picks Magic UI and React Bits pieces for that UI.

How to install Motion Graphics Skill: Short Design-Led Video Workflow

npx skills add heygen-com/hyperframes --skill motion-graphics

1. Install the skill

   Run the command above from the project root to pull motion-graphics from the current main branch of the repository.

2. Claude Code plugin route

   In Claude, run claude plugin marketplace add heygen-com/hyperframes, then claude plugin install hyperframes@hyperframes to add the full HyperFrames catalog, including this workflow.

3. Install prerequisites

   Install Node.js 22 or newer and FFmpeg, then run npx hyperframes doctor once to confirm the toolchain.

4. Ask for a graphic

   Describe the short piece directly, naming a category if you already have one in mind, such as a stat count-up or a logo sting.

Check that it loaded

Ask for a 10-second stat count-up or kinetic-type piece and confirm the agent writes a shot plan, runs lint and check, shows a proof snapshot, then asks whether to render before producing an MP4.

Read the official instructions on GitHub

Key features

• Six form categoriesKinetic type, stat, charts, logo reveal, lower-thirds and maps cover the pieces where the user supplies the content directly.
• Four search-driven categoriesWebpage, news, tweet and asset-fusion categories search for real content first, then animate it by the type of result returned.
• Asset-first planningThe plan step decides the search strategy and sources real material before shot design starts, rather than designing around a placeholder.
• Reuse-first build stepThe build subagent composes a scene by reusing catalog blocks and hyperframes-animation rules, hand-authoring only the gaps.
• Shared motion vocabularyCategories draw on one shared motion-vocabulary reference tied to hyperframes-animation rules and blueprints, so the look stays consistent across categories.
• Lint, check and snapshot gateVerification runs lint, check and proof snapshots at chosen times before any render, with a repair subagent dispatched on failure.
• Explicit render approvalA Studio preview opens and the skill asks a single render-or-revise question before committing to an MP4 render.
• Transparent overlay outputRender output can target a standard MP4 or a transparent overlay in WebM or MOV format.
• Graceful asset degradationIf an image, search or generation provider is unavailable, the category falls back to an asset-free version and notes it in the project log.

Frequently asked questions