Remotion Bits
このスキルを使用する際は、まず動作中のRemotion Bitsの例から構築し、例が不十分な場合にのみプリミティブにフォールバックしてください。
デフォルトのワークフロー
find_remotion_bitsを使用して、ユーザーの視覚目標、モーションスタイル、またはシーンの説明から検索を開始します。fetch_remotion_bitで最適な1つまたは2つのマッチを取得します。- プリミティブから構成する前に、最も近い例を適応させます。
- 複数の例がマッチする場合は、リクエストを満たす最もシンプルなものを優先します。
- リクエストがマルチステップ、カメラ駆動、またはプレゼンテーション風の場合は、
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
検索のコツ
- 視覚的な結果で検索します：
飛ぶカメラがカードを通過、紙吹雪付きカウンター、タイプライター端末、グラデーション背景、段階的グリッド表示。 - 形状が明らかな場合はタグを追加します：
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":"カメラフライスルー製品ショーケース","tags":["scene-3d"],"limit":2}
fetch_remotion_bit {"id":"bit-carousel-3d"}
# CLI
npx remotion-bits find "カメラフライスルー製品ショーケース" --tag scene-3d --limit 2 --json
npx remotion-bits fetch bit-carousel-3d --json
参考情報
references/components.mdreferences/utilities.mdreferences/patterns.md