尧图网站建设 
HyperFrames motion-graphics 技能实战用 HTML 构建 10 秒级设计主导动态图形【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文围绕 HyperFrames 仓库中的motion-graphics技能skills/motion-graphics/SKILL.md展开它是项目为 Agent 准备的一套「短时长、设计主导、无旁白」动态图形kinetic type、数字跳动、图表命中、Logo sting、地图动画、推文/新闻高亮等的端到端工作流。读完本文你将掌握该技能的完整 7 阶段流水线init → plan → source → design → build → verify → render、shot-plan.json中间表示IR的结构、Agent 如何「复用优先」地组合 catalog 块与动画规则以及渲染确定性determinism与 GSAP 时间线契约背后的底层原理。一、技能定位什么时候走 motion-graphicsmotion-graphics是 HyperFrames 意图路由层skills/hyperframes/references/routes/motion-graphics.md下的一个具体路由它处理短、设计主导、无旁白、以动效本身传达信息的单镜头动态图形通常 10 秒以内最长约 30 秒最终产出 MP4 或带透明通道的叠加层WebM/MOV。典型触发词包括an 8s logo sting、animate this stat、kinetic-type intro、animate this title、transparent lower-third overlay。如果内容更长、带旁白、多场景应路由到general-video不确定时统一走/hyperframes入口意图层拥有所有路由决策权。该技能是默认全自动的设计全程最多允许一个澄清问题由 Director 步骤提出随后一路构建到验证环节不做中间评审。由于单镜头很短故事板与伴随会话companion session没有额外价值。但渲染仍然由用户把关校验与证据截图通过后会询问标准的「先预览还是直接渲染」问题见 skills/hyperframes-core/references/brief-contract.md。分类系统先回答「是否需要搜索」plan阶段的第一决策是是否需要搜索这一分叉把 10 个类别分成两组随后再按返回的内容类型确定具体类别Form 类别无需搜索内容由用户提供类别意图依赖kinetic-type有力的台词/引语/标题以文字为核心caption-*系列块 动画规则stat单个英雄数字 / 计数跳动 圆环apple-money-count/rules/{counting-dynamic-scale, stat-bars-and-fills}charts基于数据的 bar / line / pie / race / %data-chart块logo-revealLogo sting / 品牌组合用户提供 logologo-outro/rules/svg-path-drawlower-thirds姓名/标题栏、callout、社交叠加层caption-* registry 叠加块maps地理动效——高亮区域、连接地点、缩放到某地vector 车道或烘焙底图车道us-map/world-map家族 bake-basemap.mjsSearch-driven 类别先搜索再按内容类型动画即 RWA 路径搜索返回内容类别动画方式网页 / 链接webpage网页 / UI 动画滚动、reveal、光标、callout新闻文章news标题 reveal 来源卡片 关键事实 callout推文tweet动画推文卡片图片 / 实体asset-fusion素材的几何结构「变成」图表RWA 叙事性融合纯代码/文字类别如kinetic-type、大部分charts/stat的asset_needs: []会直接从 plan 跳到 design跳过 source 阶段。构建顺序采用「逐个类别、覆盖优先」策略粗糙可用即可kinetic-type从原型迁移而来其余类别随后跟进。二、前置条件与环境变量技能要求macOS Apple Silicon 或 Linux x64环境系统工具依赖 Node 与 FFmpegbrew install node ffmpeg npx hyperframes doctor # 一次性健康检查macOS GPU 渲染需设置export PRODUCER_BROWSER_GPU_MODEhardware。以下可选密钥仅在未设置时使用本地回退且只对通过 media-use 获取/生成素材的类别必需密钥用途回退GEMINI_API_KEY/GOOGLE_API_KEY图片生成media-use resolve跳过生成 / 仅搜索asset_scout / 搜索服务商webpage/news/tweetasset-fusion真实素材搜索类别降级为无素材三、端到端 7 阶段流水线技能在 skills/motion-graphics/SKILL.md 中把整个流程定义为 7 个阶段核心原则是asset-first素材先行先决定素材策略并获取真实素材再围绕已有素材设计镜头最后通过复用 catalog 能力完成合成。所有产物写入PROJECT_DIR videos/project-name/Step 0 创建文中所有路径均相对它阶段执行方主要产物详细流程initBashhyperframes.jsonStep 0plan子代理——决定是否搜索 分类 素材策略shot-plan.json草稿category、asset_needs查询、briefagents/director.mdPart 1source ◇Bash——media-use resolve若asset_needs为空则跳过assets/assets/index.mdphases/source/guide.mddesign子代理——围绕已解析素材做镜头设计shot-plan.json终稿块 布局 动效 位置agents/director.mdPart 2build子代理——复用优先合成compositions/index.htmlagents/builder.mdverifyBash——lint、check、证据截图失败则修复snapshots/contact-sheet.jpgStep 5approve询问预览或渲染等待答复显式渲染批准Step 6renderBash——hyperframes renderMP4或--format webm/mov输出叠加层renders/video.mp4或透明叠加层Step 6Step 0 — 初始化cwd 为 Agent 工作区根目录所有产物写入PROJECT_DIR videos/project-name/。项目名使用用户给出的目录名否则从意图提炼一个短 kebab-case 名称subject-motion不要用工作区 basename 或时间戳。仅当$PROJECT_DIR/hyperframes.json不存在时初始化PROJECT_DIR${MOTION_GRAPHICS_DIR:-videos/project-name} mkdir -p $(dirname $PROJECT_DIR) npx hyperframes init $PROJECT_DIR --non-interactive --exampleblank --skillmotion-graphicsinit会把已安装技能与 GitHub 最新版本比对若过期则更新全局技能集。两条硬约束绝不在工作区根目录执行hyperframes init绝不在PROJECT_DIR内再嵌套一个hyperframes/所有 Bash 命令主代理与子代理都必须以(cd $PROJECT_DIR ...)子 shell 形式执行禁止裸cd。Step 1 — Plan子代理Director Part 1分派一个子代理prompt 完整 agents/director.md ## Dispatch contextSKILL_DIR/PROJECT_DIR/ 用户请求 /Schema: SKILL_DIR/references/shot-plan-ir.md。它必须完成两件事决策是否需要搜索否→ 选择 form 类别kinetic-type / stat / charts / logo-reveal / lower-thirds / maps内容用户提供asset_needs: []是→ 在asset_needs[]中输出搜索计划news / web / tweet / image两极性查询具体 search-driven 类别webpage / news / tweet / asset-fusion由 Step 2 返回的内容类型确认Step 3 最终定稿。写一份草稿shot-plan.jsonenvelope 所选 form 类别或搜索意图 asset_needs 一段镜头 briefschema 见 references/shot-plan-ir.md。校验命令[ -s $PROJECT_DIR/shot-plan.json ] echo ok || echo missing。Director 的素材策略要点asset-free类别kinetic-type、多数stat/charts→asset_needs: []maps的vector 车道无需素材D3/TopoJSON 在 HF 内实时运行basemap 车道卫星/暗色/缩放到地点需要asset_needs: [{ type: map-bake, … }]webpage/news/tweet搜索真实来源 一张辅助图片只用两极性查询——原子查询1–3 词、可组合肖像、logo、物体或特定查询5–15 词某新闻事件、某推文绝不用中间地带失败的特定查询直接丢弃而非放宽。Step 2 — Source ◇Bashmedia-use条件执行若shot-plan.json.asset_needs非空则解析素材搜索 / 生成 / 抓取 → 冻结的项目内路径 台账详见 phases/source/guide.md封装media-use resolve。若asset_needs为空则直接跳到 Step 3。# illustrative — see phases/source/guide.md (cd $PROJECT_DIR node SKILL_DIR/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)每个素材需求的处理流程是analyze → search → reviewuse/maybe/reject——选择才是最难的部分不要取第一个/生成的结果→ freeze冻结进assets/远程 URL 需重新托管最后写assets/index.md台账role → frozen path provenance。若搜索/服务商不可用在context.log记录未满足需求类别优雅降级为无素材例如news降级为纯排版标题。Step 3 — Design子代理Director Part 2分派子代理prompt agents/director.mdPart 2 调度上下文含 Step 2 运行后的assets/index.mdcatalog-map.md。它围绕可用素材设计镜头选择 catalog 块 hyperframes-animation规则/蓝图、布局、动效、节拍与退场对asset-fusion还要产出element_positions 从素材吸取的色板。最终定稿shot-plan.jsoncontent.blockcontent.customize 各类别专属 content。Director 的设计启发式design-led short motion值得注意动效即信息Motion IS the message无旁白叙事弧钩子需快速落地约前 0.5s一个主导母题若片段超过约 2.5s 需要 pattern-interrupt只改变一件事动效强度匹配能量关键元素可读时长 ≥ 约 0.3s节拍可提前约 0.1s 以获得感知上的同步。复用优先指名一个 catalog 块只在空白处与asset-fusion专门逻辑处手写动效。Step 4 — Build子代理Builder复用优先分派子代理prompt 完整 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 逻辑手写。输出compositions/index.html并遵守 HF 契约在window.__timelines上注册暂停的 GSAP 时间线、classclip 稳定 id、tl.seek(0)、确定性。Step 5 — VerifyBash → 失败则分派修复子代理(cd $PROJECT_DIR npx hyperframes lint .) (cd $PROJECT_DIR npx hyperframes check .) (cd $PROJECT_DIR npx hyperframes snapshot --at proof-times)证据时刻应覆盖开场状态、标志性动作和最终定格。继续前需人工检查生成的 contact sheet / 截图。lint、check或截图失败时分派修复子代理agents/finalize.md做一次就地修复然后重跑失败的门禁。绝不允许为了掩盖缺陷而改动已固定的时长——只有镜头从根本上错误整体内容偏离、需要重新合成才回到 Step 3/4 重新设计与构建。Step 6 — Approve and renderBash先问一个问题「先预览还是直接渲染」用户选择预览则打开 Studio修订后回到同一批准门禁(cd $PROJECT_DIR npx hyperframes preview --background)只有在用户明确给出渲染答复后才渲染(cd $PROJECT_DIR npx hyperframes render . --skillmotion-graphics -q high -o ./renders/video.mp4) # transparent overlay variant: --format webm (or mov)渲染后校验输出存在、非空、时长符合预期。最终交接需说明产物名、实际时长、合成或帧 id、证据时刻以及已检查的 contact sheet。渲染/预览旗标细节见hyperframes-cli的references/preview-render.md。四、shot-plan IRDirector 与 Builder 之间的单一契约references/shot-plan-ir.md 定义了这份文件——它是 Director 与 Builder 之间的唯一契约一个文件承载从意图到可渲染合成的全部信息{ // ── envelope (every category) ── category: kinetic-type | stat | charts | logo-reveal | lower-thirds | webpage | news | tweet | asset-fusion, duration_s: 6, fps: 30, canvas: { w: 1080, h: 1920, aspect: 9:16 }, style: free-form visual direction (mood / energy / reference), palette: [#…], // or derive-from-asset font: HF embed-list font, beats: [12, 37], // optional accent frames/seconds export: mp4, // or alpha-overlay (transparent webm/mov) // ── sourcing seam (Director Part 1) — [] means skip the source phase ── asset_needs: [ { role: hero, kind: image|icon|logo|svg|news|web|tweet, query: …, source: …, treatment: cutout|recolor|vectorize|none, }, ], // ── build directive (Director Part 2, reuse-first) ── block: catalog block id, e.g. contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames motion-graphics 技能实战：用 HTML 构建 10 秒级设计主导动态图形
HyperFrames motion-graphics 技能实战用 HTML 构建 10 秒级设计主导动态图形【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文围绕 HyperFrames 仓库中的motion-graphics技能skills/motion-graphics/SKILL.md展开它是项目为 Agent 准备的一套「短时长、设计主导、无旁白」动态图形kinetic type、数字跳动、图表命中、Logo sting、地图动画、推文/新闻高亮等的端到端工作流。读完本文你将掌握该技能的完整 7 阶段流水线init → plan → source → design → build → verify → render、shot-plan.json中间表示IR的结构、Agent 如何「复用优先」地组合 catalog 块与动画规则以及渲染确定性determinism与 GSAP 时间线契约背后的底层原理。一、技能定位什么时候走 motion-graphicsmotion-graphics是 HyperFrames 意图路由层skills/hyperframes/references/routes/motion-graphics.md下的一个具体路由它处理短、设计主导、无旁白、以动效本身传达信息的单镜头动态图形通常 10 秒以内最长约 30 秒最终产出 MP4 或带透明通道的叠加层WebM/MOV。典型触发词包括an 8s logo sting、animate this stat、kinetic-type intro、animate this title、transparent lower-third overlay。如果内容更长、带旁白、多场景应路由到general-video不确定时统一走/hyperframes入口意图层拥有所有路由决策权。该技能是默认全自动的设计全程最多允许一个澄清问题由 Director 步骤提出随后一路构建到验证环节不做中间评审。由于单镜头很短故事板与伴随会话companion session没有额外价值。但渲染仍然由用户把关校验与证据截图通过后会询问标准的「先预览还是直接渲染」问题见 skills/hyperframes-core/references/brief-contract.md。分类系统先回答「是否需要搜索」plan阶段的第一决策是是否需要搜索这一分叉把 10 个类别分成两组随后再按返回的内容类型确定具体类别Form 类别无需搜索内容由用户提供类别意图依赖kinetic-type有力的台词/引语/标题以文字为核心caption-*系列块 动画规则stat单个英雄数字 / 计数跳动 圆环apple-money-count/rules/{counting-dynamic-scale, stat-bars-and-fills}charts基于数据的 bar / line / pie / race / %data-chart块logo-revealLogo sting / 品牌组合用户提供 logologo-outro/rules/svg-path-drawlower-thirds姓名/标题栏、callout、社交叠加层caption-* registry 叠加块maps地理动效——高亮区域、连接地点、缩放到某地vector 车道或烘焙底图车道us-map/world-map家族 bake-basemap.mjsSearch-driven 类别先搜索再按内容类型动画即 RWA 路径搜索返回内容类别动画方式网页 / 链接webpage网页 / UI 动画滚动、reveal、光标、callout新闻文章news标题 reveal 来源卡片 关键事实 callout推文tweet动画推文卡片图片 / 实体asset-fusion素材的几何结构「变成」图表RWA 叙事性融合纯代码/文字类别如kinetic-type、大部分charts/stat的asset_needs: []会直接从 plan 跳到 design跳过 source 阶段。构建顺序采用「逐个类别、覆盖优先」策略粗糙可用即可kinetic-type从原型迁移而来其余类别随后跟进。二、前置条件与环境变量技能要求macOS Apple Silicon 或 Linux x64环境系统工具依赖 Node 与 FFmpegbrew install node ffmpeg npx hyperframes doctor # 一次性健康检查macOS GPU 渲染需设置export PRODUCER_BROWSER_GPU_MODEhardware。以下可选密钥仅在未设置时使用本地回退且只对通过 media-use 获取/生成素材的类别必需密钥用途回退GEMINI_API_KEY/GOOGLE_API_KEY图片生成media-use resolve跳过生成 / 仅搜索asset_scout / 搜索服务商webpage/news/tweetasset-fusion真实素材搜索类别降级为无素材三、端到端 7 阶段流水线技能在 skills/motion-graphics/SKILL.md 中把整个流程定义为 7 个阶段核心原则是asset-first素材先行先决定素材策略并获取真实素材再围绕已有素材设计镜头最后通过复用 catalog 能力完成合成。所有产物写入PROJECT_DIR videos/project-name/Step 0 创建文中所有路径均相对它阶段执行方主要产物详细流程initBashhyperframes.jsonStep 0plan子代理——决定是否搜索 分类 素材策略shot-plan.json草稿category、asset_needs查询、briefagents/director.mdPart 1source ◇Bash——media-use resolve若asset_needs为空则跳过assets/assets/index.mdphases/source/guide.mddesign子代理——围绕已解析素材做镜头设计shot-plan.json终稿块 布局 动效 位置agents/director.mdPart 2build子代理——复用优先合成compositions/index.htmlagents/builder.mdverifyBash——lint、check、证据截图失败则修复snapshots/contact-sheet.jpgStep 5approve询问预览或渲染等待答复显式渲染批准Step 6renderBash——hyperframes renderMP4或--format webm/mov输出叠加层renders/video.mp4或透明叠加层Step 6Step 0 — 初始化cwd 为 Agent 工作区根目录所有产物写入PROJECT_DIR videos/project-name/。项目名使用用户给出的目录名否则从意图提炼一个短 kebab-case 名称subject-motion不要用工作区 basename 或时间戳。仅当$PROJECT_DIR/hyperframes.json不存在时初始化PROJECT_DIR${MOTION_GRAPHICS_DIR:-videos/project-name} mkdir -p $(dirname $PROJECT_DIR) npx hyperframes init $PROJECT_DIR --non-interactive --exampleblank --skillmotion-graphicsinit会把已安装技能与 GitHub 最新版本比对若过期则更新全局技能集。两条硬约束绝不在工作区根目录执行hyperframes init绝不在PROJECT_DIR内再嵌套一个hyperframes/所有 Bash 命令主代理与子代理都必须以(cd $PROJECT_DIR ...)子 shell 形式执行禁止裸cd。Step 1 — Plan子代理Director Part 1分派一个子代理prompt 完整 agents/director.md ## Dispatch contextSKILL_DIR/PROJECT_DIR/ 用户请求 /Schema: SKILL_DIR/references/shot-plan-ir.md。它必须完成两件事决策是否需要搜索否→ 选择 form 类别kinetic-type / stat / charts / logo-reveal / lower-thirds / maps内容用户提供asset_needs: []是→ 在asset_needs[]中输出搜索计划news / web / tweet / image两极性查询具体 search-driven 类别webpage / news / tweet / asset-fusion由 Step 2 返回的内容类型确认Step 3 最终定稿。写一份草稿shot-plan.jsonenvelope 所选 form 类别或搜索意图 asset_needs 一段镜头 briefschema 见 references/shot-plan-ir.md。校验命令[ -s $PROJECT_DIR/shot-plan.json ] echo ok || echo missing。Director 的素材策略要点asset-free类别kinetic-type、多数stat/charts→asset_needs: []maps的vector 车道无需素材D3/TopoJSON 在 HF 内实时运行basemap 车道卫星/暗色/缩放到地点需要asset_needs: [{ type: map-bake, … }]webpage/news/tweet搜索真实来源 一张辅助图片只用两极性查询——原子查询1–3 词、可组合肖像、logo、物体或特定查询5–15 词某新闻事件、某推文绝不用中间地带失败的特定查询直接丢弃而非放宽。Step 2 — Source ◇Bashmedia-use条件执行若shot-plan.json.asset_needs非空则解析素材搜索 / 生成 / 抓取 → 冻结的项目内路径 台账详见 phases/source/guide.md封装media-use resolve。若asset_needs为空则直接跳到 Step 3。# illustrative — see phases/source/guide.md (cd $PROJECT_DIR node SKILL_DIR/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)每个素材需求的处理流程是analyze → search → reviewuse/maybe/reject——选择才是最难的部分不要取第一个/生成的结果→ freeze冻结进assets/远程 URL 需重新托管最后写assets/index.md台账role → frozen path provenance。若搜索/服务商不可用在context.log记录未满足需求类别优雅降级为无素材例如news降级为纯排版标题。Step 3 — Design子代理Director Part 2分派子代理prompt agents/director.mdPart 2 调度上下文含 Step 2 运行后的assets/index.mdcatalog-map.md。它围绕可用素材设计镜头选择 catalog 块 hyperframes-animation规则/蓝图、布局、动效、节拍与退场对asset-fusion还要产出element_positions 从素材吸取的色板。最终定稿shot-plan.jsoncontent.blockcontent.customize 各类别专属 content。Director 的设计启发式design-led short motion值得注意动效即信息Motion IS the message无旁白叙事弧钩子需快速落地约前 0.5s一个主导母题若片段超过约 2.5s 需要 pattern-interrupt只改变一件事动效强度匹配能量关键元素可读时长 ≥ 约 0.3s节拍可提前约 0.1s 以获得感知上的同步。复用优先指名一个 catalog 块只在空白处与asset-fusion专门逻辑处手写动效。Step 4 — Build子代理Builder复用优先分派子代理prompt 完整 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 逻辑手写。输出compositions/index.html并遵守 HF 契约在window.__timelines上注册暂停的 GSAP 时间线、classclip 稳定 id、tl.seek(0)、确定性。Step 5 — VerifyBash → 失败则分派修复子代理(cd $PROJECT_DIR npx hyperframes lint .) (cd $PROJECT_DIR npx hyperframes check .) (cd $PROJECT_DIR npx hyperframes snapshot --at proof-times)证据时刻应覆盖开场状态、标志性动作和最终定格。继续前需人工检查生成的 contact sheet / 截图。lint、check或截图失败时分派修复子代理agents/finalize.md做一次就地修复然后重跑失败的门禁。绝不允许为了掩盖缺陷而改动已固定的时长——只有镜头从根本上错误整体内容偏离、需要重新合成才回到 Step 3/4 重新设计与构建。Step 6 — Approve and renderBash先问一个问题「先预览还是直接渲染」用户选择预览则打开 Studio修订后回到同一批准门禁(cd $PROJECT_DIR npx hyperframes preview --background)只有在用户明确给出渲染答复后才渲染(cd $PROJECT_DIR npx hyperframes render . --skillmotion-graphics -q high -o ./renders/video.mp4) # transparent overlay variant: --format webm (or mov)渲染后校验输出存在、非空、时长符合预期。最终交接需说明产物名、实际时长、合成或帧 id、证据时刻以及已检查的 contact sheet。渲染/预览旗标细节见hyperframes-cli的references/preview-render.md。四、shot-plan IRDirector 与 Builder 之间的单一契约references/shot-plan-ir.md 定义了这份文件——它是 Director 与 Builder 之间的唯一契约一个文件承载从意图到可渲染合成的全部信息{ // ── envelope (every category) ── category: kinetic-type | stat | charts | logo-reveal | lower-thirds | webpage | news | tweet | asset-fusion, duration_s: 6, fps: 30, canvas: { w: 1080, h: 1920, aspect: 9:16 }, style: free-form visual direction (mood / energy / reference), palette: [#…], // or derive-from-asset font: HF embed-list font, beats: [12, 37], // optional accent frames/seconds export: mp4, // or alpha-overlay (transparent webm/mov) // ── sourcing seam (Director Part 1) — [] means skip the source phase ── asset_needs: [ { role: hero, kind: image|icon|logo|svg|news|web|tweet, query: …, source: …, treatment: cutout|recolor|vectorize|none, }, ], // ── build directive (Director Part 2, reuse-first) ── block: catalog block id, e.g. contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考