motion-graphics

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 /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.

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.