触发方式

详情自动流动；目录悬停、聚焦或 Preview 开始，离开且失焦、离屏或后台停止。移动鼠标或触屏拖动塑造局部地形；方向键移动影响位置，Home 居中，Escape 清除，Enter / 空格重播。

起点与终点

按容器的 CSS 像素生成地形，尺度 480px，密度 5，种子 42。颜色和外观调整保留累计进度；重播恢复同一种子的起始地形。

地形

地形尺度 (scale)：480px；等高线密度 (density)：5；地形扭曲 (distortion)：2.4；地形种子 (seed)：42。

等高线

线条宽度 (lineWidth)：1px；线条不透明度 (opacity)：1；虚线长度 (dashLength)：7px；虚线间隔 (dashGap)：8px。

配色

渐变扩散 (gradientDiffusion)：0；颗粒强度 (grain)：0。

运动

流动速度 (speed)：1.5。

鼠标

鼠标影响强度 (hoverStrength)：0.6；鼠标影响半径 (hoverRadius)：200px；鼠标跟随时间 (hoverFollow)：0.16s；鼠标恢复时间 (hoverFade)：0.8s。

配色与线型

线型 solid，普通线 #000000，每第四层 #000000，高程渐变关闭，背景 #f1f1f1；渐变颜色保留在配置中但不参与绘制。

时序

入场淡入 800 ms，延迟 0 ms。流速 1.5，连续流动；工具栏暂停冻结当前画面，再次播放从当前相位继续。

进入与退出

鼠标效果开启，模式 rings，方向 push。进入和移动按 0.16s 跟随，移开按 0.8s 恢复；关闭鼠标效果立即清除局部形变。

参数关系

尺度改变山谷大小，密度改变高程间距，两者独立。混合模式只把每第四层绘成虚线；虚线长度和留白沿连接曲线测量。渐变替代纯色背景，扩散只柔化颜色；颗粒固定在屏幕，并作用于线条。关闭渐变或鼠标时保留其参数，相关控件明确隐藏。

重复操作与打断

设置、中文说明、Motion 数据、JSON、离线 HTML 和复刻工程共享同一份地形配置。鼠标位置、键盘位置、跟随进度、流动相位、观察倍速与暂停按钮状态属于临时运行状态，不写入配置。

减少动态效果

显示清晰静态地形，跳过入场与自动流动；指针与键盘交互立即到位，不自动回弹。

默认配置

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

{
  "schemaVersion": 2,
  "recipeId": "topographic-flow",
  "durationMs": 800,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "topographicFlow": {
    "scale": 480,
    "density": 5,
    "distortion": 2.4,
    "seed": 42,
    "lineWidth": 1,
    "opacity": 1,
    "dashLength": 7,
    "dashGap": 8,
    "gradientDiffusion": 0,
    "grain": 0,
    "speed": 1.5,
    "hoverStrength": 0.6,
    "hoverRadius": 200,
    "hoverFollow": 0.16,
    "hoverFade": 0.8,
    "lineStyle": "solid",
    "backgroundColor": "#f1f1f1",
    "lineColor": "#000000",
    "accentColor": "#000000",
    "gradientEnabled": false,
    "gradientColors": [
      "#2359eb",
      "#12c4eb",
      "#14c87f",
      "#ffe22e",
      "#ff932f",
      "#f53f42"
    ],
    "hoverEffect": "rings",
    "hoverDirection": "push",
    "hoverEnabled": true,
    "animateEntrance": true,
    "paused": false
  }
}

源码与复用

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

用于自己的项目

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

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