用途：为落地页添加滚动触发的动画与动效，并帮助在原生 CSS 滚动驱动动画、GSAP/ScrollTrigger、Motion（原 Framer Motion）之间按用途选档。它要解决的问题是模型动辄引入最重的库做装饰性淡入，并动画 width、height、top、box-shadow 等触发布局的属性，把每帧压到主线程，拖累 INP 与 CLS；同时避免滚动劫持、把内容锁在无出口的滚动隧道里。
主要能力：按用途分档——装饰性揭示、淡入/滑入、进度条、简单视差、交错网格用原生 CSS animation-timeline: scroll() / view()，在合成器线程运行；固定区块、擦洗时间线、纵向中的横向、SVG 路径用 GSAP + ScrollTrigger（经 @gsap/react 的 useGSAP()）；React 组件状态、手势、布局动画、AnimatePresence 退场用 Motion，并建议 LazyMotion；沉浸式 3D 滚动场景仅在品牌/高端场景少量使用 react-three-fiber。同一页面混合堆叠各档是常见专业做法。
使用方式与规则：只动画 transform、opacity、filter；合成器资格按 @keyframes 块整体判定，一个触发布局的属性就会把整个动画降到主线程。滚动揭示必须加 animation-fill-mode: both，否则会闪回起始状态；scroll() 跟踪容器进度，view() 跟踪单个元素穿过视口；用 @supports (animation-timeline: scroll()) 包裹并提供静态、完全可见的回退（Firefox 不支持）。无障碍方面 prefers-reduced-motion 只是底线，应减少位移改为透明度交叉淡入而非删除；揭示内容无论动画与否都须结构上存在；自动播放超过 5 秒需暂停控件（WCAG 2.2.2）。不得门控内容，保留可见出口与 CTA，不滚动劫持；scrollytelling 建议不超过约 5 个场景、2-3 分钟。Lenis 平滑滚动会破坏 position: sticky、IntersectionObserver 和 CSS 滚动驱动动画，除非以原生模式（ReactLenis root）运行，仅在需要统一 GSAP 与 Motion 的 rAF 循环时添加。GSAP 自 2025 年 4 月起对商业使用免费（含 ScrollTrigger、SplitText），采用 GreenSock 标准许可而非 MIT。在 Next.js/RSC 中，JS 动画库会强制传染性 "use client" 边界，应推到叶子节点；CSS 滚动驱动动画不强制。
适用场景：揭示、视差、进度条、固定/擦洗序列、scrollytelling、平滑滚动，以及 CSS/GSAP/Motion 的选型。不适用于文案、区块顺序、配色排版、通用性能/SEO 或完整 WCAG 工作。
限制：Firefox 缺少 animation-timeline，需回退；浏览器支持声明需按 caniuse 版本核对。更多细节见 references/motion-stack.md。