通过 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”效果应用于任何会随镜头缩放或导致文本模糊的元素。在变形容器内切换的文本需要设置独立的进入和退出时间，否则会发生重叠。确保最后一帧与第一帧完全相同，包括光标位置和速度，否则循环播放会出现卡顿。

请先询问我的输入信息，然后在编写任何代码之前，在节拍网格上向我展示状态列表。

Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use).

Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops.
Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template.

120 BPM, 7 bars, something happens on every beat.
Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button.

1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames.
2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time.
3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob.
4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was.
5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak.
6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read.

Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters.

Ask me for the inputs, then show me the state list on the beat grid before you write any code.

提示取自 邮政 @twoclipping.