电影感滚动与3D效果 是做什么的？
一个简短的流程，用于为已存在的网站添加一种电影感技术。它是 futuristic-web-design 技能的电影感步骤，打包后可独立运行。
如果 ../futuristic-web-design/ 位于此技能的旁边，请在编写滚动或3D代码前先阅读那里的 references/cinematic-moves.md 。该文件包含以下每个方案所需的代码、重新编码命令以及完整的实时3D滚动故事的流程。
预算
共有五种技术：背景视频英雄区、滚动驱动运动、固定区段、视差深度和实时3D物体。使用背景视频英雄区，并最多从其他四种中选择两种。一个页面同时使用所有技术会像演示样片，让访客感到疲劳，并削弱每种效果。
在编写代码之前，浏览页面并对每个位置提问：这里的运动能否使某些内容更清晰，或让访客产生特定的感受？说明你将添加什么、添加在哪里、它有何贡献以及代价是什么。如果用户要求在已经使用两种技术后再添加更多，请坦诚说明权衡：增加页面重量，并削弱已有效果的影响力。
每种技术的护栏
装饰绝不允许导致页面崩溃。
- 减少运动。 在
prefers-reduced-motion: reduce下，不进行固定、擦洗或3D下载。显示普通的堆叠布局或静态图片。这也涵盖平滑滚动和过渡，脚本驱动的运动需要自己的matchMedia检查，因为它不遵循CSS。 - 触摸。 用手指滚动验证：无跳跃、无水平溢出、无滚动陷阱。
- 小屏幕。 在768px以下，将3D替换为静态图片。
- 延迟加载。 效果代码要在其所在区段接近视口时才加载，绝不在初始加载时加载。
- 失败处理。 如果效果报错或WebGL不可用，则保留静态图片，页面的其余部分正常工作。
- 真实数据。 动画计数器绝不能在虚假数据上停留。动画的是呈现方式，而非数据本身。
- 版本。 检查GSAP、Three.js、React Three Fiber和Lenis的当前文档及其兼容版本。在安装每个包之前询问用户。
方案
背景视频英雄区
- 一个带有
autoplay、muted、loop、playsinline和poster属性的video元素。手机仅自动播放静音且在行内的视频。 - 海报（
hero-poster.webp）首先渲染，所以在hero.mp4下载期间不会出现空白帧。 - 为了可读性，仅在文字块下方放置渐变遮罩。调暗整个片段会丧失视频意义。标题应在几秒钟内可读。
- 将文案远离片段的焦点主体。在桌面端和手机端分别决定。
- 在减少运动模式下，显示海报并跳过自动播放。
固定滚动故事
- 区段在其顶部到达视口顶部时固定，随着滚动逐步经历大约三个节拍，然后释放。向上滚动则反向播放。
- 每个节拍包括一个放大的数字、一个简短的标题和一句真实文案。
- 使用GSAP ScrollTrigger（
pin和scrub）在gsap.matchMedia()内部构建，使其仅在允许运动时存在，并在清理后自行销毁。 - 将标记写为普通的堆叠节拍。在没有脚本运行的情况下，该标记已经是回退方案。
- 固定是最可能在手机上出现问题的方法。要求在真实设备上用拇指测试，如果没有测试，请明确说明。
一个过程化3D点缀
- 一个单一的小物体，放置一次，紧邻区段内容。根据对形状的口头描述，从代码中使用基本几何体构建。除非用户要求，否则不使用下载的模型文件。
- 缓慢的闲置旋转加上由滚动驱动的轻微倾斜。材质和光照来自设计系统，像演播室产品拍摄一样打光。
- 容器以物体的静态图片开始。画布仅在3D代码加载并挂载后才替换它。
- 仅在768px及以上宽度、允许运动、且区段接近视口时加载。离开屏幕时暂停渲染，并将设备像素比限制为2。
滚动驱动视频
- 一个短的片段，其播放头随滚动位置双向移动。它产生“产品拆解”的效果，所需字节远少于实时3D。
- 首先重新编码，使每一帧都是关键帧，移除音频，并将片段修剪到需要移动的秒数。目标大小约1 MB或更小。
- 固定区段，并将滚动进度映射到
video.currentTime。标记元素为muted和playsinline，并且永远不要在其上调用play()。 - 从相同的进度值依次显示文字标注。及时释放固定。
- 在减少运动模式下，显示最具信息量的静态帧。
衡量其代价
在添加一种技术后，比较前后的传输大小，并报告一个简短的表格，列出受影响的文件和新增的包。如果某部分体积较大，则进行精简。如果体积仍然较大，则将其移除。