mcpField
H
hyperframes-registry

hyperframes-registry

github.com/calesthio创意与媒体73.0k1.1k 次安装1 天前更新
代码仓库

关于 hyperframes-registry

HyperFrames Registry 是可通过 hyperframes 命令行安装到项目中的可复用区块与组件目录。区块提供独立合成，组件则提供可插入宿主合成的效果代码片段。

主要功能

  1. 01通过 hyperframes add 安装区块与组件
  2. 02包含尺寸和时间线的独立合成
  3. 03供宿主合成使用的效果片段
  4. 04可配置的安装路径
  5. 05注册表清单及条目元数据

适用场景

  1. 01向合成添加图表区块
  2. 02在 HTML 中插入效果片段
  3. 03将注册表文件安装到指定目录
  4. 04按类型或标签查看注册表条目

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/calesthio/openmontage --skill hyperframes-registry

安装后在 Claude Code 中输入/hyperframes-registry确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

examples/
add-block.md
add-component.md
references/
contributing.md
demo-html-pattern.md
discovery.md
install-locations.md
templates.md
wiring-blocks.md
wiring-components.md

详细介绍

HyperFrames 注册表

此注册表提供可通过 hyperframes add <name> 安装的可复用区块和组件。

  • 区块 — 独立的子合成（拥有自己的尺寸、时长和时间线）。通过主合成中的 data-composition-src 引入。
  • 组件 — 效果片段（没有自己的尺寸）。直接粘贴到主合成的 HTML 中。

快速参考

hyperframes add data-chart              # install a block
hyperframes add grain-overlay           # install a component
hyperframes add shimmer-sweep --dir .   # target a specific project
hyperframes add data-chart --json       # machine-readable output
hyperframes add data-chart --no-clipboard  # skip clipboard (CI/headless)

安装后，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"
  }
}

完整详情请参阅 install-locations.md。

连接区块

区块是独立的合成 — 通过主 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（如有）粘贴到脚本中：

  1. 读取已安装的文件（例如 compositions/components/grain-overlay.html）
  2. 将 HTML 元素复制到合成的 <div data-composition-id="..."> 中
  3. 将 <style> 块复制到合成的样式中
  4. 将任何 <script> 内容复制到合成的脚本中（放在时间线代码之前）
  5. 如果组件提供 GSAP 时间线集成（请参阅代码片段中的注释块），将相应调用添加到时间线中

完整详情请参阅 wiring-components.md。

发现

浏览可用条目：

# Read the registry manifest
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。

评论

支持 Markdown