Remotion Bits
このスキルでは、まずライブのRemotion Bitsの例から構築し、例だけでは不十分な場合にのみプリミティブにフォールバックします。
デフォルトのワークフロー
- ユーザーの視覚的な目標、モーションスタイル、またはシーンの説明に基づいて
find_remotion_bitsを使用します。 - 最適な1～2件のマッチを
fetch_remotion_bitで取得します。 - 最も近い例を適応してから、プリミティブから構成します。
- 複数の例がマッチする場合は、リクエストを満たす最もシンプルなものを優先します。
- リクエストがマルチステップ、カメラ駆動、またはプレゼンテーション風の場合は、
Scene3Dの例を優先します。 - ドキュメントのビットを適応する際は、レスポンシブサイズ、テーマカラーの使用、自己完結型の例構造を維持します。
ドキュメントのビットを作業パターンの主要なライブラリとして扱います。既存のビットがすでに必要な構成形状、タイミングモデル、レイアウト構造を提供しているかを確認した後でのみ、プリミティブに手を伸ばします。
フォールバックチェーン
- MCPを最初に
find_remotion_bitsで発見、fetch_remotion_bitで完全なソースコードを取得します。 - CLIを次に
npx remotion-bits find "hero intro" --tag scene-3d --jsonおよびnpx remotion-bits fetch bit-fade-in --jsonを使用します。 - ドキュメントの直接調査を最後に
docs/src/bits/catalog.tsとdocs/src/bits/examples/**を調査し、最も近い例を手動で適応します。
MCPサーフェスが利用可能な場合は、CLIの前にそれを使用します。CLIが利用可能な場合は、ファイルを直接読む前にそれを使用します。
CLI および MCP のセットアップ
リポジトリローカルのワークフローを必要としない場合は、公開パッケージを直接使用します。
# インストール不要
npx remotion-bits find 3d cards
npx remotion-bits fetch bit-fade-in --json
# グローバルインストール
npm i -g remotion-bits
remotion-bits find 3d cards
remotion-bits fetch bit-fade-in --json
公開パッケージからMCPサーバーを同様に起動します。
# インストール不要
npx remotion-bits mcp
# グローバルインストール
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.mdreferences/utilities.mdreferences/patterns.md