HyperFrames 註冊表
註冊表提供可透過 hyperframes add <name> 安裝的可重用區塊與元件。
- 區塊 — 獨立的子組合（擁有自己的尺寸、持續時間與時間軸）。在主組合中以
data-composition-src方式引入。 - 元件 — 效果片段（沒有自己的尺寸）。直接貼到主組合的 HTML 中。
快速參考
hyperframes add data-chart # 安裝一個區塊
hyperframes add grain-overlay # 安裝一個元件
hyperframes add captions # 安裝所有標籤為 captions 的區塊
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。
探索
使用 CLI 作為主要的探索介面：
npx hyperframes catalog
npx hyperframes catalog --type block
npx hyperframes catalog --type component
npx hyperframes catalog --type block --tag social
npx hyperframes catalog --json
npx hyperframes catalog --human-friendly
一般表格模式和 --json 模式只列出符合的項目；使用 hyperframes add <name> 安裝選中的名稱。--human-friendly 會開啟互動式挑選器並立即安裝選擇的項目。在 CI 或代理工作流程中，建議使用 --json 後再執行明確的 add。
如果 CLI 無法連線到設定的註冊表，可透過以下方式檢查原始清單作為後備：
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
每個項目的 registry-item.json 包含：名稱、類型、標題、描述、標籤、尺寸（僅區塊）、持續時間（僅區塊）以及檔案清單。
詳情請參閱 discovery.md，了解如何按類型和標籤進行篩選。
貢獻新區塊或元件
若要創作一個新的註冊表項目（字幕樣式、VFX 區塊、轉場、下三分之一或可重用元件）並將其以 Pull Request 的形式提交到上游——而不是安裝既有的項目——請遵循 contributing.md 中的完整構想 → 建置雛形 → 建構 → 驗證 → 預覽 → 發布工作流程。入門模板（字幕／VFX／元件／registry-item.json）可在 templates.md 中找到。