[awesome-opus5-5-videos · UI动效] 中文解读｜PRM-0021｜日语UI组件变形与节拍循环（优化版 v002）

<inputs>
向我询问以下 3 项：图形要变成的 8～12 个界面组件（例如：按钮、加载中的显示、音乐播放器、音量滑块、开/关切换开关、标签页、图表、通过 ⌘K 打开的搜索框、短暂弹出的通知）；配色是完全黑白还是加入 1 种强调色；以及一首约 120BPM（每分钟 120 拍）的免版权费用歌曲（例如 Mixkit，免费商用）。
</inputs>

<direction>
制作能登上设计师作品网站「Dribbble」水准的精致界面动效。只有 1 个图形，绝不切换场景。所有状态都通过同一个图形改变大小、圆角和颜色并持续变形来呈现，内部内容则通过短暂模糊进行替换。光标通过真实的点击和拖拽触发所有变化。背景是带暖调的浅灰色，组件为白色与黑色；界面文字使用日语，日文字体为 Noto Sans JP，英数字和符号使用 Geist（1 种字体）。所有运动都采用像「弹簧」一样自然的运动，越过目标的幅度（回弹）最多只能很小。相机通过缩放，让每个状态充满画面。最后一帧与第一帧相同，从而形成循环。
禁止：蹦跳式运动、粒子飞散效果、发光晕染、组件上的渐变、图标描边粗细不一致、没有任何变化的无用停顿，以及所有看起来像套用模板的东西。
</direction>

<structure>
120BPM，7 小节（约 14 秒），每一拍都有事情发生。
按钮 → 加载中的显示 → 对勾 → 类似 iPhone 灵动岛的显示 → 播放/暂停图标平滑变形的音乐播放器 → 拖动播放进度条的滑块来改变播放位置 → 变成音量滑块（拖动超过最大值时像橡胶一样拉伸） → 开/关切换开关随节拍切换 → 开关的滑块变成像液体一样运动的标签页选中指示器 → 标签页展开，变成自行绘制线条的图表（光标悬停时出现提示气泡） → 折叠成 ⌘K 搜索框 → 输入文字筛选候选项 → Enter → 短暂弹出的通知 → 回到按钮。
</structure>

<build>
1. 只用 1 个 HTML 文件，正方形 1440x1440。所有外观都在 seek(t)（传入时间 t，即可确定该瞬间画面的函数）中根据时间计算。不要使用 CSS transitions（自动动画功能）或定时器，也不要在帧与帧之间携带状态。
2. 弹簧运动采用能够直接用公式求出的形式（闭式阶跃响应）。一个值的目标多次变化时，就把每次变化分别计算出的运动相加。这样在任何时候，值都只由时间决定。
3. 标签页的选中指示器：左右两端用不同的弹簧驱动，让前进方向的前端先于后端伸长。开关滑块使用同样的方法。
4. 拖拽采用直接操作：光标按住时，从光标位置计算数值。松开后，从当时所在的位置弹回。
5. 用 numpy（计算工具）分析歌曲，确定各拍的位置，并从小节的第一拍开始。操作音按测得的声音峰值位置对齐。
6. 用 Playwright（自动操作浏览器并把画面输出为图像的工具）绘制。每帧输出 4 个子帧，用 ffmpeg（制作视频的工具）的 tmix 叠合，加入 motion blur（运动残影），输出为 60fps。
7. 输出完整片段前，先每拍只输出 1 帧进行检查。修正偏离节拍、布局拥挤或难以阅读的部分。
</build>

<gotchas>
绝不要给被相机缩放的元素添加 will-change（浏览器绘制设置）。添加后会使文字模糊。在变形容器内替换的文字，需要各自独立的进入与退出时序，以防相互重叠。最后一帧必须与第一帧完全一致，包括光标的位置和速度，否则循环会卡顿。
</gotchas>

<start>
先向我询问输入内容，然后在编写代码前，展示按拍排列的状态清单。
</start>