Remotion Code Motion Explainer
抽象的な説明を、ひとつの連続した編集可能なビジュアルシステムとして構築します。各概念がどのように変化するかを示し、無関係な動きでナレーションを飾るのではなく、動きそのものを説明の手段とします。
Bingo（@DWCD-Bingo）作成、Vibe Motion 組織のもとでメンテナンスされています。
関連ガイダンスの読み込み
- すべての制作において
references/code-motion-design.mdを読むこと。 - すべての制作において
references/motion-production-patterns.mdを読むこと。 - 実装前と最終納品前に
references/production-and-qc.mdを読むこと。 - UI、プロダクト、AIワークフロー、ネオンフォーカス、波形、ダッシュボード、デザインツール、または高忠実度インターフェースの作業では
references/ui-motion-shot-library.mdを読むこと。 - リファレンス動画、After Effects レンダリング、プロトタイプ、スクリーンレコーディングを研究または再現する場合は
references/reference-reconstruction.mdを読むこと。 assets/shot-libraryをバンドルされた編集可能なスターターライブラリとして使用します。新しいショットをデザインする前にassets/shot-library/shot-library.jsonを検索してください。再利用可能なコンポーネントが意味的なジョブと一致する場合は、ターゲットプロジェクトにライブラリをコピーします。インストールされたスキル自体をその場で編集しないでください。- 使い慣れないAPIを使用する前に、インストール済みのRemotionドキュメントまたはベストプラクティススキルを参照してください。
制作契約の確立
- 承認済みのスクリプトまたは説明、ナレーションステータス、字幕の権威、アスペクト比、フレームレート、尺、ブランドシステム、技術的事実、納品形式を確定します。
- ナレーションが存在する場合、人間が確認した字幕をタイミングの権威として扱います。ナレーションがない場合は、明示的なビートタイムラインを作成し、ミュートでも理解できるようにビデオをデザインします。
- ユーザー提供、ライセンス済み、パブリックドメイン、または明確に再配布可能なアセットのみを使用します。
- 製品の動作、数値データ、科学的関係性、インタラクション結果を決して捏造しないでください。
- 使い捨てのハードコードされたシーンよりも、パラメータ化されたビジュアルシステムを優先します。
ワークフローの実行
1. 言語をビジュアルステートに変換する
- 説明を節レベルの意味的なビートに分割します。
- 各ビートについて、以下を記録します：
- ナレーションまたは画面上のステートメント；
- ナラティブの目的；
- 入力状態；
- 支配的な動詞；
- 可視の変換；
- 出力状態；
- 視聴者の焦点；
- 次のビートへの引き継ぎ。
- 名詞、アクション、数値、関係性、状態変化を独立したビジュアルアクターにまとめます。
- 複数のビートにわたって存続する永続的なオブジェクトを特定します。
- 最もシンプルで正確な表現を選択します：UI、フロー、図、波形、数式、チャート、空間モデル、3D。
- 計画を
src/data/choreography-plan.jsonに書き込みます。
ゲート：すべてのステートメントに、可視の推論ジョブ、パフォーマー、結果、引き継ぎがあること。
2. ビジュアルシステムを固定する
- グリッド、セーフエリア、スペーシング、タイポグラフィ、色彩の意味論、深度、カメラ、モーションカーブを定義します。
- ビジュアル世界を説明する一文のコンセプトアングルを書きます。
- フック、最も複雑なメカニズム、エンディングの代表的な静的フレームをデザインします。
- エントランスをデザインする前に、最大情報量のヒーローフレームを構築します。
- 永続的オブジェクトレジストリとワールド座標計画を作成します。
- 複雑なオブジェクトは、平坦なスクリーンショットをアニメーションするのではなく、意味のある動く部品に分解します。
- 同一の概念はビジュアル全体で一貫性を保ちます。
ゲート：静的フレームが単一のシステムとして読み取れ、複雑なフレームが編集可能なコンポーネントから組み立て可能であること。
3. 決定論的なRemotionモーションを実装する
useCurrentFrame()、interpolate()、spring()、および明示的なフレーム範囲からアニメーションを駆動します。- CSSトランジション、CSSキーフレーム、シードなしの決定論性のないランダム値、または独立してタイミングをとるブラウザアニメーションを使用しないでください。
- 値は、便利な場合はpropsとZodスキーマを通じてパラメータ化します。
- React、SVG、HTMLを優先します。Canvas、WebGL、Three.jsは、概念がそれらを必要とする場合のみ使用します。
- テキストを計測し、範囲をクランプし、数値入力を検証し、フレームに依存する副作用を避けます。
- 永続的なオブジェクトはマウントしたまま、ビート間で状態を変更します。
- 各4〜6秒のレビューウィンドウで、2〜4個の互換性のあるモーションアトムを構成します。
- 各ウィンドウに、セットアップ、アクション、可視結果、引き継ぎのフェーズを設けます。
- 終了をホールドする必要がある場合、すべての時間依存の子を同じ表示フレームからフリーズします。
ゲート：レンダリングが決定論的で、編集可能で、技術的に正確で、任意のフレームで安定していること。
4. 連続性と因果関係を維持する
- 位置、オブジェクトID、スケール、マスク、方向、オーディオモチーフをトランジション全体で再利用します。
- 次の要素を導入する前に、ひとつの意味のある要素を変換するか引き継ぎます。
- カメラの動きは、階層や関係性を明らかにするためだけに使用します。
- 繰り返される全画面フェード＆スケールリセットを避けます。
- チャプターリセットが意図的でない限り、隣接するビート間で少なくともひとつの視覚的不変量を維持します。
- 原因と結果を読み取り可能にします：入力が動き、プロセスが反応し、出力が可視になり、カメラがより大きなシステムを明らかにします。
ゲート：ミュートされたビデオが、ひとつの連続した説明として理解可能であること。
5. ナレーション、ラベル、サウンドをバインドする
- ラベル、値、状態、インタラクションフィードバックを正確な字幕キューにトリガーします。
- ナレーションが音楽やエフェクトよりも明らかに支配的であることを保ちます。
- 目に見えるイベントに対してのみ、控えめなティック、インパクト、スイープ、トーンアクセントを使用します。
- モーションプランとともにオーディオイベントマップを作成します。
- 音楽とモーションは、ハードカットではなく意図的な解決で終了します。
6. レビュー、レンダリング、学習
- フック、最も複雑なメカニズム、数式/データ状態、トランジション、エンディングを最初にレンダリングします。
- エントリ、中間点、最大情報量、引き継ぎ、ホールドの各フレームを検査します。
- 孤立したスクリーンショットだけでなく、連続するモーションウィンドウとそのオーバーラップをレビューします。
- タイムライン全体をカバーするコンタクトシートを作成します。
- 2つの後半フレームをピクセル単位で比較して、最終フレームホールドを検証します。
- テキストクリッピング、セーフエリア、カラーコントラスト、波形/データの正確性、アセット欠落、オーディオピーク、尺、フレームレート、コーデックを確認します。
- レビュー証拠を
qc/workflow-evidence.jsonに保存します。 - 修正と再利用可能なコンポーネントを
qc/production-learning.jsonに記録します。
ゲート：完全なレンダリングが、意味的、連続性、因果関係、構成、タイミング、技術的、ライセンスの各チェックに合格すること。
拒否
不正確なインタラクション、捏造されたデータ、恣意的な動き、読み取れないラベル、平坦化されたプロセス図、汎用的なスライドリセット、ナレーション/字幕の不一致、ライセンスのないアセット、ハードコードされた個人パス、非決定論的なレンダリング、モーションウィンドウレビューの欠落、最終フレームホールドチェックのスキップ、または再利用可能なテンプレートとして提示されたブランド化されたリファレンスコピーは拒否します。
成果物
最終的な動画、編集可能なRemotionプロジェクト、タイムライン、コンポーネントパラメータ、承認済み入力アセット、使用した場合はオーディオステム、コンタクトシート、QC証跡、および再利用可能なコンポーネントの短いリストを成果物として提出します。
バンドルされた例
assets/showcase/code-motion-promo-30s.mp4：30秒の機能トレーラー。assets/showcase/ac-to-dc-explainer.mp4：科学的解説の例。assets/shot-library：編集可能なRemotionショットライブラリと検索可能なカタログ。