具有互動式 3D 元素的寶可夢主題 UI 動畫電影

提示詞

<inputs>
向我索取：我指定的 Pokémon 或初始三人組、8–12 種以 Pokémon 為主題的 UI 狀態，以及一首約 120 BPM、帶有俏皮冒險感或電子氛圍的免版稅歌曲。確認歌曲授權允許預定用途。預設調色盤：溫暖米白色、黑色與 Poké Ball 紅。Pokémon 美術維持原本的色彩。
</inputs>

<direction>
一部受 Pokémon 啟發、具備 Dribbble 等級精緻度的 UI 動態影片。想像一部設計優美的現代 Pokédex：俏皮、精準，而且能立即 http://recognizable。單一形狀，絕不切換：Poké Ball 持續透過改變尺寸、圓角半徑與色彩，變形為每個介面元件。它的中央按鈕、分隔線與外殼，會成為每個新狀態的控制項與結構。內容以短暫模糊效果切換，並仔細分開進場與退場時間。

每次互動都由可見游標透過點擊、拖曳與懸停手勢驅動。使用淺色暖灰畫布、乾淨的 Geist 字體、一致的圖示線條，以及清晰俐落的 Pokémon 美術。

使用阻尼較高、只有極小過衝的彈簧。鏡頭平滑地重新取景每個狀態，讓介面保持足夠大且易於閱讀。結尾準確回到開場的 Poké Ball，形成無縫循環。

禁止：過度彈跳、粒子爆發、發光效果、UI 外框上的漸層、不一致的圖示線條、無動作空白時間、通用儀表板版面、突兀的場景切換，以及無關的漂浮元素。
</direction>

<structure>
120 BPM、4/4 拍、7 小節：28 拍，約 14 秒。每個 http://beat 都必須發生有意義的動作。第 1 小節 — Poké Ball 啟動

1. 一顆關閉的 Poké Ball 位於中央；游標靠近。
2. 游標點擊中央按鈕。
3. 按鈕變成圓形掃描載入指示器。
4. 掃描結果變成勾號，外殼伸展成緊湊的 Pokédex。

第 2 小節 — 發現 Pokémon
5. Pokédex 展開，顯示指定的 Pokémon。
6. 它的名稱、編號與屬性以快速錯開的方式出現。
7. 游標點擊叫聲／播放控制項。
8. 控制項變形為暫停按鈕，同時緊湊的波形開始動態播放。

第 3 小節 — 訓練家控制項
9. 波形攤平，變成音量滑桿。
10. 游標將 Poké Ball 形狀的滑桿把手拖曳至最大值。
11. 拖曳超過最大值時，滑桿以彈性方式伸展。
12. 放開後，它穩定下來，並壓縮變成閃光模式切換鈕。

第 4 小節 — Pokémon 詳情
13. 游標切換閃光模式；美術變更為正確的閃光版本。
14. 切換鈕把手伸展成液態分頁指示器。
15. 游標選取「Stats」。
16. 卡片展開成乾淨的 Pokémon 數值圖表。

第 5 小節 — 從數值到搜尋
17. 數值條與節拍同步自行繪製出現。
18. 游標懸停在某個數值條上；出現清晰易讀的工具提示。
19. 圖表收回相同的容器中。
20. 容器壓縮成 Pokédex 搜尋欄位。

第 6 小節 — 尋找與選取
21. 搜尋欄位展開成命令面板。
22. 輸入一個簡短的 Pokémon 名稱；符合的結果進行篩選。
23. 游標選取一項結果，顯示其縮圖美術與屬性。
24. 按下 Enter 確認；面板摺疊成「Added to team」提示訊息。

第 7 小節 — 回到 Poké Ball
25. 提示訊息的確認標記變成 Poké Ball 的中央按鈕。
26. 提示訊息收縮；其邊緣變成圓形外殼。
27. 紅色上半部、白色下半部與黑色分隔線各就各位。
28. 循環銜接時，游標沿著平滑路徑返回，與開場位置及速度一致。

