触发方式

目录悬停播放，详情自动流动；点击海面或按 Enter / 空格产生带明亮浪峰的扩散涟漪。

起点与终点

画布 320 × 230；平移 0, 0px；缩放 1。海浪持续前进，不反向返回初态。

时序

基础时钟 12000 ms，延迟 0 ms；海浪速度 1×。循环回绕累计时间，不重置海面；速度为 0 保持当前帧。

进入与退出

目录悬停播放，离开恢复静态海面；详情自动播放。持续流动。指针带动局部涌浪与轻微视差。点击叠加涟漪，最多保留 12 圈；Tab 聚焦后 Enter / 空格在中央触发。

重复操作与打断

播放按钮暂停并保持海面与涟漪进度，再次播放接续当前画面；调节外观与海浪速度保留累计时间。观察倍速、指针位置和运行中的涟漪不写入 JSON。

减少动态效果

遵循系统减少动态效果设置，只显示静态海面，关闭涌浪、点击涟漪和循环。

粒子海浪设置

背景 #242426；水体 #B9B9C2；浪峰 #FFFFFF；密度 1；大小 1；浪高 1；波长 1；速度 1；指针交互 true；点击涟漪 true。

默认配置

这些数值来自当前维护的默认配置；编辑器草稿和调整后的导出可以不同。

{
  "schemaVersion": 2,
  "recipeId": "particle-tide",
  "durationMs": 12000,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [
    {
      "part": "ocean",
      "property": "tideTime",
      "values": [
        0,
        12
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 1
    }
  ],
  "tide": {
    "backgroundColor": "#242426",
    "waterColor": "#B9B9C2",
    "crestColor": "#FFFFFF",
    "density": 1,
    "particleSize": 1,
    "waveHeight": 1,
    "wavelength": 1,
    "speed": 1,
    "interactive": true,
    "clickRipples": true
  }
}

源码与复用

GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。

用于自己的项目

进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。

目录来源标注：原创实现. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。