Communitygithub.com

motion-proof

Remotion とコードを使って15~60秒のローンチ動画やプロダクトモーショングラフィックスを作成します。モーションデザイナーの動きのルールと自動制御(フレーム固定、黒画面、音量、Web品質)により、AIっぽくない仕上がりを実現。

motion-proof とは?

motion-proof は、Remotion(React ベースの動画フレームワーク)を使ってプロフェッショナルなモーショングラフィックス動画をコードで生成するための AI エージェントスキルです。主な用途は、プロダクトローンチ動画、UI アニメーション、モーショングラフィックスの制作、およびレンダリング済み動画の品質レビューです。このスキルは、動きのカーブ、リズム、呼吸感のある間合いといった「AIっぽくない」動きを実現するモーションデザインルールと、フレーム単位でのレビュー・測定を提供します。対応プラットフォームは CLI で、Node.js 20 以上、ffmpeg(Web版では libvmaf 対応必須)、Remotion プロジェクトが必要です。ワークフローは、ブリーフィング、ビジュアルスクリプトの作成、設定ファイルの一元管理、アニメーション実装、テストフレームの確認、H.264(yuv420p, bt709)60fps でのレンダリング、音楽の結合と音量調整(-14 LUFS)、品質測定、目視レビュー、Web 版出力、納品までを定義しています。固定ルールとして、フレームはフレーム番号のみから計算(useState や Math.random 禁止)、フォントは事前読み込み、直線・等速移動禁止、重要なテキストは 1.5 秒以上表示、フレームアウト以外でははみ出し禁止、未確認事項は明記など、厳格な品質基準をコードで強制します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/germangalo97/motion-proof/tree/HEAD

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Motion Proof

あなたはコードでアニメーション動画を作ります。各フレームはプログラム(Remotion、React 使用)から出力されます。「AI っぽい」動画とプロフェッショナルな動画の違いは、ほとんどの場合、動き(カーブ、リズム、呼吸するような間合い)とレビュー(フレーム単位での確認と測定)の2つにあります。このスキルはその両方を提供します。

開始前に

  1. ツールを確認します: node --version(20 以上)と ffmpeg -version。Web版には libvmaf 対応の ffmpeg が必要です(ffmpeg -filters に libvmaf が表示されること)。
  2. Remotion プロジェクトがない場合は、npx create-video --yes --blank mi-video で作成し、npx remotion skills add で公式スキルを追加します。Remotion API に関する質問にはそれらのスキルを使ってください。
  3. remotion.config.ts に Config.setColorSpace("bt709"); を追加します。これがないとフルレンジ(yuvj420p)で出力され、一部のプレーヤーで色が変わります。
  4. plantilla/movimiento.ts をプロジェクトにコピーし(例: src/lib/movimiento.ts)、plantilla/Ejemplo.tsx でパターン(段階的入力+スプリング、ドリフト、カメラプッシュ、クリック、モーションブラー)を確認します。
  5. scripts/ 内のプログラムは node <このスキルのフォルダ>/scripts/<プログラム>.mjs で実行します。追加のインストールは不要です。

プロセス

  1. ブリーフィング。プロダクト、ターゲット、視聴者の最終的なアクション、フォーマット(16:9、9:16、1:1)、尺を確認します。重要な情報が不足している場合は、先に進む前に質問します。
  2. referencias/guion-visual.md をテンプレートにしたビジュアルスクリプト。各シーンの開始フレームと終了フレームを正確に指定し、合計時間を一致させます。ユーザーの承認が得られるまでアニメーションは開始しません。
  3. 単一の設定ファイルにテキスト、数値、色、時間をまとめます。テキスト変更は一行で済み、時間は画像と音声が同じ場所から読み取ります。
  4. referencias/movimiento.md に従ってアニメーションを実装します。最初に「AI らしさを露呈するもの」リストを読んでください。
  5. シーンチェンジとカメラ移動のたびにテストフレーム(npx remotion still または renderStill)を出力し、フルレンダリング前に確認します。カメラをある点に近づけると、その点から遠いものは外側に押し出されます。カメラの編集はすべてフレーム単位で確認します。
  6. H.264(yuv420p、bt709)、60 フレーム/秒でレンダリングします。縦長・正方形の動画は別の構図で再構成し、横長からの切り抜きはしません。
  7. referencias/sonido.md に従って音声処理を行います: unir.mjs で音楽を結合し、volumen.mjs で -14 LUFS に調整します。
  8. medir.mjs で測定します。失敗した場合は動画を修正します。測定ツールは、失敗が誤検出であり測定で証明された場合にのみ変更します。その場合は納品時に報告します。
  9. cuadros.mjs(フレームシート)と referencias/revision.md のリストを使って目視レビューを行います。
  10. 軽量ファイルが必要な場合は、web.mjs でWeb版を作成します。
  11. mp4、測定結果、未確認事項(例: 音声を誰も確認していない場合)を納品します。

固定ルール

  • 各フレームはフレーム番号(モーションブラーにより小数を含む可能性あり)のみから生成されます。useState、setTimeout、CSS トランジション、固定シードなしの Math.random() は禁止です。
  • フォントは最初のフレームの前に読み込まれます。Times New Roman のフレームはエラーです。
  • 直線移動や等速移動は禁止です。また、完全に静止しているものも禁止です。
  • 重要なテキストは最低 1.5 秒画面に表示します。カウンターは約 1 秒で上昇します。
  • 意図的なフレームアウトを除き、画面外にはみ出しません。
  • 確認できなかったことは、その言葉で明記します。

コマンド

node scripts/medir.mjs video.mp4 --ancho 1920 --alto 1080 --fps 60 --duracion 30 --informe medicion.json
node scripts/cuadros.mjs video.mp4 hoja.png --cantidad 12
node scripts/cuadros.mjs video.mp4 cambios.png --segundos 4.5,9,15.2,22
node scripts/unir.mjs video-mudo.mp4 musica.wav con-sonido.mp4
node scripts/volumen.mjs con-sonido.mp4 final.mp4
node scripts/web.mjs final.mp4 web.mp4 --poster poster.jpg --segundo 28

medir.mjs は条件を満たせば終了コード 0、満たさなければ 1 で終了し、各エラーをテキストで一覧表示します。cuadros.mjs は動画の複数の瞬間を一度に確認できる画像を出力します。medir.mjs に --mudo を追加すると、音声なしの動画として測定します。

関連スキル