触发方式

点击或使用键盘切换 Silver、Gold、Platinum 单选项，滑块、配色与文字同步响应；选择当前项不重播，悬停不触发切换。 工具栏依次演示 Silver → Gold → Platinum → Silver；暂停保持进度，继续从暂停处接续。

起点与终点

初态为 Silver，Gold 与 Platinum 分别位于滑块自身宽度的 100% 和 200%。选中项保持清晰文字与对应的金属表面；导出基础轨道表示 Silver → Gold，交互适配器将同一配置映射为任意两项之间的切换。

时序

滑块切换 500 ms，触发延迟 0 ms，弹簧动画（Spring），回弹系数 Bounce 0.24；时长控制节奏，不代表精确落稳时间。配色过渡 400 ms，文字变色 300 ms，均使用 ease-in-out。

进入与退出

选择新选项时，滑块移动到对应分段，金属渐变与高光交叉过渡；完成后保持当前选项，重复选择同一项不重播。选择状态不会自动循环。

重复操作与打断

使用原生单选按钮，支持 Tab、方向键与空格；每个预览实例使用独立的名称和 ID。选择与焦点属于临时交互状态，不写入 JSON。快速切换停止旧轨迹，从当前画面转向最新目标，不排队。工具栏暂停冻结当前时钟，继续保留进度。

减少动态效果

遵循系统 prefers-reduced-motion，跳过延迟、循环和动画，直接呈现目标帧。观察倍速只修改 Motion 控制器 speed，不写入配置。

默认配置

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

{
  "schemaVersion": 2,
  "recipeId": "glass-radio",
  "durationMs": 500,
  "delayMs": 0,
  "easing": [
    0.37,
    1.95,
    0.66,
    0.56
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [
    {
      "part": "glider",
      "property": "x",
      "values": [
        "0%",
        "100%"
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 1
    },
    {
      "part": "finish0",
      "property": "opacity",
      "values": [
        1,
        0
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 0.8
    },
    {
      "part": "finish1",
      "property": "opacity",
      "values": [
        0,
        1
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 0.8
    },
    {
      "part": "finish2",
      "property": "opacity",
      "values": [
        0,
        0
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 0.8
    },
    {
      "part": "label0",
      "property": "color",
      "values": [
        "#303640",
        "#68717d"
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 0.6
    },
    {
      "part": "label1",
      "property": "color",
      "values": [
        "#68717d",
        "#303640"
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 0.6
    },
    {
      "part": "label2",
      "property": "color",
      "values": [
        "#68717d",
        "#68717d"
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 0.6
    }
  ],
  "glass": {
    "theme": "light",
    "motion": "spring",
    "bounce": 0.24
  }
}

源码与复用

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

用于自己的项目

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

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