HyperFrames Registry 的 demo.html 约定在 OpenMontage 中为组件编写可渲染演示与目录预览【免费下载链接】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 所收录的 demo.html 规范文档系统讲解 HyperFrames Registry 中组件必须随附 demo.html这一约定的设计动机、文件骨架、关键属性和作者工作流。读者将掌握为什么只有 component 需要 demo 包装而 block 不需要、demo 如何同时充当CI 预览夹具与用法示例、demo 为何永远不会被hyperframes add安装进用户工程以及如何把仓库中现成的组件模板改造成一段符合 lint / validate / render 要求的标准 demo。全篇以规范文档为骨架结合仓库内 registry 技能、CLI 文档与真实示例源码补充底层依据。背景Registry 里有两类可复用资产只有一类需要 demo.html在深入 demo.html 之前必须先厘清 HyperFrames Registry 的两种条目类型。根据 registry SKILL.md 与 contributing.md 的定义Blocks块——独立的子合成sub-composition拥有自己的画布尺寸、时长与时间线。注册于registry/blocks/{name}/类型为hyperframes:block。典型形态包括字幕样式caption styles、VFX 效果、标题卡、lower-third 等通过data-composition-src嵌入宿主合成。Components组件——可复用的效果片段effect snippet没有固定尺寸与时长能自适应任意合成尺寸。注册于registry/components/{name}/类型为hyperframes:component。典型形态包括 CSS 效果、文字处理、叠加层overlay直接以 HTML/CSS/JS 形式粘贴进宿主合成。demo.html只随component一起出现。理解这一点也就理解了整个约定的出发点component 是没有自己的时间与画布的片段需要一个临时宿主才能被预览——这个临时宿主就是 demo.html。注该 Registry 目录规范文档位于 OpenMontage 仓库的.agents/skills/hyperframes-registry/references/下属于 HyperFrames 技能体系Layer 3的一部分。在 OpenMontage 内部当编排流水线的render_runtime被选为hyperframes时这些 registry 块/组件即可通过 skills/core/hyperframes.md 描述的桥接关系进入实际成片Registry 块也因此成为为什么选 HyperFrames 而不是 Remotion的关键理由之一。为什么组件要随附 demo.html双重职责规范文档开门见山地指出registry 中每个 component 在 snippet 旁边都会携带一个 companion 的demo.html文件。它服务于两个截然不同、又同等重要的目的1. Preview fixture预览夹具CI 预览流水线会真实渲染这份 demo为目录catalog文档页生成缩略图thumbnail images和预览视频preview videos。也就是说demo.html 不是给人看的摆设而是被自动化管线当作取景样本来喂给渲染器——目录里每一个组件卡片背后的视觉素材都源自这个文件。这与 contributing.md 中描述的 catalog 流程互相印证catalog 卡片使用docs/images/catalog/{kind}/{name}.png的 PNG 快照作者需要用hyperframes snapshot --at 1.0,3.0,5.0,7.0等命令从 demo/合成中抽取帧来生成该图。也就是说demo 是预览素材的源头而 snapshot/render 是从源头产出素材的工具。2. Usage example用法示例demo 把组件效果应用到有代表性的内容上向读者以及后续会hyperframes add该组件的 Agent 或人类开发者展示这个组件装进真实合成后应该长什么样、该配什么内容。相比 dry 的 snippetdemo 提供了一个可直接打开的、能说明最终效果的工作参考。事实边界说明以上两条目的直接引自规范文档原文而目录页图片由 snapshot 生成、外部贡献者在 PR 中附上预览 MP4等细节来自同目录的 contributing.md属于可交叉验证的文档事实。demo.html 的标准结构一个完整的独立 HTML 合成规范给出了 demo 的最小骨架。它必须是一份**完整、独立standalone**的 HTML 合成!doctype html html langen head meta charsetUTF-8 / meta nameviewport contentwidth1920, height1080 / titleComponent Name — Demo/title script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script style /* reset canvas size */ /style /head body div>window.__timelines window.__timelines || {}; const tl gsap.timeline({ paused: true }); window.__timelines[main] tl;注意示例中的paused: true时间线必须被暂停渲染器才拥有绝对的控制权。注册的写法规范中也给出推荐形式window.__timelines window.__timelines || {};即惰性初始化确保即使页面中先注册了别的合成也不会互相覆盖templates.md 中三份模板的开头都保留了这一行。示例中 TIMELINE — built synchronously so HyperFrames can seek it 的注释进一步说明了同步构建的原因时间线必须在一帧之内完整搭好后续任何时刻的 seek 才有效。约定四时长要足够展示效果通常 5–8 秒data-durationN是 demo 根节点的属性之一。规范建议 N 取 5–8 秒太短不足以让入场、主体动画、收尾三个阶段都完整走完太长则让目录预览视频变得拖沓。这与 blocks 的推荐时长经验一致——discovery.md 在描述 code animation 块时提到 each is a self-contained 1920×1080 block (~5–8s)说明 5–8 秒是这个生态里一条演示刚好能看明白的通用经验区间。把组件模板改成 demo一份可操作的作者路线理解demo 是给组件造的临时宿主之后改写的路径就非常清晰了。仓库里的 component 模板Component Template本身就是最好的起点——它的关键特征是body div classCOMPNAME-wrap !-- Your reusable effect/overlay here -- /div script (function () { // Component snippet — no>div classshimmer-sweep-target style--shimmer-color: rgba(255, 255, 255, 0.5) h1 classtitleAI-Powered Video/h1 /div写一条驱动演示的时间线注册到__timelines。仍以 shimmer-sweep 为例它演示的 sweep 动作本身由组件对外暴露的时间线调用完成tl.fromTo( .shimmer-sweep-target, { --shimmer-pos: -20% }, { --shimmer-pos: 120%, duration: 1.2, ease: power2.inOut, stagger: 0.15, }, 1.5, );把 demo 撑到 5–8 秒后若组件本身耗时很短可以让时间线包含入场与收尾多个段落总之演示必须以 把组件效果完整展示一遍 为唯一目标。验证并出预览对 demo以及 blocks执行注册表质量的验证命令命令来自 contributing.md 与 registry SKILL.mdhyperframes lint # 0 errors required hyperframes validate --no-contrast # 0 console errors required hyperframes render -o preview.mp4 # 渲染目录预览视频 hyperframes snapshot --at 1.0,3.0,5.0,7.0 # 抽取视觉 QA 快照提醒上述 demo 包装的最终产物是存放在 registry 内、随 snippet 一起上送 PR的参考文件不是用户工程里的文件。判断一份 HTML 是否符合 demo 身份就看它是否满足根节点存在name-demo的data-composition-id、全部样式与脚本内联、时间线已注册到window.__timelines、时长落在 5–8 秒区间。为什么 Blocks 不需要 demo.html规范用一句话解释了边界Blocks are already standalone compositions that can be rendered directly. Only components need the demo wrapper.block 本身就是独立合成——它自带data-composition-id、data-width/data-height、data-duration体内就有完整的时间线注册。templates.md 的 Caption Template 与 VFX Template 都验证了这一点它们的根节点从一开始就写着data-composition-idBLOCKNAME、data-width1920>只有 component 需要 demo.htmlblock 本体即合成直接渲染无需包装文件为完整独立的 HTML!doctype html、viewport 声明 1920×1080、明确title根节点存在且data-composition-idcomponent-name-demo带-demo后缀防冲突根节点声明data-width1920>snippet 中的 CSS 与 JS 已全部内联demo 不依赖 registry 其他文件GSAP 时间线paused: true并以window.__timelines window.__timelines || {}后赋值window.__timelines[name-demo]的方式注册demo 内元素 ID 遵循 registry 前缀规范不与任何合成冲突明确 demo.html 仅存于 registry它用于 CI 预览与阅读参考绝不会被hyperframes add安装进用户工程关联阅读Registry 总览与hyperframes add快速参考Registry 条目类型与创作工作流Clarify→ShipCaption / VFX / Component / registry-item.json 四份可直接复制的模板组件接线演练shimmer-sweep 从安装到定制注册表条目字段定义与目录清单组件 wiring 细节HTML/CSS/JS 合并进宿主合成块 wiring 细节data-composition-src track 编排安装位置与hyperframes.json路径配置仓库内的真实全尺寸合成示例展示__timelines注册与确定性 seek 模式OpenMontage 中 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考