Bang Motionとは？
Bang Motion は Agent Skill で、Claude Code のプラグインとしても配布されています。コーディングエージェントにブラウザ上でモーショングラフィックスを作らせるもので、対象は15〜40秒の製品オープニングやプロモ、SaaS のデモ、キネティックタイポグラフィー、バンパー、そして16:9または9:16で30〜120秒の解説動画です。成果物は GSAP と、必要に応じて Three.js で作られた1つの index.html で、自動再生してループします。?debug=1 でシークバーが付き、任意のスクリプトでキーフレームの取得や MP4 への書き出しができます。
固定テンプレートではなくメニューから選ぶ仕組みです。スタイルの方向性が10、オープニングの構成案が19、解説動画のスタイルが6つあり、解説スタイルにはそれぞれ専用のスターターファイルがあります。エージェントはコードを書く前に、3つの構成案、1つの推奨案、各色の出典を明記したパレットを含むスタイルブリーフを出さなければなりません。任意のブリッジを使えば、Higgsfield の MCP サーバー経由で After Effects の中にアニメ調の解説動画を組み立てられます。
作者はインドネシアの YouTube チャンネル Bang Tutorial で、MIT ライセンスです。README は英語ですが、SKILL.md、変更履歴、参照ファイルの大半はインドネシア語です。リポジトリは2026年9月5日に作られ、バージョン1.19.0が2026年9月15日に出て以降、何もマージされていません。スターは約1,365、フォークは170です。
Bang Motionは使う価値があるか？
Bang Motion は、エージェントが作る動画で最もよくある失敗、つまりフェードでつないだスライド資料に、仕上げではなく工程で立ち向かいます。エージェントは、19の構成案から3つを提案して1つを選び、前回の作品と違う構成の指紋を示し、ブランドからパレットを導くまで、コードを書けません。スライド化を防ぐルールは、エージェントが自分のコードで確認できるように書かれています。セクションをフェードでつながない、被写体や世界を持続させる、テキストの階層は2つまで、トランジションを変化させる、そして幅1,080のステージで30 px未満の文字を使わない、といったものです。
必要な環境は、これまでレビューしたモーション系スキルの中で最も軽いものです。結果を見るだけならブラウザがあれば足ります。Node、puppeteer、ffmpeg はフレーム確認と MP4 書き出し用の任意の道具です。対照的に motionmaxxing は始める前に Node 22、Python 3、ffmpeg、Chrome を必要とし、HyperFrames はスキルではなく本格的なレンダラーです。代わりに失うのは根拠です。motionmaxxing はプロの動き4,288件を計測してイージングを導き、レンダー結果をスクリプトで採点します。Bang Motion のルールは1つのチャンネルの好みで、確認はエージェントに読ませるキーフレームのスクリーンショットです。比べると、Diagram Design は静 止画の図で同じ好みの問題を解いています。
重さは指示文にあります。SKILL.md は約39 KBで、1トークン4文字として約10,000トークンになり、8つの参照ファイルがさらに約184 KB、最大のものは58 KBあります。動画1本あたりのトークンや時間のコストは公開されていません。SKILL.md がインドネシア語で書かれているため、エージェントはある言語でルールを読み、英語話者のユーザーとは別の言語で話すことになります。現在のモデルなら対応できますが、インドネシア語を読めない人がルールを検証するのは難しくなります。
実用上の注意が2つあります。納品される index.html は GSAP 3.12.5 と Three.js 0.161.0 を jsDelivr から、フォントを Google から読み込むため、オフラインでは再生できず、再生のたびに第三者のサーバーへアクセスします。そしてプロジェクトはすぐに静かになりました。リポジトリは2026年9月5日に作られ、履歴にある3つのコミットはすべて9月15日付です。Remotion を2つ目の出力先として加える貢献者のプルリクエストは9月23日から未マージのままで、プラグインのマニフェストは README が6つ挙げる解説スタイルを今も5つとしています。
真価を発揮する場面
ローンチ告知を準備している3人のアプリスタートアップの創業者
モーションデザイナーを雇わずに9:16で20秒のプロモを作る
エージェントにロゴ、数枚のスクリーンショット、写真入 りフラットポップのスタイルを渡し、スタイルブリーフを承認して ?debug=1 で確認し、export-frames.mjs で MP4 に書き出します。かかるのはエージェントのトークンと、一晩分の修正のやりとりです。
科学チャンネルを運営する教師
ナレーションを子ども向けのアニメ解説動画にする
アニメコラージュのスタイルを選んで録音を渡し、vo-pauses.html にブラウザ上で間を検出させれば、タイムラインがナレーションに合わせて調整されます。ffmpeg は不要で、画像はエージェントが呼び出せる任意の画像 MCP から用意できます。
エージェントがアニメーション付きスライドばかり作ってしまうフロントエンド開発者
動くカメラと持続するシーンを強制するルールをエージェントに与える
プラグインを入れ、スライドのパターンと修正方法を対応させた anti-ppt.md をエージェントに読ませます。README の助言どおり動画ごとに新しいチャットで始めれば、前の判断が次の作品に持ち越されません。
導入前に確認すること
- 導入
- Claude Code では /plugin marketplace add bangtutorial/bang-motion を実行してから /plugin install bang-motion@bang-motion を実行します。他のエージェントでは、リポジトリをスキル用フォルダーにクローンするか、AGENTS.md、GEMINI.md、.cursor/rules から SKILL.md を参照させます。コピーは1つだけ入れてください。2つあると衝突します。
- 連携
- Claude Code、Codex CLI、Gemini CLI、Cursor に対応。GSAP と Three.js は jsDelivr から読み込み、snap.mjs と MP4 書き出しには任意で puppeteer と ffmpeg を使います。素材には任意の画像・動画 MCP、After Effects には Higgsfield の MCP ブリッジを使います。
- データとプライバシー
- ローカルで動き、スキル自体は何も送信しません。完成したページは再生のたびに GSAP、Three.js、Google Fonts を取得し、任意の serve.py は127.0.0.1のポート5178で待ち受けます。画像・動画 MCP に送った素材はその提供元に渡ります。MIT ライセンスで、GSAP は独自のライセンスのままです。
- 大規模利用時のコスト
- 有料プランはありません。コストはエージェントのトークンで、参照ファイルを読む前の SKILL.md だけで約10,000トークン、さらに画像や動画の生成費がかかります。動画1本あたりの数字は公開されていません。
- 制限
- 再生には CDN のためにインターネットが必要 です。確認はスクリーンショットの目視で、スクリプトによる採点はありません。After Effects の手順はアニメ調の解説動画だけが対象です。2026年9月15日以降コミットはなく、オープンなプルリクエストと issue が1件ずつあります。
良い点
- コードを書く前にスタイルブリーフと3つの構成案を必須にしている
- スライド化を防ぐルールをエージェント自身が出力で確認できる
- ブラウザだけで1つの index.html から再生でき、MP4 書き出しは任意
- Claude Code のプラグインとして導入でき、Codex、Gemini CLI、Cursor 向けの手動手順もある
気になる点
- ルールは計測ではなく好み、確認はスクリプトではなくスクリーンショット
- SKILL.md と参照ファイルは主にインドネシア語
- 出力は GSAP、Three.js、フォントを CDN から読むためオフライン再生不可
- 2026年9月15日以降コミットなし、Remotion のプルリクエストは未マー ジ
おすすめの人
少ない準備でエージェントに多様な Web ベースのオープニングや解説動画を作らせたい、動きを目で判断できる開発者や一人で動くマーケター向けです。
Bang Motionの代替
Bang Motion：よくある質問
- Bang Motionは使う価値があるか？
- Bang Motion はエージェントにスライド資料のような動画を作らせないための見た目と構成のメニューを与えますが、そのルールは計測ではなくデザイナーの意見で、リポジトリは9月中旬から止まっています。 評価は5点満点中3.6点です。
- Bang Motionの料金は？
- MIT ライセンスで無料。かかるのはエージェントのトークンと、素材用に呼び出す画像・動画の MCP の費用です。
- Bang Motionの欠点は？
- ルールは計測ではなく好み、確認はスクリプトではなくスクリーンショット; SKILL.md と参照ファイルは主にインドネシア語; 出力は GSAP、Three.js、フォントを CDN から読むためオフライン再生不可; 2026年9月15日以降コミットなし、Remotion のプルリクエストは未マージ.
- Bang Motionは誰に向いているか？
- 少ない準備でエージェントに多様な Web ベースのオープニングや解説動画を作らせたい、動きを目で判断できる開発者や一人で動くマーケター向けです。
- チームや本番環境でBang Motionを使うと費用はいくらか？
- 有料プランはありません。コストはエージェントのトークンで、参照ファイルを読む前の SKILL.md だけで約10,000トークン、さらに画像や動画の生成費がかかります。動画1本あたりの数字は公開されていません。
- Bang Motionは企業データを扱っても安全か？
- ローカルで動き、スキル自体は何も送信しません。完成したページは再生のたびに GSAP、Three.js、Google Fonts を取得し、任意の serve.py は127.0.0.1のポート5178で待ち受けます。画像・動画 MCP に送った素材はその提供元に渡ります。MIT ライセンスで、GSAP は独自のライセンスのままです。
- Bang Motionの代わりになるものは？
- 当サイトでレビューした中で最も近い代替はmotionmaxxing, HyperFrames 、 OpenDesignです。
回答確認日：2026年11月7日