MooT020/gsap-explainer

GSAPエクスプレイナー — プロデュースされた動画ティア

自己完結型HTML/SVG/GSAPエクスプレイナーを構築します。これはスライドショーではなく、プロデュースされたYouTubeアニメーションのように動作します。シーンごとに1つのGSAPタイムラインが物理感のある振付を駆動し、持続的に飛び回るホストマスコット、奥行きのある階層化されたグラデーションワールド、キャラクター集団、ビネットとグレインの「カメラ」、シーク可能なプレイヤーを備えます。CSSのみのハーネスは小さなファネル埋め込み用に使用し、YouTubeグレードのコンテンツ動画にはこれを使用します。

**リファレンスビルドは、このスキルフォルダ内のscaffold.html**です。これは5シーンの動作例（トピック：「複利が雪だるま式に増える仕組み」）で、以下のすべてのパターンをコンテキスト内で示しており、保持とゼロ重複が確認されています。GSAPは取り除かれた状態で提供されます。python3 inline-gsap.py scaffold.htmlを1回実行し（GSAP 3.13をgitignoredなvendor/にフェッチしてインライン化）、ファイルを開くと再生されるはずです。以下のパターンが不明な場合は、これを参照してください。

ここから始める — 失敗しないパス

1. 最初にショットスクリプトをマークダウンドキュメントとして記述します。シーンごとに：タイムスタンプ、再生時間、映像、画面上のテキスト、ナレーション行。最後に正確性チェックリストを追加し、その中のすべての主張を検証します。シーンの再生時間はSCENES配列になり、ナレーション行はsr-onlyトランスクリプトになります。
2. scaffold.htmlを<トピック>.htmlにコピーします。すべての注意点（ハーネスクロック、シークUI、ホストの飛行、ワールド背景、カメラオーバーレイ、集団キャラクター、動作軽減、トランスクリプト）があらかじめ修正されています。何も触る前にinline-gsap.pyを実行してファイルを開き、再生されることを確認します。
3. シーンを1つずつ置き換えます。5つの動作例をイディオムソースとして保持し、それぞれが置き換えられるまで使用します：S0 = フリップリビールによるダークフック、S1 = バウンス付きドロップの物理、S2 = 注ぐ/motionPath飛行 + DrawSVG、S3 = 強制オーバーラップ衝突の証明（ピークパターン）、S4 = CTAホールド。SCENES、FL、ACTS、CH_STARTSを一緒に更新します — これらはシーンインデックスでキー付けされた並列構造です。
4. すべてのシーンをフリーズフレームでQAし（QAを参照）、修正して公開します（自己完結型ファイル）。

以下のパターンが一致する場合、ゼロからシーンの振付を書かないでください — パターンを適応させてください。これがモデルに関係なく基準を達成する方法です。

アーキテクチャ契約（スキャフォールドですでに配線済み）

• 固定800×500ステージ、コンテナにスケーリングされます（fitScale）。シーンクロックはsetTimeoutです（SCENES配列、シーンの秒数。最後のエントリ999 = CTAホールド。advance()はそれに対してdone()を呼び出します）。
• テキスト/チップ/キャプションはCSSプリミティブ（.fuフェードアップ、.ppポップ、.fiフェードイン）でアニメーション遅延をインラインで指定して入場します — 安価でリプレイ可能です。ヒーロー振付はGSAPです。runScene(i)（showSceneから呼び出される）は前のタイムラインをキルし、FL[i]（ホスト飛行）+ ACTS[i]（シーン行為）からgsap.timeline()を構築します。
• すべてのACTS[i]は、それが触れるすべての要素に対してgsap.set(...)リセットで始まらなければなりません — シーンはリプレイ/シーク時に再アクティブ化され、キルされたトゥイーンは古いインラインスタイルを残します。
• GSAP所有の要素はg-heroクラスを取得し（またはその中に存在し）、決して.fu/.pp/.fiを持ちません — 要素ごとに1つの所有者です。
• pause()/resume()はcurTl.pause()/play()を呼び出します。CSS側は.pausedクラスでフリーズされます。ナビゲーションは常に再生を再開します（一時停止された、切り替わったばかりのシーンは不透明度0の入り口にあります — 「シークして一時停止したまま」にしないでください）。
• プレイヤー：クリックしてシークするプログレスバー（sceneAt(frac)）、前/次のボタン、←/→キー、チャプターチック（CH_STARTS）、スクロール時の自動再生、タブ非表示時の自動一時停止。
• 成果物は無音のビジュアルトラックです（マスターは無音のまま）。ナレーションは、ElevenLabsパイプライン（VO制作を参照）によって構築された別個の<名前>-vo.htmlプレビューバリアントとして出荷されます。sr-onlyトランスクリプトはVOスクリプトそのものです。読み上げに合わせたリタイミング = SCENES[i]をクリップ+1.5–2秒に延長します（延長は決してビートを途切れさせません。トリムだけがそうします）。

