HyperFrames レジストリ
このレジストリは、hyperframes add <名前> でインストール可能な再利用可能なブロックとコンポーネントを提供します。
- ブロック — スタンドアロンのサブコンポジション（独自の寸法、長さ、タイムラインを持ちます）。ホストコンポジション内で
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 <名前> を使用してください。
インストール場所
ブロックはデフォルトで compositions/<名前>.html にインストールされます。
コンポーネントはデフォルトで compositions/components/<名前>.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 を参照してください。