motion-graphics

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

motion-graphics — dispatch entry

motion-graphics — 调度条目

Confirm the route before Step 0. This skill makes a short, design-led, unnarrated motion graphic (motion is the message; ~under 10s, no voice-over). A longer, multi-scene, or narrated treatment →
/general-video
; a narrated video of a website →
/website-to-video
; a topic explainer →
/faceless-explainer
; a product promo →
/product-launch-video
; captions on existing footage →
/embedded-captions
. Out of scope: live / at-render-time data, or footage it can't capture. Unsure motion-first-vs-narrated? Read
/hyperframes-read-first
first.

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`
render	Bash — `hyperframes render` (MP4, or `--format webm/mov` for overlay)	`renders/video.mp4`	Step 5
verify	Bash — `lint` / `inspect` -> repair subagent on failure	(fixes in place)	`agents/finalize.md`

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

在第0步之前确认路线。 此Skill用于制作以设计为主、无旁白的短动态图形（动态为核心信息；时长约10秒以内，无旁白）。如果是较长的多场景或带旁白的制作方案 →
/general-video
；带旁白的网站视频 →
/website-to-video
；主题讲解视频 →
/faceless-explainer
；产品宣传视频 →
/product-launch-video
；为现有素材添加字幕 →
/embedded-captions
。超出范围：实时渲染数据，或无法捕获的素材。不确定是动态优先还是带旁白？先阅读/hyperframes-read-first。

以设计为主的短动态图形。资产优先：在设计镜头前先确定资产策略并获取真实素材，然后围绕已有素材设计镜头，再通过复用目录功能进行合成。所有产物都存放在

PROJECT_DIR = videos/<project-name>/

（在第0步创建）；以下所有路径均为此目录的相对路径。

阶段	执行内容	主要产物	详细流程
init	Bash	`hyperframes.json`	第0步
plan	子Agent — 是否需要搜索？ + 分类 + 资产策略	`shot-plan.json` （草稿：分类、 `asset_needs` 查询、简要说明）	`agents/director.md` （第一部分）
source ◇	Bash — 媒体使用解析（若 `asset_needs` 为空则跳过）	`assets/` + `assets/index.md`	`phases/source/guide.md`
design	子Agent — 基于已解析资产设计镜头	`shot-plan.json` （最终版：区块+布局+动态+位置）	`agents/director.md` （第二部分）
build	子Agent — 优先复用的合成	`compositions/index.html`	`agents/builder.md`
render	Bash — `hyperframes render` （MP4格式，或使用 `--format webm/mov` 导出透明叠加层）	`renders/video.mp4`	第5步
verify	Bash — `lint` / `inspect` → 失败时调用修复子Agent	（就地修复）	`agents/finalize.md`

◇ source

阶段仅在所选分类需要资产时运行。纯代码/文本分类（如

kinetic-type

、多数

charts

stat

）的

asset_needs: []

，将直接从plan阶段跳至design阶段。

Categories — split by the search decision

分类 — 按搜索决策划分

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

Form categories — no search; the user supplies the content:

Category	Intent	Leans on
`kinetic-type`	punchy line / quote / title, motion-first text	`caption-*` blocks + animation rules
`stat`	single hero number / count-up + ring	`apple-money-count` / `rules/{counting-dynamic-scale, stat-bars-and-fills}`
`charts`	bar / line / pie / race / % from data	`data-chart` block
`logo-reveal`	logo sting / brand lockup (user logo)	`logo-outro` / `rules/svg-path-draw`
`lower-thirds`	name / title bars, callouts, social overlays	`caption-*` + registry overlay blocks

Search-driven categories — search first, then animate by content type (the RWA path):

Returned content	Category	Animation
webpage / link	`webpage`	webpage / UI animation (scroll, reveal, cursor, callouts)
news article	`news`	headline reveal + source card + key-fact callouts
tweet	`tweet`	animated tweet card
image / entity	`asset-fusion`	the asset's geometry becomes the chart (RWA diegetic fusion)

Build order: one at a time, coverage-first (rough is fine).

kinetic-type

ported from the prototype; the rest follow.

plan

阶段的第一个决策是：是否需要搜索？ 该决策将分类分为两组；随后选择具体分类——对于搜索驱动型分类，根据搜索返回的内容类型选择。每个分类对应一个

categories/<id>/module.md

（其规划和构建规则）；通用动态词汇存于

references/motion-vocabulary.md

（对应

hyperframes-animation

规则/蓝图 + 注册区块）。

表单类分类 — 无需搜索；由用户提供内容：

分类名称	用途	依赖组件
`kinetic-type`	有力的语句/引语/标题，以动态为核心的文本	`caption-*` 区块 + 动画规则
`stat`	单个核心数字/计数动画 + 环形图	`apple-money-count` / `rules/{counting-dynamic-scale, stat-bars-and-fills}`
`charts`	基于数据的柱状图/折线图/饼图/竞速图/百分比图	`data-chart` 区块
`logo-reveal`	Logo短动画/品牌标识动画（用户提供Logo）	`logo-outro` / `rules/svg-path-draw`
`lower-thirds`	姓名/标题栏、标注、社交叠加层	`caption-*` + 注册叠加层区块

搜索驱动类分类 — 先搜索，再按内容类型制作动画（RWA路径）：

返回内容类型	分类名称	动画效果
网页/链接	`webpage`	网页/UI动画（滚动、展示、光标、标注）
新闻文章	`news`	标题展示 + 来源卡片 + 关键事实标注
推文	`tweet`	动画推文卡片
图片/实体	`asset-fusion`	资产的几何形状转化为图表（RWA叙事融合）

构建顺序：逐个构建，优先覆盖功能（粗糙版本即可）。

kinetic-type

从原型移植；其余分类遵循此流程。

Prerequisites

前置条件

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

Optional keys (local fallbacks if unset) — only needed by categories that source/generate assets via media-use:

Key	Used for	Fallback
`GEMINI_API_KEY` / `GOOGLE_API_KEY`	image generation (media-use resolve)	skip generate / search-only
(asset_scout / search providers)	`webpage` / `news` / `tweet` + `asset-fusion` real-asset search	category degrades to asset-free

macOS Apple Silicon 或 Linux x64。系统工具：

brew install node ffmpeg

。运行一次

npx hyperframes doctor

。macOS GPU渲染：

export PRODUCER_BROWSER_GPU_MODE=hardware

。

可选密钥（未设置时使用本地 fallback）——仅适用于通过媒体使用获取/生成资产的分类：

密钥	用途	Fallback
`GEMINI_API_KEY` / `GOOGLE_API_KEY`	图片生成（媒体使用解析）	跳过生成 / 仅搜索
(asset_scout / 搜索提供商)	`webpage` / `news` / `tweet` + `asset-fusion` 真实资产搜索	分类降级为无资产模式

Flow

流程

Step 0 — Initialize

第0步 — 初始化

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.

Only when

$PROJECT_DIR/hyperframes.json

is absent:

bash

PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --skip-skills --example=blank

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

当前工作目录为Agent工作区根目录；所有产物写入

PROJECT_DIR = videos/<project-name>/

下。

<project-name>

：使用用户指定的目录名，否则根据需求生成简短的短横线命名（如

<subject>-motion

）。不得使用工作区基名或时间戳。

仅当

$PROJECT_DIR/hyperframes.json

不存在时执行：

bash

PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --skip-skills --example=blank

约束： 切勿在工作区根目录执行

hyperframes init

；切勿在

PROJECT_DIR

内嵌套另一个

hyperframes/

目录；所有Bash命令（主Agent和子Agent）均为

(cd "$PROJECT_DIR" && ...)

子shell — 切勿使用裸

cd

命令。

Step 1 — Plan (subagent: Director Part 1)

第1步 — 规划（子Agent：Director第一部分）

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:

Decide: does this need a search? (the first fork)
- No → pick a form category (kinetic-type / stat / charts / logo-reveal / lower-thirds); content is user-supplied;
```
asset_needs: []
```
  .
- 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.
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
```
.

