HyperFrames 註冊
註冊提供了可透過 hyperframes add <name> 安裝的可重複使用區塊與元件。
- 區塊 — 獨立的子創作（擁有自己的尺寸、時長、時間軸）。透過宿主創作中的
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": "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 貼入指令碼（若有）：
- 讀取已安裝的檔案（例如
compositions/components/grain-overlay.html） - 將 HTML 元素複製到創作的
<div data-composition-id="...">中 - 將
<style>區塊複製到創作的樣式中 - 將任何
<script>內容複製到創作的指令碼中（放在時間軸程式碼之前） - 若元件匯出 GSAP 時間軸整合（請參閱片段中的註解區塊），將這些呼叫加入你的時間軸
完整說明請參閱 wiring-components.md。
探索
瀏覽可用項目：
# 讀取註冊清單
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
每個項目的 registry-item.json 包含：名稱、類型、標題、描述、標籤、尺寸（僅區塊）、時長（僅區塊）與檔案清單。
關於依類型和標籤篩選的說明，請參閱 discovery.md。