用途：构建高端营销/产品落地页，实现滚动驱动动画（帧擦除、固定、视差、揭示），并决定 Apple 级页面的前端架构。
核心规则：以浅色为主（#f5f5f7/白色），深色主视觉仅作例外且不超过一次；展示真实产品与真实设备边框截图，不用抽象占位；克制优于堆砌特效。旗舰页面必须投入动效：连续阻尼滚动进度变换、粘性固定编排场景、跨区块主题明暗切换、停止滚动时的环境浮动。
页面公式：细长粘性半透明导航（约44–48px、模糊、随章节变色）→ 居中产品主视觉（名称+一句标语+“Learn more ›”/“Buy ›”）→ 交替全幅特性区块（每块一个概念）→ 便当式特性网格 → 技术规格 → 多列宽页脚。
滚动叙事决策树：电影感主视觉视频→视频 currentTime 擦除（preload=none、懒加载 src、静态首尾帧 JPEG 回退、reduced-motion 转静态帧）；可旋转 3D 产品→WebGL 滚动查看器（three.js + GLTF、KTX/Basis 纹理）；多帧清晰→canvas 图像序列；连续元素运动→阻尼滚动进度；明暗章节→跨区块主题变形；章节卡片→粘性堆叠；简单揭示/视差→CSS animation-timeline 加回退。
工程：渐进增强的 HTML/CSS/原生 JS，响应式 picture/srcset、loading="lazy"、内容哈希不可变资源、延迟 JS。禁止滚动劫持、禁止未优化大帧集，动效须用 prefers-reduced-motion 保护。
参考文档涵盖页面解剖与规格、滚动叙事技术清单与代码、前端工程与性能策略、媒体资产交付与编码缓存。常见错误包括主视觉杂乱、多竞争 CTA、静态页用重框架、非 rAF 滚动处理、无 reduced-motion 回退、旗舰页动效不足或工具页动效过度。