bangtutorial/bang-motion

解決する課題

Bang Motion は、AI コーディングエージェントが動画の作成を依頼された際に「スライド風」のアニメーション（単純なフェードや静的なセクション）を作成するのを防ぎます。プロフェッショナルなモーションデザインルール、アーキテクチャのスターター、スタイルガイドのフレームワークを提供し、エージェントが製品プロモーション、SaaS デモ、解説動画などの連続的でシネマティックなモーショングラフィックスを構築できるようにします。成果物は単一の index.html ファイルとして提供されます。

仕組み

これは「Agent Skill」（指示と参照のセット）として機能し、Claude Code のプラグインとしてインストールするか、他の AI エージェント（Cursor、Gemini CLI など）に手動で追加できます。このシステムは、エージェントを特定のワークフローに沿って導きます：

1. スタイルブリーフィング: エージェントはコードを書く前に、ブランド由来のパレットと構造を提案します。
2. アーキテクチャのスターター: エージェントは、プロフェッショナルな基盤を確保するために、事前定義された HTML/CSS/JS テンプレート（GSAP と Three.js を使用）を利用します。
3. ルールベースの検証: エージェントは「アンチスライド」ルール（例：持続的な被写体の確保、単純なフェードの回避、移動するカメラの維持）に対してコードをチェックします。
4. 納品: 成果物は自動再生される HTML ファイルであり、提供されている Node.js スクリプトを通じて MP4 にエクスポートできます。

対象ユーザー

• AI コーディングエージェントを使用して高品質なマーケティングアセットを作成する開発者やデザイナー。
• 製品ローンチ、アプリプロモーション、教育用解説動画のための迅速なプロトタイプを必要とするチーム。
• モーションデザインの自動化を希望する Claude Code、Cursor、または Gemini CLI のユーザー。

ハイライト

• 多様な出力タイプ: オープニング、SaaS 製品ツアー、キネティックタイポグラフィ、複雑な解説動画をサポートします。
• ブランド主導の美学: スタイルは汎用テンプレートではなく、ユーザーのブランドアセットから導出されます。
• プロフェッショナルなモーションロジック: 「ブリージングドリフト」、動機付けられたカメラプッシュ、フレーム精度のビデオレイヤーなどの概念を実装します。
• 柔軟なエクスポート: 成果物は主に即座の視聴のための HTML ですが、MP4 にレンダリングできます。
• 外部統合: 特定のスタイルについては、Higgsfield MCP ブリッジを介して Adobe After Effects に直接構築できます。