hyperframes-registry

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

HyperFrames Registry

HyperFrames 注册表

The registry provides reusable blocks and components installable via

hyperframes add <name>

Blocks — standalone sub-compositions (own dimensions, duration, timeline). Included via
```
data-composition-src
```
in a host composition.
Components — effect snippets (no own dimensions). Pasted directly into a host composition's HTML.

注册表提供可通过

hyperframes add <name>

命令安装的可复用块（Blocks）和组件（Components）。

Blocks（块） — 独立的子合成项目（拥有自身尺寸、时长、时间轴）。通过宿主合成项目中的
```
data-composition-src
```
引入。
Components（组件） — 特效代码片段（无自身尺寸）。直接粘贴到宿主合成项目的HTML中。

When to use this skill

何时使用该技能

User mentions
```
hyperframes add
```
, "block", "component", or
```
hyperframes.json
```
Output from
```
hyperframes add
```
appears in the session (file paths, clipboard snippet)
You need to wire an installed item into an existing composition
You want to discover what's available in the registry

用户提及
```
hyperframes add
```
、"block"、"component"或
```
hyperframes.json
```
会话中出现
```
hyperframes add
```
的输出内容（文件路径、剪贴板代码片段）
需要将已安装项集成到现有合成项目中
想要发现注册表中可用的资源

Quick reference

快速参考

bash

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)

After install, the CLI prints which files were written and a snippet to paste into your host composition. The snippet is a starting point — you'll need to add

data-composition-id

(must match the block's internal composition ID),

data-start

, and

data-track-index

attributes when wiring blocks.

Note:

hyperframes add

only works for blocks and components. For examples, use

hyperframes init <dir> --example <name>

instead.

bash

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>

命令。

Install locations

安装位置

Blocks install to

compositions/<name>.html

by default. Components install to

compositions/components/<name>.html

by default.

These paths are configurable in

hyperframes.json

json

{
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  }
}

See install-locations.md for full details.

块默认安装到

compositions/<name>.html

路径。组件默认安装到

compositions/components/<name>.html

路径。

这些路径可在

hyperframes.json

中配置：

json

{
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  }
}

详情请参阅install-locations.md。

Wiring blocks

集成块

Blocks are standalone compositions — include them via

data-composition-src

in your host

index.html

html

<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>

Key attributes:

```
data-composition-src
```
— path to the block HTML file
```
data-composition-id
```
— must match the block's internal ID
```
data-start
```
— when the block appears in the host timeline (seconds)
```
data-duration
```
— how long the block plays
```
data-width
```
/
```
data-height
```
— block canvas dimensions
```
data-track-index
```
— layer ordering (higher = in front)

See wiring-blocks.md for full details.

块是独立的合成项目——通过宿主

index.html

中的

data-composition-src

引入：

html

<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。

Wiring components

集成组件

Components are snippets — paste their HTML into your composition's markup, their CSS into your style block, and their JS into your script (if any):

Read the installed file (e.g.,

compositions/components/grain-overlay.html

)

Copy the HTML elements into your composition's
```
<div data-composition-id="...">
```
Copy the
```
<style>
```
block into your composition's styles
Copy any
```
<script>
```
content into your composition's script (before your timeline code)
If the component exposes GSAP timeline integration (see the comment block in the snippet), add those calls to your timeline

See wiring-components.md for full details.

组件是代码片段——将其HTML粘贴到合成项目的标记中，CSS粘贴到样式块中，JS（如果有）粘贴到脚本中：

读取已安装的文件（例如

compositions/components/grain-overlay.html

）

将HTML元素复制到合成项目的
```
<div data-composition-id="...">
```
中
将
```
<style>
```
块复制到合成项目的样式中
将任何
```
<script>
```
内容复制到合成项目的脚本中（放在时间轴代码之前）
如果组件支持GSAP时间轴集成（请参阅代码片段中的注释块），将这些调用添加到你的时间轴中

详情请参阅wiring-components.md。

Discovery

资源发现

Browse available items:

bash

undefined

浏览可用资源：

bash

undefined

Read the registry manifest

curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json


Each item's `registry-item.json` contains: name, type, title, description, tags, dimensions (blocks only), duration (blocks only), and file list.

See [discovery.md](./references/discovery.md) for details on filtering by type and tags.

curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json


每个项的`registry-item.json`包含：名称、类型、标题、描述、标签、尺寸（仅块）、时长（仅块）以及文件列表。

详情请参阅[discovery.md](./references/discovery.md)了解按类型和标签筛选的方法。