OpenMontage 动效合成构建器实战Motion-Graphics Builder 如何把 shot-plan.json 变成可渲染的 HyperFrames 合成【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage在 OpenMontage世界首个开源 agentic 视频生产系统中motion-graphics是一条用于生产「设计驱动的短视频动效」的 Skill 流水线动效即信息动态排版、数字 count-up、图表数据可视化、logo sting、lower-third、社媒 overlay 等通常 3–30 秒、无旁白。其中Motion-Graphics Builder承担流水线里最关键的一步把导演Director产出的shot-plan.json一种中间表示 IR翻译为一份符合 HyperFramesHF运行时契约、可被引擎逐帧 seek 渲染的compositions/index.html。读完本文你将掌握该构建器的共享契约HF Contract、复用优先原则、CSS 优先布局方法论、GSAP 确定性动画规范与 lint/inspect/render 验证闭环并能直接套用这套约束写出「一次渲染即正确」的动效合成。一、Builder 在整个 motion-graphics 流水线中的位置先看motion-graphics的整体执行框架见 SKILL.md阶段执行者主要产物详细流程initBashhyperframes.jsonStep 0plan子 Agent——判断是否搜索 分类 资产策略shot-plan.json草稿category、asset_needs查询、briefagents/director.mdPart 1sourceBash——media-use resolveasset_needs为空则跳过assets/assets/index.mdphases/source/guide.mddesign子 Agent——围绕已解析资产做镜头设计shot-plan.json最终版block(s) layout motion positionsagents/director.mdPart 2build子 Agent——复用优先合成compositions/index.htmlagents/builder.mdrenderBash——hyperframes renderMP4overlay 用--format webm/movrenders/video.mp4Step 5verifyBash——lint/inspect→ 失败则派修复子 Agent原地修复agents/finalize.md第 4 步 build 的 dispatch 内容就是agents/builder.md全文 上下文shot-plan.json、catalog-map.md、所选类别的module.md、motion-vocabulary.md、builder-contract.md。Builder 是一份「共享契约」它定义所有类别都必须遵守的 HF 构建规则而各动效类别的专属构建细则文本场景/图表数据/融合位置/新闻推文内容各自怎么落地分散在categories/id/module.md里。换句话说Builder 是怎么做都行但必须满足的底线规则类别 module 是这类动效具体怎么做。二、复用优先默认拼装目录能力而非手写一切Builder 的第一默认原则是reuse-first复用优先npx hyperframes add block从 registry 拉取一个现成 block然后就地定制customize in place。绝大多数 block 把内容/数据烘焙进自己的脚本里只暴露少量 CSS 变量参数所以复用的实操含义是add edit添加后直接编辑源码而不是简单的变量注入动效本身优先使用hyperframes-animation的 rules规则/ blueprints蓝图/ transitions转场运行时适配器默认 GSAP只有两类情况才允许手写(a) 现有 block/rule 覆盖不了的空白(b)asset-fusion的 affordance binding把素材几何体变成图表坐标轴的融合逻辑。Block 与类别的映射关系、定制点与手写缺口都记录在 catalog-map.md 中。例如类别借用 catalog定制点手写空白kinetic-type18 个caption-*blockkinetic-slam、editorial-emphasis、clip-wipe、neon-glow、glitch-rgb、matrix-decode…文字、emphasis_words→word--emphasis、调色板、字体、时序18 个都覆盖不了的新母题chartsdata-chartbarline、交错出现、数值标签数据数组 headline/subtitle、--bg/--textpie/donut、bar-chart-race、ring/%statapple-money-count或通用stat-motion任意数字 ring目标值、前缀/后缀、标签、调色板—logo-reveallogo-outro拼装 glow tagline URL pilllogo 资产、tagline、URL、调色板—asset-fusionnorth-korea-locked-down的批注套件scribble-circle、pop-up pill、red-wash、scanline、cornersus-map-bubble的 callouts/connectors素材、批注位置element_positions、标签、从素材取色的调色板真正的 net-newaffordance bindingBlock 复用机制npx hyperframes add block会把 block 源码落到compositions/block.html可内联或通过data-composition-src引用block 出厂画布固定为 1920×1080 / 1080×1920 / 1080×1080 之一需匹配或适配且 block 本身已遵循 HF 契约paused timeline seek不要破坏它。而 Director 需要在shot-plan.json的 IR 里明确用什么 block 改哪里例如schema 见 shot-plan-ir.mdcontent: { block: data-chart, customize: { data: [...], headline: …, palette: […] } }以charts类别的构建实践为例categories/charts/module.md复用data-chart时用npx hyperframes add>display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: 120px 160px; gap: 24px; box-sizing: border-box;绝对定位只留给装饰性元素内容四周保持 ≥80px 内边距title-safe 安全边距入场gsap.from()让元素从屏幕外/不可见运动到 CSS 写好的位置子合成里用fromTo()。CSS 位置是 ground truthtween 只是抵达它的旅程退场只有最后一个场景才把元素动出去场景与场景之间的转场本身就是退场。五、从 IR 到合成shot-plan.json 的落地映射Builder 拿到最终版shot-plan.json后按下列映射逐项落地schema 详见 shot-plan-ir.mdcontent.block→ 用hyperframes add引入该 block或内联再应用content.customize各类别的content文本场景 / 图表数据 / 融合位置 / 新闻推文内容→ 按所属categories/id/module.md落地已解析的asset_needs→ 引用冻结的项目本地路径frozen project-local paths绝不允许远程 URL 或 prompt 字符串直接入图palette[-1]背景色 font→ 从 envelope镜头包络取用。调色板纪律所有颜色集中在一个palette对象 / CSS 自定义属性里不要把十六进制色值散落在标记内asset-fusion类别则必须从素材里吸取调色板export: alpha-overlay→ 透明背景渲染时用--format webm或mov。shot-plan.json的 envelope 字段与 invariant不变量同时约束着 Builderscenes若有必须把[0, duration_s]无缝隙、无重叠地分区asset_needs为空则 source 阶段被跳过命中了block就复用并定制它而不是手写。六、关键正确性GSAP / seek 语义下的陷阱规避在逐帧 seek 的确定性渲染模型下浏览器播放时看不出来的错误会在渲染里被暴露。Builder 契约里用两个实证发现eval finding点名了最危险的坑延迟元素的 opacity-gate 必须 seek-safe。正确做法是开局gsap.set(el, { autoAlpha: 0 })一次入场时用gsap.to(el, { autoAlpha: 1 })揭示配合纯 motion 的from()。严禁用set(opacity:1) from(opacity:0)组合做门控——在 paused/seeked 渲染下元素会永远保持不可见。浏览器播放会掩盖这个 bugseek 抓帧会暴露它见 builder-contract.mdCount-up数字跳动必须 tween 一个代理对象在onUpdate里写回 DOM——seek-safe绝不能用墙钟计时器。且它只在宿主带事件推进时间线tl.time()/ 非抑制 seek时才渲染——裸seek(t, true)会让它冻结在 0因此渲染宿主必须开事件 seek。其他硬性正确性约束钳制在 tween 边界内不要让 spring/overshoot 冲过某个保持值允许的缓动白名单power1–4、back、bounce、circ、elastic、expo、sine各带.in/.out/.inOut每个场景一个母题one motif per scene运行hyperframes inspect检查溢出/碰撞确有故意的溢出时用data-layout-allow-overflowtrue声明。注意该属性的爆炸半径它沿子树继承会连带抑制text-clipping、content-cramped-container、foreground-over-panel等感知检查所以应尽量收窄到最小的装饰 wrapper 上inspect测的是采样时刻的getBoundingClientRect而非渲染像素CSSoverflow:hidden挡不住 inspect 的溢出报告。七、验证—修复闭环lint → inspect → 渲染草稿Builder 的产出必须过一遍标准验证链CLI 细节见 hyperframes-cli 的 lint-validate-inspect 参考# 1) 校验结构 (cd $PROJECT_DIR npx hyperframes lint .) # 2) 检查溢出 / 碰撞 / 布局感知 (cd $PROJECT_DIR npx hyperframes inspect .) # 3) 快速渲染草稿帧 (cd $PROJECT_DIR npx hyperframes render . --skillmotion-graphics -q draft -o ./renders/video.mp4) # alpha overlay 变体--format webm或 mov任何一个环节失败 → 定位到出问题的元素、修复、重跑直到全绿。有三条规则要记住修复期间绝不改动已固定的data-durationduration 是与其他环节音频、转场、交付锁定的契约值从 Remotion 迁移来的既有动效素材会由/remotion-to-hyperframes的SSIM 对比测试台harness做质量分级该技能的说明见 .agents/skills/remotion-to-hyperframes/SKILL.md验证失败后的修复子 Agent按 agents/finalize.md 执行快照 QA → 一轮就地修复 → 重新渲染。八、动效词汇表Builder 落地 motion 指令的参照Director 在shot-plan.json里写入的motion是命名原语named primitivesBuilder 负责把它们翻译成具体的 GSAP recipe。完整对照见 motion-vocabulary.md摘录如下类别原语GSAP recipe入场slide_bottom/top/left/rightfrom({ y:±150 / x:±200, opacity:0, ease:power4.out })入场scale_punchfrom({ scale:.6, opacity:0, ease:back.out(2.2) })入场fade_blurfrom({ opacity:0, filter:blur(14px) })入场word_reveal/wave逐词stagger:.1/ 逐字母stagger:{each:.04}强调scale_pulse/shake/glow/color_shiftto({scale:1.12,yoyo:true,repeat:1,...})等落在节拍上退场fade_out/slide_out/scale_outto({... , ease:power2.in})图形underline_sweep/bar_wipe/hold_breathfromTo({scaleX:0},{scaleX:1}, transformOrigin:left center)等同时词汇表明确要求当 HF registry 组件能覆盖时优先用组件caption-kinetic-slam、caption-editorial-emphasis、caption-neon-glow、caption-glitch-rgb、caption-particle-burst、caption-weight-shift、caption-matrix-decode、caption-pill-karaoke、shimmer-sweep等已渲染测试过的现成组件不要重复造轮子。九、为何这样设计把会写 HTML/GSAP变成能进渲染流水线Builder 契约本质上是在给自由散漫的动效手写加上一层可被确定性引擎消费的硬约束。从源码结构看这套约束与 HyperFrames 运行时是一一咬合的window.__timelines[id]注册表与 contenteditable="false">【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考