Validation:

[ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing

调度一个子Agent。提示词 = 完整的

agents/director.md

## Dispatch context

（

SKILL_DIR

PROJECT_DIR

/ 用户请求 /

Schema: <SKILL_DIR>/references/shot-plan-ir.md

）。必须完成：

决策：是否需要搜索？（第一个分支）
- 不需要 → 选择一个表单类分类（kinetic-type / stat / charts / logo-reveal / lower-thirds）；内容由用户提供；
```
asset_needs: []
```
  。
- 需要 → 在
```
asset_needs[]
```
  中生成搜索规划（新闻/网页/推文/图片；双向查询）。具体的搜索驱动类分类（webpage / news / tweet / asset-fusion）由第2步返回的内容类型确认，并在第3步最终确定。
写入草稿版
```
shot-plan.json
```
（信封结构 + 所选表单类分类或搜索意图 +
```
asset_needs
```
+ 一段镜头简要说明）。Schema：
```
references/shot-plan-ir.md
```
。

验证：

[ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing

。

Step 2 — Source ◇ (Bash: media-use, conditional)

第2步 — 资产获取 ◇（Bash：媒体使用，条件执行）

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.

bash

undefined

如果

shot-plan.json.asset_needs

非空，则解析资产（搜索/生成/获取 → 冻结的项目本地路径 + 分类账）。详见

phases/source/guide.md

（封装

media-use resolve

；搜索驱动类分类使用新闻/网页/推文/图片搜索）。如果

asset_needs

为空，直接跳至第3步。

bash

undefined

illustrative — see phases/source/guide.md

示例 — 详见 phases/source/guide.md

(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)


Degrade gracefully: if a search/provider is unavailable, the category falls back to asset-free (note it in `context.log`).

(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)


优雅降级：若搜索/提供商不可用，分类将回退到无资产模式（在`context.log`中记录）。

Step 3 — Design (subagent: Director Part 2)

第3步 — 设计（子Agent：Director第二部分）

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

调度一个子Agent（提示词 =

agents/director.md

第二部分 + 调度上下文，包括第2步执行后的

assets/index.md

catalog-map.md

）。将围绕可用资产设计镜头：选择目录区块 +

hyperframes-animation

规则/蓝图、布局、动态、节奏，以及（针对

asset-fusion

）

element_positions

+ 取色器调色板。最终确定

shot-plan.json

（

content.block

content.customize

+ 分类专属内容）。

Step 4 — Build (subagent: Builder, reuse-first)

第4步 — 构建（子Agent：Builder，优先复用）

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

调度一个子Agent。提示词 = 完整的

agents/builder.md

+ 调度上下文（

shot-plan.json

、

catalog-map.md

、分类的

module.md

、

references/motion-vocabulary.md

、

references/builder-contract.md

）。优先复用：

npx hyperframes add <block>

+ 就地自定义；仅手动编写空白部分 + asset-fusion功能。输出符合HF协议的

compositions/index.html

（

window.__timelines

上的暂停GSAP时间轴、

class="clip"

+ 稳定ID、

tl.seek(0)

、确定性）。

Step 5 — Render (Bash)

第5步 — 渲染（Bash）

bash

(cd "$PROJECT_DIR" && npx hyperframes render . -q draft -o ./renders/video.mp4)

bash

(cd "$PROJECT_DIR" && npx hyperframes render . -q draft -o ./renders/video.mp4)

transparent overlay variant: --format webm (or mov)

透明叠加层变体：--format webm （或 mov）

undefined

undefined

Step 6 — Verify (Bash → repair subagent on failure)

第6步 — 验证（Bash → 失败时调用修复子Agent）

bash

(cd "$PROJECT_DIR" && npx hyperframes lint . && npx hyperframes inspect .)

exit 0 → done. On lint/inspect errors, dispatch the repair subagent (

agents/finalize.md

: snapshot QA + one in-place fix pass + re-render). Never change a fixed duration in repair.

bash

(cd "$PROJECT_DIR" && npx hyperframes lint . && npx hyperframes inspect .)

返回0 → 完成。若lint/inspect出错，调度修复子Agent（

agents/finalize.md

：快照QA + 一次就地修复 + 重新渲染）。修复时切勿更改固定时长。

Report + optional preview

报告 + 可选预览

Report the final output (

renders/video.mp4

, or the

.webm

.mov

overlay variant) + duration. Don't open a preview during the run. Offer one only on request, started after render so it serves the final file:

bash

(cd "$PROJECT_DIR" && npx hyperframes preview)   # Studio UI; or `npx hyperframes play` for a shareable link

Flags live in the

hyperframes-cli

skill (

references/preview-render.md

报告最终输出（

renders/video.mp4

，或

.webm

.mov

叠加层变体） + 时长。运行期间请勿打开预览。仅在用户请求时提供预览，且需在渲染完成后启动，以加载最终文件：

bash

(cd "$PROJECT_DIR" && npx hyperframes preview)   # Studio UI；或使用`npx hyperframes play`获取可分享链接

标志位于

hyperframes-cli

Skill中（

references/preview-render.md

）。

Resume table

恢复表

State	Continue from
no `shot-plan.json`	Step 1 (plan)
`shot-plan.json` has `asset_needs` , no `assets/`	Step 2 (source)
`shot-plan.json` final, no `compositions/index.html`	Step 3/4 (design+build)
`compositions/index.html` exists, no `renders/video.mp4`	Step 5 (render) + Step 6
`renders/video.mp4` exists	Report + stop

状态	从哪一步继续
无 `shot-plan.json`	第1步（规划）
`shot-plan.json` 包含 `asset_needs` ，但无 `assets/`	第2步（资产获取）
`shot-plan.json` 已最终确定，但无 `compositions/index.html`	第3/4步（设计+构建）
`compositions/index.html` 存在，但无 `renders/video.mp4`	第5步（渲染） + 第6步
`renders/video.mp4` 存在	报告 + 停止

Design notes (maintainers — execution does not read this)

设计说明（维护人员 — 执行流程不读取此部分）

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

Directory shape:

videos/<project-name>/
  hyperframes.json  context.log
  shot-plan.json            # the IR (Director output)
  assets/  assets/index.md  # media-use output (if sourced)
  compositions/index.html   # Builder output
  renders/video.mp4

Registration: in
```
hyperframes-read-first
```
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.

资产优先原理：资产获取前置并指导镜头设计（RWA流程：分析 → 搜索 → 审核 → 合成）。搜索驱动类分类（
```
webpage
```
/
```
news
```
/
```
tweet
```
）和
```
asset-fusion
```
均依赖媒体使用搜索（新闻/网页/推文/图片），这是媒体使用的已记录RWA传承。
优先复用：生态系统内类似LLM生成模板的方式是“组合目录区块 +
```
hyperframes-animation
```
规则”。HF的暂停GSAP时间轴 ≙ Remotion的
```
useCurrentFrame
```
。
分类模块协议：一个
```
categories/<id>/module.md
```
（规划+构建），共享
```
references/motion-vocabulary.md
```
（+ 可选评估）。添加分类 = 添加文件夹 + 在
```
agents/director.md
```
中注册其分类器行 + 在
```
catalog-map.md
```
中添加其行；阶段流水线无需修改。

目录结构：

videos/<project-name>/
  hyperframes.json  context.log
  shot-plan.json            # 中间表示（Director输出）
  assets/  assets/index.md  # 媒体使用输出（若执行了资产获取）
  compositions/index.html   # Builder输出
  renders/video.mp4

注册：在
```
hyperframes-read-first
```
路由中 — 添加“以设计为主的短动态图形”意图 + 工作流描述；从
```
/general-video
```
中分离motion-graphics触发条件；添加反向禁用边缘。详见
```
motion-graphics-genre.md
```
第5-7节。