Icon Morph (圖示變形)
別稱 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
漢堡選單等圖示透過線條的旋轉和移動變成另一個圖示（X）。
適用情境
選單開關按鈕
變體
- hamburger to X
- hamburger to arrow
- play to pause
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「圖示變形」(Icon Morph)，也叫漢堡變 X (hamburger to X) 或 menu icon morph。
每次按下時，上下兩條線先一起滑到中間，再旋轉成 X，中間那條線同時淡出；再按一次就反向還原：俐落明快。
做成真正的切換按鈕，無障礙標籤和展開狀態跟著改變；圖示尺寸保持固定，周圍內容不會位移。相似的動效
Shape Morph (形狀變形)
別稱 Path Morphing, SVG Morph, MorphSVG, Shape Tweening
一個向量形狀平順地變成另一個形狀。
適用情境
圖示狀態切換、首屏主視覺
在[套用位置]加入「形狀變形」(Shape Morph)，也叫路徑變形 (path morphing) 或 SVG morph。
一個形狀平順地變成另一個形狀，例如五邊形向內收縮成星形，各個點以均勻、從容的節奏滑到定位。
讓兩個形狀擁有數量相同且一一對應的點，使變形乾淨、不閃爍；每次狀態改變時播放一次，不要循環。點擊試試
Copy-to-Clipboard Feedback (複製回饋)
別稱 Copied state, Copy icon to checkmark
複製圖示變成勾號，標籤短暫顯示「已複製」。
適用情境
程式碼區塊、分享連結
在[套用位置]加入「複製回饋」(Copy-to-Clipboard Feedback) 動畫，也叫已複製狀態 (copied state) 或複製圖示變勾號 (copy icon to checkmark)。
按下複製按鈕時，複製圖示快速縮小消失，同時畫出一個勾號，標籤變為「已複製」，片刻之後一切平順地恢復原狀。
切換過程中保持按鈕尺寸不變，不讓任何東西位移，並把已複製狀態告知螢幕閱讀器。••••••ABCDEF
點擊試試
Password Reveal Toggle (密碼顯示切換)
別稱 Show/hide password, Eye icon toggle
顯示或隱藏密碼時，眼睛圖示在睜開和帶斜線之間切換。
適用情境
登入和註冊表單
在[套用位置]加入「密碼顯示切換」(Password Reveal Toggle)，也叫 show/hide password 或眼睛圖示切換 (eye icon toggle)。
點擊眼睛時斜線迅速擦除，隱藏的圓點交叉淡入為真實字元；再次點擊時斜線重新畫出並隱藏字元：流暢、快速，不要彈跳。
保持輸入框寬度不變以免文字跳動，並把切換做成真正的按鈕，用標籤說明目前密碼是否顯示。SVG & Shape 中的其他動效
Line Drawing (線條繪製)
別稱 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
透過替虛線偏移加上動畫，讓 SVG 描邊看起來沿著路徑被畫出來。
適用情境
圖示、Logo 和插畫
在[套用位置]加入「線條繪製」(Line Drawing) 動畫，也叫路徑繪製 (path drawing) 或自繪 SVG (self-drawing SVG)。
每條描邊看起來沿著路徑從起點到終點流暢地自己畫出來，第二條描邊（例如勾號）緊接在第一條之後。
進入畫面時只播放一次，不要循環；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的線條。Motion Path (路徑動畫)
別稱 Animate Along Path, Offset Path Animation
元素沿著自訂曲線路徑移動，並可隨路徑旋轉方向。
適用情境
路線上的飛機或圓點、裝飾性移動元素
在[套用位置]加入「路徑動畫」(Motion Path)，也叫 animate along path。
一個小元素沿著自訂曲線路線緩慢、等速地移動，並隨時轉向前進的方向。
使用封閉路線，讓循環重複時不會跳動；路線要隨容器縮放，而不是固定尺寸。A
Orbiting Circles (軌道環繞)
別稱 Orbit Animation, Orbit, Orbiting icons
小圓點或圖示沿著圓形軌道繞中心旋轉。
適用情境
整合關係圖
在[套用位置]加入「軌道環繞」(Orbiting Circles)，也叫 orbit animation 或 orbiting icons。
小圓點沿著圓形軌道緩慢、等速地繞中心元素旋轉，外圈則以更慢的速度反向旋轉。
循環要無縫，環繞的元素始終保持正立；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止旋轉。