Bang Motion — ウェブ用モーショングラフィック（スライドではない）

Bang Motion — スライドではないウェブ用モーショングラフィック

v1.19.0 · Bang Tutorial 作 · MIT. 変更履歴は CHANGELOG.md にあります。 セットアップ方法は README.md にあります。

このスキルは、あらゆるAIコーディングエージェント（オープンなAgent Skills形式）向けです。 ここには、スライドプレゼンテーションではなく、ビデオのように動くモーショングラフィックのためのルールとレシピが含まれています。コードを書き始める前に従ってください。

前提条件 — ブラウザのみ

成果物（index.html）は、最新のブラウザとインターネット（CDN経由：GSAP、フォント）のみが必要です。PythonとNodeはオプションであり、scripts/serve.py（キャッシュなしサーバー、ローカルモジュールを使用する場合のみ必要）、puppeteer（スナップショット/自動検証用、scripts/export-frames.mjs → MP4）などのツールにのみ使用されます。ユーザーがこれらを持っていない場合でも：(1) 単一ファイルをビルドし、ダブルクリックで開きます；(2) ?debug=1（スクラブパネル）による視覚的な検証と、主要な秒数ごとの手動スクリーンショット；(3) 画面録画（OBS / ブラウザタブの録画）によるMP4 — 画面録画ではフレームが落ちる可能性があること、フレーム単位のレンダリングにはNodeが必要であることを説明してください。視聴のために npm install が必要な成果物を作成してはいけません。

ffmpegもオプションです。 まず確認してください（ffmpeg -version）。存在しない場合：

要件	ffmpegあり	ffmpegなし
VO同期（文/段落境界）	silencedetect	scripts/vo-pauses.html — ブラウザで開き、オーディオを選択し、SEG/PARA をコピーします。結果はまったく同じです（Web Audio、インストール不要）
オーディオの長さ/形式	ffprobe	vo-pauses.html からの DUR の数値。ブラウザは wav/mp3/m4a/ogg を直接再生します
MP4へのエクスポート	export-frames.mjs からのPNGを結合	MP4は不可 — ワンコマンドインストール（winget install Gyan.FFmpeg / brew install ffmpeg）または画面録画を提案
リファレンス動画の調査（フレーム抽出）	fps= + tile=	ユーザーに主要な秒数のスクリーンショットを送信してもらうか、ブラウザで動画を開き、特定の秒数でキャプチャ

ffmpegがなくても、説明ビデオのワークフローはVO同期まで完全に完了します。MP4のみインストールが必要です。

プレーヤー — なし、自動再生、ループ

デフォルトの成果物：画面上にパネルやプレーヤーは一切なし、開いたらすぐに再生、終了したら最初からループ（onComplete → play(0)。音声がある場合は、音声もループします）。隠しコントロール：Rキーでリスタート、Spaceキーで一時停止。スクラブパネル/タイムコードは ?debug=1（レビューツール）でのみ表示され、?clean=1 はエクスポートのために自動再生を抑制します。音声がある場合：直接 play() を試みます。ブラウザにブロックされた場合、フレーム0で停止し、最初のクリックで開始します — 「タップして開始」というテキストはありません。これは両方のスターターに組み込まれています。

構造上の禁止事項 — 機械的にチェック可能なPPTテスト

他のモデル（そしてあなたも、疲れているときは）は、以下のルールを読んだ後でも、このパターンに陥ります。提出する前に、感じではなく、コードをチェックしてください：

1. grep -c "class=\"scene\"\|\<section" index.html — 3つ以上のシーンが <section> として存在し、autoAlpha/opacity でオン/オフされる場合 → それはスライドデッキです。シーンは、世界/カメラが動く（カメラの移動、別のコーナーへのウィップ、プッシュスルー、背景の変更）ことで変化するべきであり、セクションがフェードアウトすることによってではありません。正当な例外：ステージアニメーション（references/kartun-panggung.md）は、ステージ間で96ピクセルのカット/スライドを使用します — 各ステージが完全に生きている（10個以上の動くオブジェクト）ため、許可されます。静止画像をフェードするのとは異なります。