全程一致使用所選的 Pokémon。可見文字必須保持簡短，以便在此速度下閱讀。
</structure>

<build>
1. 建立一個自成一體的 HTML 檔案，使用正方形 1440×1440 構圖。在 seek(t) 內根據時間計算每個動畫樣式：不得使用 CSS transitions、計時器或跨畫格保留的狀態。
2. 全程保留一個持續存在的外部元素。其內部美術、標籤與控制項可以變更，但主要輪廓必須在每個狀態之間保持可見的連續性。
3. 使用閉式彈簧階躍響應。對於反覆變更的目標，每次變更各自加總一個彈簧響應，讓動畫維持時間的純函數。
4. 讓分頁指示器的兩條邊使用不同的彈簧，使前緣超前於後緣伸展。對切換鈕把手套用相同技術。
5. 讓拖曳成為直接操控：按住時，數值跟隨游標位置。放開時，使用符合放開位置與速度的閉式彈簧。
6. 使用 numpy 分析提供的歌曲，估算節拍網格、驗證重拍，並對齊序列。如果速度與 120 BPM 不同，請依實際音樂調整時間。
7. 使用獲得授權的 UI 音效，並將測得的瞬態峰值與點擊、確認及變形強調動作對齊。
8. 使用 Playwright 以每個輸出畫格四個子畫格的設定進行渲染。使用 ffmpeg 將每四個子畫格混合成 60fps 影片，以產生動態模糊。
9. 在完整影片之前，先渲染每拍一張預覽畫格。修正任何過於擁擠、難以閱讀、視覺上不連貫或偏離節拍網格的部分。
10. 將美術與字體封裝在 HTML 內，讓渲染不依賴網路請求。
</build><gotchas>
絕不要在任何會被鏡頭縮放的元素上設定 will-change；文字可能會變得模糊。為進場與退場內容分別設定時間，讓標籤在變形期間絕不重疊。

使用準確的 Pokémon 美術、名稱、屬性、閃光色彩與數值。不要自行捏造變體，也不要在容器改變形狀時拉伸角色美術。

讓主要容器在每次轉場中都保持可辨識。Pokémon 美術是變形介面內的內容，不是取代持續存在形狀的元素。

精確對齊循環邊界：幾何、內容、鏡頭、游標位置與游標速度都必須一致。輸出區間 [0, duration)，不要重複端點畫格。音訊也必須乾淨地循環。
</gotchas>

<start>
先向我索取輸入，接著在撰寫任何程式碼之前，先於 28 拍網格上顯示提議的 Pokémon 狀態清單。
</start>

<inputs>
Ask me for: my featured Pokémon or starter trio, 8–12 Pokémon-themed UI states, and a royalty-free song around 120 BPM with a playful adventure or electronic feel. Confirm that the song’s license permits the intended use.Default palette: warm off-white, black, and Poké Ball red. Pokémon artwork keeps its original colors.
</inputs>

<direction>
A Pokémon-inspired UI motion film with Dribbble-level polish. Imagine a beautifully designed modern Pokédex: playful, precise, and instantly http://recognizable.One shape, never cut: a Poké Ball continuously morphs into every interface component by changing its size, radius, and color. Its central button, dividing line, and outer shell become the controls and structure of each new state. Content swaps with a short blur and carefully separated enter/exit timing.

A visible cursor drives every interaction with clicks, drags, and hover gestures. Use a light warm-gray canvas, clean Geist typography, consistent icon strokes, and crisp Pokémon artwork.

Use tightly damped springs with only a tiny overshoot. The camera smoothly reframes each state so the interface stays large and readable. The ending returns exactly to the opening Poké Ball for a seamless loop.

Banned: excessive bouncing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, generic dashboard layouts, abrupt scene changes, and unrelated floating elements.
</direction>

<structure>
120 BPM, 4/4 time, 7 bars: 28 beats, approximately 14 seconds. Something intentional happens on every http://beat.Bar 1 — Poké Ball activation

