スクロールアニメーション
10種類のスクロールアニメーションパターンへのルーターです。JOSを除くすべてのパターンは、同じ React + Framer Motion のプリミティブ（useScroll + useTransform、useSpring によるスムージング）に基づいています。このファイルで共有のメンタルモデルを最初に読み、その後、ユーザーの希望に合ったリファレンスファイルのみを読み込んでください。
共有メンタルモデル（Framer Motionパターン）
このスキルのほぼすべてのエフェクトは、以下の同じ骨格に従います：
import { motion, useScroll, useSpring, useTransform } from "framer-motion";
import { useRef } from "react";
const containerRef = useRef<HTMLDivElement>(null);
const { scrollYProgress } = useScroll({
target: containerRef,
offset: ["start start", "end end"],
});
const smoothProgress = useSpring(scrollYProgress, {
damping: 25, // 20–30：高いほど跳ね返りが少ない
stiffness: 200, // 150–300：高いほど反応が速い
mass: 0.5, // 0.5–0.8：低いほど軽く/速い
});
const someValue = useTransform(smoothProgress, [0, 1], [startVal, endVal]);
- コンテナの高さが速度/ドラマを制御します。
vhが大きいほど遅く、より映画的なスクロールになります。一般的な範囲：150vh（スナッピー）から400vh（瞑想的）。 position: sticky; top: 0はコンテンツをビューポートに固定し、背の高いコンテナがアニメーションのためのスクロールスペースを提供します。- 常に生の
scrollYProgressをuseSpringでラップします — これがないと、モーションが物理的ではなくロボット的/線形に感じられます。 - 複数要素のエフェクト（スタック、グリッド、オービター）は、各アイテムにウィンドウを与えます：
start = index / total、end = start + 1 / total。そして、そのアイテムの変換に[start, end]（または中央がピークの5点ベルカーブ）をマッピングします。 prefers-reduced-motionを尊重します：この設定をリクエストするユーザーには、静的なレイアウトまたはシンプルなフェードにフォールバックします。
パターンの選択 — 選択ガイド
完全なコンポーネントコード、バリエーション、重要なルール、トラブルシューティングテーブルについては、references/ 内の該当するリファレンスファイルを読んでください。変換値を記憶から推測しないでください — リファレンスファイルには調整済みの動作する数値が含まれています。
| ユーザーが求めるもの | このリファレンスを読む |
|---|---|
| カードが積み重なる/固定される、汎用的な「スタッキングカード」、3Dチルトスタック、多層スタック、水平カードスタック | references/scroll-stack.md |
| 特に「Chronosスタイル」のスタッキング、攻撃的な映画的なカード後退（影/半径の成長を伴う） | references/chronos-scroll-stack.md |
| マルチスピード奥行きレイヤー、背景/前景が異なる速度で動く、「狂ったような」/ドラマチックなパララックス、浮遊するアクセント形状 | references/insane-parallax.md |
| Appleスタイルのヒーロー画像へのズーム、フォーカスプルブラー、ズーム画像上のテキストレイヤー表示、シネマティックな製品ローンチズーム | references/immersive-scroll-zoom.md |
| ギャラリー画像がビューに入るときにズームイン、製品フォーカルポイントズーム、スクロール駆動のスケールを持つ画像グリッド | references/image-zoom-scrolling.md |
| 画像が半分/四分円に分割されて分離する、斜めのシャッター、3Dチルトを伴うエージェンシーポートフォリオスタイルの表示 | references/image-split-3d.md |
| 周回する要素、円形進行リング、放射状/スパイラルギャラリー、円形パスに沿ったテキスト | references/circular-scroll.md |
| アクティブになるにつれて成長/スケールするカード/タイル、ベルカーブグリッド展開、クリックして拡大するメイソンリー | references/expanding-cards-scroll.md |
| フレームごとのスクラブ、「フリップブック」スクロール、キャンバス画像シーケンス、スクロール位置にバインドされた製品表示ビデオ | references/scroll-image-sequences.md |
| シンプルなフェード/スライド/ズームイン表示、連続表示、React/Framer Motionを使用しない、または明示的に「JOS」 | references/jos-animation.md |
リクエストがあいまいで複数のパターンに当てはまる可能性がある場合（例：「ヒーローをスクロールでより動的にして」）、ヒーローセクションには insane-parallax.md または immersive-scroll-zoom.md を優先し、本当に不明な場合にのみ質問してください。それ以外の場合は最も近いパターンを選び、その前提を伝えてください。
横断的なルール（パターンに関わらず適用）
- JOSを除くすべてのパターンでFramer Motionのみ — GSAPやバニラのスクロールリスナーコードは、ユーザーが明示的に非Framer Motion実装を要求しない限り使用しません。
- ほぼどこでもうまく機能するスプリングのデフォルト：
damping: 20–30、stiffness: 150–300、mass: 0.5–0.8。各リファレンスファイルには、そのパターン用に調整された正確な値が記載されています — それらが異なる場合は、これらの一般的なデフォルト値ではなく、リファレンスの値を使用してください。 willChange: "transform, opacity"をアニメーション要素に指定して、コンポジタースレッド上に維持します。- スタックするものにはz-indexの計算：通常は
total - indexで、前の要素が後退しながら上に重なるようにします。 - やり過ぎないでください。 3～8枚のカード/フレーム/レイヤーが通常は最適です；それ以上だと疲れたり、モバイルのパフォーマンスに悪影響を与えたりします。
- モバイル：スケール範囲を柔らかくし、レイヤー/フレーム数を減らし、ドラマが重要でない場所では長いスクロール駆動シーケンスよりも
whileInViewを優先します。
パターンの組み合わせ
これらのパターンは構成可能です。ランディングページでは、ヒーローに insane-parallax、機能セクションに scroll-stack、ページ内の他の場所にシンプルな連続フェードインとして jos-animation を使用する場合があります。各関連リファレンスファイルは独立して読み込んでください — 特に指定がない限り（例：scroll-stack.md は完全なシネマティックバリアントについて chronos-scroll-stack.md を参照）、それらは互いに依存しません。