whaleyxbt/claude-motion

A motion design toolkit for coding agents.

解決する課題

コーディングエージェントは、高品質なモーショングラフィックスに必要な「センス」や精度を扱うことに苦労することがよくあります。APIを学習することはできても、滑らかなイージングの確保、映像と音の同期、レンダリング前の視覚的な正確性の検証といった能力が不足しているのが一般的です。このツールキットは、デザインルール、自己レビューメカニズム、サウンドエンジンを提供し、エージェントがプロレベルのモーショングラフィックスやシミュレーションを作成できるようにします。

仕組み

このツールキットは、一連の「スキル」と構造化されたパイプラインを使用して、エージェント(Claude CodeやCursorなど)と統合されます。

  • デザインルール: 曖昧な指示ではなく、イージングカーブ、スプリングプリセット、タイミング(例:登場シーン用の特定のベジェ曲線)に関する具体的な数値ガイドラインを提供します。
  • 自己レビューループ: エージェントは動画を視聴できないため、システムは「コンタクトシート」(タイムスタンプ付きのフレームグリッド)をレンダリングします。エージェントはこれらのフレームを分析して衝突、クリッピング、可読性をチェックし、最終レンダリング前にエラーを修正します。
  • サウンドエンジン: 純粋なPythonベースのシンセサイザーがキューシートを介して効果音(クリック音、シューという音、ライザー音)を生成し、オーディオが視覚的なタイムラインと完全に同期するようにします。
  • Webシミュレーションパイプライン: 複雑なシミュレーション(three.jsを使用した3Dシーンなど)の場合、headless Chromiumとffmpegを使用してHTMLページをフレームごとにレンダリングし、レンダリング速度に関係なく一定の60 fps出力を保証します。
  • 統合タイムライン: JSONファイルがすべての「ビート」をタイムスタンプにマッピングし、シーン、サウンドエンジン、レビューループがこれを使用してすべてを同期させます。

対象ユーザー

After Effectsのような手動ツールを使用せずに、モーショングラフィックス、プロモーションビデオ、技術シミュレーションの作成を自動化したいAIコーディングエージェント利用者の開発者やデザイナー。

ハイライト

  • フレーム単位の正確なキャプチャ: Playwrightとffmpegを使用して、Webシミュレーションを60 fpsのMP4にレンダリングします。
  • 自動化された視覚的QA: エージェントが自身の作業のコンタクトシートをレビューすることで、品質保証を実行できるようにします。
  • プロシージャルオーディオ: 外部サンプルを必要とせずにマスタリングされたオーディオを生成するカスタムPythonサウンドエンジン。
  • ビート同期タイミング: トラックのテンポを分析してシミュレーションを音楽に合わせる beats.py ツール。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト