用途:该技能面向 HyperFrames 的注册表工作流,帮助安装并接入可复用的区块与组件。区块是独立子合成,拥有自己的尺寸、时长与时间线,通过宿主合成中的 data-composition-src 引入;组件是效果片段,没有独立尺寸,直接粘贴进宿主合成的 HTML。
主要能力:安装注册表条目、发现可用条目、把已安装项接入现有合成。触发场景包括用户提到 hyperframes add、block、component 或 hyperframes.json,会话中出现 hyperframes add 的输出(文件路径、剪贴板片段),需要把已安装项接入合成,或想查看注册表中有什么。
使用方式:常用命令为 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(须与区块内部合成 ID 一致)、data-start、data-track-index 等属性。注意 hyperframes add 只适用于区块和组件;示例请改用 hyperframes init <dir> --example <name>。
安装位置:区块默认安装到 compositions/<name>.html,组件默认安装到 compositions/components/<name>.html,可在 hyperframes.json 中配置 registry 与 paths(blocks、components、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(层级顺序,越大越靠前)。
接入组件:读取已安装文件,把 HTML 元素复制进合成的 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(仅区块)与文件列表。
限制:资料未提供收费、价格、平台支持范围与效果保证等信息,暂未提供。