パターンライブラリ（適応せよ、発明するな）

これらはすべてscaffold.htmlにそのまま存在します — 最も近いものをコピーしてください。

• ホスト飛行 — FL[i] = [[分数, x, y, 指差し], ...]。最初のウェイポイント = 前のシーンの最後（シームレスカット）。長い区間はMotionPath経由で自動スウープします（fly()内）。鉛筆の先端はアクターオフセット約(−10, +95)にあります。ターゲットを指すには、ホストをターゲットの右上に配置します。フレームが必要ないシーンでは、ホストをステージ外（x=850）に送ります。
• 重みのあるドロップ — gsap.set(els,{y:-300,opacity:0})、次に.to(els,{y:0,opacity:1,ease:'bounce.out',stagger:.09})。スタガー + バウンスが物理感です。（layMarblesは容器内に行を詰めます。行幅は180ではなく168です — 広いとドロップが壁を突き抜けます。）
• 強制オーバーラップ衝突（証明のピーク） — 2つのバーが両方を保持できない1つのトラックにドロップします。2つ目はかわそうとします（xのヨーヨー）、失敗し、落ち着きます。オーバーラップセグメントがback.outでポップインし、グローします（boxShadowヨーヨー repeat:-1）。次に、両方のバッジを着用したキャラクターミニオン2体がその中にポップインします。意図 → 失敗 → 結果が、それを生き生きと感じさせるものです。
• 注ぐ/変形 — コンテナが回転し（transformOriginは注ぎ口）、内容物が1つずつmotionPathアークで飛び出します（{path:[{x,y},{x,y}],curviness:1.6}, ease:'power1.in'）、列に着地し、DrawSVGで描かれた新しい形状にクロスフェードします。
• フリップリビール — 誘惑的な✓がポップし（back.out(2.4)）、揺れ、次に✗が激しく入ってくる（scale:3→1, power4.out）+ 背景フラッシュ（backgroundColorヨーヨー）と交換されます。
• 誘惑してから粉砕 — 答えがグロー/パルスし（scaleヨーヨー ×3）、次に消えます（opacity:.25, scale:.92, rotation:-3, power2.in）。正しい答えがその後スタンプインします。
• スタンプスラム — gsap.set(stamp,{opacity:0,scale:2.6,rotation:-14}) → .to({opacity:1,scale:1,rotation:0,duration:.35,ease:'power4.out'})。
• DrawSVG — gsap.set(path,{drawSVG:'0%'}) → .to({drawSVG:'100%'})。スナップバック = 72%まで描画してから高速で逆転。DrawSVGはstroke-dasharrayを上書きします — 破線は描画中は実線でレンダリングされます。それに応じて設計してください。
• キャラクターとしての集団（最もKurzgesagtらしい動き） — minion(size, badges)ミニキャラクターファクトリー：数量はドットではなく小さなキャラクターです。35–55秒のCSSループ上のアンビエント3キャラクタースウォーム。グループはそのキャラクターキャストを含みます。証明の瞬間は、両方のバッジを着用したキャラクターです。
• シーンカットワイプ（runSceneに組み込み） — 2つの傾いたパネル（アクセントがリード、インクトレイル.09秒）がすべてのカットでステージをスイープします。そのままにしておいてください。これは最も安価な「本物のトランジション」の勝利です。盗む価値のあるプロップ豊富なシーンアイデア：生きているページキャラクター、ハイライターの跡、ファイルキャビネット、ゲージ針、プログレスバーレース。

無料プラグインスイート（GSAP 3.13 — Webflowの買収以来すべて無料）

inline-gsap.pyは、コア + DrawSVG + MotionPath + MorphSVG、SplitText、Physics2D、PhysicsProps、CustomEase、CustomWiggle、CustomBounce、Flip、ScrambleTextをフェッチしてインライン化します。すべて無料ライセンスです。inline-gsap.py <file>は、<!--GSAP_INLINE-->マーカーの場所にすべてとregisterPluginブロックを注入します。--refreshは、すでにインライン化されたファイル内のスイートを交換します。実証済みのパターン（すべてスキャフォールドに存在）：

