Cinematic Web — 意図を持った動きは何をしますか？

映画のようなWeb体験を構築するためのスキル：スクロールがカメラのように機能し、各要素がタイミング、重み、優雅さを持って登場するサイト。ベーススタックは Next.js + Tailwind + GSAP + ScrollTrigger + Lenis ですが、核となる動きのシステムはプレーンな HTML/CSS、WordPress/Divi、LearnWorlds にも移植可能です。

中心哲学： 映画的なサイトは速くはありません — 意図を持ってゆっくりです。 急ぎは優雅さの敵です。コードを書く前に動きが決定され、コードはそれに従うだけです。

黄金律（決して破ってはいけないルール）

3つのライブラリ、3つの責任。これらを混同することが、モバイルでのスクロールの震えやバグの原因第1位です。

ライブラリ	単一の責任	絶対にやらないこと
Lenis	スムーズスクロール（慣性、スクロールの「重み」）	要素をアニメーションしない
GSAP	要素の動き（位置、不透明度、スケール）	ページのスクロールを制御しない
ScrollTrigger	オーケストレーション — 各アニメーションがスクロールに応じていつ/どのように発火するか	独自のスクロールループを実行しない

そして、アマチュアとプロフェッショナルを分ける細部：Lenis と ScrollTrigger は同じ時間ループ（gsap.ticker）を共有する必要があります。 別々の RAF で実行すると、scrub が震えます（ジッター）。正規の統合は assets/lib/lenis-provider.tsx にあります — 常にこのパターンを使用し、決して2つの requestAnimationFrame をばらまかないでください。

// 統合の核（詳細は references/01-setup.md を参照）：
lenis.on('scroll', ScrollTrigger.update);          // Lenis がスクロールのたびに ScrollTrigger に通知
 gsap.ticker.add((time) => lenis.raf(time * 1000)); // GSAP が Lenis の RAF を駆動（時間の唯一の源）
gsap.ticker.lagSmoothing(0);

動きのシステム（即興ではなくトークン）

「芸術的な洗練」は最後に目視で調整されるのではありません — 最初から assets/lib/motion.ts に一元化されたトークンによって強制されます。すべてのアニメーションはここから取得します。これにより、調整が決定論的になります。

正規の継続時間（秒）：

トークン	値	用途
`fast`	0.6	絶対最小。映画的には0.6秒未満はありません。
`base`	0.9	テキストと画像の標準的なリビール
`slow`	1.2	ヒーロー、セクションの出現、息継ぎの瞬間
`epic`	1.8	アンカートランジション、「カメラの瞬間」

正規のイージング（動きの「署名」）：

トークン	値	感覚
`out`	`power3.out`	標準。明確な開始から優雅に減速
`inOut`	`power3.inOut`	行って戻る動き（ピン、カメラ）
`expo`	`expo.out`	ドラマチックなリビール、速度の高いコントラスト
`soft`	`power2.out`	微妙なマイクロインタラクション

調整ルール（フェーズ5）： 0.6秒未満のトランジションは延長します。power または expo ではない ease（例：linear、back、bounce、elastic）は差し替えます — これらは映画的な落ち着きを壊します。連続する要素間の stagger：0.15〜0.2秒。

ワークフロー — 5つのフェーズ

順番に実行します。各フェーズには、すぐにコピー＆ペーストできる完全なレシピが含まれたリファレンスファイルがあります。コードを生成する前に、そのフェーズのリファレンスを読んでください。

フェーズ1 — プロジェクトの「聖書」（AIに推測させない）

コンポーネントの前に、ルールを確立します。assets/CLAUDE.md のテンプレートを使ってプロジェクトルートに CLAUDE.md を作成/更新し、references/01-setup.md に従ってスタックのセットアップを行います。

インストール: gsap @gsap/react lenis（新しいプロジェクトの場合は+ Next/Tailwind）。
CLAUDE.md に黄金律と動きのシステムを固定します。
assets/lib/lenis-provider.tsx と assets/lib/motion.ts をプロジェクトにコピーします。
まだコンポーネントは生成しません。 まず基盤を作ります。

