<inputs>
请向我询问以下 3 点：8-12 个相互变形的 UI 组件（例如按钮、加载器、音乐播放器、音量滑块、切换开关、标签页、图表、命令面板、通知），配色方案（严格黑白或单一强调色），以及一首约 120 BPM 的免版税音轨（例如来自 Mixkit）。
</inputs>

<direction>
创作出值得在 Dribbble 上展示的精致屏幕动效。仅使用一种形状；绝不剪辑场景。通过同一形状改变大小、圆角半径和颜色来表示所有状态，并通过短暂模糊来交换内容。光标通过真实的点击和拖拽驱动所有变化。背景为暖浅灰色，组件为黑白两色。文本使用日语（Noto Sans JP）和英语/符号（Geist）。所有运动均使用带有最小过冲的自然弹簧物理效果。相机缩放以填满每个状态的屏幕。完美循环（最后一帧与第一帧匹配）。禁止事项：弹跳式运动、粒子爆炸、发光效果、组件上的渐变、不一致的图标粗细、静默间隙、模板化美学。
</direction>

<structure>
120 BPM，7 小节（约 14 秒），每个节拍都有动作发生。
按钮 -> 加载器 -> 对勾 -> 灵动岛风格 -> 音乐播放器播放/暂停变形 -> 进度条拖拽 -> 音量滑块拉伸 -> 切换开关同步 -> 液态标签选择 -> 标签展开为自绘制图表 -> 折叠为命令面板 -> 输入/搜索 -> 回车 -> 通知 -> 回到按钮。
</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>