Bang Motion

Bang Motion は、コーディングエージェントにスライド風のウェブではなくモーショングラフィックを組ませるスキルです。成果物は自動再生しループする index.html 1 つです。リポジトリ bangtutorial/bang-motion は HTML、作成日 2026-09-05、MIT。README のバッジは version 1.19.0。2026-09-19 の GitHub は 390 stars、62 forks。390 stars は熱量の信号であり、トラフィックではありません。

動かす相手は Claude Code、Codex、Gemini CLI、Cursor。Remotion の製品フィルムは video-shotcraft。黒キャンバスの解説は anything2explainer。ボードデッキは consulting-pptx-skill。

主な機能

• HTML 1 ファイル：ダブルクリックで再生。?debug=1 でスクラブ。任意の scripts/export-frames.mjs（Node、puppeteer、ffmpeg）が MP4 を書く。
• メニューであり、一顔ではない：10 のスタイル方向、19 のコンセプト、9 のレンダー族。必須のスタイルブリーフがブランドから色と活字を導く。README はスターターの皮をコピーするなと書く。
• 名指しの仕事：オープナーとプロモ（15-40 秒）、SaaS ツアー（20-60 秒）、キネティックタイプ（10-30 秒）、バンパー（3-10 秒）、解説（30-120 秒、16:9 または 9:16）。
• フッテージ層：自分の MP4 や生成クリップをマスクし、シーンと同じタイムラインに載せる。
• 任意の After Effects：AE が開き Higgsfield MCP ブリッジがあるとき、カートゥーン解説を AE 内で組める。

制限：視聴にはブラウザと CDN の GSAP・フォントが要る。フレーム QA と MP4 書き出しは任意の Node 仕事。コピーは 1 つだけ。プラグインと手動フォルダが同じスキル名だと衝突し、プラグインが勝つ。

使用シナリオ

• 動画のように動き、PowerPoint のように見えてはいけないローンチと製品ツアー。
• 舞台上の主体が途切れない解説。
• スキップ：36 インチの研究ポスターやコンサル PDF なら PPTX Posters か consulting-pptx-skill。

料金プラン

はじめに

1. Claude Code：/plugin marketplace add bangtutorial/bang-motion のあと /plugin install bang-motion@bang-motion。
2. または ~/.claude/skills/bang-motion（あるいは Codex のスキルフォルダ）にクローン。
3. オープナー、プロモ、解説を頼み、ブランドブリーフを付ける。
4. index.html を開く。フレーム書き出しの前に ?debug=1。

第一者の入口：README。

よくある質問

成果物は動画ファイルですか？

既定は動画のように再生する HTML。MP4 は任意のフレーム書き出しです。

参考映像を渡せますか？

渡せます。README はリズムと動きの言語は借りてよいが、パレット、フォント、レイアウト、シグネチャショットは借りないと書く。

写真は必要ですか？

写真スタイルのときだけ。それ以外は活字かイラストを選ぶ。

代替案

• video-shotcraft：Remotion の映画的プロダクトフィルム。
• anything2explainer：TTS 付き Remotion 解説。
• consulting-pptx-skill：静止したボードデッキ。

ヒント

1. プラグインと第二の同名フォルダを同時に入れない。
2. 見た目はブランドブリーフから導き、前作からコピーしない。
3. ffmpeg の前に ?debug=1。

まとめ

Bang Motion は、スライドを吐くエージェント向けのオープンなモーションデザインスキルです。コピーは 1 つ、ブランドをブリーフし、動く HTML を出す。本物の映像グラフが要るなら Remotion スキルを使い、静止ポスターなら使わない。