滚动动画
一套包含十种滚动动画模式的路由方案。除 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 |
| 苹果风格的主角缩放至图片、焦点拉近模糊、图片缩放上叠加文字揭示效果、电影级产品发布缩放 | 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，并且仅在不清楚时询问 —— 否则，选择最接近的匹配并注明假设。
跨领域规则（适用于所有模式）
- 仅限 Framer Motion 用于除 JOS 之外的所有模式 —— 没有 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 以获取完整的电影感变体）。