<inputs>
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).
</inputs>

<direction>
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.
</direction>

<structure>
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.
</structure>

<build>
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.
</build>

<gotchas>
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.
</gotchas>

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

同一个形状踩着 120 BPM 变成按钮、播放器、滑块、图表等，首尾无缝循环的方形 UI 动效。 英文标题：One-shape UI morph loop synced to music 中文提示词译文： <inputs> 先问我要：8 到 12 个我希望这个形状变成的 UI 状态（例如按钮、加载器、播放器、滑块、开关、标签页、图表、命令面板、提示条），纯黑白还是一种强调色，以及一首 120 BPM 左右的免版税歌曲（例如 Mixkit，可免费商用）。 </inputs> <direction> Dribbble 水准的 UI 动效。只有一个形状，全程不切镜：每个状态都是同一个元素在改变尺寸、圆角和颜色，内容借一个短暂的模糊完成切换。每次变化都由光标通过真实的点击和拖拽驱动。浅暖灰画布，黑白组件，一种干净的 UI 字体（Geist）。处处用弹簧动画，最多只有一点点过冲。镜头缩放，让每个状态都填满画面。最后一帧就是第一帧，所以能循环。 禁止：弹跳缓动、粒子爆发、辉光、UI 外框上的渐变、图标描边粗细不一、空档时间、任何看起来像模板的东西。 </direction> <structure> 120 BPM，7 小节，每一拍都有事发生。 按钮 → 加载器 → 对勾 → 灵动岛 → 带播放/暂停变形的音乐播放器 → 拖动进度条 → 它变成音量滑块，拖过最大值时会被拉长 → 开关踩着节拍翻转 → 开关的圆钮变成液态的标签指示条 → 标签页展开成一张自己画出来的图表，悬停时有提示框 → 它收拢成 ⌘K → 输入筛选 → 回车 → 提示条 → 回到按钮。 </structure> <build> 1. 一个 HTML 文件，正方形 1440x1440。所有样式都在 seek(t) 里由时间算出：不用 CSS 过渡，不用定时器，帧与帧之间不保留任何状态。 2. 弹簧用闭式阶跃响应。一个值如果多次改变目标，就等于每次改变各对应一个弹簧的叠加，这样它仍然是时间的纯函数。 3. 标签指示条的两条边各用不同的弹簧，所以前沿会比后沿先拉伸出去。开关圆钮也用同样的技巧。 4. 拖拽是直接操控：光标按住时，数值由光标位置算出；松开后，从当时所在的位置弹回。 5. 用 numpy 分析歌曲得到节拍网格，从一个强拍开始。每个 UI 音效按它实测的峰值位置来放。 6. 用 Playwright 渲染：每帧 4 个子帧，用 ffmpeg tmix 混合，得到 60fps 的动态模糊。 7. 完整渲染前，先每拍渲染一帧。把偏离网格、太挤或难以看清的地方都修好。 </build> <gotchas> 镜头会缩放的元素一律不要加 will-change，否则文字会渲染发虚。在变形容器里切换的文字需要各自的进场和退场时间，不然会重叠。让最后一帧和第一帧完全一致，包括光标的位置和速度，否则循环会卡顿。 </gotchas> <start> 先问我要输入，然后在写任何代码之前，先把状态列表排在节拍网格上给我看。 </start> 使用工具：playwright, ffmpeg, python 需要输入：music 原始发布：https://x.com/twoclipping/status/2103273003555402193 来源许可/权利说明：CC BY 4.0（仓库采用 CC BY 4.0；社区 Prompt 与视频权利归原作者并受原帖条款约束，保留完整归属）