Bang Motion: PPTではないWebモーショングラフィックス
v1.19.0 · Bang Tutorial · MIT. 変更履歴は上流リポジトリのCHANGELOG.mdにあります。インストール手順は上流のREADME.mdにあります。このコピーは上流スキルの日本語訳です。
このスキルは、あらゆるAIコーディングエージェント（オープンAgent Skills形式）向けです。 プレゼンテーションではなく、ビデオのように動くモーショングラフィックスのための法則とレシピを保持しています。コードを書く前にこれらに従ってください。
前提条件: ブラウザだけでOK
成果物（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判定
他のモデル（そしてあなた自身も、疲れているとき）は、以下の法則を読んだ後でもこれらのパターンに陥ります。成果物を提供する前に、気持ちではなくコードをチェックしてください：
grep -c "class=\"scene\"\|\<section" index.html：autoAlpha/opacityでオンオフされる<section>要素で構成されたシーンが3つ以上ある場合、それはスライドデッキです。シーンは、WORLD/CAMERAが動く（カメラが移動する、別のコーナーにホイップする、押し通る、背景が変わる）ことで変化する必要があり、セクションがフェードすることで変化してはいけません。正当な例外：カートゥーンステージ（references/cartoon-stage.md）はステージ間でカット/96ピクセルスライドを使用します。これは、各ステージが完全に生きている（10以上のオブジェクトがアクション中）ためであり、フェードされる静止画ではありません。- 視覚的なスルーラインが持続すること：1つの主題（連続アクション）または、カメラが移動する1つのコラージュ/ペーパー/ホワイトワールド（漫画、写真、カタログ、スケッチ）。共有ワールドなしでフルブリードの写真が入れ替わる → PPT。シーンごとに1枚の写真＋1文で、シーンごとに切り替わる → カメラが動いても依然としてスライドショー：各シーンにはフレーズごとに徐々に入ってくる3〜5の要素があります（
explainer.md「1シーン＝3〜5要素」）。 - シーンごとのテキストノードを数える：アイブロウ/キッカー + タイトル + ボディ/クレジット = 3レベル → PPT。最大2つ：1つの大きな数字/文＋1つのワールドラベル。3行以内のドキュメント/スタンプ/日付ブロックは、テキストレベルではなく1つのオブジェクトとしてカウントされます。
- ケンバーンズ（写真のスケール1.0→1.05）だけが動きである → PPT。毎秒の動きは、スタイルブリーフで
techniques.md§7cメニューから選択された背景動き言語（テクスチャ背景のカメラブリージング、ドリフトグラデーション、浮遊ブロブ、ライブグレイン、セグメントごとのライトスイープ、大きくゆっくり回転する形状、上昇するパーティクル、呼吸するグリッド、ドリフトするゴーストテキスト、ケンバーンズ＋パララックス…）から来ていなければなりません。横切るバー/ライン/ピース（「レーン」、「レンジ」、「ストリーク」、水平パーティクルレイン）は、異なる名前で2つのプロジェクトで連続して使用されています。これらはデフォルトではありません。テーマが本当にスピード/フローである場合にのみ使用し、決して2つのプロジェクトで連続して使用しないでください。 - すべてのカットでフェード＋スケールバンプ＋ライトリークのみのトランジション → PPTテンプレート。別のコーナーへのホイップ、計器（地図/スピードメーター/プロフィール）へのカット、プッシュスルー。
- 説明動画は、そのスタイルに対応するスターターから開始します：
starter-explainer-cartoon、-journalism、-catalog、-sketch（コラージュモード：カメラが静止アセット上を移動）、starter-explainer（連続アクション：世界が流れる）、またはstarter-explainer-stage（カートゥーンステージ：シーンごとに1ステージ、ジョイントリグ、カメラはステージ内のみ）。コラージュ系は1つのリグを共有します。ステージ系は別のリグを持ちます。assets/starter-opener.html（テキストオープナー）からは開始しません。また、ゼロからも開始しません。 - ミニチュアはスライドです。 カメラのズームが1.08未満で、家が親指サイズになり、空の地面が画面の半分を埋める → すべてが動いていてもPPTです。探索するための大きなマップではなく、フレームサイズのステージに世界を分割します（
cartoon-stage.md法則1）。 - テンプレート骨組み（オープナー/プロモ）。 ランダウンとコードを確認します：最初のシーンはテキストが成長して左に退出するもの。3つの機能タイル/カードが横に並ぶもの。入力ボックス/検索バーに入力されるもの。オーダーフック → 機能 → 機能 → 約束 → ロゴ → CTA。コンセプトからの要求なしに2つ以上ある場合 → 新しいスキンでもテンプレートです。
references/opener-concepts.mdから骨組みを再度選択してください。
1つでも失敗 → ユーザーに見せる前に作り直してください。
対象となる作業の種類
このスキルは、一般的なWebモーショングラフィックス向けです。説明動画はその一種にすぎません。構造が異なるために独自のドキュメントがありますが、主要な種類だからではありません。
スターターはカテゴリごとに命名されています：starter-opener.htmlはオープナー、プロモ、バンパー、イントロ、キネティックタイポグラフィ用。starter-explainer-*.htmlは説明動画用で、モード/スタイルの接尾辞が付きます（-cartoon、-journalism、-catalog、-sketch = コラージュ；接尾辞なし = 連続アクション；-stage = カートゥーンステージ）。カートゥーンステージは説明動画のモード（スタイル6）であり、独立したカテゴリではありません：その目標は依然としてVOで説明することであり、制作方法が異なるだけです。
| 種類 | 通常の長さ | 特性 | レシピ |
|---|---|---|---|
| オープナー / 製品プロモ | 25～40秒 | メニューからの1つのコンセプト（骨組みは製品から来るものであり、固定順序ではない）、1つのスペシャルモーメント、ブランドクロージング | references/opener-concepts.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/cartoon-stage.mdを読んでください：シーンごとに1ステージ、ズーム1.08～1.95、ステージ内は連続、ステージ間はカット/96ピクセルスライド、手動トランスフォームによるジョイントリグ、キャプションなし、明るいフラットパレット。文、視覚的ビート、フレーミング、ステージチェンジを区別します。After Effectsで直接ビルドするには、references/ae-bridge-higgsfield.mdを読んでください。この説明動画固有のガイダンスは、以下のオープナールールをより明確にします。例示されているフォント、シーン数、エフェクトは普遍的なレシピではありません。
法則 #1: これはビデオであってスライドではありません
最も一般的な問題：モデルがシーンをタイトル＋サブタイトル＋ボディコピー＋バッジの行を持つスライドのようにレイアウトすることです。それは即座に「PPT」と読まれ、拒否されます。
厳格なルール：
- オープナーの場合：シーンごとに1つの短い文＋最大1つのメインオブジェクトのみ。 キッカー（「01 — 機能」）、サブタイトル、説明段落、機能チップ/バッジ、技術的メタデータ（パッケージ名、長いURL）はありません。使用されている製品UIの一部であるチップ、ボタン、ラベルはカウントされません。
- 新しい情報 = 新しい視覚的応答。 説明動画では、同じ世界内で、まだ関連性がある場合に状態/アクションを変更します。新しい文がショットを変更する必要はありません。
- 箇条書きは視覚的に置き換え、自動的に3つのタイルにはしないでください。
references/opener-concepts.mdの機能メニューから方法を選択します（1つの機能デモ、入れ替わる単語、変形するオブジェクト、シャッフルされたカード、タイルグリッド…）。連続する2つのオープナーは同じ方法を使用しません。 - シーンは生きている必要があります。 カメラは休止し、オブジェクトがアクションを実行しても構いません。何かを追跡または明らかにするためにカメラを動かします。静止した背景の上でテキストがフェード/スライドすることや、すべてのセグメントで繰り返されるパン/ズームに依存しないでください。
- 「ズームイン/アウト」＝ショットサイズであって、カメラのブリージングではありません。 動画が静的であるか、ユーザーがズームを要求した場合、カメラはストーリーを語っている要素（ミディアムクローズアップ/クローズアップ）に移動し、コンテンツのビートに従ってワイドに引き戻します。数パーセントのブリージングはほとんど見えません（
techniques.md§3b）。
シーンをデザインする前にreferences/anti-ppt.mdを読んでください。実際の違反例とその修正方法がリストされています。
法則 #2: 決定論的か死か
システムクロックを読み取る行は1つもありません。すべてのビジュアルはtl.time()（GSAPタイムライン時間）の純粋関数です：スペクトラム、ランニングナンバー、パーティクル、カメラシェイク（高周波サイン波、Math.random()ではない）、「流れる」オブジェクトの位置（距離をトゥイーンし、フレームごとに速度を累積しない）。結果：スクラブはAfter Effectsタイムラインのように正確で、MP4へのフレーム単位のレンダリングは毎回同一の画像を生成します。
法則 #3: スタイルはテーマから生まれ、スターターからでも、リファレンスからでもない
よくある失敗：異なる製品のオープナーが、前の製品のオープナーとまったく同じスキン（ダーク、ブルーアクセント、グロー、星雲、同じフォント）になること。モデルがスターターからスタイルを取得したからです。アニメーションは良くても失敗します：オープナーは製品の顔であり、2つの製品が同じ顔を共有してはいけません。
- スタイルブリーフが先、コードは後。 スターターに触れる前に、以下の行を書き、シーンランダウンとともにユーザーに表示します：
- テーマ/製品 + 残したい印象を表す3つの形容詞；
- コンセプトと構造のフィンガープリント（オープナー/プロモ）：
references/opener-concepts.mdからの3つの候補コンセプト、製品からの理由で選ばれた1つ、次にコンセプト · シーン数 · シーンごとのメインオブジェクト · オープニング · クロージング； - パレット：ブランド/テーマ（ロゴ、アプリアイコン、サイト、パッケージ）から取った1つのメインカラー、1つの背景色、1つのアクセントカラー。各色の16進数コードとソースを明記します。ブランドから来ていない色は「派生：理由」と記述します；
- その印象に合った特徴的な表示フォント（Poppins/Inter/Roboto/Montserrat/Arialではない）+ コンパニオンフォント。例外：主張 → 方法 → 結果というコンセプトは、製品自身のUIフォントを使用します（
references/opener-concepts.md）； - テキスト強調：単語ハイライトなし、または1つの形式のハイライト（名前を指定）。単語ハイライトはオプションであり、すべてのオープナーのデフォルトではありません；
- セグメントごとの背景言語：すべてに1つの方向性（「スタイルの方向性」テーブルから）、または変更計画（どのセグメントが、何に、なぜ、何をきっかけに変更するか）；
- シグネチャームーブ：アイデンティティとして繰り返される1種類の動き（オブジェクトワイプ、単語ごとの3Dロール、飛ぶ紙、描画する線、端にぶつかるカラーブロック…）；
- 背景の動き：
techniques.md§7cメニューからの1つの言語。シグネチャームーブと同じものではなく、自動的に「オブジェクトが交差する」わけではありません； - 背景サーフェス：§7dメニューから（グラデーション/光/テクスチャ/グレイニーグラデーション、2層以上）、フラットではありません；
- オブジェクトレンダリングスタイル：
techniques.md§7eメニューからの1つのファミリー（フラット、クレイ、グロッシー、ガラス、アイソメトリック、リアリスティック、ネオンライン…）； - 写真アセット（コンセプトが人物/場所/製品の写真を使用する場合）：ソース（ユーザー写真、Higgsfield MCPで生成、またはライセンスストック）をユーザーに確認し、さらにアクトごとのショットリスト（
references/opener-concepts.md、「オープナー内の写真」）； - トランジション：どの境界にエフェクトが必要で、どこが単純なカットでよいかを決定します。コンテキストに合わせて§4cメニューから選択します。2種類または3Dは必須ではありません；
- 1つのスペシャルモーメント（最も高価なエフェクトが1回だけ使用される場所）。
- スターターはアーキテクチャであり、スタイルではありません。
assets/starter-opener.htmlのグレーカラー、システムフォント、WebGL背景はプレースホルダーです。結果にこれらのいずれかがまだ見えている場合、スタイルは導出されていません。WebGL背景（星雲、du...