UI 形态变换动效设计模板

<inputs>
向我索要：我希望这个形状变成的八到十二种界面状态（例如按钮、加载器、播放器、滑块、开关、标签页、图表、命令面板、提示条），纯黑白还是一个强调色，以及一首约 120 BPM 的免版税歌曲（例如 Mixkit，可免费商用）。
</inputs>

<direction>
Dribbble 水准的界面动效。一个形状，永不切镜：每个状态都是同一个元素在变化尺寸、圆角和颜色，同时内容用一次短暂的模糊来替换。每一次变化都由光标驱动，有真实的点击和拖拽。浅暖灰的画布，黑白两色的组件，一款干净的界面字体（Geist）。处处是弹簧，最多只有一点点过冲。镜头缩放，让每个状态都充满画面。最后一帧就是第一帧，所以可以循环。
禁用：弹跳缓动、粒子爆发、发光、界面外框上的渐变、描边粗细不一致的图标、死时间、任何看起来像模板的东西。
</direction>

<structure>
120 BPM，7 个小节，每一拍都有事情发生。
按钮 → 加载器 → 对勾 → 灵动岛 → 带播放/暂停形变的音乐播放器 → 拖动进度条 → 变成音量滑块，拖过最大值时会被拉伸 → 开关在节拍上翻到开 → 旋钮变成液态的标签指示器 → 标签页展开成一张自己画出来的图表，悬停时出现提示框 → 收起成 ⌘K → 输入过滤 → 回车 → 提示条 → 回到按钮。
</structure>

<build>
1. 一个 HTML 文件，正方形 1440x1440。所有样式都在 seek(t) 里根据时间计算：不用 CSS 过渡，不用计时器，帧与帧之间不携带状态。
2. 弹簧用闭式阶跃响应。一个多次改变目标的值，等于每次改变各加一根弹簧后的总和，因此它始终是时间的纯函数。
3. 标签指示器的两条边骑在不同的弹簧上，所以前缘会比后缘先伸出去。开关的旋钮用同样的技巧。
4. 拖拽是直接操作：光标按住期间，数值由它的位置算出。松开后，从它所在的位置弹回。
5. 用 numpy 分析歌曲，得到节拍网格，并从强拍开始。每个界面音效都按测量出的峰值来放置。
6. 用 Playwright 渲染：每帧 4 个子帧，用 ffmpeg tmix 混合，得到 60fps 的动态模糊。
7. 正式渲染前，先每拍渲染一帧。凡是不在网格上、显得拥挤或难以阅读的地方都要修好。
</build>

<gotchas>
绝不要对镜头会缩放的东西使用 will-change，否则文字渲染会发糊。在变形容器里替换的文字，需要各自的进入和退出时机，否则会重叠。让最后一帧和第一帧完全一致，包括光标的位置和速度，否则循环会卡一下。
</gotchas>

<start>
先向我索要这些输入，然后在写任何代码之前，给我看一份落在节拍网格上的状态列表。
</start>