remotion-bits

Remotion Bits

まずは実際に動作する Remotion Bits の例を使って構築し、例だけでは足りない場合に限り、プリミティブを使用してください。

デフォルトのワークフロー

1. ユーザーのビジュアル上の目標、モーションスタイル、またはシーンの説明を使って、find_remotion_bits で検索します。
2. 最適な候補を1つか2つ、fetch_remotion_bit で取得します。
3. プリミティブを組み合わせる前に、最も近い例を調整します。
4. 複数の例が該当する場合は、要望を満たす中で最もシンプルなものを選びます。
5. 複数のステップで構成される場合、カメラ主体の場合、またはプレゼンテーション形式の場合は、Scene3D の例を優先します。
6. ドキュメントのビットを調整するときは、レスポンシブなサイズ設定、テーマカラーの使用、自己完結型の例の構造を維持します。

ドキュメントのビットを、動作するパターンの主要なライブラリとして扱ってください。必要な構成、タイミングモデル、レイアウト構造が既存のビットで得られるかを確認してから、プリミティブを使用してください。

フォールバックの順序

1. まず MCP を使います。 発見には find_remotion_bits を、ソース全体の取得には fetch_remotion_bit を使います。
2. 次に CLI を使います。 npx remotion-bits find "hero intro" --tag scene-3d --json と npx remotion-bits fetch bit-fade-in --json を使います。
3. 最後にドキュメントを直接確認します。 docs/src/bits/catalog.ts と docs/src/bits/examples/** を確認して、最も近い例を手動で調整します。

MCP を利用できる場合は、CLI より先に使用してください。CLI を利用できる場合は、ファイルを直接読むより先に使用してください。

CLI と MCP のセットアップ

リポジトリ内のワークフローを使わない場合は、公開パッケージを直接使用します。

# No install
npx remotion-bits find 3d cards
npx remotion-bits fetch bit-fade-in --json

# Global install
npm i -g remotion-bits
remotion-bits find 3d cards
remotion-bits fetch bit-fade-in --json

同じ方法で、公開パッケージから MCP サーバーを起動します。

# No install
npx remotion-bits mcp

# Global install
remotion-bits mcp

エージェントまたは MCP クライアントで stdio コマンドが必要な場合は、次のいずれかを指定します。

{
  "command": "npx",
  "args": ["-y", "remotion-bits", "mcp"]
}

{
  "command": "remotion-bits",
  "args": ["mcp"]
}

このリポジトリ内では、同等のリポジトリ内コマンドを引き続き使用できます。

npm run bits:find -- --query "hero intro" --tag scene-3d --json
npm run bits:fetch -- bit-fade-in --json
npm run mcp:bits

効果的な検索方法

• ビジュアル上の結果で検索します：flying camera through cards、counter with confetti、typewriter terminal、gradient background、staggered grid reveal。
• 構成が明確な場合はタグを追加します：scene-3d、text、particles、gradient、code、counter。
• 要望が曖昧な場合は、有力な候補を1つと予備を1つ取得します。
• 要望を満たす中で、動く要素が最も少ない例を優先します。

調整ルール

• useViewportRect によるサイズ設定を維持します。ハードコードしたピクセル値よりも、rect.vmin、rect.vmax、rect.width、rect.height を優先してください。
• docs/src/styles/custom.css のテーマカラーを維持します。ユーザーが新しい配色を指定していない限り、任意の色に置き換えないでください。
• ドキュメントのビットでは、Component 関数を完全に自己完結させてください。ドキュメントのプレイグラウンドで使う例では、ヘルパー、定数、データ配列をモジュールスコープに残さないでください。
• ドキュメントのビットは表示用のラッパーがあらかじめ付いています。単独の Remotion コンポジションにする場合は、外側のレイアウトと背景を独自に追加してください。
• 段階的にインするモーションとアウトするモーションには、手作業でフレームのフェーズを計算するよりも、StaggeredMotion によるシーケンスを優先してください。
• プレゼンテーションのフローでは、まず例のステップ構造を維持してから、コンテンツ、カメラのターゲット、タイミングを変更してください。

プリミティブ早見表

• AnimatedText：フェード、スライド、単語単位や文字単位の分割、テキストの切り替えを行うためのエントリーポイントです。動きの中心がテキストの表示である場合に使います。テキストの段階的な表示を手作業で再構築するのは避けてください。
• AnimatedCounter：接頭辞と接尾辞に対応した数値の補間を行います。KPI、価格、統計の表示に使います。書式設定済みの文字列を自分でアニメーションさせるのは避けてください。
• TypeWriter：カーソルの動作を含む、テキストの入力と削除を行います。ターミナル、CLI、順番に表示する見出しのエフェクトに使います。CodeBlock が適したプリミティブとなる、コードが密集したレイアウトには使わないでください。
• CodeBlock：構文ハイライト、行ごとの段階的な表示、フォーカス、ハイライト領域に対応したコード表示を行います。エディターやコードデモのシーンに使います。レイアウトを意図的にカスタマイズする場合を除き、コード行を手作業で描画するのは避けてください。
• MatrixRain：マトリックス風のテキストレインをすぐに使えます。マトリックスやハッカーレインのテーマが明示されている場合に使います。汎用的なパーティクル背景として使うのは避けてください。
• GradientTransition：CSS グラデーションの背景とトランジションをアニメーション化します。動きの大半が背景色やグラデーションの変化である場合に使います。グラデーションのトランジションではないエフェクトを除き、手作業で色を補間して置き換えるのは避けてください。
• StaggeredMotion：繰り返し表示される子要素を共通の順序で動かすプリミティブです。リスト、グリッド、カードのスタック、複数要素の表示に使います。アニメーションが段階的な変形と不透明度の変化だけである場合、子要素ごとにフレーム計算するのは避けてください。
• Particles とパーティクルシステムのプリミティブ：環境的な動き、噴水、雪、ホタル、フィールドエフェクトには、Particles、Spawner、Behavior を使います。テキストの順次表示やレイアウトのトランジションには使わないでください。
• Scene3D：カメラ、ステップ、3D 空間の構成を扱います。プレゼンテーション、フライスルー、複数ステップのウォークスルー、カメラ主導のショーケースのような表現に使います。カメラの動きが中心となる場合、単純なシーケンスで再構築するのは避けてください。
• useViewportRect：サイズ設定とレイアウトの基盤です。ほぼすべてのレスポンシブな箇所で使います。固定の描画サイズに合わせることが目的の場合を除き、ピクセルサイズのハードコーディングは避けてください。

よくある判断ルール

• 繰り返し表示される子要素に同じ動きを適用する場合：StaggeredMotion を使います。
• テキスト固有の表示エフェクトが必要な場合：AnimatedText から始めます。
• カウントが必要な場合：AnimatedCounter を使います。
• タイピングが必要な場合：TypeWriter を使います。
• 画面にコードを表示する場合：CodeBlock を使います。
• 環境的なエミッターやパーティクルが必要な場合：パーティクルシステムのプリミティブを使います。
• シーン間のカメラ移動が必要な場合：Scene3D を使います。

例を起点にしたパターン

• テキストのリクエスト：テキストの要素を見つけて取得し、文言、タイミング、分割モードを差し替えます。
• カウンターのリクエスト：カウンターの例を見つけてから、値、ラベル、パーティクルのアクセントを調整します。
• コードのリクエスト：コードブロックまたはタイプライターの例を見つけてから、コードサンプルとハイライト領域を調整します。
• 背景のリクエスト：グラデーションまたはパーティクルの例を見つけてから、カラーパレット、密度、再生時間を調整します。
• プレゼンテーションのリクエスト：まず Scene3D の例を見つけ、ステップの位置、タイトル、カードの内容を調整してから、新しいプリミティブの導入を検討します。

最小限の実用例

# MCP
find_remotion_bits {"query":"camera flythrough product showcase","tags":["scene-3d"],"limit":2}
fetch_remotion_bit {"id":"bit-carousel-3d"}

# CLI
npx remotion-bits find "camera flythrough product showcase" --tag scene-3d --limit 2 --json
npx remotion-bits fetch bit-carousel-3d --json

参考資料

• references/components.md
• references/utilities.md
• references/patterns.md