2. 持続する視覚的な赤い糸があります：1つの被写体（連続アクション）または、カメラが辿る1つのコラージュ/ペーパー/ホワイトの世界（アニメーション、写真、カタログ、スケッチ）。フルブリードの写真が共通の世界なしで次々と切り替わる → PPT。1つの画像＋シーンごとに1文、シーンごとに切り替わる → カメラが動いていても、依然としてスライドショーです：各シーンには、フレーズごとに段階的に登場する3〜5個の要素が必要です（explainer.mdの「1シーン = 3〜5要素」）。

3. シーンごとにテキストノードを数えます：アイブロウ/キッカー＋タイトル＋本文/クレジット = 3つのレベル → PPT。最大2つ：1つの数字/大きな文＋1つの世界ラベル。3行以下の短いドキュメント/スタンプ/日付ブロックは、オブジェクトとしてカウントされ、テキストレベルではありません。

4. ケンブルス効果（写真で1.0→1.05へのスケール）のみが動きの場合 → PPT。毎秒の動きは、スタイル概要から選択された背景の動きの言語（techniques.md §7c メニューから）に由来する必要があります（テクスチャのある背景でのカメラの呼吸、グラデーションの移動、浮遊するブロブ、生きているグレイン、セグメントごとの光のスイープ、ゆっくり回転する大きな形状、上昇するパーティクル、呼吸するグリッド、動くゴーストテキスト、ケンブルス＋パララックス…）。横に移動するバー/ライン/ストリップ（「lane」「range」「streak」「水平パーティクルレイン」）は、異なる名前で2つの連続プロジェクトですでに使用されています — それはデフォルトではありません。テーマがスピード/フローである場合にのみ使用し、2つの連続プロジェクトでは使用できません。

5. すべてのカットでフェード＋スケールバンプ＋ライトリークのみのトランジション → PPTテンプレート。別のコーナーへのウィップ、インストルメント（マップ/スピードメーター/プロファイル）へのカット、プッシュスルー。

6. 説明ビデオは、そのスタイルのスターターから始めます：starter-explainer-kartun、-jurnalisme、-katalog、-sketsa（コラージュモード：カメラが静止アセットを辿る）、starter-explainer（連続アクション：世界が流れる）、またはstarter-explainer-panggung（ステージアニメーション：シーンごとに1つのステージ、ジョイントリグ、カメラはステージ内のみ）。コラージュは1つのリグ。ステージは別のリグ。assets/starter-opener.html（テキストオープナー）からではありません。また、ゼロからでもありません。

7. ミニチュアはスライドです。 カメラのズームが1.08未満で、家が親指の大きさになり、空の地面が画面の半分を占める → すべてが動いていてもPPT。世界は、探索される1つの大きなマップではなく、フレームサイズのステージに分割されます（kartun-panggung.md ルール1）。

8. テンプレートフレームワーク（オープナー/プロモーション）。 ランダウンとコードを確認します：最初のシーンは、拡大されて左に消えるテキスト。3つの整列した機能タイル/カード。入力/検索バーに入力。フック → 機能 → 機能 → 約束 → ロゴ → CTAの順序。コンセプトの要求なしに2つ以上のテンプレート → テンプレート。新しい外観でも同様。references/opener-konsep.md からフレームワークを再選択してください。

1つでも失敗した場合は、ユーザーに見せる前に作り直してください。

カバーされる仕事の種類

このスキルは、一般的なウェブ用モーショングラフィックのためのものです。説明ビデオはタイプの1つにすぎません — 構造が異なるため、独自のドキュメントがありますが、主要なものではありません。

スターターはカテゴリに応じて名前が付けられています：starter-opener.html はオープナー、プロモーション、バンパー、イントロ、キネティックタイポグラフィ用。starter-explainer-*.html は説明ビデオ用で、モード/スタイルのサフィックスが付きます（-kartun、-jurnalisme、-katalog、-sketsa = コラージュ。サフィックスなし = 連続アクション。-panggung = ステージアニメーション）。ステージアニメーションは説明ビデオのモード（スタイル6）であり、独自のカテゴリではありません：目的は依然としてVOで説明することであり、制作方法が異なるだけです。

