UI动效设计变形形状模板

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