Communitygithub.com

igorcacerez/motion-video-studio

コードでモーションデザインビデオ、広告、解説動画、2D/3DリールをThree.jsで作成。テイクごとのリファレンス分析、キネティックタイポグラフィ、実UI、同期オーディオ、決定論的レンダリングに対応。Claude CodeやCodexで利用可能。

motion-video-studio とは?

Motion Video Studioは、コードベースでモーションデザインビデオを制作するためのAIエージェントスキルです。Three.jsを用いた2D/3Dアニメーション、キネティックタイポグラフィ、実UI、同期オーディオを駆使し、広告、解説動画、リールなどの制作を支援します。主なプラットフォームはClaude CodeやCodexで、ユーザーは自然言語の指示からビデオ生成までを効率的に行えます。このスキルは、リファレンス動画のテイクごとの分析、ショットリストの自動作成、決定論的レンダリングによるフレーム再現性の確保など、プロフェッショナルな制作ワークフローを提供します。また、`npm run analyze` によるリファレンス解析、`npm run lint` によるコード品質チェック、`npm run qa` による最終品質保証など、多数のスクリプトが組み込まれており、ユーザーは手動でヘルパーを書き直す必要はありません。スキルは3段階以上のレビュープロセスを推奨し、全てのスコアが8以上になるまで修正を繰り返すことで、高品質な出力を実現します。

対応✓Claude Code✓Codex CLI✓Cursor
npx skills add https://github.com/igorcacerez/motion-video-studio-skill/tree/HEAD

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

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

ドキュメント

Motion Video Studio

ブリーフィングを編集可能なソース、レビュー済みフレーム、オーディオ、MP4に変換します。ベースはMovezコースです。12章の対応表を参照してください。スキルを有効にするだけでプロ品質が約束されるわけではありません。成果物を作成し、検査し、修正してください。

正しいモードから始める

  • 参考例に似たもの: テイクごとの分析とエフェクトのレシピを読んでください。参考動画は examples/reference/original.mp4 にあります。これは学習用の素材であり、コードとは別に権利が存在します。
  • 製品ビデオ: npm run gather -- --url URL --out assets/brand を実行します(指定されたURLのみ。デスクトップ/モバイル画面、画像/アイコン、色、フォント、およびライセンス「未確認」の inventory.json を生成します)。さらに、URL、実際の画面、ロゴ、フォント、色、承認済みテキスト、CTAも収集してください。テンプレートには架空のUIが明示的にラベル付けされています。既存の製品を宣伝する前に、実際の画像に置き換えてください。
  • UIモーフ/ループ: assets/morph/ の指示とテンプレートを使用してください。production.mdのループセクションを読んでください。
  • 3D要素: threejs-guide.mdを読み、scripts/three-helpers.mjs とテンプレート assets/three/ を再利用してください。依存関係Three.js 0.187.0はパッケージに含まれています。94の公式ドキュメントが参照用に添付されています。カメラ、ジオメトリ、マテリアル、ライト、アニメーションはtの関数として使用してください。マニュアルのリアルタイムループをレンダラーに持ち込まないでください。
  • 長編/キャラクター: ディレクションテンプレート assets/brief-template.md を読んでください。プロジェクトごとに、アイデンティティバイブルとアニメーションガイドを維持してください。
  • 部分的なレビュー: 既存のソースを保持し、--start と --duration を使用して影響を受ける範囲のみをレンダリングしてください。

野心レベル(L1 スモークテスト … L5 長編)はprompts.mdで選択してください。これにより、質問する量、レビューする量、停止するタイミングが定義されます。ワンライナーはエンジンをテストしますが、アイデアをテストするわけではありません。本格的な作業には、テーゼ、リファレンス、検証可能な事実を要求してください。

以下のコマンドは、このSKILL.mdを含むフォルダを基準としています。環境内でそのフォルダを見つけてください。カレントディレクトリがスキルフォルダであるとは想定しないでください。各ムービーごとにパッケージのコピーで作業し、再利用可能なインストールを保持してください。npm run new -- --dir ../my-movie は、docs/(ブリーフ、スタイルガイド、ショットリストmd/json、モーフ仕様、レビューログ)、refs/、assets/、audio/、out/ を上書きせずに作成します。ブランドごとに1つのフォルダ/セッションを使用してください。