タイプ	一般的な長さ	特徴	レシピ
オープナー / 製品プロモーション	25–40秒	メニューからの1つのコンセプト（フレームワークは標準的な順序ではなく製品から生まれる）、1つの特別な瞬間、ブランドクロージング	references/opener-konsep.md + 以下のワークフロー + references/techniques.md
バンパー / アイデンティティ / ロゴスティング	3–8秒	ロゴのビルドオン、1つのシグネチャームーブ、視聴者が気付く前に終了	techniques.md（ロゴビルドオン、ライトリーク）
イントロ / アウトロ（チャンネル）	5–12秒	チャンネル名 + 毎回同じシグネチャームーブ	以下のワークフロー
キネティックタイポグラフィ / 歌詞	15–60秒	テキストが主役。単語/文字ごとに分割。リズムはオーディオに従う	techniques.md（スプリット＋方向性ブラー、単語ごとの3Dパン）
タイトル / ローワーサード / セグメントバンパー	2–6秒	フッテージ上の小さな要素。クリーンに入退出。透明背景	techniques.md
説明ビデオ	30–90秒	ソースのある事実、登場するエンティティ、変化する視点、5つのスタイル	references/explainer.md + スタイルごとのスターター

説明ビデオとキャラクター：ショットを決める前に読むこと

フラットなキャラクター教育アニメーション（6番目のスタイル、ステージアニメーション）の説明ビデオ、またはスライドショー/ミニチュアのように感じられるリビジョンの場合は、references/kartun-panggung.md を読んでください：シーンごとに1つのステージ、ズーム1.08–1.95、ステージ内で連続、ステージ間は96ピクセルのカット/スライド、手動トランスフォームによるジョイントリグ、キャプションなし、明るいフラットパレット。文、ビジュアルビート、フレーミング、ステージの切り替えを区別してください。After Effectsで直接構築するには、references/ae-bridge-higgsfield.md を読んでください。この説明ビデオの特別なガイドラインは、以下のオープナーのルールを明確にします。フォント、シーン数、エフェクトの例は、普遍的なレシピではありません。

ルール #1 — これはビデオであり、スライドではない

最も一般的な問題：モデルがシーンをスライドのように構成する — タイトル＋サブタイトル＋本文＋バッジの列。これはすぐに「PPT」と認識され、拒否されます。

厳格なルール：

• オープナーの場合：シーンごとに1つの短い文＋最大1つの主要オブジェクト。 キッカー（「01 — 機能」）、サブタイトル、説明段落、機能チップ/バッジ、または技術的なメタデータ（パッケージ名、長いURL）はありません。使用中の製品のUIの一部であるチップ、ボタン、ラベルは含まれません。
• 新しい情報 = 新しいビジュアルレスポンス。 説明ビデオでは、関連性がある場合は同じ世界内で状態/アクションを変更します。文の変更は必ずしもショットの変更を必要としません。
• 箇条書きはビジュアルに置き換えられ、自動的に3つのタイルにはなりません。 references/opener-konsep.md の機能メニューから方法を選択します（1つの機能をデモ、単語の変化、オブジェクトの変形、カードのシャッフル、グリッドタイル…）。連続する2つのオープナーは同じ方法を使用してはいけません。
• シーンは生きている必要があります。 カメラは、オブジェクトがアクションを運んでいる間は静止できます。何かを追跡または明らかにするためにカメラを動かします。静止した背景の上でテキストをフェード/スライドさせたり、すべてのセグメントでパン/ズームを繰り返したりすることに頼らないでください。
• 「ズームイン-アウト」＝ショットのサイズであり、カメラの呼吸ではありません。 ビデオが静的であると感じられる場合、またはユーザーがズームを要求した場合、カメラはストーリーテリング要素に近づき（ミディアムクローズアップ/クローズアップ）、コンテンツのビートに従ってワイドに戻ります。数パーセントの呼吸はほとんど目に見えません（techniques.md §3b）。

シーンをデザインする前に references/anti-ppt.md を読んでください — 実際の違反とその修正のリストが含まれています。

ルール #2 — 決定論的であるか、死んでいるか

システムクロックを読み取るコード行は1つもありません。すべてのビジュアルは tl.time()（GSAPタイムライン時間）の純粋な関数です：スペクトル、ランニングナンバー、パーティクル、カメラの震え（高周波サイン波、Math.random() ではない）、「流れる」オブジェクトの位置（距離のトゥイーン、フレームごとの速度の累積ではない）。結果：スクラブはAfter Effectsタイムラインのように正確であり、フレーム単位のMP4レンダリングは毎回同一の画像を生成します。