1. A closed Poké Ball sits centered; the cursor approaches.
2. The cursor clicks its central button.
3. The button becomes a circular scanning loader.
4. The scan resolves into a check, and the shell stretches into a compact Pokédex.

Bar 2 — Pokémon discovery
5. The Pokédex expands to reveal the featured Pokémon.
6. Its name, number, and type appear in a quick stagger.
7. The cursor clicks the cry/play control.
8. The control morphs into pause while a compact waveform animates.

Bar 3 — Trainer controls
9. The waveform flattens into a volume slider.
10. The cursor drags its Poké Ball-shaped knob to maximum.
11. Dragging beyond maximum elastically stretches the slider.
12. On release, it settles and compresses into a shiny-mode toggle.

Bar 4 — Pokémon details
13. The cursor flips shiny mode; the artwork changes to the correct shiny variant.
14. The toggle knob stretches into a liquid tab indicator.
15. The cursor selects “Stats.”
16. The card opens into a clean Pokémon stat chart.

Bar 5 — Stats to search
17. Stat bars draw themselves in sync with the beat.
18. The cursor hovers over a bar; a readable tooltip appears.
19. The chart retracts into the same container.
20. The container compresses into a Pokédex search field.

Bar 6 — Find and select
21. The search field expands into a command palette.
22. A short Pokémon name is typed; matching results filter.
23. The cursor selects a result, revealing its miniature artwork and type.
24. Enter confirms; the palette folds into an “Added to team” toast.

Bar 7 — Return to the Poké Ball
25. The toast’s confirmation mark becomes the Poké Ball’s central button.
26. The toast contracts; its edges become the circular shell.
27. The red upper half, white lower half, and black dividing line settle into place.
28. The cursor returns along a smooth path, matching the opening position and velocity as the loop wraps.

Use the chosen Pokémon consistently throughout. Keep visible text brief enough to read at this pace.
</structure>

<build>
1. Build one self-contained HTML file with a square 1440×1440 composition. Compute every animated style from time inside seek(t): no CSS transitions, timers, or state carried between frames.
2. Keep one persistent outer element throughout the sequence. Its internal artwork, labels, and controls may change, but the main silhouette must visibly connect every state.
3. Use closed-form spring step responses. For repeated target changes, sum one spring response per change so animation remains a pure function of time.
4. Give the tab indicator’s two edges different springs so the leading edge stretches ahead of the trailing edge. Apply the same technique to the toggle knob.
5. Make drags direct manipulation: while held, values follow cursor position. On release, use a closed-form spring matching the release position and velocity.
6. Analyze the supplied song with numpy to estimate the beat grid, verify the downbeat, and align the sequence. If the tempo differs from 120 BPM, adapt the timing to the actual music.
7. Use licensed UI sounds and align their measured transient peaks with clicks, confirmations, and morph accents.
8. Render with Playwright at four subframes per output frame. Blend each group of four with ffmpeg into a 60fps video for motion blur.
9. Render one preview frame per beat before the full video. Fix anything cramped, unreadable, visually disconnected, or off the beat grid.
10. Package artwork and fonts inside the HTML so rendering does not depend on network requests.
</build><gotchas>
Never put will-change on anything the camera scales; text can become blurry.Give outgoing and incoming content separate timing so labels never overlap during a morph.

Use accurate Pokémon artwork, names, types, shiny colors, and stats. Do not invent variants or stretch character artwork when the container changes shape.

Keep the main container recognizable through every transition. Pokémon artwork is content inside the morphing interface, not a replacement for the persistent shape.

Match the loop boundary exactly: geometry, content, camera, cursor position, and cursor velocity. Export the interval [0, duration) without duplicating the endpoint frame. Make the audio loop cleanly too.
</gotchas>

<start>
Ask me for the inputs, then show me the proposed Pokémon state list on the 28-beat grid before writing any code.
</start>