Bang Motion — PPTではないモーショングラフィックWeb
モーションエクスプレーナーライブラリ. 以下は、単一の自己完結型index.html（HTML + CSS + GSAP）のためのスタンドアロンのBang Motionディレクターズマニュアルです。このライブラリ内では、同じルックが3つのエンジンとしても出荷されており、通常のパイプラインに配線されているため、他のスタイルと同様にリールで使用できます。
style.json: マニフェスト (bang-motion, キャンバス1080x1920、30 fps、エンジンremotion,fframes,kyfram)remotion/:kit/(GlowHorizon,GrainyMeshBlob,GlassCard,KineticTitle,StatusPill,BangBanner,GlassCaptions,LivingGrain),template/,sync_kit.sh,CATALOG.md,AGENT_BRIEF.mdfframes/:Cargo.toml,src/(lib, tokens, kit, look, video, main),tools/ff.shkyfram/PRELUDE.lgv: パレットトークンとビートファニチャ (drawBackdrop,drawBanner,drawCaptions,drawPanel,drawDot,drawFrame) for.lgvscenesdocs/style-guide.mdanddocs/style-prompt.md: 圧縮されたスタイルシートとポータブルプロンプト
エピソードのスキャフォールディング: ./core/new_episode.sh <series-dir> 01-slug Episode out-name --style bang-motion --engine remotion (または --engine fframes|kyfram)。パイプラインスキルはスタイル名を$MOTION_STYLEとして受け取るため、ワークフローの他の部分は変更する必要がありません。
スタイルのDNAを一言で言うと：一つの連続した世界、常に動く少なくとも2つのレイヤー（深いベースと光る水平線）で構成される背景、ランダムノイズではなくtからオフセットするグレイン、静的なフレームではなく呼吸するカメラ、単一の繰り返しワイプではなく動機付けられたトランジション、そしてスライドの情報量ではなく、1ショットあたり1つのステートメント。
v1.19.0 · by Bang Tutorial · MIT. 変更履歴はCHANGELOG.mdを参照。インストール方法はREADME.mdを参照。
このスキルは、あらゆるAIコーディングエージェント向けです（オープンなAgent Skillsフォーマット）。 内容は、プレゼンテーションではなく、映像のように動くモーショングラフィックのためのルールとレシピです。コードを書き始める前にこれらに従ってください。
前提条件 — ブラウザのみ
成果物 (index.html) は、モダンなブラウザとCDN（GSAP、フォント）のためのインターネット接続のみが必要です。PythonとNodeはオプションであり、作業ツールとしてのみ使用されます：scripts/serve.py（no-cacheサーバー、ローカルモジュールを使用する場合のみ必要）、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— 3つ以上のシーンが<section>で構成され、autoAlpha/opacityでオン/オフされている場合 → それはスライドデッキです。シーンは、DUNIA/KAMERAが動くことで変化する必要があります（カメラが動く、別の隅にホイップする、プッシュスルー、背景が変わる）、セクションがフェードアウトするのではありません。正当な例外：ステージカートゥーン (references/kartun-panggung.md) は、ステージ間の96pxのカット/スライドを使用します — 各ステージは完全に生きている（10以上の動作するオブジェクト）、フェードアウトする静止画像ではないため、許可されます。 -
持続するビジュアルの共通項がある：1つの被写体（連続アクション）またはカメラがたどる1つのコラージュ/紙/白い世界（カートゥーン、写真、カタログ、スケッチ）。共有の世界なしでフルブリードの写真が次々と変わる → PPT。シーンごとに1枚の画像+1文、シーンが変わるたびに変わる → カメラが動いても依然としてスライドショー：各シーンには、フレーズごとに段階的に現れる3～5個の要素が必要（explainer.md「1シーン＝3～5要素」）。
-
シーンごとにテキストノードを数える：アイブロウ/キッカー + タイトル + 本文/クレジット = 3階層 → PPT。最大2つ：1つの大きな数字/文 + 1つの世界ラベル。ドキュメント/スタンプ/日付ブロックに3行以下の短い行が含まれる場合は、オブジェクトとしてカウントされ、テキスト階層とは見なされません。
-
ケンブリッジ効果（写真で1.0→1.05にスケール）が唯一の動きである場合 → PPT。毎秒の動きは、スタイルブリーフで
techniques.md§7cのメニューから選択された背景動きの言語に由来する必要があります（テクスチャ背景で呼吸するカメラ、移り変わるグラデーション、浮遊するブロブ、生きているグレイン、セグメントごとの光のスイープ、ゆっくり回転する大きな形状、上昇するパーティクル、呼吸するグリッド、シフトするゴーストテキスト、ケンブリッジ効果+パララックス…）。横に走るバー/ライン/カット（「レーン」、「レンジ」、「ストリーク」、「水平パーティクルレイン」）は、異なる名前で連続して2つのプロジェクトですでに使用されています — それはデフォルトではありません；テーマが実際にスピード/フローである場合のみ、そして連続して2つのプロジェクトで使用してはいけません。 -
トランジションがすべてのカットでフェード+スケールバンプ+ライトリークのみ → PPTテンプレート。別の隅へのホイップ、楽器へのカット（地図/スピードメーター/プロフィール）、プッシュスルー。
-
エクスプレーナーは、そのスタイルのスターターから始めます：
starter-explainer-kartun、-jurnalisme、-katalog、-sketsa（コラージュモード：カメラが静止アセットをたどる）、starter-explainer（連続アクション：世界が流れる）、またはstarter-explainer-panggung（ステージカートゥーン：シーンごとに1つのステージ、ジョイントリグ、カメラはステージ内のみ）。コラージュは1つのリグ、ステージは別のリグです。assets/starter-opener.html（テキストオープナー）からではなく、ゼロからでもありません。 -
ミニチュアはスライドです。 カメラのズームが1.08未満で、家が親指の爪のように小さく、空き地が画面の半分を占める → すべて動いていてもPPT。世界は、1つの大きな探索マップではなく、フレームサイズのステージに分割されます（
kartun-panggung.mdルール1）。 -
テンプレートフレームワーク（オープナー/プロモ）。 ランダウンとコードを確認：最初のシーンはテキストが拡大されて左に出ていく；3つの機能タイル/カードが並んでいる；入力される検索ボックス；フック→機能→機能→約束→ロゴ→CTAの順序。コンセプトの要求なしに2つ以上 → テンプレート、たとえ外観が新しくても。
references/opener-konsep.mdからフレームワークを選び直してください。
一つでも失敗したら → ユーザーに見せる前に作り直してください。
カバーする仕事の種類
このスキルは、モーショングラフィックWeb全般を対象としています。エクスプレーナーはその一種に過ぎません — 構造が異なるため独自のドキュメントがありますが、主要なものというわけではありません。
スターターはカテゴリに応じて命名されています：オープナー、プロモ、バンパー、イントロ、キネティックタイポグラフィには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、ステージ内で連続、ステージ間で96pxのカット/スライド、手動トランスフォームによるジョイントリグ、キャプションなし、明るいフラットパレット。文、ビジュアルビート、フレーミング、ステージの切り替えを区別してください。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つの製品が同じ顔を持つことはできません。
- スタイルブリーフが先、コードは後。 スターターに触れる前に、次の6行を書き、シーンランダウンと一緒にユーザーに示してください：
- テーマ/製品 +
...（省略）” }