SVG Mask Reveal (SVG 遮罩顯現)
別稱 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
遮罩形狀劃過或跟隨游標，露出下方的內容。
適用情境
圖片和內容顯現
變體
- circle follows cursor
- clip-path inset wipe
- SVG clipPath animation
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「SVG 遮罩顯現」(SVG Mask Reveal) 懸停效果，也叫 clip-path reveal 或聚光燈遮罩 (spotlight mask)。
游標移上去時，圓形遮罩從中心擴大，露出下方的內容；游標移開後再收合：流暢且偏快。
兩個圖層保持完全相同的尺寸，避免任何位移；鍵盤聚焦和點按時也顯示同樣的顯現效果。相似的動效
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
移動指標試試
Cursor Spotlight (游標聚光燈)
別稱 Flashlight cursor, Spotlight effect
游標周圍的一圈光照亮內容，其餘部分維持暗色。
適用情境
主視覺區塊、揭示效果
在[套用位置]加入「游標聚光燈」(Cursor Spotlight) 效果，也叫手電筒游標 (flashlight cursor) 或聚光燈效果 (spotlight effect)。
一圈柔和的光跟隨游標，照亮下方的內容，區域內其餘部分維持變暗。
在觸控裝置上沒有可跟隨的游標，改為直接完整照亮顯示內容。ABCDEFGHIJKL
移動指標試試
Text Reveal Card (文字顯現卡片)
別稱 Spotlight Text Reveal
在卡片上移動游標時，遮罩邊緣或聚光燈下隱藏的文字隨之顯露。
適用情境
功能卡片
在[套用位置]加入「文字顯現卡片」(Text Reveal Card) 效果，也叫聚光燈文字顯現 (spotlight text reveal)。
游標在卡片上移動時，一條垂直邊緣緊緊跟隨，在一側露出隱藏的文字：流暢、直接，沒有延遲。
在沒有游標可跟隨的觸控裝置上，讓拖曳或輕觸也能顯示隱藏文字，並讓隱藏文字可被螢幕閱讀器讀取。A
Clip Reveal (裁切顯現)
別稱 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path 或遮罩從邊緣或某一點展開，逐步露出圖片或文字。
適用情境
圖片和標題的顯現
在[套用位置]加入「裁切顯現」(Clip Reveal) 進場效果，也叫 mask reveal、wipe reveal 或 image reveal。
讓裁切邊緣由左往右掃過，內容保持不動、逐步顯露出來：流暢，開始和結束都要柔和。
從一開始就為元素保留空間，避免版面移動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接完整顯示。在裡面捲動
Image Reveal Wipe (圖片擦除顯現)
別稱 Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
遮罩收縮或遮色片邊緣擴展，逐漸露出圖片。
適用情境
捲動時出現的編輯類配圖
在[套用位置]加入「圖片擦除顯現」(Image Reveal Wipe)，也叫 mask reveal 或 clip-path reveal。
圖片捲動進入畫面時，遮罩從一側擦除，隨捲動進度平順地露出圖片，並在圖片離開畫面之前早早完全展開。
預留圖片所占空間，避免版面跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，直接完整顯示圖片。SVG & Shape 中的其他動效
Blob Morph (液態團塊變形)
別稱 Morphing Blob, Animated Blob, Blob / Morphing Loader, Gooey loader, Morph loader
一團有機形狀持續不斷地改變自身輪廓。
適用情境
背景、頭像和按鈕
在[套用位置]加入「液態團塊變形」(Blob Morph) 循環動畫，也叫 morphing blob 或 animated blob。
一團有機形狀一邊緩緩轉動，一邊不停地慢慢改變輪廓：流暢柔和，沒有尖角。
循環要無縫銜接，形狀不能跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。將滑鼠移到上面
Gooey Effect (黏稠融合)
別稱 Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
藉由模糊與對比濾鏡，相鄰的形狀像液滴一樣相互融合。
適用情境
選單、游標和分頁
在[套用位置]加入「黏稠融合」(Gooey Effect) 效果，也叫 goo effect 或元球 (metaballs)。
游標移上去時，小液滴像液體一樣從主體拉長後脫離；游標移開後，它們流回來並平順地融合在一起。
模糊加對比濾鏡只套用在這一小組形狀上，不要套用到整個頁面；鍵盤聚焦和點按時也顯示同樣的效果。點擊試試
Icon Morph (圖示變形)
別稱 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
漢堡選單等圖示透過線條的旋轉和移動變成另一個圖示（X）。
適用情境
選單開關按鈕
在[套用位置]加入「圖示變形」(Icon Morph)，也叫漢堡變 X (hamburger to X) 或 menu icon morph。
每次按下時，上下兩條線先一起滑到中間，再旋轉成 X，中間那條線同時淡出；再按一次就反向還原：俐落明快。
做成真正的切換按鈕，無障礙標籤和展開狀態跟著改變；圖示尺寸保持固定，周圍內容不會位移。