UI动效设计代码提示词

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