变形UI动效设计代码提示词

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