rn-motion-replica

RN Motion Replica

参照クリップのビジュアル文法とタイミングを保ちながら、元のコピー、プレゼンター、映像、固有のアセットを置き換えた、オリジナルのモーションスタディを作成します。

このスキルは、編集可能なオリジナルのアレンジを対象としています。ピクセル単位の完全一致、レンダリングフレーム単位の完全一致、またはエンコードフレームのアラインメントをうたう場合は、rn-replica-qc を通し、そのアセット、ランタイム、納品の各ゲートを適用してください。

ソースと権利の境界

• ユーザーに使用許可がある公開リンクまたはローカルファイルのみを使用してください。
• 非公開アカウントの制限、DRM、ペイウォール、削除済みメディアを回避してはいけません。
• ソース URL、タイトル、ダウンロードしたメディア、文字起こし、ソースのスクリーンショットは、非公開の作業ディレクトリに保管してください。
• 完成したプロジェクトやスキルパッケージにソースメディアを含めてはいけません。
• モーション構造、レイアウトのロジック、ペース配分、インタラクションの表現を再現してください。コピーは新たに作成し、オリジナルまたは汎用のアセットを使用してください。

ワークフロー

1. 調査範囲を確定する

正確な時間範囲、求められるエフェクト、納品するアスペクト比、ユーザーがスタディプレビューと本番用アセットのどちらを希望しているかを確認してください。依頼内容がすでに具体的な場合は、追加のヒアリングをせずに進めてください。

ユーザーまたは納品先が別の形式を求めていない限り、キャンバスと fps は参照に合わせてください。

2. 参照素材を取得して検証する

ワークスペースで信頼されているダウンローダーまたは yt-dlp を使って、公開されている参照素材をダウンロードしてください。ffprobe で検証してください。HTTP の成功だけでは不十分です。

次の条件を満たす必要があります。

• 再生可能な動画ストリームがある
• 再生時間がゼロではない
• 寸法とフレームレートが判明している
• 非公開の参照ディレクトリに未変更のソースファイルがある

3. 視覚的な根拠を生成する

選択した範囲で、同梱のアナライザーを実行してください。

python3 scripts/analyze_reference.py <reference.mp4> \
  --start 0 --duration 35 --out <private-analysis-dir>

生成されたコンタクトシートとシーンフレームをすべて確認してください。1 枚のサムネイルから振り付けを推測してはいけません。

次の 5 つの層の根拠を記録してください。

1. ビジュアルトークン：背景、枠線、パレット、書体、シャドウ、テクスチャ
2. ジオメトリ：セーフマージン、アンカー、カードのサイズ、コネクターの配線、z-order
3. モーションの基本形：ポップ、スライド、パス描画、入れ替え、押し出し、ぼかし、ズーム
4. シーケンス：最初に何が表示されるか、何が待機するか、どの状態が前の状態に置き換わるか
5. タイミング：表示開始の時間、表示保持時間、重なり時間、トランジション時間、最後の表示保持時間

アニメーションを作成する前に、ビジュアル仕様書として frame.md を、タイムスタンプ付きのシーケンスとして STORYBOARD.md を作成してください。

アウトライン付きカードと直角コネクターについては、references/box-motion-pattern.md を読んでください。

4. 制作ルートを選択する

完成動画を作成する場合は、デフォルトで HyperFrames を使用してください。

• ナレーションなしの短いモーション主体のショットで、長さが約 10 秒以下の場合：motion-graphics ワークフローを使用します
• 長め、複数の状態、または複数シーンのレプリカの場合：general-video を使用します
• 新しいグラフィックを重ねても既存のトーク番組風映像をそのまま使用する場合：talking-head-recut を使用します

同梱のボックスモーションの出発点を使う場合：

python3 scripts/init_motion_project.py <new-project-dir>

このテンプレートは編集可能な例であり、コンテンツの仕様ではありません。現在の参照素材から得られた根拠に基づき、ラベル、タイミング、色、レイアウトを置き換えてください。

