由游標驅動的互動式 3D 使用者介面元素流暢地相互變形

提示詞

<inputs>
請向我詢問：我希望這個形狀變成的 8 到 12 種 UI 狀態（例如按鈕、載入器、播放器、滑桿、切換開關、分頁、圖表、指令面板、提示訊息）、純黑白或一種強調色，以及一首約 120 BPM 的免版稅歌曲（例如 Mixkit，可免費商用）。
</inputs>

<direction>
Dribbble 等級的 UI 動態效果。一個形狀，絕不剪接：每個狀態都是同一個元素變形，改變尺寸、圓角半徑和色彩，並透過短暫模糊切換內容。游標透過真實的點擊與拖曳驅動每次變化。明亮的暖灰色畫布、黑白元件、一款俐落的 UI 字型（Geist）。到處使用彈簧效果，最多只能有極輕微的過衝。鏡頭縮放，讓每個狀態填滿畫面。最後一幀就是第一幀，因此會循環播放。
禁止：彈跳式緩動、粒子爆發、光暈、UI 外框上的漸層、不一致的圖示筆畫、無事可做的空白時間，以及任何看起來像範本的東西。
</direction>

<structure>
120 BPM，7 小節，每一拍都要發生某件事。
按鈕 → 載入器 → 勾選 → 動態島 → 帶有播放／暫停變形效果的音樂播放器 → 拖曳進度列 → 變成音量滑桿，拖曳超過最大值時會拉伸 → 切換開關在拍點翻轉開啟 → 滑鈕變成液態分頁指示器 → 分頁展開成自行繪製的圖表，游標懸停時顯示工具提示 → 收合成 ⌘K → 輸入文字進行篩選 → 按下 Enter → 提示訊息 → 回到按鈕。
</structure>

<build>
1. 一個 HTML 檔案，正方形 1440x1440。所有樣式都在 seek(t) 內根據時間計算：不要使用 CSS transitions、計時器，也不要在影格之間保留狀態。
2. 彈簧效果使用封閉形式的階躍響應。一個值若多次變更目標，就為每次變更加總一個彈簧，讓它保持為時間的純函式。
3. 分頁指示器的兩個邊緣使用不同的彈簧，因此前緣會領先後緣拉伸。切換開關滑鈕也使用相同技巧。
4. 拖曳採用直接操作：按住游標時，根據游標位置計算數值。放開後，從當下位置開始以彈簧效果回彈。
5. 使用 numpy 分析歌曲，取得節拍網格並從強拍開始。根據測得的峰值放置每個 UI 音效。
6. 使用 Playwright 進行渲染：每幀取 4 個子幀，再使用 ffmpeg tmix 混合，在 60fps 下製作動態模糊。
7. 在完整渲染前，先每拍渲染一幀。修正任何偏離節拍網格、過於擁擠或難以閱讀的地方。
</build>

<gotchas>
絕不要對任何會被鏡頭縮放的元素使用 will-change，也不要讓文字渲染模糊。在變形容器內切換的文字需要各自獨立的進場與退場時間，否則會重疊。最後一幀必須與第一幀完全一致，包括游標位置和速度，否則循環會卡頓。
</gotchas>

<start>
請向我詢問輸入內容，然後在你撰寫任何程式碼之前，先按照節拍網格向我展示狀態清單。
</start>

<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>