framevideo-registry

FrameVideo レジストリ

使用する場面

次の場合にこのスキルを使用します。

• ブロックのインストール — framevideo add <block-name> を実行して、再利用可能なコンポジションをインストールします
• コンポーネントのインストール — framevideo add <component-name> を実行して、エフェクトのスニペットをインストールします
• ブロックの組み込み — インストールしたブロックをホストコンポジションに統合します
• コンポーネントの統合 — コンポーネントのスニペットを既存の HTML に貼り付けます
• レジストリの検索 — 利用可能なブロックやコンポーネントを探します
• 設定 — framevideo.json のレジストリ設定を管理します

使用しない場面

次の場合はこのスキルを使用しないでください。

• サンプルテンプレート — 代わりに framevideo init --example <name> を使用します
• カスタムコンポジションの作成 — 代わりに framevideo スキルを使用します
• アセットの前処理 — 代わりに framevideo-media を使用します
• CLI コマンド（init、render など） — 代わりに framevideo-cli を使用します

---

クイックスタート

ブロックをインストールして組み込む

# 1. Install block
npx framevideo add data-chart

# 2. Wire into host composition (index.html)
<div
  data-composition-id="data-chart"
  data-composition-src="compositions/data-chart.html"
  data-start="2"
  data-duration="5"
  data-track-index="3"
></div>

コンポーネントをインストールして統合する

# 1. Install component
npx framevideo add grain-overlay

# 2. Copy snippet from CLI output
# 3. Paste into your composition HTML
# Component snippets merge directly into HTML (no data-composition-src)

---

ブロックとコンポーネントの違い

種類	説明	インストール先	使用方法
ブロック	単独で使用できるサブコンポジション	compositions/<name>.html	data-composition-src で読み込みます
コンポーネント	エフェクトのスニペット	compositions/components/<name>.html	HTML に直接貼り付けます

---

このスキルを使用する場面

• ユーザーが framevideo add、「ブロック」、「コンポーネント」、または framevideo.json に言及したとき
• framevideo add の出力（ファイルパス、クリップボードのスニペット）がセッションに表示されたとき
• インストールしたアイテムを既存のコンポジションに組み込む必要があるとき
• レジストリで利用可能なアイテムを確認したいとき

クイックリファレンス

framevideo add data-chart              # install a block
framevideo add grain-overlay           # install a component
framevideo add shimmer-sweep --dir .   # target a specific project
framevideo add data-chart --json       # machine-readable output
framevideo add data-chart --no-clipboard  # skip clipboard (CI/headless)

インストール後、CLI は書き込んだファイルと、ホストコンポジションに貼り付けるスニペットを表示します。このスニペットは出発点です。ブロックを組み込む際は、data-composition-id（ブロック内部のコンポジション ID と一致させる必要があります）、data-start、data-track-index 属性を追加してください。

注：framevideo add はブロックとコンポーネントにのみ使用できます。サンプルには、代わりに framevideo init <dir> --example <name> を使用してください。

インストール先

ブロックはデフォルトで compositions/<name>.html にインストールされます。 コンポーネントはデフォルトで compositions/components/<name>.html にインストールされます。

これらのパスは framevideo.json で設定できます。

{
  "registry": "https://raw.githubusercontent.com/chanjing/framevideo/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 がある場合はスクリプトに貼り付けます。

1. インストールしたファイルを読み込みます（例：compositions/components/grain-overlay.html）
2. HTML 要素をコンポジションの <div data-composition-id="..."> にコピーします
3. <style> ブロックをコンポジションのスタイルにコピーします
4. <script> の内容があれば、コンポジションのスクリプトにコピーします（タイムラインのコードより前）
5. コンポーネントが GSAP タイムラインとの連携に対応している場合（スニペット内のコメントブロックを参照）、その呼び出しをタイムラインに追加します

詳細は wiring-components.md を参照してください。

検索

利用可能なアイテムを確認します。

# Read the registry manifest
curl -s https://raw.githubusercontent.com/chanjing/framevideo/main/registry/registry.json

各アイテムの registry-item.json には、名前、種類、タイトル、説明、タグ、サイズ（ブロックのみ）、再生時間（ブロックのみ）、ファイル一覧が含まれています。

種類やタグで絞り込む方法については、discovery.md を参照してください。