5. モーションの前にレイアウトを組み立てる

各シーンを、最も目立つ状態でまず構成してください。アニメーションなしで、カード、ラベル、コネクターが収まることを確認してください。

その後、読み取り順にアニメーションを付けてください。

1. フレームとセクションラベル
2. 最初のフォーカスノード
3. 次のエンドポイント
4. 表示中のエンドポイント間のコネクター
5. 補助カードを 1 枚ずつ
6. 状態の入れ替えまたはシーントランジション
7. 最後の読みやすい表示保持

コネクターはカードの背後に配置してください。すべての SVG コネクターと接合部は時刻ゼロで非表示にし、それぞれの合図で表示してください。ノードが表示される前にコネクターや接合部が浮かんでいるフレームは不合格です。

シークに安全で決定論的なタイムラインを使用してください。レンダリング時の時計、シードを設定していない乱数、ホバー状態、無限アニメーションループを使用してはいけません。

6. 合成を検証する

フレームワークの完全なチェックを実行し、次のタイミングで明示的なスナップショットを取得します。

• オープニングの開始時
• グラフやレイアウトの状態が変わるたび
• 各シーン遷移の直前、遷移中、直後
• 最後に静止するフレーム

レンダリングされたピクセルを確認します。要素の早すぎる表示、切り替え時の空白、コネクターの交差、テキストのクリッピング、境界線の不統一、ブランドイメージに合わないイージングを修正してから、完全な MP4 をレンダリングします。

7. 最終 MP4 をレンダリングして検証する

ユーザーの依頼に出力動画が含まれている場合、またはユーザーがプレビューを承認した場合に限り、レンダリングします。

HTML プレビューだけでなく、MP4 自体に対してレンダリング後の QC を実施します。references/qc-checklist.md を読み、次の成果物を保持します。

• メディアプローブの JSON
• 最終 MP4 のコンタクトシート
• オープニング、状態変化、遷移、最後の代表的なフレーム
• 黒フレームのスキャン結果

8. 再利用可能なパッケージを納品する

次の形式を使用します。

<project>/
├── frame.md
├── STORYBOARD.md
├── index.html
├── renders/
│   └── motion-replica.mp4
└── qc/
    ├── media-probe.json
    ├── contact-sheet.jpg
    └── representative-frames/

元の参照資料と、ソースを特定できる分析情報は、この納品物に含めないでください。

完了条件

• 依頼された範囲の複数のタイムスタンプを確認せずに、一致したと主張しないでください。
• このワークフローだけでピクセル単位またはフレーム単位の完全一致を主張しないでください。全フレームの根拠が必要な場合は、rn-replica-qc を使用してください。
• ユーザーが所有し、再利用を明示的に求めている場合を除き、ソースのプレゼンター、字幕、台本、サムネイル、独自のブランドアセットをコピーしないでください。
• タイムラインの合図より前に、コネクター、接続点、カードを表示しないでください。
• プレビューで正しいことを納品の条件とせず、最終 MP4 を再確認してください。
• 依頼された動画をコンタクトシートで置き換えないでください。コンタクトシートは QC の証拠であり、納品物ではありません。

同梱リソース

• scripts/analyze_reference.py：プローブデータ、概要および高密度のコンタクトシート、シーン変更フレームを生成します。
• scripts/init_motion_project.py：既存のディレクトリを上書きせずに、再利用可能な HyperFrames ボックスモーションプロジェクトをコピーします。
• references/box-motion-pattern.md：カード、コネクター、状態の切り替え、プッシュ遷移の実装ガイドです。
• references/qc-checklist.md：レンダリング前および最終 MP4 の検証条件です。
• assets/templates/box-motion-hyperframes/：イニシャライザーが使用する編集可能なソースプロジェクトです。
• assets/showcases/box-motion-replica-35s.mp4：完成済みの35秒の例です。