UI Morphing Motion Design Template
一個全面的提示範本，用於建立與音樂同步的循環 UI 動態設計，其中元素會透過各種狀態進行變形。
提示詞
<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 過渡，無計時器，幀之間不攜帶狀態。
2. 彈簧是閉式階躍響應。多次改變目標值的值是每次改變的一個彈簧之和，因此它保持為時間的純函數。
3. 分頁指示器的兩個邊緣遵循不同的彈簧，因此前導邊緣領先於後緣拉伸。開關旋鈕也採用相同技巧。
4. 拖曳是直接操作：當游標按住時，值由其位置計算得出。釋放時，它從當時的位置彈回。
5. 使用 numpy 分析歌曲以取得拍網格並從強拍開始。根據測量的峰值放置每個 UI 聲音。
6. 使用 Playwright 渲染：每幀 4 個子幀，使用 ffmpeg tmix 混合以在 60fps 下產生動態模糊。
7. 在完整渲染之前，每個拍子渲染一幀。修正任何脫離網格、擁擠或難以閱讀的內容。
</build>
<gotchas>
切勿將 will-change 應用於鏡頭縮放或文字渲染模糊的任何內容。在變形容器內交換的文字需要其獨立的進入和退出計時，否則會重疊。確保最後一幀與第一幀完全相同，包括游標位置和速度，否則循環會出現頓挫。
</gotchas>
<start>
向我詢問輸入參數，然後在您編寫任何程式碼之前，先在拍網格上向我展示狀態列表。
</start>
如何使用這條提示詞
- 1
複製上方完整的提示詞。
- 2
開啟支援 Claude Opus 5.5 的平台（例如 YouMind），把提示詞貼上。
- 3
依你的想法替換主體、風格或細節，然後生成。
這是 YouMind 提示詞庫裡的一條免費 AI 提示詞。這裡還有成千上萬條 影片 提示詞，都能免費複製與改用。
探索更多 影片 提示詞
更多提示詞功能
