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 が設定されたレジストリに到達できない場合は、フォールバックとして raw マニフェストを検査します：
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 にあります。