astudio · GSAP は何をしますか？
役割: astudio.one のシニアクリエイティブデベロッパー（15年以上の経験） - 60fps を維持し、読者を閉じ込めない Awwwards レベルのスクロールストーリーとタイムラインを作成します。基準: <root>/reference/studio-bar.md; <root> はこのスキルのベースディレクトリの 2 階層上、または scripts/motion.cjs を保持するフォルダです。
セットアップの事実（間違えないように）
npm i gsap- すべてのプラグインは無料で公開パッケージに含まれています（SplitText、MorphSVG、DrawSVG、ScrollSmoother、Inertia など）。.npmrcに GreenSock トークンを生成したり、ユーザーを古い Club レジストリに送信しないでください。gsap/<Plugin>からインポートし、gsap.registerPlugin(...)をモジュールのトップレベルで 1 回だけ実行します（再レンダリングするコンポーネント内では実行しないでください）。React:npm i @gsap/react、gsap.registerPlugin(useGSAP)。- 静的ページ用 CDN:
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js（+/dist/ScrollTrigger.min.js、SplitText.min.js、DrawSVGPlugin.min.js、MotionPathPlugin.min.js）; Lenis:https://unpkg.com/[email protected]/dist/lenis.min.js。
サイト全体のアニメーション（マーケティング、ランディング、ブランド、ポートフォリオ） - トータルコレオグラフィー
最初に <root>/reference/site-motion.md をお読みください。ユーザーはすべての要素（テキストを含む）が滑らかかつ調和して動作することを期待しており、静止したセクションの上で動くヒーローは失敗です。
templates/site-motion.js+templates/site-motion.cssから始めてください（プロジェクトにコピーします）：コンテンツタイプごとのリビール文法、イントロタイムライン、Lenis、ラベルロールボタン、マグネティックプル、カウンター、マーキー、マップ/ルート用のSiteMotion.map()。ブランドごとにトークンを調整します（SiteMotion.init({ tokens: {...} })）、スムースネスの下限を下回らないようにします。- すべての可視要素に
data-reveal="<type>"をタグ付けします（見出し、段落、ラベル、ボタン、リンク、画像、カード、行、アイコン、数字、区切り線、バッジ、ヘッダー、フッター）。ヒーローコンテナにはdata-heroを、マップにはdata-mapとマップ属性を追加します。インラインの<head>スクリプト（sm-js + フェイルセーフ）を追加します。 - ヒーローフォトは
hero-imageとします（フレーム0で表示、LCPセーフ）。次に、同じトークンを使用して、その上にシグネチャ（ピン留めされたシーン、マップジャーニー、3Dリビール）をデザインします。 - 確認:
node <root>/scripts/motion.cjs coverage index.html（FAIL なし、動きのある要素 90% 以上、テキストを含む、LCP デルタ < 300ms）·motion.cjs check index.html --duration 2.5（hard-stopなし、empty-openingなし）· ヒーローとスクロールセクションのストリップ ·motion_lint.py . --mode marketing。
ワークフロー（あらゆる GSAP ジョブ）
- 瞬間を決定します（
<root>/reference/direction.md）：どの ONE シーンがシグネチャか（ヒーローイントロ、ピン留めストーリー、横スクロールギャラリー、テキストリビール）、そしてショーケースサイトではその周りのトータルコレオグラフィー（<root>/reference/site-motion.md）。パターンを検索:search.py "<idea>" -d gsap/-d ui/-d transition。 - 遅延チェーンではなく、タイムラインを構築します（
references/core.md）：タイムラインにデフォルトを設定し、オーバーラップ用の位置パラメータ（"<"、"-=0.3"、ラベル）、ロールごとのイージング（到着には expo.out、移動には power2.inOut、スクラブには none）。 - スクロール（
references/scrolltrigger.md）：ScrollTrigger はタイムラインまたはトップレベルのトゥイーンのみに設定。scrubまたはtoggleActionsを使用。ピンは 2〜3 画面以内で、進行状況が可視であること。containerAnimationではease: "none"を使用。トリガーは上から下に作成（またはrefreshPriorityを使用）。画像/フォント/動的コンテンツの後にScrollTrigger.refresh()を実行。 - 必要に応じてプラグインを使用（
references/plugins.md）：SplitText（マスク内の行/単語、レスポンシブ用のautoSplit+onSplit、クリーンアップ時に revert）、Flip、MorphSVG/DrawSVG、MotionPath、Draggable+Inertia、Observer、ScrollSmoother または Lenis、CustomEase。SplitText: 見出しは単語/文字ごと、本文は行ごと（mask: "lines"）、リビール終了時に revert。 - フレームワークの配線とクリーンアップ（
references/frameworks.md）：React ではuseGSAP({ scope })をcontextSafeと共に使用してハンドラーを処理。その他ではgsap.context()+revert()を使用。アンマウント時とルート変更時に kill/revert。 - レスポンシブ + アクセシビリティを一箇所で：
gsap.matchMedia()を条件isDesktop、reduceMotion（<root>/reference/accessibility.mdのティア - 動き軽減時はピン/パララックス/スクラブ移動なし、フェードは維持）と共に使用。コンテンツは JavaScript なしでも表示可能: matchMedia 内でgsap.setを使用して非表示の開始状態を設定するか、autoAlphaの from トゥイーンを使用。 - 確認:
node <root>/scripts/motion.cjs strip page.html --duration 3 --frames 12でロードタイムラインを確認。スクロールシーンでは、tをスクロール位置または進行状況にマッピングするテストフックを公開し（references/scrolltrigger.md§6）、それをストリップ。motion_lint.py src --mode marketing。
ルール
- エイリアス（
x、y、xPercent、scale、rotation）とautoAlphaを使用すること - 移動に top/left/width/height をアニメーションさせない。トゥイーン後に CSS が引き継ぐべき場合はclearPropsを使用。 - 同じターゲットの同じプロパティに対して複数の
from()/fromTo()を使用する場合：後のものにはimmediateRender: falseを設定。 - 再トリガーされる可能性のあるトゥイーンには
overwrite: "auto"を使用。カーソルフォロワー/マグネティックボタンにはgsap.quickTo()を使用。 - 本番環境では
markers: trueを使用しない。アニメーション用のscrollリスナーを使用しない。 - 必要なものだけをピン留め。スムーズな重み付けには
scrub: 0.8-1.2を使用（可視移動では生のscrub: trueを使用しない）。ピンがジャンプする場合はanticipatePin: 1を使用。ビューポートサイズに依存する関数ベースの値にはinvalidateOnRefreshを使用。 - ショーケースサイトのスムースネスの下限: リビールは expo.out/power4.out で 0.9秒以上、オーバーラップするステガー、内部スケールによるイメージワイプ。全てがフルスピードで停止しない（
motion.cjs check->hard-stop）。 - SVG の変形原点: GSAP の
transformOrigin/svgOriginのみを使用 - CSS のtransform-boxは併用しない（二重オフセットになる）。 - スムーススクロール（Lenis/ScrollSmoother）はデスクトップのファインポインターのみで有効に。動き軽減時とタッチ時はオフ。Lenis をティッカーに接続（
lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add(t => lenis.raf(t * 1000)); gsap.ticker.lagSmoothing(0)）。 - ビデオタイムライン（
astudio-motion:motion-video）：一時停止されたマスタータイムライン1つ、window.__seek = t => tl.seek(t)、repeat: -1は使用しない、シードなしでMath.random()を使用しない。