SuperAPI AI 工具集

hyperframes-registry

前端与建站

查看项目

更新于 10-16 07:27

技能介绍

用途:该技能围绕 HyperFrames 注册表,帮助安装可复用的 blocks 和 components,并说明如何把它们接入现有 HyperFrames 合成。当出现 hyperframes add 输出、提到 block、component 或 hyperframes.json,或需要将已安装项接线到合成时使用。

主要能力:注册表提供两类内容。Blocks 为独立子合成,拥有自己的尺寸、时长和时间线,通过宿主编排中的 data-composition-src 引入;Components 为无独立尺寸的效果片段,直接粘贴进宿主编排的 HTML。安装后 CLI 会输出写入的文件路径和供粘贴到宿主合成的片段。该片段只是起点,接线 blocks 时还需补上 data-composition-id(须与 block 内部合成 ID 一致)、data-start 和 data-track-index 属性。hyperframes add 仅适用于 blocks 和 components;examples 需使用 hyperframes init <dir> --example <name>。

使用方式:常用命令包括 hyperframes add data-chart(安装 block)、hyperframes add grain-overlay(安装 component)、hyperframes add shimmer-sweep --dir .(指定项目)、hyperframes add data-chart --json(机器可读输出)、hyperframes add data-chart --no-clipboard(跳过剪贴板,适用于 CI/headless)。默认安装位置:blocks 为 compositions/<name>.html,components 为 compositions/components/<name>.html,可在 hyperframes.json 中通过 paths.blocks、paths.components、paths.assets 配置,registry 字段可指定注册表地址。接线 blocks 使用带 data-composition-src、data-composition-id、data-start、data-duration、data-width、data-height、data-track-index 的元素。接线 components 时需读取已安装文件,复制 HTML 元素、style 块,并在时间线代码前加入 script 内容,若片段提供 GSAP 时间线集成则补充相应调用。

发现方式:可通过 curl 读取注册表清单 registry.json,每个条目的 registry-item.json 包含 name、type、title、description、tags、dimensions(仅 blocks)、duration(仅 blocks)和文件列表。

限制:资料未提供价格、收费、性能或效果说明。以上命令与属性需按原文使用;更完整的安装位置、接线细节与发现过滤说明见对应文档,本次未提供具体内容。