用途
HyperFrames Registry 提供可复用的区块（blocks）与组件（components），可通过 hyperframes add 命令安装，并将其接入到 HyperFrames 合成中。
主要能力
区块（Blocks）：独立的子合成，拥有自己的尺寸、时长和时间线，通过宿主合成中的 data-composition-src 引入。
组件（Components）：效果片段，不含自身尺寸，需将 HTML 直接粘贴到宿主合成的标记中，CSS 粘贴到样式块，JS 粘贴到脚本中。
安装命令示例：
hyperframes add data-chart # 安装区块
hyperframes add grain-overlay # 安装组件
hyperframes add shimmer-sweep --dir . # 指定项目目录
hyperframes add data-chart --json # 机器可读输出
hyperframes add data-chart --no-clipboard # 跳过剪贴板（CI/无头环境）
安装后，CLI 会打印写入的文件以及一段可粘贴到宿主合成的代码片段。该片段仅为起点，接线区块时还需添加 data-composition-id、data-start、data-track-index 等属性。
注意：hyperframes add 仅适用于区块和组件；如需示例，请使用 hyperframes init <dir> --example <name>。
安装位置
区块默认安装到 compositions/<name>.html，组件默认安装到 compositions/components/<name>.html。路径可在 hyperframes.json 中配置：
{
"registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
"paths": {
"blocks": "compositions",
"components": "compositions/components",
"assets": "assets"
}
}
接线区块
区块通过宿主 index.html 中的 data-composition-src 引入，关键属性包括：
- data-composition-src：区块 HTML 文件路径
- data-composition-id：必须与区块内部 ID 一致
- data-start：区块在宿主时间线中出现的时刻（秒）
- data-duration：区块播放时长
- data-width / data-height：区块画布尺寸
- data-track-index：图层顺序（数值越大越靠前）
接线组件
读取已安装文件（如 compositions/components/grain-overlay.html），将其 HTML 元素复制到合成的 <div data-composition-id="..."> 中，将 <style> 块复制到样式，将 <script> 内容复制到脚本（位于时间线代码之前）；若组件提供 GSAP 时间线集成（见片段注释块），将相应调用加入时间线。
发现
浏览可用项：
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
每个项的 registry-item.json 包含 name、type、title、description、tags、dimensions（仅区块）、duration（仅区块）和文件列表。
贡献新项
若要创作新的注册表项并作为上游 PR 提交，而非安装已有项，请遵循 contributing.md 中的完整工作流：构思 → 脚手架 → 构建 → 验证 → 预览 → 发布。模板位于 templates.md。