mcpField
D
docs-demo

docs-demo

github.com/remotion-dev開発68.6k2.5k 回インストール今日更新
リポジトリ

docs-demo について

ドキュメントに Remotion のインタラクティブなコンポジションを追加するリポジトリ向けスキルです。React デモの作成、再生設定やコントロールの登録、MDX への埋め込みを案内します。

主な機能

  1. 01React デモコンポーネントの作成
  2. 02デモ情報の登録
  3. 03インタラクティブな操作項目
  4. 04デモ一覧への登録
  5. 05MDX への埋め込み

活用シーン

  1. 01ドキュメントへの再生可能なコンポジション追加
  2. 02デモパラメーターの操作項目化
  3. 03登録済みデモの MDX への埋め込み

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/remotion-dev/remotion --skill docs-demo

インストール後、Claude Code で/docs-demoを入力して読み込まれたか確認します。

詳細

ドキュメントにインタラクティブデモを追加する

インタラクティブデモは、@remotion/player を使ってドキュメントページ内に Remotion コンポジションをインラインで表示します。packages/docs/components/demos/ に配置します。

エフェクトデモは別の仕組みです。<EffectsDemo type="effects-..." /> を使用し、汎用的な <Demo> のオプション配列ではなく、実際のエフェクトの schema を使って packages/docs/components/effects-demos/registry.ts に登録してください。

手順

  1. コンポーネントを作成する：packages/docs/components/demos/ に作成します（例：MyDemo.tsx）。useCurrentFrame() や useVideoConfig() などの Remotion フックを使用する標準的な React コンポーネントにしてください。

  2. デモを登録する：packages/docs/components/demos/types.ts に登録します。

    • コンポーネントをインポートします
    • 次のフィールドを持つ DemoType オブジェクトをエクスポートします。
      • id：<Demo type="..." /> で使用する一意の文字列
      • comp：React コンポーネント
      • compWidth / compHeight：キャンバスのサイズ（例：1280x720）
      • fps：フレームレート（通常は30）
      • durationInFrames：アニメーションの長さ
      • autoPlay：自動再生するかどうか
      • options：インタラクティブコントロールの配列（空の [] でも可）

  3. デモ配列に追加する：packages/docs/components/demos/index.tsx に追加します。

    • ./types からデモ定数をインポートします
    • demos 配列に追加します

  4. MDX で使用する：<Demo type="your-id" />

オプション

オプションを追加すると、プレーヤーの下にインタラクティブコントロールが表示されます。各オプションには name と optional（'no'、'default-enabled'、または 'default-disabled'）が必要です。

対応している型は次のとおりです。

  • type: 'numeric' — min、max、step、default を指定するスライダー
  • type: 'boolean' — default を指定するチェックボックス
  • type: 'enum' — values 配列と default を指定するドロップダウン
  • type: 'string' — default を指定するテキスト入力

オプションの値は inputProps としてコンポーネントに渡されます。通常の React プロパティとしてアクセスできます。

登録例

export const myDemo: DemoType = {
  comp: MyDemoComp,
  compHeight: 720,
  compWidth: 1280,
  durationInFrames: 150,
  fps: 30,
  id: 'my-demo',
  autoPlay: true,
  options: [],
};

コメント

Markdown 対応