motion-graphics

Name: motion-graphics
Author: heygen-com

byheygen-com· 46 skills

Installs

134k

Stars

38k

Forks

3.6k

How to install motion-graphics?

heygen-com/hyperframes/motion-graphics

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

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/heygen-com/hyperframes" --skill "heygen-com/hyperframes/motion-graphics"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/heygen-com/hyperframes" that are relevant to the current task. Run `npx skills add "https://github.com/heygen-com/hyperframes"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	> 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.
2
3	> 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.
4
5	# motion-graphics — dispatch entry
6
7	> 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.
8
9	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.
10
11	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.
12
13	\| Phase \| Execution \| Primary artifact \| Detailed flow \|
14	\| -------- \| --------------------------------------------------------------------- \| ---------------------------------------------------------------- \| ----------------------------- \|
15	\| init \| Bash \| `hyperframes.json` \| Step 0 \|
16	\| plan \| subagent — decide search? + classify + asset strategy \| `shot-plan.json` (draft: category, `asset_needs` queries, brief) \| `agents/director.md` (Part 1) \|
17	\| source ◇ \| Bash — media-use resolve (skip if `asset_needs` is empty) \| `assets/` + `assets/index.md` \| `phases/source/guide.md` \|
18	\| design \| subagent — shot design around resolved assets \| `shot-plan.json` (final: block(s) + layout + motion + positions) \| `agents/director.md` (Part 2) \|
19	\| build \| subagent — reuse-first composition \| `compositions/index.html` \| `agents/builder.md` \|
20	\| verify \| Bash — `lint`, `check`, proof snapshots; repair on failure \| `snapshots/contact-sheet.jpg` \| Step 5 \|
21	\| approve \| Ask preview or render; wait for the answer \| explicit render approval \| Step 6 \|
22	\| render \| Bash — `hyperframes render` (MP4, or `--format webm/mov` for overlay) \| `renders/video.mp4` or transparent overlay \| Step 6 \|
23
24	`◇ 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.
25
26	## Categories — split by the search decision
27
28	`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).
29
30	Form categories — no search; the user supplies the content:
31
32	\| Category \| Intent \| Leans on \|
33	\| -------------- \| -------------------------------------------------------------------------------------------------------------- \| --------------------------------------------------------------------------- \|
34	\| `kinetic-type` \| punchy line / quote / title, motion-first text \| `caption-*` blocks + animation rules \|
35	\| `stat` \| single hero number / count-up + ring \| `apple-money-count` / `rules/{counting-dynamic-scale, stat-bars-and-fills}` \|
36	\| `charts` \| bar / line / pie / race / % from data \| `data-chart` block \|
37	\| `logo-reveal` \| logo sting / brand lockup (user logo) \| `logo-outro` / `rules/svg-path-draw` \|
38	\| `lower-thirds` \| name / title bars, callouts, social overlays \| `caption-*` + registry overlay blocks \|
39	\| `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` \|
40
41	Search-driven categories — search first, then animate by content type (the RWA path):
42
43	\| Returned content \| Category \| Animation \|
44	\| ---------------- \| -------------- \| -------------------------------------------------------------- \|
45	\| webpage / link \| `webpage` \| webpage / UI animation (scroll, reveal, cursor, callouts) \|
46	\| news article \| `news` \| headline reveal + source card + key-fact callouts \|
47	\| tweet \| `tweet` \| animated tweet card \|
48	\| image / entity \| `asset-fusion` \| the asset's geometry _becomes_ the chart (RWA diegetic fusion) \|
49
50	Build order: one at a time, coverage-first (rough is fine). `kinetic-type` ported from the prototype; the rest follow.
51
52	## Prerequisites
53
54	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`.
55
56	Optional keys (local fallbacks if unset) — only needed by categories that source/generate assets via media-use:
57
58	\| Key \| Used for \| Fallback \|
59	\| ----------------------------------- \| ----------------------------------------------------------- \| ------------------------------- \|
60	\| `GEMINI_API_KEY` / `GOOGLE_API_KEY` \| image generation (media-use resolve) \| skip generate / search-only \|
61	\| (asset_scout / search providers) \| `webpage`/`news`/`tweet` + `asset-fusion` real-asset search \| category degrades to asset-free \|
62
63	## Flow
64
65	### Step 0 — Initialize
66
67	cwd is the agent workspace root; write all artifacts under `PROJECT_DIR = videos/<project-name>/`. `<project-name>`: use the dir the user gave, else a short kebab-case name from the intent (`<subject>-motion`). Not the workspace basename or a timestamp.
68
69	Only when `$PROJECT_DIR/hyperframes.json` is absent:
70
71	```bash
72	PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
73	mkdir -p "$(dirname "$PROJECT_DIR")"
74	npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics
75	```
76
77	`init` checks the installed skills against the latest on GitHub and updates the global set if any are out of date.
78
79	Constraints: never `hyperframes init` in the workspace root; never nest another `hyperframes/` inside `PROJECT_DIR`; every Bash command (master + subagents) is a `(cd "$PROJECT_DIR" && ...)` subshell — never bare `cd`.
80
81	### Step 1 — Plan (subagent: Director Part 1)
82
83	Dispatch one subagent. prompt = full `agents/director.md` + `## Dispatch context` (`SKILL_DIR` / `PROJECT_DIR` / the user's request / `Schema: <SKILL_DIR>/references/shot-plan-ir.md`). It must:
84
85	1. Decide: does this need a search? (the first fork)
86	- No → pick a form category (kinetic-type / stat / charts / logo-reveal / lower-thirds); content is user-supplied; `asset_needs: []`.
87	- Yes → emit a search plan into `asset_needs[]` (news / web / tweet / image; two-pole queries). The specific search-driven category (webpage / news / tweet / asset-fusion) is confirmed by the content type returned in Step 2, and finalized in Step 3.
88	2. Write a draft `shot-plan.json` (envelope + chosen form category _or_ search intent + `asset_needs` + a one-paragraph shot brief). Schema: `references/shot-plan-ir.md`.
89
90	Validation: `[ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok \|\| echo missing`.
91
92	### Step 2 — Source ◇ (Bash: media-use, conditional)
93
94	If `shot-plan.json.asset_needs` is non-empty, resolve assets (search / generate / fetch → frozen project-local paths + ledger). See `phases/source/guide.md` (wraps `media-use resolve`; the search-driven categories use the news/web/tweet/image search). If `asset_needs` is empty, skip to Step 3.
95
96	```bash
97	# illustrative — see phases/source/guide.md
98	(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)
99	```
100
101	Degrade gracefully: if a search/provider is unavailable, the category falls back to asset-free (note it in `context.log`).
102
103	### Step 3 — Design (subagent: Director Part 2)
104
105	Dispatch a subagent (prompt = `agents/director.md` Part 2 + dispatch context including the resolved `assets/index.md` if Step 2 ran + `catalog-map.md`). It designs the shot around the available assets: pick the catalog block(s) + the `hyperframes-animation` rules/blueprints, the layout, the motion, beats, and (for `asset-fusion`) the `element_positions` + eyedropper palette. Finalizes `shot-plan.json` (`content.block` + `content.customize` + per-category content).
106
107	### Step 4 — Build (subagent: Builder, reuse-first)
108
109	Dispatch a subagent. prompt = full `agents/builder.md` + dispatch context (`shot-plan.json`, `catalog-map.md`, the category's `module.md`, `references/motion-vocabulary.md`, `references/builder-contract.md`). Reuse-first: `npx hyperframes add <block>` + customize in place; hand-author only gaps + the asset-fusion affordance. Output `compositions/index.html` honoring the HF contract (paused GSAP timeline on `window.__timelines`, `class="clip"` + stable ids, `tl.seek(0)`, deterministic).
110
111	### Step 5 — Verify (Bash → repair subagent on failure)
112
113	```bash
114	(cd "$PROJECT_DIR" && npx hyperframes lint .)
115	(cd "$PROJECT_DIR" && npx hyperframes check .)
116	(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)
117	```
118
119	Choose proof times that show the opening state, signature move, and final hold. Inspect the generated contact or snapshot sheet before continuing. On `lint`, `check`, or snapshot failure, dispatch the repair subagent (`agents/finalize.md`) for one in-place fix pass, then rerun the failed gate. Never change a fixed duration merely to hide a defect.
120
121	### Step 6 — Approve and render (Bash)
122
123	Ask one question: “preview first, or render?” If the user chooses preview, open Studio and return to the same approval gate after revisions:
124
125	```bash
126	(cd "$PROJECT_DIR" && npx hyperframes preview)
127	```
128
129	Render only after an explicit render answer:
130
131	```bash
132	(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
133	# transparent overlay variant: --format webm (or mov)
134	```
135
136	Verify the output exists, is non-empty, and has the intended duration. The final handoff names the artifact, actual duration, composition or frame id, proof times, and the inspected contact or snapshot sheet. Flags live in `/hyperframes-cli` → `references/preview-render.md`.
137
138	## Resume table
139
140	\| State \| Continue from \|
141	\| -------------------------------------------------------- \| -------------------------- \|
142	\| no `shot-plan.json` \| Step 1 (plan) \|
143	\| `shot-plan.json` has `asset_needs`, no `assets/` \| Step 2 (source) \|
144	\| `shot-plan.json` final, no `compositions/index.html` \| Step 3/4 (design+build) \|
145	\| `compositions/index.html` exists, proof snapshots absent \| Step 5 (verify) \|
146	\| checks and proof snapshots pass, no approved render \| Step 6 (approval) \|
147	\| approved render exists \| verify output, then report \|
148
149	## Design notes (maintainers — execution does not read this)
150
151	- Asset-first rationale: sourcing is front-loaded and informs shot design (the RWA flow: analyze → search → review → compose). the search-driven categories (`webpage`/`news`/`tweet`) and `asset-fusion` both lean on media-use search (news/web/tweet/image), which is media-use's documented RWA lineage.
152	- Reuse-first: the in-ecosystem analog of LLM-generated templates is "compose catalog blocks + `hyperframes-animation` rules". HF's paused GSAP timeline ≙ Remotion's `useCurrentFrame`.
153	- Category module contract: one `categories/<id>/module.md` (planning + build), sharing `references/motion-vocabulary.md` (+ optional eval). Adding a category = drop the folder + register its classifier line in `agents/director.md` + its row in `catalog-map.md`; the phase pipeline is untouched.
154	- Directory shape:
155	```
156	videos/<project-name>/
157	hyperframes.json context.log
158	shot-plan.json # the IR (Director output)
159	assets/ assets/index.md # media-use output (if sourced)
160	compositions/index.html # Builder output
161	renders/video.mp4
162	```
163	- Registration: in `hyperframes` router — add the "design-led short motion graphic" intent + Workflow description; carve the motion-graphics triggers out of `/general-video`; add reverse Do-NOT-use edges. See `motion-graphics-genre.md` §5-7.

6 picks

Type

Run `npx skills use "https://github.com/heygen-com/hyperframes" --skill "heygen-com/hyperframes/motion-graphics"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/heygen-com/hyperframes" that are relevant to the current task. Run `npx skills add "https://github.com/heygen-com/hyperframes"` and select the relevant skills, then follow their instructions.

motion-graphics

How to install motion-graphics?

Related

motion-graphics

How to install motion-graphics?

Related