触发方式

详情自动播放；目录悬停、聚焦或 Preview 开始，离开且失焦、离屏和后台停止。按钮支持点击、Enter 和空格；消息输入仅作本地演示，不发送网络请求。

起点与终点

以种子 7、相位 0 生成可复现起点。流速 0.7，连续流动；流速为零保留当前画面。调整颜色和形状保留累计时间；修改相位或种子重设构图。

配色

模式 spectrum，起始颜色 #b126ff，第二颜色 #ff177c（当前未使用），第三颜色 #35d3ff（当前未使用）。固定模式保持色相，双色和三色改变整个材质的色调，完整色谱有空间色彩变化；反射继续移动。

材质

圆角比例 (borderRadius) 50%；边缘羽化 (feather) 100；实际投影角 (projectionScale) 174.7°；材质亮度 (intensity) 1.4；静态颗粒 (grain) 0.105。圆角按短边百分比计算，实际投影角直接保存为 174.7°，面部为 174°；圆角编辑会同步修改投影角，导入后不会再次隐式换算。

时序

入场 blur-up，基准 700 ms，倍速 1×；模糊上升时长 700ms，模糊 10px、上升 20px；缩放入场 600ms，从 65% 到 100%；延迟 0ms。无入场时相关参数不参与绘制。

进入与退出

悬停方式 brighten。提亮模式增加亮度并上浮 2px；流动模式推动反射构图；跟随模式用弹簧让按钮移动、伸展并跟随指针打光。焦点仍在按钮中时保留效果；失焦且移开后恢复。禁用时不响应。

重复操作与打断

工具栏暂停冻结材质、入场和弹簧时钟，恢复后从当前相位继续。重播恢复种子和相位指定的起点；修改入场参数自动重播。目录有限入场复用共享重播控制器，持续流动不被定时器打断。

减少动态效果

跳过入场和自动流动，显示静态材质。原生按钮、输入与键盘继续可操作，悬停提亮立即到位；关闭弹性移动与拉伸。

默认配置

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

{
  "schemaVersion": 2,
  "recipeId": "chromatic-button",
  "durationMs": 700,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "chromaticButton": {
    "example": "message",
    "hoverEffect": "brighten",
    "entrance": "blur-up",
    "colorMode": "spectrum",
    "color": "#b126ff",
    "color2": "#ff177c",
    "color3": "#35d3ff",
    "label": "Get started",
    "disabled": false,
    "paused": false,
    "entranceSpeed": 1,
    "entranceBlur": 10,
    "entranceDistance": 20,
    "entranceScale": 0.65,
    "borderRadius": 50,
    "feather": 100,
    "projectionScale": 174.7,
    "intensity": 1.4,
    "grain": 0.105,
    "speed": 0.7,
    "phase": 0,
    "seed": 7
  }
}

源码与复用

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

用于自己的项目

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

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