滚动叙事、声音与交互串联

滚动是状态轴

滚动叙事的核心不是把元素依次移入视口，而是让同一条进度轴同时影响多个层：模型形态、粒子状态、背景场、章节文字、HUD 信息和声音节点。这样用户能理解页面变化之间的因果关系。

NAIWA 将体验划分为 ORIGIN、SOFT、STILL 和 RELEASE 四个阶段。每个阶段都有自己的视觉重心，但状态之间使用连续数值过渡，避免章节切换时出现突然跳变。

状态之间的映射

一个可维护的做法是先把滚动位置归一化为 0 到 1 的进度，再从进度派生具体状态：

• ORIGIN 主要保留实体模型和低强度背景。
• SOFT 增加粒子化和轻微形变，让用户看到“正在解构”。
• STILL 降低大范围变化，把注意力交给局部指针反馈。
• RELEASE 激活收束、展开和空间延伸，并同步调整文字与背景层级。

派生状态比在多个事件回调里分别修改样式更容易回退，也更容易测试。向上滚动时，同一组映射自然反向运行，避免为逆向动画单独维护另一份逻辑。

文字和背景的节奏

文字不应抢走模型的注意力。标题、章节编号和说明文字需要有不同的出现时机：标题负责建立主题，说明负责补充上下文，HUD 负责提供当前状态。背景线条和轨道只在能够解释当前阶段时增强，否则保持低对比度。

动效可以使用 GSAP 或同类时间线工具组织，但时间线不应取代状态模型。滚动进度负责回答“现在应该处于哪里”，动画工具负责让元素平滑到那里。两者分开后，刷新、快速滚动和反向滚动都更容易保持一致。

声音的触发边界

浏览器通常限制未经用户手势的自动播放，因此声音触发应绑定到明确的主动交互，例如点击音频肖像或其他具有语义的控件。首次触发时再创建或恢复音频上下文，避免页面加载阶段产生权限和性能问题。

声音在这个项目里是短暂的体验节点，不是持续播放的背景音乐。它可以和用户主动操作、章节进入或视觉释放形成呼应，但需要设置冷却和重复触发边界，避免快速滚动时连续叠加。

指针、拖拽和触控

桌面端可以让用户拖拽模型观察角度，并在粒子阶段提供排斥反馈。交互目标需要与页面文字和控件边界分开，避免用户想操作链接时意外旋转模型。触控设备则优先保证滚动本身可用，将自动场景运动作为没有指针输入时的替代反馈。

所有交互都需要有结束状态：拖拽结束后模型回到稳定姿态，粒子被推开后逐步回归，指针离开后局部影响衰减。没有结束状态的反馈会让页面越来越吵，也会让用户不清楚当前变化是否仍在生效。

可逆和可访问性

滚动状态应支持反向恢复，减少一次性动画带来的迷失感。对于偏好减少动效的用户，页面仍保留信息层级和状态变化，只降低位移、连续噪声和自动运动的强度。声音也必须是可选的主动行为，不能成为进入页面的前置条件。

最终验收可以用四个问题完成：用户是否知道当前章节，是否能理解模型为何变化，是否能区分主动交互与自动动效，以及快速滚动或反向滚动后页面是否仍然回到合理状态。

相关项目：NAIWA / 奶蛙。