One Shape 连续界面变形。

依据英文原版逐段翻译。使用时，Claude 会先询问界面状态、配色和音乐，再把状态排在节拍网格上，确认后才开始写代码。

本片的输入：12 个状态按上面的结构顺序；配色为黑白加一个信号橙 #FF5A1F；音乐为 Mixkit《House Vibes》。

【输入】
先向我索取：8 到 12 个希望这个形状变成的界面状态（例如按钮、加载器、播放器、滑块、开关、标签页、图表、命令面板、通知）；纯黑白，还是只用一个强调色；一首约 120 BPM 的免版税音乐（例如 Mixkit，可免费商用）。

【方向】
Dribbble 水准的界面动效。一个形状，全程不切镜：每个状态都是同一个元素在改变尺寸、圆角和颜色，里面的内容以短暂的模糊完成切换。光标用真实的点击和拖拽驱动每一次变化。浅暖灰画布，黑白组件，只用一种干净的界面字体（Geist）。处处使用弹簧，最多带一点点回弹。镜头随之缩放，让每个状态都撑满画面。最后一帧就是第一帧，形成循环。
禁止：弹跳式缓动、粒子爆发、发光、界面外框上的渐变、描边粗细不一致的图标、没有动作的空拍，以及任何看起来像模板的东西。

【结构】
120 BPM，7 小节，每一拍都有事情发生。
按钮 → 加载器 → 对勾 → 灵动岛 → 带播放/暂停图标变形的音乐播放器 → 拖动进度条 → 进度条变成音量滑块，拖过最大值时被拉伸 → 开关踩着拍点翻转 → 开关旋钮变成液态的标签指示器 → 标签页展开成自动绘制的图表，悬停时出现提示框 → 收拢成 ⌘K 命令面板 → 输入筛选 → 回车 → 通知 → 回到按钮。

【制作】
1. 单个 HTML 文件，正方形 1440×1440。所有样式都在 seek(t) 中由时间计算：不用 CSS 过渡，不用计时器，帧与帧之间不保留任何状态。
2. 弹簧采用闭式阶跃响应。一个值多次改变目标时，就是每次改变各自一条弹簧的叠加，因此它始终是时间的纯函数。
3. 标签指示器的左右两条边使用不同的弹簧，让前沿先于后沿伸出去。开关旋钮使用同样的手法。
4. 拖拽是直接操控：按住光标时，数值由光标位置计算；松手后，从当时所在的位置弹回。
5. 用 numpy 分析歌曲，得到节拍网格，并从一个强拍开始。每个界面音效按它实测的峰值对齐放置。
6. 用 Playwright 渲染：每帧 4 个子帧，用 ffmpeg 的 tmix 混合出动态模糊，输出 60fps。
7. 完整渲染之前，先每拍渲染一帧。修正任何没有落在节拍上、显得拥挤或难以看清的地方。

【注意】
不要给任何会被镜头缩放的元素加 will-change，否则文字会发虚。在变形容器里切换的文字，需要各自的进场和退场时间，否则会互相重叠。最后一帧要与第一帧完全一致，包括光标的位置和速度，否则循环会卡顿。

【开始】
先向我索取上面的输入；在写任何代码之前，先把状态列表排在节拍网格上给我看。