remotion-code-motion-explainer

Remotion Code Motion Explainer

抽象的な説明を、連続して編集できる1つのビジュアルシステムとして構築します。無関係なモーションでナレーションを飾るのではなく、各コンセプトがどのように変化するかを見せます。

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 を検索します。意味上の目的に合う再利用可能なコンポーネントがある場合は、そのライブラリを対象プロジェクトにコピーします。インストール済みのSkillを直接編集しないでください。
• 不慣れなAPIを使う前に、インストール済みのRemotionドキュメントまたはベストプラクティススキルを参照します。

制作の要件を確定する

1. 承認済みのスクリプトまたは説明、ナレーションの有無、字幕の基準、アスペクト比、フレームレート、尺、ブランドシステム、技術的事実、納品形式を確定します。
2. ナレーションがある場合は、人が確認した字幕をタイミングの基準とします。ナレーションがない場合は、明示的なビートのタイムラインを作成し、ミュートでも理解できる動画を設計します。
3. ユーザー提供の素材、ライセンス済み素材、パブリックドメイン素材、または再配布が明確に許可された素材のみを使用します。
4. 製品の挙動、数値データ、科学的関係、インタラクションの結果を決して捏造しないでください。
5. その場限りでハードコードされたシーンより、パラメーター化されたビジュアルシステムを優先します。

ワークフローを実行する

1. 言葉をビジュアルの状態に変換する

• 説明を節レベルの意味的なビートに分割します。
• 各ビートについて、以下を記録します。
  • ナレーションまたは画面上の文言
  • 物語上の目的
  • 入力状態
  • 主となる動詞
  • 目に見える変化
  • 出力状態
  • 視聴者の注目点
  • 次のビートへの引き継ぎ
• 名詞、動作、数値、関係、状態変化を、それぞれ独立したビジュアルアクターに割り当てます。
• ビートをまたいで残るオブジェクトを特定します。
• 正確さを保てる最もシンプルな表現を選びます。UI、フロー、図、波形、数式、チャート、空間モデル、または3Dから選びます。
• 計画を src/data/choreography-plan.json に書き込みます。

ゲート：すべての文に、目に見える推論上の役割、表現者、結果、引き継ぎがあること。

2. ビジュアルシステムを確定する

• グリッド、セーフエリア、間隔、タイポグラフィ、色の意味、奥行き、カメラ、モーションカーブを定義します。
• ビジュアルの世界を説明するコンセプトとアングルの文を1つ書きます。
• フック、最も複雑な仕組み、エンディングの代表的な静止画をデザインします。
• 登場の動きをデザインする前に、情報量が最大のヒーローフレームを作成します。
• 永続オブジェクトのレジストリとワールド座標の計画を作成します。
• 複雑なオブジェクトは、平面的なスクリーンショットをアニメーション化するのではなく、意味のある動くパーツに分解します。
• 同じコンセプトは全編を通じて一貫したビジュアルで表現します。

ゲート：静止画が1つのシステムとして読み取れ、複雑なフレームを編集可能なコンポーネントから組み立てられること。

3. Remotionのモーションを決定論的に実装する

• useCurrentFrame()、interpolate()、spring()、明示的なフレーム範囲を使ってアニメーションを制御します。
• CSSトランジション、CSSキーフレーム、シード値による決定性を持たない乱数、または個別にタイミングを設定するブラウザーアニメーションは使用しないでください。
• 必要に応じて、propsとZodスキーマを使って値をパラメーター化します。
• React、SVG、HTMLを優先してください。Canvas、WebGL、Three.jsは、コンセプト上必要な場合にのみ使用してください。
• テキストを計測し、範囲をクランプし、数値入力を検証して、フレームに依存する副作用を避けてください。
• 永続的なオブジェクトはマウントしたままにし、ビート間で状態を変更します。
• 4〜6秒の各レビューウィンドウで、相性のよいモーションアトムを2〜4個組み合わせます。
• 各ウィンドウに、セットアップ、アクション、目に見える結果、引き継ぎの各フェーズを設けます。
• 終了時に静止させる必要がある場合は、時間依存のすべての子要素を同じ表示フレームで固定します。

ゲート：レンダリングが決定論的で、編集可能で、技術的に正確であり、任意のフレームで安定していること。

4. 連続性と因果関係を維持する

• トランジション間で、位置、オブジェクトの同一性、スケール、マスク、方向、音声のモチーフを再利用します。
• 次の要素を導入する前に、意味のある要素を変形させるか引き継ぎます。
• カメラ移動は、階層や関係性を示す場合にのみ使います。
• 画面全体を何度もフェードさせて拡大縮小するリセットは避けます。
• 意図的なチャプターリセットでない限り、隣接するビート間で少なくとも1つの視覚的な不変要素を維持します。
• 原因と結果を明確にします。入力が動き、プロセスが反応し、出力が見えるようになり、カメラがシステム全体を映し出すようにします。

ゲート：無音でも、動画が一貫した説明として理解できること。

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ショットライブラリと検索可能なカタログ。