モーショングラフィックスとは？
motion-graphicsは、Claude Codeやスキルを読み込めるその他のエージェント向けに、モーションデザインに特化したスキルを集めたリポジトリです。現在利用できる最初のスキルmotion-brollは、元動画とトランスクリプトからモーショングラフィックスのBロールを作成します。
このスキルは映像を解析し、単語が発話されるタイミングを推定して、適切なグラフィックスを提案し、ナレーションに合わせたクリップをレンダリングします。各クリップでは、互いに無関係なシーンを切り替えるのではなく、1つの形状が連続的に変形します。たとえば、ピル型の図形をカード、ターミナル、グラフへと変化させられます。ビジュアルの変化はカーソルによって操作されます。
主な機能
- トランスクリプトに基づくタイミング調整：グラフィックスをトランスクリプト内の発話に合わせます。
- 映像の解析：解像度、フレームレート、レイアウト、ピクチャーインピクチャーの区間、話者ボックスのサイズ変更を読み取ります。
- 確認可能なプランニング：クリッププランを作成し、グラフィックスの構築前に承認を待ちます。
- 2種類の出力形式：フルフレームのカットアウェイはMP4ファイルとして、話者の横にある空きスペース向けのパネルは透明なProRes 4444 MOVファイルとしてレンダリングされます。
- 連続アニメーション：視覚的なカットを挟まず、要素が状態間で変形します。
- モーションブラー：ソース動画のフレームレートで、サブフレームサンプリングを使ってクリップをレンダリングし、より滑らかな動きを実現します。
- 確認用ファイル：出力には、プレビュー、比較ページ、クリップビューアー、タイミングドキュメントが含まれます。
- データの慎重な扱い：数値や結果を創作しません。実際の値が提供されるまでは、相対的な棒のサイズとスケルトンテキストを使用します。
必要条件
スキルをインストールする前に、システムに次のソフトウェアがあることを確認してください。
- Node.js 18以降
- Python 3
- ProResエンコーダー付きのffmpeg
READMEによると、必要なProResエンコーダーはHomebrew版のffmpegに標準で含まれています。初回実行時には、スキルがPlaywrightとChromiumもローカルのmotion/フォルダーにインストールします。
motion-brollをインストールする
方法1：npxでインストールする
リポジトリのスキルインストーラーを実行します。
npx skills add Barty-Bart/motion-graphicsプロンプトが表示されたら、motion-brollを選択します。この方法では、Claude Codeやスキルを読み込める互換エージェント向けに、リポジトリからスキルをインストールします。
方法2：スキルを手動でコピーする
代わりに、skills/motion-brollディレクトリをプロジェクトのClaudeスキルフォルダーにコピーすることもできます。
.claude/skills/複数のプロジェクトでスキルを利用できるようにするには、ユーザーレベルのスキルフォルダーにコピーします。
~/.claude/skills/入力ファイルを準備する
主に2つの入力ファイルが必要です。
- 動画：モーショングラフィックスを追加する元映像です。
- トランスクリプト：エディター、Descript、またはYouTubeから書き出したSRTファイルが、説明されているワークフローでサポートされています。
トランスクリプトは発話内容を、動画はフレームレート、サイズ、話者の周囲で利用できるスペースなど、技術面および構成面の情報をスキルに提供します。
モーショングラフィックスのBロールを生成する
ステップ1：スキルを開始する
互換性のあるエージェントで、次を実行します。
/motion-broll質問に回答し、動画とトランスクリプトの場所をスキルに指定します。
ステップ2：映像を解析させる
スキルは動画の解像度、フレームレート、レイアウトを読み取ります。また、ピクチャーインピクチャーの区間や、話者ボックスのサイズが変化するかどうかも確認します。この解析により、透明なパネルを配置できる場所や、フルフレームのグラフィックがより適しているタイミングを判断します。
ステップ3：推定タイミングを確認する
motion-brollは、トランスクリプトから単語のタイミングを推定します。このタイミングにより、グラフィックのトランジションや視覚的な強調を、特定の単語やフレーズに対応させられます。
ステップ4：クリッププランを承認する
レンダリング前に、スキルは表形式でプランを提示します。候補となる各セグメントに対して、次の3種類の処理のいずれかを選択します。
- フルフレームのカットアウェイ
- 空きスペースに配置する透明なパネル
- モーショングラフィックなし
プランには、それぞれの選択理由も記載されます。提案された配置が編集意図に合っているかを慎重に確認し、問題がなければ承認してください。
ステップ5：クリップを構築して検証する
承認後、スキルは各クリップを構築し、重要な単語のタイミングで静止フレームを確認します。その後、該当する瞬間に正しく揃っていない要素を修正できます。
ステップ6：レンダリングして確認する
スキルはモーションブラーを適用し、動画のフレームレートでクリップをレンダリングします。その後、編集済み動画のプレビューと、結果を確認するためのブラウザーベースのページを生成します。
生成されたファイルを確認する
出力は、確認作業と最終編集の両方をサポートするよう設計されています。
- タイムライン名のクリップ：ファイル名からクリップの配置場所が分かります。例：
04-master-prompt_0m32s40.mp4。 - MP4カットアウェイ：フルフレームのモーショングラフィックスはMP4ファイルとして納品されます。
- 透明MOVパネル：オーバーレイパネルは、透明度を保持したProRes 4444 MOVファイルとして書き出されます。
- プレビュー書き出し：クリップを挿入したソース動画のバージョンで、テンポと配置を確認できます。
compare.html：このページでは、元のバージョンと強化版を同期します。横並び、上下配置、ワイプによる比較に対応しています。viewer.html：このページでは、生成されたクリップを1つずつ確認できます。TIMING.md：このドキュメントには、各クリップのイン点、アウト点、対応するトランスクリプトの行が記録されています。
生成されたプレビューは確認用です。最終編集では、個別のクリップをお使いのビデオエディターに読み込んでください。
ワークフロー例
実際の編集ワークフローは、次の手順で進められます：
- ソース動画とSRTトランスクリプトを書き出します。
/motion-brollを実行し、両方のファイルを指定します。- 提案されたカットアウェイ、透明パネル、意図的に装飾を加えていないセクションを確認します。
- 計画を承認し、スキルでクリップをレンダリングします。
compare.htmlを開き、元のバージョンと強化版を並べて確認します。viewer.htmlで個々のアニメーションを確認します。TIMING.mdで正確な配置情報を確認します。- 最終編集のため、MP4ファイルと透明度付きProRes 4444 MOVファイルをエディターに読み込みます。
レンダリングシステムの仕組み
すべてのアニメーションフレームは、時間の純粋関数として計算されます。エンジンは閉形式のスプリングステップ応答を使用し、ターゲットが繰り返し変化するプロパティは、変化ごとに1つのスプリングを加算したものとして表現されます。
このシステムはCSSトランジションやタイマーに依存しないため、任意のフレームを個別にレンダリングできます。これは、決定論的なフレームキャプチャやオフライン動画レンダリングに役立ちます。
各クリップは、skills/motion-broll/engine/motion.jsにある共有エンジンを基盤にした小さなHTMLファイルです。ヘッドレスChromiumが、180度のシャッター角にわたって出力フレームごとに4つのサブフレームをキャプチャします。その後、ffmpegがこれらのサンプルを合成してモーションブラーを生成します。
高度なヒント
レンダリングに時間をかける前に計画を確認する
承認段階は重要な編集上のチェックポイントです。映像の差し替えが適切な場面に限ってフルフレームのカットアウェイを使用し、透明パネルがフレーム内の本当に空いている領域を占めていることを確認してください。
エディターで適切な出力を使う
映像を差し替える場合は、MP4カットアウェイをメインのビジュアルトラックに配置します。ProRes 4444 MOVパネルはソース動画の上に重ね、透明度によって下のショットが維持されるようにします。
実データとプレースホルダーを分けて管理する
正確な数値が提供されていない場合は、作り上げた値ではなく、相対バーやスケルトンテキストが使用されます。完成したグラフィックで具体的な結果を伝える必要がある場合は、検証済みの数値を用意してください。
タイミングとアニメーションの詳細を両方確認する
全体のテンポにはcompare.htmlを、クリップ単位の確認にはviewer.htmlを使用します。配置に疑問がある場合は、TIMING.mdと対応するトランスクリプトの行を照合してください。
付属の完成例を確認する
skills/motion-broll/examples/opus-aoe2/ディレクトリには、リポジトリのデモで使用されている6つのクリップが収録されています。完成したクリップの構成と意図されたビジュアルスタイルを理解するうえで役立つ参考資料です。
まとめ
motion-brollは、ナレーションを同期したモーショングラフィックスのBロールに変換するための体系的な方法を提供します。映像分析、トランスクリプトに基づく計画、連続的なシェイプアニメーション、決定論的なレンダリング、実用的な確認ツールを組み合わせています。計画を承認してプレビューを確認したら、タイムライン名のクリップをエディターに取り込み、最終動画を作成できます。
このプロジェクトはMIT Licenseで公開されています。GeistフォントにはSIL Open Font Licenseが適用され、アイコンパスはISCライセンスのもとでLucideを基に改変されています。