フェーズ2 — 映画的なヒーロー

第一印象がトーンを定義します：最初のインタラクションの前の緊張感と流動性。完全なレシピは references/02-hero.md にあります。

フルスクリーン、ループする背景ビデオ（画像フォールバックとオーバーレイ付き）。
テキストはマスク + y/opacity でソフトなリビール（slow + expo.out）、stagger で順に表示。
ユーザーが下にスクロールし始めたら消えるスクロールインジケーター。

フェーズ3 — 「カメラの視線」でのスクロール

魔法が起こる場所：スクロールがカメラの動きに変わります。レシピ（ピン、シーケンス、パララックス、スクラブ）は references/03-scroll-camera.md にあります。

ScrollTrigger によるピンスクロールセクション。
要素が順に（stagger 0.15〜0.2秒）power3.out で出現。
制御されたスクロール（scrub）、自由なアニメーションではない — 時間はユーザーの指に追従します。

フェーズ4 — モバイルの混乱を飼いならす

複雑なアニメーションは偶然ではなく設計によってモバイルで壊れます。戦略は references/04-mobile-a11y.md にあります。

gsap.matchMedia() でデスクトップとモバイルを分離 — コード全体に if をばらまかない。
prefers-reduced-motion を尊重（アクセシビリティ + 酔い止め + 法的リスク）。
パフォーマンス：transform/opacity のみアニメーション、タッチでの重い pin を避け、Lenis↔ScrollTrigger の競合を確認。
モバイルを修正する際にデスクトップの美観を変更しない。

フェーズ5 — 芸術的な洗練

「アニメーション」と「映画的」を分ける最終的な磨き。チェックリストは references/05-refinamento.md にあります。

0.6秒未満のすべてのトランジション → 延長。
power/expo 以外のすべての ease → 差し替え。
一貫性を確認：すべてが motion.ts から取得されているか？時間が一緒に呼吸しているか？

品質チェックリスト（納品前に実行）

Lenis と ScrollTrigger が gsap.ticker を共有している（RAFの重複なし）。
React アニメーションが useGSAP（@gsap/react から）を scope 付きで使用 → 自動クリーンアップ、ルート間のリークなし。
GSAP を使用するコンポーネントは "use client" であり、プラグインを登録している（gsap.registerPlugin(ScrollTrigger, useGSAP)）。
すべてのタイミング/イージングが motion.ts から来ている — マジックナンバーが散在していない。
gsap.matchMedia() がデスクトップとモバイルをカバーしており、prefers-reduced-motion が動きを無効化/短縮している。
transform と opacity のみアニメーション（width、top、margin はアニメーションしない → リフロー）。
ページの高さを変えるフォント/画像の読み込み後に ScrollTrigger.refresh() が呼ばれている。
0.6秒未満のものはない。linear/back/bounce/elastic は使用されていない。

移植性（Next 以外）

動きのシステムと黄金律はあらゆる環境で有効です。プレーンなHTML/CSS、WordPress/Divi、LearnWorlds の場合：CDN 経由で GSAP + ScrollTrigger + Lenis を使用し、同じ duration/ease のトークンを維持し、プラットフォームにスタイルが漏れないようにクラス/セレクタにプレフィックスを付けます。具体的な注記は references/01-setup.md の末尾にあります。

スキルのファイルマップ

assets/CLAUDE.md — プロジェクトの「聖書」のテンプレート（ルートにコピーして調整）。
assets/lib/lenis-provider.tsx — 正規の Lenis↔GSAP 統合を備えた React/Next プロバイダー。
assets/lib/motion.ts — 動きのトークン（durations、eases、リビールヘルパー）。
references/01-setup.md — スタック、インストール、統合、SSR/Next、移植性。
references/02-hero.md — 映画的ヒーローの完全なレシピ。
references/03-scroll-camera.md — ピン、スタガー、パララックス、スクラブ、水平スクロール。
references/04-mobile-a11y.md — matchMedia、reduced-motion、パフォーマンス、モバイルデバッグ。
references/05-refinamento.md — 詳細な動きのシステムと磨きのチェックリスト。

Cinematic Web — 意図を持った動き