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>ブロックを構成のスタイルにコピーします- スクリプトの内容（ある場合）を構成のスクリプト（タイムラインコードの前）にコピーします
- コンポーネントがGSAPタイムライン統合を公開している場合（スニペット内のコメントブロックを参照）、それらの呼び出しをタイムラインに追加します
詳細は wiring-components.md を参照してください。
発見
CLIを主要な発見インターフェースとして使用します。意図で検索してからブラウズしてください： レジストリには目視でスキャンできるよりも多くのアイテムが含まれているため、リストして名前やタグでマッチングするのは遅い方法であり、作成者の表現があなたと異なる場合には常に失敗します。
# ビートが行うべきことに対してカタログ全体をランク付け
npx hyperframes catalog --query "見出しを一行ずつ表示する"
npx hyperframes add caption-clip-wipe
検索はローカルで行われ、何も送信しません。デフォルトではアイテムの名前、タイトル、説明と共有される語彙でランク付けされるため、あなたの言葉を再利用するアイテムのみが見つかります。--on-device は代わりに意味でランク付けします（1回限りのモデルダウンロード後）。--json を使用すると、エンベロープにどの階層が回答したかが示されるため、ランク付けが行われたと仮定するのではなく、それを確認してください。
インストール可能性はランク付けの後、その前に適用されるのではありません: ベクターが運ぶがこのレジストリが提供できない名前は結果から削除され、dropped にカウントされるため、dropped がゼロでない場合は2つが異なる世代であることを意味します。オフライン階層、同意ゲート、および古いインデックスの更新方法については /hyperframes-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ブロック、トランジション、ローワーサード、または再利用可能なコンポーネント）を作成し、それを上流のプルリクエストとして送信するには — 既存のものをインストールするのではなく — contributing.md にある、アイデア → スキャフォールド → 構築 → 検証 → プレビュー → 出荷の完全なワークフローに従ってください。コピーペースト可能なスターターテンプレート（キャプション / VFX / コンポーネント / registry-item.json）は templates.md にあります。