制作契約

  1. 不足している入力のみを収集します:テーマ/製品、目的、尺、フォーマット、ブランド、リファレンス、トラック/ナレーション、予算、成果物。すでに提供されているものを活用してください。可逆的な前提を記録します。
  2. アニメーション化する前にリファレンスを分析します。npm run analyze -- --input VIDEO --fps 4 --out out/reference を実行します。フレームを開きます。スタイル、テイク、リズム、マスク、連続性、オーディオを記録します。観察、仮説、測定を区別します。正確なタイミングについては、オリジナルで連続するフレームを確認します。
  3. docs/style_guide.md と docs/shotlist.md を、開始/終了、メッセージ、支配的なオブジェクト、エントリー、ホールド、イグジット、連続性、カメラ、サウンドキューとともに作成します。assets/brief-template.md を使用します。必要に応じて創造的な判断のために提示します。この記事には承認を求めるプロンプトが含まれています。沈黙を承認とみなさないでください。全作業の承認がすでにある場合は、可逆的なローカルアクションに進みます。 3b. docs/shotlist.json をグリッド上の計画に変換します:npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --duration 24 --out out/cues.json。これは、ビートから外れたショット、4秒以上の新規性のないギャップを指摘し、sfx のキューを生成します。アニメーションを書く前に結果を表示します。
  4. 既存のトラックを scripts/beats.py で測定します。拍子とダウンビートを確認します。音楽がない場合は、npm run audio でオリジナルを合成します。ナレーションを音声と同期させ、グリッドを補助として使用します。ビートに合わせるためだけに単語をカットしないでください。 4b. 新しいページをレンダリングする前に、npm run lint -- --input PASTA を実行します。Math.random、クロック、タイマー、requestAnimationFrame、CSSトランジション、will-change、グロー、window.seek の欠如をチェックします。エラーはレンダリングをブロックします。
  5. 最終仕上げの前に、キーフレームとアニマティックを構築します。デフォルトではエンジンA(assets/starter/)を使用します。必要性が正当化される場合にのみ、Remotion/HyperFramesを選択します。ルートアーキテクチャは references/production.md にあります。習慣ですべてのエンジンをインストールしないでください。
  6. 少なくとも3回の文書化されたレビューラウンドを docs/review_log.md で実行します:テイクごとに3~5スチル、ビートごとのコンタクトシート、360pxでのテスト、トランジションのフレーム範囲。各ラウンドで、タイムスタンプ付きの上位3つの問題を記録し、修正し、再度レビューします。フック、読みやすさ、動き、バラエティ、構図、ブランド、シンクロを1~10で評価します。目標:すべてが8以上、証拠付き。見たり聞いたりできない場合、スコアを捏造しないでください。
  7. マスターをレンダリングし、オーディオをミックスし、qa を実行し、review を準備します。キャンバスだけでなく、エンコードされたMP4を再評価します。各アスペクト比について、レイアウトを再構成します。水平ビデオを切り取ってポートレートを作成しないでください。
  8. MP4、ポスター、全尺のコンタクトシート、ソース、ブリーフ、アセット/クレジットリスト、制限事項を納品します。ループが必要な場合のみ、スプライステストを生成します。テスト済みの内容と、まだ人間によるレビューが必要な内容を伝えます。公開、有料サービス、アップロードには、ユーザーの明示的な許可が必要です。

エンジンとビジュアル言語のルール

  • window.seek(t) は、フレーム全体を決定論的に描画する必要があります。レンダリングパスに、フレーム間の状態、実時間、Math.random、タイマー、CSSトランジション、requestAnimationFrame を含めてはいけません。描画時にシードを使ってPRNGを再作成するか、時間でノイズをインデックスします。
  • 最初のフレームの前にフォントとアセットをロードします。出力解像度のキャンバス、deviceScaleFactor:1、ローカルデータを使用します。カメラで拡大されたテキストに will-change を使用しないでください。
  • 解析的なスプリングを使用します。複数のターゲットがある場合は、track を介してステップ応答を合計します。タイポグラフィ:知覚可能なオーバーシュートなし。UI:控えめ。マスコット:方向性が許せば表現力豊かに。定数とヘルパーは scripts/motion.mjs にあります。
  • 記事の方向性:中央にグラデーションがあるタイトル、すべてがフェードインで入る、コーナーの装飾ラベル、フレーム、UIのグロー、汎用的なパーティクルを避けます。別の方向性がない限り、1つのディスプレイフォント、1つのUIフォント、1つのアクセントカラー。リファレンスでの経費の意味的な赤字は、機能的な例外です。
  • 2~4秒ごとに、ナラティブに新しいことを行います。長編では、3~5秒ごとにペイオフ。最初の2秒でフック。新しさを継続的な動きと混同しないでください。
  • シーン間でオブジェクトを保持します:大 → 小 → 周辺アンカー → 再開。モーフ内のテキストは、変形の開始後に登場し、次の変形の前に退出します。カーソルとクリックは実際のアクションに対応する必要があります。
  • 既存の製品には実際の画面とデータを使用します。メトリクス、 testimonial、機能を捏造しないでください。コンセプトの場合は、UIが架空であることを明示的に宣言します。
  • ループの場合、画像、位置、速度、オーディオの連続性を要求します。t % duration はクロックを繰り返すだけです。スプライスをテストし、状態が収束するようにします。
  • 記事のリファレンスマスター:60 fps、フレームあたり4サブフレーム、H.264 yuv420p、CRF 16。--fps 30 --sub 1 --scale 0.5 は経済的なアニマティックであり、このマスターではありません。
  • オーディオ:目標 -14 LUFS 統合。ヘッドルームを確保します(このパッケージでは真のピークターゲット -1.5 dBTP)。ミキシングとエンコーディング後に測定します。提供された音楽ファイルはオリジナルのままです。ミキシング用にコピーで作業します。

準備されたスクリプト

すべてのパラメータと例はscripts.mdを参照してください。既に存在するヘルパーを書き直さないでください。

npm ci --ignore-scripts
npx playwright install chromium
npm run doctor
npm test
npm run new -- --dir ../meu-filme
npm run gather -- --url https://produto.com --out assets/brand
npm run lint -- --input assets/starter
npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --out out/cues.json
npm run audio -- --duration 24 --bpm 120
npm run sfx -- --cues assets/starter/cues.json --duration 24
npm run mix -- --music out/score.wav --sfx out/sfx.wav --duration 24
npm run stills -- --format 16:9 --out out/stills
npm run render -- --format 16:9 --audio out/mix.wav --out out/final.mp4
npm run qa -- --input out/final.mp4 --duration 24 --require-audio
npm run review -- --input out/final.mp4 --out out/review

レンダラーは、ループバックを介してローカルアセットのみを開き、ブラウザの外部ネットワークをブロックします。これにより、外部コードが信頼できるわけではありません。実行前にコードを読み、環境の権限を尊重してください。キーを出力したり、共有プロジェクトに .env を含めたりしないでください。基本パッケージは、APIや有料クレジットなしで動作します。

関連スキル