Make me a 30-second motion design video in code, 1080x1080, 60 fps. The music is [path to your track].

First measure the track with numpy. Find the BPM, the beat times and the drop, then cut 30 seconds starting on its first downbeat. If the song ends too soon after it, pick an earlier drop.

The video is one UI element that never cuts. It morphs through 8-12 states of [your app or idea], for example an input field, a button, a loader, a card, a slider, a toggle, a timer, a toast, a chart, and back to the input. Each change lands on a beat, and each state stays on screen for at least 2 beats so people can read it. The last frame must equal the first for a clean loop. Nothing should move at t=0, and every spring should settle before the end. Move the cursor with left and top, since Chrome draws scaled elements slightly differently after an animation.

Style rules:
- one flat background, black and white components, one font (Geist)
- no gradients, glows, particles or bouncy easing
- a cursor clicks or drags before every change
- the camera zooms so each state fills most of the frame
- content inside the element swaps with a 0.15 s blur

Build it as one HTML page where every style is a pure function of time in http://window.seek(t). Animate with closed-form damped springs (damping around 0.75, about 3% overshoot), one spring per target change, summed.

Before writing any code, show me the list of states on the beat grid and wait for my OK. After the code, render one frame per beat as a contact sheet and hold until I approve it.

For the final render, drive the page with Playwright, take 4 subframes per frame, blend them with ffmpeg tmix for motion blur, then add the music cut and export H.264.

30 秒方形视频，一个 UI 元素踩着节拍在 8–12 个状态间变形，用 Playwright 子帧渲染出运动模糊。 英文标题：Beat-synced morphing UI element template 中文提示词译文： 给我做一段 30 秒的代码动效视频，1080x1080，60 fps。音乐是 [path to your track]。 先用 numpy 测量这首曲子。找出 BPM、节拍时间点和 drop，然后从第一个强拍开始截取 30 秒。如果在那之后歌曲太快结束，就选一个更早的 drop。 视频是一个从不切镜的 UI 元素。它在 [your app or idea] 的 8-12 个状态之间变形，例如输入框、按钮、加载器、卡片、滑块、开关、计时器、toast 提示、图表，再回到输入框。每次变化都落在节拍上，每个状态至少在屏幕上停留 2 拍，让人看得清。最后一帧必须和第一帧相同，以便无缝循环。t=0 时什么都不应该在动，每个弹簧都要在结束前稳定下来。用 left 和 top 移动光标，因为 Chrome 在动画之后绘制缩放元素会有细微差异。 风格规则： - 单一纯色背景，黑白组件，一种字体（Geist） - 不要渐变、辉光、粒子或弹跳缓动 - 每次变化前都有光标点击或拖拽 - 镜头缩放，让每个状态占满大部分画面 - 元素内部内容切换时带 0.15 s 的模糊 把它做成一个 HTML 页面，每个样式都是 http://window.seek(t) 里关于时间的纯函数。用闭式阻尼弹簧做动画（阻尼约 0.75，约 3% 过冲），每次目标变化一个弹簧，叠加求和。 写任何代码之前，先把状态列表排在节拍网格上给我看，等我确认。写完代码后，每拍渲染一帧拼成联系表，等我批准后再继续。 最终渲染时，用 Playwright 驱动页面，每帧取 4 个子帧，用 ffmpeg tmix 混合出运动模糊，再加上剪好的音乐，导出 H.264。 使用工具：claude-code, python, playwright, ffmpeg 需要输入：music 原始发布：https://x.com/diamai_/status/2104191375809954126 来源许可/权利说明：CC BY 4.0（仓库采用 CC BY 4.0；社区 Prompt 与视频权利归原作者并受原帖条款约束，保留完整归属）