• SplitText文字カスケード — 初期化時にレジストリ経由で1回分割します（SPL{}にキャッシュするsplitOnce(key,sel) — すべてのシーン再実行で再分割するとスパンがネストされます）。キッカー：{opacity:0,y:14}からの文字、スタガー.016、開始≤.15秒。ヒーローワード：{y:-64,rotation:-9}からの文字、back.out(1.9)スタガー.07。または{scale:2.7} power4スタガー.11 = スタンプスラム。シーンは不透明度で非表示にします（display:noneではない）ので、初期化時の分割は安全です。
• ScrambleText定義ロック — ペイオフ行がスクランブルして所定の位置に配置されます：scrambleText:{text:'≥ 1',chars:'<>=~≠≤≥',speed:.6}。JS文字列内の記号にはJS \uエスケープを推奨します。テーマ別の文字セット（定義の場合は数学記号）は、'upperCase'よりも読みやすくなります。長いランダム大文字スクランブルはローディンググリッチとして読み取られます。
• CustomWiggleセトル — CustomWiggle.create('wigSettle',{wiggles:4,type:'easeOut'})、次にrotation:'+=10', ease:'wigSettle' — 振動して開始位置に戻ります。そのため、相対値がリプレイ間で累積することはありません。以下に使用します：スタンプ着地、キャラクターの反応、到着時のホストの鉛筆タップタップ（fly()内のif(wp[i][3]&&!wp[i-1][3])）。
• CustomBounceドロップとスカッシュ — CustomBounce.create('thud',{strength:.58,squash:2.4})は、ペアのイージング'thud'+'thud-squash'を作成します。drop(tl,targets,time,dur,stagger)ヘルパーは3つの同期トゥイーンを実行します：不透明度ポップ、y with 'thud'、scaleX:1.45,scaleY:.55 with 'thud-squash'（リセット内でtransformOrigin:'50% 100%'）。bounce.outよりも厳密に優れています — スカッシュが重さです。
• Physics2Dバースト — burst(tl,scene,x,y,n,time,colors)：着地が重要でない祝賀/デブリ粒子（衝突ピーク、勝利スタンプ）。インデックスシードされた角度/速度（(i*53)%140）= リプレイ同一、Math.randomなし。再突入時に古い.pfxを削除します。シーン終了前にフェードアウトして、何も残らないようにします。
• MorphSVG融合 — 最高のKurzgesagtムーブ：N個のオブジェクトが概念に「なる」。アイテムが列に着地 → カプセルパスがそれらの上にフェードイン → morphSVGで矢印のシルエットに変更、同時にfillがトゥイーンされます（文字通り「同じオブジェクト、新しい形状」）。リセットにはgsap.set(path,{morphSVG:ORIGINAL_D})が必要です — モーフィングされたパスはその変異したdを保持します。
• Flip：ここでは使用しないでください — 固定800×500絶対座標ステージでは、常にデルタがわかっています。プレーンなy:トゥイーンはtl.pause(t)QAの下で決定論的ですが、Flipの実行時測定はフリーズフレームスクラビングを壊します（そしてコールバックは抑制されたシークでは発火しません）。Flipは、実際のリフローレイアウト（DOM駆動のリスト、レスポンシブコンテナ）でのみその価値を発揮します。「空いた場所を主張する」ビートは、既知デルタのトゥイーンです。

アセットクラフト（10倍パスパターン — プロップがスタイル付きdivに見えなくなる方法）

ディープダイブ：完全なアセット生成規律（ビルド順序、ファクトリー、SVG契約、品質ゲート）は、explainer-assetsスキルにあります — アセットを作成または再構築するたびにそれを使用してください。このセクションはクイックリファレンスです。

