产品界面动效

<inputs> 向我询问：8 到 12 个我希望形状变成的 UI 状态（例如按钮、加载器、播放器、滑块、开关、标签、图表、命令面板、通知），纯黑白或一种强调色，以及一首约 120 BPM 的免版税歌曲（例如 Mixkit，商业使用免费） </inputs> <direction> Dribbble 级别的 UI 动态。一个形状，永不切割：每个状态都是同一元素变形其尺寸、圆角和颜色，同时内容在短暂模糊中切换。光标驱动每一次变化，使用真实点击和拖拽。浅暖灰画布，黑白组件，一种干净的 UI 字体（Geist）。到处都是弹簧，最多轻微超调。相机缩放使每个状态填满画面。最后帧是第一帧，所以它循环。 禁止：弹跳缓动、粒子爆发、光晕、UI 铬上的渐变、不匹配的图标描边、空闲时间、任何看起来像模板的东西 </direction> <structure> 120 BPM，7 小节，每拍都有事情发生。 按钮 → 加载器 → 勾选 → 动态岛 → 带播放/暂停变形的音乐播放器 → 拖动进度条 → 它变成音量滑块，拖过最大值时拉伸 → 开关在节拍上翻转 → 旋钮变成液体标签指示器 → 标签打开成一个自我绘制的图表，悬停时有工具提示 → 它折叠成 ⌘K → 输入过滤 → 回车 → 通知 → 回到按钮。 </structure> <build> 1. 一个 HTML 文件，方形 1440x1440。每个样式都在 seek(t) 内从时间计算：无 CSS 过渡、无定时器、无帧间状态携带。 2. 弹簧是闭式阶跃响应。多次改变目标的值是每次变化一个弹簧之和，因此它保持为时间的纯函数。 3. 标签指示器的两个边缘骑乘不同的弹簧，因此领先边缘领先于尾随边缘拉伸。同样的技巧用于开关旋钮。 4. 拖拽是直接操作：光标按住时，值从其位置计算。释放时从当前位置弹回。 5. 用 numpy 分析歌曲以获取节拍网格，并在重拍开始。将每个 UI 声音放置在其测量的峰值上。 6. 用 Playwright 渲染：每帧 4 个子帧，用 ffmpeg tmix 混合以实现 60fps 动态模糊。 7. 在完整渲染前每拍渲染一帧。修复任何偏离网格、拥挤或难以阅读的东西。 </build> <gotchas> 永远不要在相机缩放的任何东西或文本渲染模糊的任何东西上放置 will-change。在变形容器内切换的文本需要自己的进入和退出时机，否则会重叠。让最后一帧与第一帧完全相同，包括光标位置和速度，否则循环会卡顿 </gotchas> <start> 向我询问输入，然后在你写任何代码前，在节拍网格上向我展示状态列表 </start>