用途：把静态站点升级为高级感、多层、滚动驱动的体验。核心思路是“滚动即叙事”，每次滚动都对应页面上发生的变化，让访客像看短视频一样被吸引继续下滑；保留原有文案与品牌，只改变展开方式。
主要能力与规则：先做 2 分钟访谈，确定调性（高级编辑感↔高能宣传感、真实素材↔生成世界）、滚动旅程（第 0/5/20/60 秒的感受与唯一记忆点）、可用真实素材，以及“这个站点独有的一件事”。构图要求：首屏要有纵深（分层背景、颗粒、光源）、杂志封面式排版、滚动联动的缩放或视差、独立图层的真实照片/视频抠图；长段落改为固定序列（3–6 个节拍随滚动切换）或横向滚动轨道；数字滚动计数、遮罩揭示、线条绘制、文字错峰入场，滚动联动动画应耗时约 60–100vh 而非 20vh；至少三层以不同速率移动，仅用 translate3d；字体避免 Inter/Roboto/Arial/system-ui/Space Grotesk；卡片可做指针跟随的倾斜/发光，但不依赖悬停传达含义；平淡或冗余的内容直接删掉而非加动画。
实现方式（静态站点，无 npm）：优先在 @supports 与 @media (prefers-reduced-motion: no-preference) 内使用 CSS 滚动驱动动画（animation-timeline: view() / scroll()、animation-range），静止态即最终态，保证打印、截图与无 JS 场景完整。固定序列、横向轨道与滚动擦除的图像/视频序列使用 cdnjs 上的 GSAP 3 + ScrollTrigger（cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js 与 ScrollTrigger.min.js），scrub: 0.6–1.2、pin: true、anticipatePin: 1；平滑滚动仅在 Lenis 小于 20 KB 且 reduced-motion 下禁用时使用。视频用 <video muted playsinline preload="metadata" poster> 配合 IntersectionObserver 播放/暂停，仅对 ≤6 秒的首屏循环做滚动擦除。性能预算：LCP 图片 ≤250 KB、总 JS ≤90 KB、只动 transform/opacity、首屏以下用 content-visibility: auto。无障碍：固定不改变焦点顺序、reduced-motion 下所有滚动动画变为静态布局、对比度 AA、仅一个 h1。
验证：仅用无头浏览器（Playwright，PWDEBUG=0），滚动到 0、10、25、40、55、70、85、100% 并在 1440 与 375 宽度截图，检查每个停靠点是否有意义、动画中文字是否可读、移动端固定区是否困住滚动、序列是否过快；修复后重拍，并测试 reduced-motion 与无 JS 渲染。交付清单：有纵深与钩子的首屏、3 层以上移动层、至少一个固定或横向序列、与滚动绑定并放慢的计数/揭示、保留文案与品牌、reduced-motion 与无 JS 完整、符合 Lighthouse 预算、QA 文件夹含滚动停靠截图。限制：资料未提供具体收费、平台支持范围与效果保证。