• ワンレシピステッカー — 奥行きは完全に階層化されたbox-shadowから生まれます：ハードダウンライトインクドロップ（3px 3px 0 var(--ink)）+ inset 0 2px 0 rgba(255,255,255,.3-.5)トップグロス + inset 0 -3px 0 rgba(0,0,0,.1)ボトムシェード + inset 0 0 0 1-2px rgba(255,255,255,.14)ダイカットリム。半透明のインセットは任意の背景色に乗るため、.xchip/.qbar/.stamp/.l3 span上の1つのCSSパスが、明るいものと暗いものの両方のすべてのバリアントを向上させます。1つの半径スケール（sm 10 / base 13 / lg 16）とフィルム全体で1つの光源方向（左上）を維持します。
• フラットフィルのツートン — background:rgba(...)をlinear-gradient(180deg, lighter, base) + グロス/シェードインセットに置き換えます。セマンティックカラーは維持され、表面は照明があるように読み取られます。
• クラフト容器レシピ（バケツ/瓶/カップ） — ベースシャドウ楕円 → グラデーション本体 → 1px白ハイライト付き2本の先細りフープバンド → リムリング + より暗い内部開口部楕円（その1つの暗い楕円が口を3Dに見せるもの） → 柔らかな鏡面反射曲線。台形の辺に沿ってバンドエンドポイントを補間します。
• 1セレクタでクラフト線画 — すべての描画されたストロークに静的なfilter:drop-shadow(0 1.5px .5px rgba(0,0,0,.17))を適用すると、すべての矢印/ボックスにツートン下部が与えられ、DrawSVGアニメーションとともにリビールされます（フィルターはdashoffsetから独立しています）。
• 疑似要素でGSAP駆動プロップを装飾 — ::before/::after（罫線、テープ片、ひび割れ、メニスカス線）は、タイムラインの変換を自動的に継承します：新しい振付はゼロ、フットプリントの変更はゼロ。クラスごとにどの疑似が「使用中」かを追跡します — 衝突はサイレントです。
• ファクトリーキャラクター：シングルトンのみID — ホスト（1インスタンス）はuidサフィックス付きのグラデーション/鏡面反射を持つ場合があります。多数インライン化されたファクトリー（ミニキャラクター）はIDフリー（プレーンフィルのみ）のままでなければなりません。そうしないと、ドキュメント全体でIDが重複します。
• 再クラフト中も振付契約を維持 — 最初にスクリプトからセレクタインベントリを構築します。位置セレクタは地雷です（.bkt3 path = 最初のパスはトゥイーンされたボディのままでなければなりません — パスではなく楕円でリードします）。新しい装飾変換はラッパー<g>に配置します。
• テキストセーフグロスの注意点 — SplitText/ヒーローテキストを運ぶチップでは、グロスはインセットボックスシャドウ（テキストの下にペイント）でなければならず、配置された::beforeオーバーレイ（文字の上にペイントして暗くする）であってはなりません。
• 紙の山 + 犬耳レシピ（任意のシートプロップ） — 2つのオフセットバック長方形（±0.6–1.5°回転、より暗いクリーム色、svgでoverflow:visible）、角をカットした影の三角形 + 折りたたまれたフラップ、マージンルール、左上の光沢パス。フットプリントは変更なし、視覚的なにじみのみ。
• 引き出し/家具フロントキット — フロント長方形 + トップグロスストリップ + ラベルプレート + 凹んだハンドルバー + ユニット間奥行き影線。ハイライトされたユニットのパレットをパラメータ化し、そのアニメーションクラスを維持します。
• 2トーンベクター雲 — 着色されたベース楕円 + 3つの重なる白い円 + 1つの明るいトップ楕円。ムードバリアントごとにベースの色合いを再着色します。
• ブループリントカードオーバーレイ — カードの最初の子として絶対配置された子svg（薄い罫線グリッド + 4つのコーナーチック）：カードのトゥイーンクラスやテキスト子にゼロの影響で、技術図面テクスチャを提供します。

映画レイヤー（Kurzgesagt合格パターン）

• カメラリグ#xplCam — #xplStage内部のコンテンツ専用ラッパーで、シーン（環境レイヤー、アクター、ビネット/グレインは外側に残ります）を保持します。ペイオフでのビートごとのプッシュイン（〜1.02–1.05、transformOriginはヒーローに）、リビールでのプルアウト、すべてのカットでrunSceneでスケールを1にリセットします。#xplStage自体をスケーリングしないでください — それはfitScaleの役割です。ピークシーンは、その行為全体を通じて1つの途切れないスロークリープを獲得します。全幅コンテナではなく、表示可能なピル/プロップの境界に対してクリップリスクを確認します。
• ホスト演技ハンドルactorBody — .xpl-actor > [data-host] div、fly()（外部x/y）およびarmElから独立しています。ヘルパー：ホップ（y-8ヨーヨー）、リーン（指したターゲットに向かって±4°）、驚き（後退+傾き）、最大の勝利で360度スピン。各カットでリセットします。ミニキャラクター入場の個性：ポップの前にエッジの後ろから覗く（xオフセット → 0）。
• 見返りのライト — 1つの共有#xplGlowぼかしラジアル（mix-blend-mode:screen、CSS var経由で色合い）、各シーンの最大のビートでヒーローオブジェクトの後ろに配置され咲き、カットごとにリセットされます。約15行で瞬時に「照明のある」感触。
• 時刻のドリフト — 初期化時に#envFarにベースfilterをシードします（トゥイーンが補間できるように、noneからジャンプしないようにするため）、次に明るさ/色相をイージングします

...