scroll-scrubbed-visual-sequence

滚动驱动的视觉序列

将一种视觉变化转化为响应式滚动控件。确保页面在无动画时仍可使用，并让渲染器可替换。

定义序列

编码前先写出视觉状态：

const sequence = {
  scrollVh: 280,
  frameCount: 96,
  fit: "contain",
  posterFrame: 0,
  reducedMotionFrame: 95,
  copyStops: [0, 0.42, 0.78]
};

所有渲染器都使用同一个归一化值：

const progress = Math.min(1, Math.max(0,
  (viewportTop - sectionTop) / (sectionHeight - viewportHeight)
));

绝不要以滚轮增量、经过时间或自动播放作为唯一依据。原生滚动位置必须决定两个方向上的精确视觉状态。

选择渲染器

• 如果序列是连续的、照片级的，或实时渲染成本较高，请使用视频。编码时插入高频关键帧，预加载元数据，预留纵横比，并在 requestAnimationFrame 中合并 currentTime 写入。
• 如果需要精确控制每一帧的美术效果，请使用图像序列。先预加载当前帧，再加载附近帧；不要因加载整组图像而阻塞首次绘制。
• 对于程序化绘制或合成，请使用 canvas。将设备像素比限制为 2，并仅在进度变化时重绘。
• 对于图表、产品卡片、界面状态和无障碍文本，请使用 SVG 或 DOM。通过变换、不透明度、裁剪路径和 CSS 变量驱动效果，而非使用大量依赖布局的属性。
• 仅当深度、光照或真实 3D 摄像机能显著增强效果时才使用 WebGL。提供静态海报，并释放资源。

构建滚动舞台

1. 让区块保持在正常文档流中，并根据 scrollVh 设置其高度。
2. 将视觉内容放在 position: sticky 舞台中，并将舞台尺寸设为视口大小。
3. 将文案和控件置于单独的图层中。不要将必要文本烘焙进帧中。
4. 将进度映射到渲染器，不添加隐式缓动。确认效果正确后，可选地添加平滑处理。
5. 字体和媒体的固有尺寸稳定后，重新计算测量值。
6. 在下一个区块前妥善结束粘性舞台，并确保页脚可以访问。

如果项目已使用 GSAP，或需要精确协调固定、刷新和时间轴，请使用 GSAP ScrollTrigger：

ScrollTrigger.create({
  trigger: section,
  start: "top top",
  end: () => `+=${innerHeight * 2.8}`,
  pin: stage,
  scrub: true,
  invalidateOnRefresh: true,
  onUpdate: ({ progress }) => render(progress)
});

若要避免依赖，请在滚动和调整大小时测量区块，然后每个动画帧安排一次渲染。

安全处理媒体

• 在首帧实际绘制前，保持海报可见。
• 将帧索引限制在 0...frameCount - 1 范围内。
• 取消过时的图像请求，快速滚动时绝不要将所有跳转请求排入队列。
• 使用 object-fit 和明确的焦点位置，确保主体在移动端裁切后仍然可见。
• 当区块位于视口外或文档隐藏时，暂停解码、渲染和观察。
• 在路由切换或卸载时，清理 ScrollTriggers、观察器、监听器、动画帧、Blob URL 和渲染器资源。

保留无障碍访问与控制

• 标题、文案、说明文字和 CTA 保持为语义化 HTML。
• 不要锁定滚动、阻止键盘导航，或要求精确的指针操作。
• 在 prefers-reduced-motion: reduce 下，移除固定和滚动驱动效果，渲染选定的静态帧，并恢复普通文档流。
• 如果序列传达有序信息，请以文本或列表形式呈现相同状态。

审慎调整

将滚动距离、渲染器、帧数、海报帧、媒体适配方式、焦点位置、文案停顿点、叠加层强度、平滑处理和减少动态效果状态作为配置项公开。避免在事件处理程序中散布魔法数字。

验证

检查向前和反向滚动、快速滑动、活动期间调整大小、390/768/1024/1440 宽度、尚未加载的帧、被阻止的视频、减少动态效果、键盘顺序、路由清理和控制台错误。同一滚动位置必须始终还原为相同状态。

将 demo/index.html 用作实际参考，并使用 demo/PROMPT.md 重新创建或改编示例。保留 REFERENCES.md 作为仅包含链接的实现资料列表。