motion-broll

モーションBロール

クリエイターの動画用に、モーショングラフィックスのクリップを作成します。すべてのクリップは途切れることのない1つの図形です。状態が変わるたびにサイズ、角、色が変化し、短いブラーとともに内容が切り替わります。カーソルは実際のクリックやドラッグで変化を起こし、すべての変化は話された単語にぴったり合います。

出力は、クリエイターが編集ソフトに取り込むクリップ一式です。また、クリップを挿入した動画のプレビュー映像と、クリップを順に確認するページ、変更前後を比較するページの2つのHTMLページも用意します。

必要なものはすべてこのスキルフォルダーにあります。

• engine/：モーションエンジン（motion.js）、ページのシェル（base.css）、build.py（クリップから自己完結型HTMLを作成）、render.js（モーションブラーを使ったフレーム単位のレンダリング）、beats.js（静止画のコンタクトシート）、フォント（Geist、OFL）。
• scripts/：setup.sh、inspect_video.py、words.py、composite.py、make_pages.py。
• reference/engine-api.md：クリップの作成方法。最初のクリップを作成する前に読んでください。
• examples/opus-aoe2/：実際の54秒の動画向けに完成した6つのクリップ。品質の基準として、また出発点として活用してください。

以下では、$SKILL はこのスキルのフォルダーを指します。ユーザーのプロジェクト内にある motion/ フォルダーで作業してください。

1. セットアップ（初回のみ）

bash $SKILL/scripts/setup.sh ./motion

Node、Python 3、ffmpegの有無を確認し、PlaywrightとChromiumを motion/node_modules にインストールします。エンジンのスクリプトはすべて NODE_PATH=./motion/node_modules を指定して実行してください。

2. ヒアリング

AskUserQuestionツールを使い、質問は1回にまとめてください。必要な情報は次のとおりです。

• 動画。 パスを確認します。コピーするか、motion/work/source.* にある動画を参照してください。
• 文字起こし。 タイムスタンプ付きのSRTまたはVTTが最適です。テキストしかない場合は、音声から単語ごとのタイムスタンプを取得するか（pip install faster-whisper）、SRTを依頼してください。
• 密度：
  • 低：1分あたり2～4本。特に重要な場面だけにします。
  • 中（デフォルト）：1分あたり4～7本。
  • 高：ほとんどのセリフをカバーし、顔が見える短い間隔を設けます。
• 見た目：
  • デフォルトの配色：暖色系のグレーのキャンバス、黒と白のコンポーネント、オレンジのアクセントを1色。
  • またはブランドに合わせます。色と、必要に応じてフォントを指定します。ロゴ、スクリーンショット、ブランドカラーを motion/inputs/ に入れてもらい、それらを確認してください。
• 避けたいもの、含めたいもの。 顔を映したままにするセリフ、表示する実際の数値や名前、再現する製品のスクリーンショットなど。

ユーザーがすでに回答している質問は省略してください。

3. 映像を確認する

python3 $SKILL/scripts/inspect_video.py motion/work/source.mp4 motion/work
python3 $SKILL/scripts/words.py transcript.srt > motion/work/words.txt   # .vtt works too

motion/work/contact.png を自分で確認してください。video.json には解像度、fps、レイアウトの区分が記録されています。

• full： 話者がフレームいっぱいに映ります。
• pip： 話者がボックス内に映り、残りの領域は空いています。ボックスの位置と、サイズが変わったり移動したりする場合の警告も含まれます。
• black： フレーム全体が黒です（フェード、イントロ、アウトロ）。

クリップは動画の解像度とfpsに合わせる必要があります。SRTまたはVTTの単語タイムスタンプは推定値（±0.2秒）なので、目安として扱ってください。

4. 計画を立て、コードを書く前に承認を得る

クリップごとに1行の表を提示します。

| # | イン点–アウト点 | 対象となるセリフ | 図形の動きと、その動きを付ける語句 | 処理 | 理由 |

クリエイティブディレクション：各クリップがフレームのどれくらいを占めるかを決めます。 これは最も重要な判断です。クリップごとに決め、その理由を示してください。

• 全画面のカットアウェイ。 フレーム全体が話者で、セリフが「見てわかる」もの――製品、プロセス、比較、数字、章の切り替わり――を説明している場合に使います。
  • アイデアの長さに合わせてカットアウェイを挿入し（3～10秒）、その後、話者の顔に戻します。
  • フックの最初の1秒や、個人的・感情的な発言、意見を述べる発言ではカットアウェイにしないでください。
  • カットアウェイの間には、顔が少なくとも約2秒表示されるようにします。
• 空きスペースにパネルを表示。 編集ですでに余白が確保されている場合に使います。PiPボックス、分割画面、無地の領域などです。
  • 透明なクリップ（bg:null）を空き領域の中央に配置し、常に話者のボックスに重ならないサイズにします。
  • 話者が画面に表示されたままなので、連続したモーフとして長く（15秒以上）表示できます。
  • inspect_video.py がボックスの変化を報告した場合は、それが意図的か確認してから、最も大きいボックスに合わせてサイズを調整するか、変化する箇所でパネルを分割します。
• 何も表示しない。 セリフが話者についての内容である場合や、別のクリップに近すぎる場合に使います。

コンテンツのルール：

