流暢動畫和互動式UI元素的動態宣傳片

提示詞

分析 http://sprites.ai，並使用我們自己的 UI 建立產品宣傳，不要使用通用元件。

<direction>
Dribbble 等級的 UI 動態。只有一個形狀，絕不裁切：每個狀態都是同一個元素變換尺寸、圓角半徑與顏色，並透過短暫模糊切換內容。游標透過真實的點擊與拖曳驅動每個變化。暖灰色畫布、黑白元件、單一強調色 (#FD9543)、Geist。到處使用彈簧效果，最多只能有極小的超調。鏡頭放大，讓每個狀態填滿畫面。最後一幀 = 第一幀，因此可以循環播放。
禁止：彈跳式 easing、粒子、光暈、UI chrome 上的漸層、不一致的圖示線條粗細、無動作的空白時間，以及任何看起來像範本的東西。
</direction>

<structure>
120 BPM，7 小節，每一拍都要有動作。
連結廣告帳戶（Meta、Google、LinkedIn、TikTok、Reddit 標誌）→ 載入器 → 勾號 → 提示列輸入 "Launch ads that convert" → 「Researching 42 competitors」島狀元件 → 真實廣告組成的 Ads Library 牆面捲動，最後停在表現最佳的廣告上 → 核准卡片 → Approve & launch → 預算滑桿拉伸到超過最大值 → Autopilot 切換開關 → 控制鈕變成在各個頻道之間移動的液態分頁指示器 → ROAS 圖表自行繪製，滑鼠懸停時顯示提示框 → ⌘K → 輸入 "pause" → 顯示通知 "Paused 3 losing ads" → 回到按鈕。
</structure>

<build>
1. 一個 HTML 檔案，1440x1440。所有樣式都在 seek(t) 內計算：不使用 CSS transition、不使用計時器，幀與幀之間不保留狀態。
2. 彈簧是閉式階躍響應。目標值多次變化的數值，是多個彈簧的總和，因此仍然是時間的純函數。
3. 分頁指示器與切換開關控制鈕：兩個邊緣使用不同的彈簧運動，因此前緣會向前拉伸。
4. 拖曳是直接操作：按住時，數值會跟隨游標。放開後，從當下的位置以彈簧效果返回。
5. 不使用音樂。使用 numpy 合成 UI 音效，並根據每個音效測得的峰值，將其放置在節拍網格上。
6. 使用 Playwright 進行轉製：每幀使用 4 個子幀，再以 ffmpeg tmix 混合，在 60fps 下產生動態模糊。
7. 先為每一拍轉製一幀。修正任何偏離節拍網格、過於擁擠或難以閱讀的部分。
</build>

<gotchas>
不要對任何會被鏡頭縮放的元素使用 will-change。切換文字需要獨立的進入／離開時間。讓最後一幀與第一幀完全一致，包括游標的位置與速度，否則循環播放時會卡頓。
</gotchas>

在撰寫任何程式碼之前，先在節拍網格上顯示狀態清單給我。

Analyze http://sprites.ai and build a product promo from our own UI, not generic components.

<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. Warm-gray canvas, black and white components, one accent (#FD9543), Geist. Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. Last frame = first frame, so it loops.
Banned: bouncy easing, particles, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template.
</direction>

<structure>
120 BPM, 7 bars, something on every beat.
Connect ad account (Meta, Google, LinkedIn, TikTok, Reddit logos) → loader → check → prompt bar types "Launch ads that convert" → island "Researching 42 competitors" → Ads Library wall of real ads scrolls and lands on a top performer → approval card → Approve & launch → budget slider that stretches past max → Autopilot toggle → knob becomes a liquid tab indicator across channels → ROAS chart draws itself with hover tooltip → ⌘K → type "pause" → toast "Paused 3 losing ads" → back to the button.
</structure>

<build>
1. One HTML file, 1440x1440. Every style is computed inside seek(t): no CSS transitions, no timers, no state between frames.
2. Springs are closed-form step responses. A value that changes target many times is a sum of springs, so it stays a pure function of time.
3. Tab indicator and toggle knob: the two edges ride different springs, so the leading edge stretches ahead.
4. Drags are direct manipulation: while held, the value follows the cursor. On release it springs back from wherever it was.
5. No music. Synthesize UI sounds with numpy and place each one by its measured peak on the beat grid.
6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
7. Render one frame per beat first. Fix anything off-grid, cramped or hard to read.
</build>

<gotchas>
No will-change on anything the camera scales. Swapped text needs its own enter/exit timing. Match the last frame to the first, cursor position and speed included, or the loop stutters.
</gotchas>

Show me the state list on the beat grid before writing any code.