ClaudeSuperPower
SubmitLog in

motion-graphics

Skill

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, w

0Media

Install

git clone https://github.com/heygen-com/hyperframes.git ~/.claude/skills/motion-graphics

What is motion-graphics?

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.

What this can do

Capabilities declared in this component's own frontmatter — not inferred.

Inherit all session tools

Declares no tool restrictions — inherits every session tool

~145 tokens of context used while enabled, before you invoke anything

Documentation

README · ~8 min read

First, keep this skill fresh — run silently, don't ask: 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 /figma first — 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.jsonl provenance, and brand-token var() 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-core/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.

PhaseExecutionPrimary artifactDetailed flow
initBashhyperframes.jsonStep 0
plansubagent — decide search? + classify + asset strategyshot-plan.json (draft: category, asset_needs queries, brief)agents/director.md (Part 1)

Reviews

Log in to leave a review.

No reviews yet — be the first.

Explore related

Other things in this space — across every part of the ecosystem, not just skills.

Subagents

All subagents →

code-architect

Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences

32.8K stars

plugin-validator

Use this agent when the user asks to "validate my plugin", "check plugin structure", "verify plugin is correct", "validate plugin.json", "check plugin files", or mentions plugin validation. Also trigger proactively after user creates or modifies plugin components. Examples: <example> Context: User f

32.8K stars

scan-inventory

Restricted read-only repository cartographer dispatched by the Claude Security scan workflow to partition the tree into components and account for every top-level directory; not for direct invocation or vulnerability research.

32.8K stars