• 話者が実際に言及したものを表示します。フォルダー、ターミナル、ファイル、製品、結果など、言葉から拾い上げます。それぞれのアイデアを、reference/engine-api.md にある用語集の操作に対応させます（ピル＋クリック、進捗、チェック、ステータスアイランド、ドラッグ操作付きカード、スライダー、トグル、タブ、チャート＋ツールチップ、検索／フィルター、ファイルのドラッグ＆ドロップ、ターミナル入力、並列比較、章カード）。
• 数字、引用、価格、結果を決して作り出さないでください。 相対的なバー、スケルトンテキスト行、またはトランスクリプトにあるラベルを使い、どの要素が例示用かを明記します。実際の数値を入れるのは、ユーザーが提示した場合に限ります。
• 1クリップにつき1つのアイデアにします。連続した区間（PiP セクション全体など）は、複数の状態を含む1つの長いクリップにできます。
• 音楽ではなく、話すテンポに合わせます。話し言葉の1拍ごとに変化を付け、間隔は約0.4～1.2秒にします。

ユーザーが計画を承認するか、修正するまで待ちます。

5. 作成

reference/engine-api.md とサンプルに従って、クリップごとに1つのフラグメントを motion/clips/NN-name.html に作成します。その後、ビルドします。

python3 $SKILL/engine/build.py motion/dist motion/clips/*.html

各状態の変化を対応する語句に合わせます。クリップ内の時間 = 語句の時間 − クリップのイン点。

6. 重要な語句でスチルを確認

NODE_PATH=./motion/node_modules node $SKILL/engine/beats.js motion/dist/NN-name.html motion/work/NN.png 0.4 1.2 2.1 …

各状態が落ち着いた時点と、モーフの途中の時点をいくつか選びます。すべてのシートを自分で確認してください。窮屈な箇所、切れている箇所、読みにくい箇所、語句と合っていない箇所、カーソルがフレームからはみ出す箇所があれば修正します。その後、もう一度確認します。パネルクリップはシート上で黒背景にレンダリングされるため、それを見て判断できます。

7. レンダリング

NODE_PATH=./motion/node_modules node $SKILL/engine/render.js motion/dist/NN-name.html motion/out/NN-name_0m32s40.mp4 30000/1001

• 動画の fps を使います。
• パネルクリップ（bg:null）は .mov に書き出す必要があります。ProRes 4444 とアルファが使われます。
• 各ファイルにはタイムライン上のイン点を名前として付けます（0m32s40 = 0:32.40）。
• レンダリングではフレームごとに4つのサブフレームを処理するため、リアルタイムより遅くなります。マルチコアマシンでは、2つのクリップを並行して実行してください。

8. 納品

reference/engine-api.md のスキーマに従って motion/plan.json を作成し、その後、次を実行します。

python3 $SKILL/scripts/composite.py motion/plan.json motion/out/preview.mp4
python3 $SKILL/scripts/make_pages.py motion/plan.json motion/out/preview.mp4

ユーザーには、以下をすべて motion/out/ に納品します。

• クリップ
• TIMING.md：ファイル、イン点、アウト点、対象となるセリフ、処理、例示用の要素
• preview.mp4：クリップを挿入したユーザーの動画。ハードカットで、元の音声を使用
• viewer.html：クリップを順番に確認
• compare.html：元の動画とプレビューを同期して、左右並列、上下配置、またはワイプで比較

プレビューはレビュー用であることを明確に伝えてください。最終版では、ユーザー自身のエディターでクリップを配置し、タイミングを微調整したり、トランジションを追加したり、音声をミックスしたりできます。

スタイルのデフォルト

ユーザーのブランド設定が優先されます。

• 色： キャンバスは #E9E7E2、インクは #0B0B0B、コンポーネントは白、アクセントカラーは #FF5A1F の1色です。暗い映像上のパネルのクリップには、明るい色（#F4F2EE）を使用します。
• 書体とアイコン： UI テキストには Geist、コード、ファイル名、ターミナルには Geist Mono を使用します。アイコンセットは1種類とし、線の太さも統一します（M.icon）。
• モーション： ばねには、ごくわずかなオーバーシュートを最大限として使います。先端と後端には異なるばねを適用し、インジケーターが伸縮するようにします。カメラは各状態が画面いっぱいに表示されるようズームします。
• 禁止事項： 弾むようなイージング、パーティクル、UI クロームのグラデーション、線の太さが混在するアイコン、無意味な時間、テンプレートのように見えるもの、作り物のデータ。

注意点

• カメラが拡大縮小する要素には、will-change を決して指定しないでください。テキストがぼやけて表示されます。
• モーフィングするコンテナー内でテキストを切り替える場合は、独自の表示・非表示タイミング（M.vis din/lin/lout）が必要です。そうしないと、前後のテキストが重なります。
• mix-blend-mode: difference を使うラベルは、ブレンドモード自体が適用されたレイヤーに配置する必要があります。親要素にフィルターを適用すると、ラベルが分離されます。
• ハイライトの下をスライドする項目には M.FAST のばねを使ってください。使わないと、ハイライト行が一瞬空になります。
• モーフィング中も含め、カメラがズームする際は常にカーソルがフレーム内に収まるようにしてください。
• SRT の単語数の推定値はキュー内でずれていきます。可能であれば、重要な変更はキューの最初または最後の単語に合わせてください。
• クリップは最後の状態を保持して終了します。合成のスロットのほうが長い場合は、最後のフレームが保持されます。