HyperFrames Registry 提供可复用的区块(blocks)和组件(components),通过 CLI 安装到项目中。区块是独立的子合成,拥有自己的尺寸、时长和时间线,需在宿主合成中用 data-composition-src 引入;组件是效果片段,没有独立尺寸,直接粘贴进宿主合成的 HTML。
安装:hyperframes add <name> 可按精确名称安装,若名称不匹配但为标签,则安装所有带该标签的区块;注册表依赖会先安装。区块默认装到 compositions/<name>.html,组件默认装到 compositions/components/<name>.html,路径可在 hyperframes.json 配置。示例:hyperframes add data-chart;hyperframes add grain-overlay;hyperframes add captions;hyperframes add shimmer-sweep --dir .;hyperframes add data-chart --json;hyperframes add data-chart --no-clipboard。add 仅适用于区块和组件,示例请用 hyperframes init <dir> --example <name>。
接线区块:在宿主 index.html 中用 data-composition-src 引入,需设置 data-composition-id(与区块内部 ID 一致)、data-start、data-duration、data-width、data-height、data-track-index 等属性。
接线组件:把组件 HTML 粘进合成标记,CSS 粘进样式,JS 粘进脚本(如有),若暴露 GSAP 时间线集成则按注释添加调用。
发现:优先用 CLI 搜索,如 npx hyperframes catalog --query "..."。搜索默认按名称、标题、描述中的词汇排序;--on-device 按语义排序,需一次性下载模型;查询需用英文,其他语言会产生无可搜索词。catalog 可加 --type block/--type component、--tag、--json、--human-friendly 过滤。
限制:add 需要联网,即使昨天装过的条目也要重新获取文件;清单缓存可在 24 小时刷新失败后继续服务搜索。若搜索无合适结果,可用 hyperframes feedback --search-miss 报告缺口。可访问原始清单:curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json。每条目的 registry-item.json 包含 name、type、title、description、tags、dimensions(仅区块)、duration(仅区块)和文件列表。