AI 思考按钮交互动效

点击触发，逐字切换、星芒旋转与柔和变色，让等待过程更有反馈。

复刻提示词

根据提供的参考视频，用 HTML、CSS、JavaScript 实现一个可点击的 AI 思考按钮。它是用户触发的交互反馈，不是自动循环动画。

1. 初始画面
暗色画布（#1c1c19），浅灰胶囊按钮居中。按钮约 200 × 72px，圆角 999px；文字 Generate，24px、600 字重，深色。左侧使用提供的 bling_filled.svg 实心双星芒图标，保留原始曲线路径，不改成描边；图标 28px、间距 8px。不要复制录屏中的鼠标指针，也不要添加卡片、阴影、进度条或成功页面。

2. 点击与状态
使用真实 button，支持鼠标、触屏、Enter 和空格键。初始静止，只有点击才进入 Thinking。状态顺序为 idle → thinking → returning → idle。
一次点击只启动一次任务；处理中再次点击不重启、不叠加请求。按钮位置、点击区域和周围布局始终稳定。

3. 启动反馈与文字交接
点击后胶囊在约 440ms 内轻微放大再回落，缩放中心位于按钮中心，不推动周围元素。
本例的确定性启动响应：t 为点击后的毫秒数；在 0≤t<440 时使用 0.28×sin(πt/440)×exp(-t/500) 作为增量缩放，之后归零。
从 80ms 开始，Generate 与 Thinking 在同一文字槽中叠放，各自居中。按字符错开 18ms，每字持续 180ms；旧字上移 3px、透明度 1→0、模糊 0→4px，新字由下方 3px 进入、透明度 0→1、模糊 4→0px。使用 smoothstep 缓入缓出，不突然替换整段文字。
按钮宽度由 200px 平滑变为 192px，高度保持 72px。图标从实心双星芒交叉淡化为旋转的实心四角星。

4. Thinking 反馈
四角星沿中心连续旋转，每 1100ms 一圈。胶囊轻柔呼吸，缩放增量约 ±0.015、周期 920ms；图标、文字和胶囊作为整体缩放。
文字与图标共用一套颜色，沿紫→粉→红→琥珀→绿→青→蓝→紫柔和流转；每段 230ms，以 smoothstep 插值 RGB，不瞬间跳色。色板为：
(170,42,195), (219,40,117), (205,66,62), (156,107,19), (68,137,26), (0,158,117), (14,125,195), (108,70,201), 回到首色。
背景使用当前前景色与白色按 14% / 86% 混合，形成同色系浅色胶囊。不要增加闪烁、强光晕或夸张弹跳。

5. 结束与可再次触发
本地演示在 4200ms 后开始恢复，约 360ms 回到 Generate、浅灰背景、原宽度和静止图标；文字仍逐字模糊交接，不直接替换。恢复完成后才允许下一次点击，停留在初始态，不自动重播。
4.2 秒只是演示时长，不是业务完成条件。真实项目应由异步请求成功、失败或取消决定结束；失败提供可读反馈并允许重试，不伪装成功。
重置应取消当前演示与待处理回调；旧回调不能覆盖新一轮状态。正常恢复保留键盘焦点。

6. 实现与验收
使用同一条时间轴计算颜色、缩放、图标和文字；动画期间不重建按钮。动画空闲时停止刷新，离开页面清理事件和帧回调。后台暂停演示时间，返回后继续。
减少动态效果开启时取消旋转、呼吸、模糊和位移，用静态 Thinking 和颜色变化保留状态反馈。手机上保留至少 44px 的点击区域，不裁切启动放大。
检查首次加载无动画、连续快速点击只触发一次、完整复位、重复体验、处理中重置、失败重试，以及手机和键盘操作。

以上尺寸、时长与色板是本例为稳定复刻约定的参数，依据视频视觉效果重建，不是原作者源码中的精确值。

动画源代码

会员解锁后可查看并复制完整 Web / Swift 源码。

<!-- # 保存为 index.html，用浏览器打开；点击触发，无需构建或联网。 -->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>AI 思考按钮交互动效</title>
<!-- This is a local 4.2-second interaction demo, not an AI request.
     Pass perform({signal}) to mountThinkingButtonPreview to await real work.
     Keep idle -> thinking -> returning -> idle. No autoplay or duplicate tasks.
     All motion uses one clock; reset invalidates pending callbacks.
     Reconstruction parameters are inferred from the supplied recording. -->
<style>
:root { font-family:system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; padding:20px; background:#f7f6f2; }
button { font:inherit; }
main { max-width:760px; margin:auto; }
.motion-preview { margin:20px 0; border:1px solid #ddd8cc; border-radius:16px; overflow:hidden; }
.motion-preview button:focus-visible { outline:2px solid #a1bde1; outline-offset:4px; }

注意事项

这里演示的是按钮反馈，不会调用 AI。接入实际项目时，应由请求结果结束 Thinking，不能用固定时长代替真实完成。
视频用于观察交互节奏；本例尺寸、色板与时长为重建参数。提供原设计稿和图标，会更容易准确还原。