流动的边界

概念

潮汐没有固定的形状，它只留下运动的痕迹。页面用一条不断变形的曲线来替代传统的进度条，滚动不再是“从 A 到 B”，而是“在水面停留多久”。

技术选择

• Canvas 绘制流线，requestAnimationFrame 控制节奏
• 指针位置只影响局部，不做全屏跟随，避免手机端眩晕
• prefers-reduced-motion 下退化为静态曲线
• 音频默认关闭，用户点击后才加载

取舍

最初想用 Three.js 做真正的 3D 水面，但在中端手机上掉帧明显。最后换成 2D Canvas，视觉损失不大，性能稳定得多。