HyperFrames 注册表
该注册表提供了可通过 hyperframes add <name> 安装的可复用块和组件。
- 块 — 独立的子合成（有自己的尺寸、时长和时间线）。通过宿主合成中的
data-composition-src包含。 - 组件 — 效果片段（没有自己的尺寸）。直接粘贴到宿主合成的 HTML 中。
快速参考
hyperframes add data-chart # 安装一个块
hyperframes add grain-overlay # 安装一个组件
hyperframes add captions # 安装所有标记为 captions 的块
hyperframes add shimmer-sweep --dir . # 指定目标项目
hyperframes add data-chart --json # 机器可读输出
hyperframes add data-chart --no-clipboard # 跳过剪贴板（CI/无头模式）
安装后，CLI 会打印写入的文件以及要粘贴到宿主合成中的片段。该片段只是起点——接入块时，你需要添加 data-composition-id（必须与块的内部合成 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 包含它们：
<div
data-composition-id="data-chart"
data-composition-src="compositions/data-chart.html"
data-start="2"
data-duration="15"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
关键属性：
data-composition-src— 块 HTML 文件的路径data-composition-id— 必须与块的内部 ID 匹配data-start— 块在宿主时间线中出现的时间（秒）data-duration— 块播放的时长data-width/data-height— 块画布尺寸data-track-index— 图层顺序（数值越大越靠前）
详见 wiring-blocks.md。
接入组件
组件是片段——将其 HTML 粘贴到你的合成标记中，CSS 粘贴到样式块中，JS（如果有）粘贴到脚本中：
- 读取已安装的文件（例如
compositions/components/grain-overlay.html） - 将 HTML 元素复制到你的合成的
<div data-composition-id="...">中 - 将
<style>块复制到你的合成的样式中 - 将任何
<script>内容复制到你的合成脚本中（时间线代码之前） - 如果组件暴露了 GSAP 时间线集成（参见片段中的注释块），将这些调用添加到你的时间线中
发现
使用 CLI 作为主要发现界面：
npx hyperframes catalog
npx hyperframes catalog --type block
npx hyperframes catalog --type component
npx hyperframes catalog --type block --tag social
npx hyperframes catalog --json
npx hyperframes catalog --human-friendly
普通表格和 --json 模式仅列出匹配项；使用 hyperframes add <name> 安装选中的名称。--human-friendly 打开交互式选择器并立即安装所选项目。在 CI 或代理工作流中，首选 --json 后跟显式的 add。
如果 CLI 无法访问配置的注册表，可以检查原始清单作为后备：
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
每个项目的 registry-item.json 包含：名称、类型、标题、描述、标签、尺寸（仅块）、时长（仅块）和文件列表。
详见 discovery.md 了解按类型和标签筛选的详细信息。
贡献新的块或组件
要编写一个新的注册表项目（字幕样式、VFX 块、过渡、下三分之一或可复用组件）并将其作为上游 PR 提交——而不是安装现有项目——请遵循 contributing.md 中的完整 创意 → 脚手架 → 构建 → 验证 → 预览 → 发布 工作流。启动模板（字幕 / VFX / 组件 / registry-item.json）的复制粘贴版本在 templates.md 中。