ルール #3 — スタイルはテーマから生まれ、スターターやリファレンスからではない

よくある失敗：別の製品のオープナーが、以前の製品のオープナーとまったく同じスタイル（暗い、青のアクセント、グロー、星雲、同じフォント）で作られる。これは、モデルがスターターからスタイルを取得するためです。アニメーションは素晴らしいかもしれませんが、それでも失敗です：オープナーは製品の顔であり、2つの製品が同じ顔を持つことはできません。

1. コードの前にスタイル概要を作成します。 スターターに触れる前に、次の6行を書き、シーンのランダウンとともにユーザーに示します：
   • テーマ/製品 + 残したい感情を表す3つの形容詞；
   • コンセプトと構造の指紋（オープナー/プロモーション）：references/opener-konsep.md からの3つのコンセプト候補、製品に基づいて1つを選択、次に「コンセプト · シーン数 · 各シーンの主要オブジェクト · オープニング · クロージング」；
   • パレット：ブランド/テーマ（ロゴ、アプリアイコン、サイト、パッケージ）からの1つの主要色、1つの背景色、1つのアクセント色 — 各色のHEXとソースを記載。ブランド以外の色は「派生：理由」と記載；
   • 感情に合った個性のあるディスプレイフォント（Poppins/Inter/Roboto/Montserrat/Arial以外）+ コンパニオンフォント。例外：コンセプト「主張 → 方法 → 結果」は、製品自身のUIフォントを使用します（references/opener-konsep.md）；
   • テキストの強調：強調なし、または1つの形式の強調（指定する） — 強調はオプションであり、すべてのオープナーにデフォルトではありません；
   • セグメントごとの背景の言語：「スタイルの方向」テーブルからの1つの方向をすべてに使用、または変更計画（どのセグメントが、何に、なぜ、何によってトリガーされるか）；
   • シグネチャームーブメント：アイデンティティとして繰り返される1つのタイプの動き（オブジェクトワイプ、単語ごとの3Dロール、飛ぶ紙、描く線、端にぶつかるカラーブロック…）；
   • 背景の動き：techniques.md §7c メニューからの1つの言語 — シグネチャームーブメントと同じではなく、「横切るオブジェクト」が自動的ではありません；
   • 背景サーフェス：§7d メニューから（グラデーション/ライト/テクスチャ/グレイニーグラデーション、2層以上） — フラットではありません；
   • オブジェクトレンダリングスタイル：techniques.md §7e メニューからの1つのファミリー（フラット、クレイ、グロッシー、ガラス、アイソメトリック、リアリスティック、ネオンライン…）；
   • 写真アセット（コンセプトが人物/場所/製品の写真を使用する場合）：そのソース — ユーザーの写真、MCP Higgsfield経由で生成、またはライセンスされたストック — ユーザーに質問し、幕ごとのショットリスト（references/opener-konsep.md「オープナー内の写真」）；
   • トランジション：どの境界にエフェクトが必要で、どの境界がカットで十分かを決定。コンテキストに応じて §4c メニューから選択。2つのタイプまたは3Dが必須ではありません；
   • 1つの特別な瞬間（最も高価なエフェクトが1回だけ使用される場所）。
2. スターターはアーキテクチャであり、スタイルではありません。 assets/starter-opener.html のグレーの色、システムフォント、WebGL背景はプレースホルダーです。そのいずれかが結果にまだ見えている場合、スタイルは適用されていません。WebGL背景（星雲、ダスト、グリッド、ブルーム）は8つの背景言語の1つにすぎません。他のスタイルの方向性の場合はオフにします。
3. リファレンス = リズムであり、外観ではありません。 リファレンスビデオから取得するもの：ショットごとの長さ、トランジションのタイプ、アテンションの階層、エネルギー、モーションの言語。取得しないもの：パレット、フォント、テクスチャ、レイアウト、装飾の形、文、シーンの順序、ユニークな瞬間（特徴的なオープナー/クロージング、1回限りのギミック）。「これのように作って」は「このエネルギーで」を意味します。

[不正なカットにより、以下は省略されました]