编写 Video 模板
打包一个具有稳定时间线、本地资产和编辑器变量的 HyperFrames 合成项目。
Video 模板是一个在 Video 界面中打开的 HyperFrames 项目。根入口必须是 index.html，manifest 必须将 category 和 surface 都设置为 video。
必需的合成结构
<html data-composition-variables='[
{"id":"title","type":"string","label":"Title","default":"Product Reveal"},
{"id":"accent","type":"color","label":"Accent","default":"#3a9fca"}
]'>
<body>
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="6">
<section id="scene-main" class="clip" data-start="0" data-duration="6" data-track-index="1" style="color: var(--accent)">
<h1 id="title" data-var-text="title">Product Reveal</h1>
</section>
</div>
</body>
</html>
window.__timelines = window.__timelines || {};
window.__timelines.main = gsap.timeline({ paused: true });
每个变量都需要 id、type、label 和 default。enum 类型还需要 options。应使用 data-var-text 与 data-var-src 将变量直接绑定到文字或媒体。
将运行时留在包内
Video Studio 会管理预览，不要从模板说明中启动第二个预览服务。所有合成资产应位于包内，并使用相对路径，使会话副本可以独立运行。
导入前执行严格检查：
npx --yes hyperframes@0.7.52 check . --strict --at-transitions
发布检查清单
index.html位于压缩包根目录。- manifest 指定
category: "video"和surface: "video"。 data-composition-variables非空且完整。- 每个场景都有稳定标识与时间数据。
- 媒体位于模板包内，所有路径均为相对路径。
- 导入前通过严格 HyperFrames 检查。
- 新建会话副本可预览，并能正确修改变量。