HyperFrames 项目组合架构从单体 HTML 到模块化子组合的工程实践【免费下载链接】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本指南围绕 HyperFrames 的核心文档 composition-patterns.md 展开系统讲解视频项目从单体index.html到模块化子组合的架构演进、编排器设计、四种子组合原型的适用场景与命名规范。你将掌握一套可直接落地的组合架构决策框架与可复制的代码模板并了解它在 OpenMontage 视频生产管线中的接入方式hyperframes_compose.py。一、两种架构Monolithic 与 ModularHyperFrames 的项目有两种组织方式它们的运行时契约完全相同——都基于data-*属性 window.__timelines[id]注册表驱动。区别纯粹是结构性的不涉及行为差异。维度Monolithic单文件Modular子组合项目布局仅index.htmlindex.htmlcompositions/scene.html每场景一个文件场景存放位置根节点下内联的section classclip兄弟元素每个场景是独立文件内容包裹在template中时间轴注册根节点data-composition-id对应一条时间轴根时间轴通常近乎为空 每个子组合一条时间轴各自以自身id为键路由入口minimal-composition.mdsub-compositions.md何时选单体Monolithic整段视频是一个连续场景没有硬切场景间共享重状态——一个贯穿全片的 canvas/WebGL 上下文、一个跨多个节拍持续形变的 SVG总规模小约 200–400 行标记 脚本没有需要跨项目复用的场景。何时选模块化Modular视频有清晰的场景切点——每个场景是时间轴上的独立片段部分场景体量大超过 100 行标记或有大量脚本化动画场景可复用kinetic 片头、结尾 logo lockup、过渡转场视频在多个视觉片段之上有一条连续音轨——音频留在根节点视觉片段作为子组合希望独立创作/迭代场景直接单独预览某个子组合文件。两种架构间重构转换是机械且可逆的。把单体场景提升为子组合的步骤将场景的标记 局部 CSS 父时间轴的对应片段包裹进template保存为compositions/scene.html用插槽div>!doctype html html langen head meta charsetUTF-8 / script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script style body { margin: 0; background: #000; } #root { position: relative; width: 1920px; height: 1080px; overflow: hidden; } /* Sub-comp slots stretch to fill the root. */ [data-composition-idroot] div[data-composition-src] { position: absolute; inset: 0; } /style /head body div idroot >!-- index.html (host) -- div idel-final >!-- compositions/act2-merged.html -- template div>ls compositions/ 2/dev/null echo modular || echo monolithic单体项目新增场景作为内联section classclip元素使用不重叠的data-start和合理的data-track-index并扩展现有的单条时间轴。模块化项目遵循既有模式——在compositions/下新增文件、在index.html中加插槽、保持根时间轴轻薄。不要在兄弟场景都是子组合的情况下开始把新场景内联进index.html——这种不一致是“最坏中的最坏”。若单体项目需要第三个或第四个场景切点先把每个场景提升为子组合再继续增加。转换是机械的见上文“两种架构间重构”。挑选插槽的data-start/data-duration时优先延续既有的排序约定相邻起点、为交叉淡化刻意重叠。除非真的需要并行视觉层否则不要引入新轨道索引——大多数顺序场景项目只用一个视觉轨道。写新场景时组合属性对照># 1) style script 主标记都在 template 内部 grep -n style\|script\|template compositions/scene.html # 2) 宿主 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），仅供参考
HyperFrames 项目组合架构：从单体 HTML 到模块化子组合的工程实践
HyperFrames 项目组合架构从单体 HTML 到模块化子组合的工程实践【免费下载链接】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本指南围绕 HyperFrames 的核心文档 composition-patterns.md 展开系统讲解视频项目从单体index.html到模块化子组合的架构演进、编排器设计、四种子组合原型的适用场景与命名规范。你将掌握一套可直接落地的组合架构决策框架与可复制的代码模板并了解它在 OpenMontage 视频生产管线中的接入方式hyperframes_compose.py。一、两种架构Monolithic 与 ModularHyperFrames 的项目有两种组织方式它们的运行时契约完全相同——都基于data-*属性 window.__timelines[id]注册表驱动。区别纯粹是结构性的不涉及行为差异。维度Monolithic单文件Modular子组合项目布局仅index.htmlindex.htmlcompositions/scene.html每场景一个文件场景存放位置根节点下内联的section classclip兄弟元素每个场景是独立文件内容包裹在template中时间轴注册根节点data-composition-id对应一条时间轴根时间轴通常近乎为空 每个子组合一条时间轴各自以自身id为键路由入口minimal-composition.mdsub-compositions.md何时选单体Monolithic整段视频是一个连续场景没有硬切场景间共享重状态——一个贯穿全片的 canvas/WebGL 上下文、一个跨多个节拍持续形变的 SVG总规模小约 200–400 行标记 脚本没有需要跨项目复用的场景。何时选模块化Modular视频有清晰的场景切点——每个场景是时间轴上的独立片段部分场景体量大超过 100 行标记或有大量脚本化动画场景可复用kinetic 片头、结尾 logo lockup、过渡转场视频在多个视觉片段之上有一条连续音轨——音频留在根节点视觉片段作为子组合希望独立创作/迭代场景直接单独预览某个子组合文件。两种架构间重构转换是机械且可逆的。把单体场景提升为子组合的步骤将场景的标记 局部 CSS 父时间轴的对应片段包裹进template保存为compositions/scene.html用插槽div>!doctype html html langen head meta charsetUTF-8 / script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script style body { margin: 0; background: #000; } #root { position: relative; width: 1920px; height: 1080px; overflow: hidden; } /* Sub-comp slots stretch to fill the root. */ [data-composition-idroot] div[data-composition-src] { position: absolute; inset: 0; } /style /head body div idroot >!-- index.html (host) -- div idel-final >!-- compositions/act2-merged.html -- template div>ls compositions/ 2/dev/null echo modular || echo monolithic单体项目新增场景作为内联section classclip元素使用不重叠的data-start和合理的data-track-index并扩展现有的单条时间轴。模块化项目遵循既有模式——在compositions/下新增文件、在index.html中加插槽、保持根时间轴轻薄。不要在兄弟场景都是子组合的情况下开始把新场景内联进index.html——这种不一致是“最坏中的最坏”。若单体项目需要第三个或第四个场景切点先把每个场景提升为子组合再继续增加。转换是机械的见上文“两种架构间重构”。挑选插槽的data-start/data-duration时优先延续既有的排序约定相邻起点、为交叉淡化刻意重叠。除非真的需要并行视觉层否则不要引入新轨道索引——大多数顺序场景项目只用一个视觉轨道。写新场景时组合属性对照># 1) style script 主标记都在 template 内部 grep -n style\|script\|template compositions/scene.html # 2) 宿主 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），仅供参考