提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「卡片懸停效果」(Card Hover Effect)，也叫滑動高亮卡片網格 (sliding highlight card grid)。
柔和的高亮背景出現在懸停卡片的後方，游標移到哪張卡片就平順地滑到哪裡，游標離開網格時淡出。
鍵盤焦點也要以同樣方式移動高亮，卡片本身保持不動。相似的動效
ABC
點擊試試
Tab Indicator Slide (頁籤指示器滑動)
別稱 Sliding underline, Active tab indicator, Segmented control pill
底線或膠囊形背景從舊頁籤滑動到新選取的頁籤。
適用情境
頁籤列、分段控制項
在[套用位置]加入「頁籤指示器滑動」(Tab Indicator Slide)，也叫 sliding underline 或 active tab indicator。
選取新頁籤時，底線從舊頁籤滑到新頁籤，快速並平順減速；如果兩個頁籤寬度不同，就順勢伸縮到新頁籤的寬度。
保持正確的頁籤語意並支援方向鍵切換；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，指示器就直接移過去，不做滑動。ACB
點擊試試
Shared Layout Animation (共享版面動畫)
別稱 layoutId, Shared element (in-page)
元素彷彿移動並縮放到新位置上對應的元素，看起來是同一個物件。
適用情境
選取反白、縮圖到展開檢視
在[套用位置]加入「共享版面動畫」(Shared Layout Animation)，也叫頁面內共享元素 (in-page shared element)。
選取項目改變時，元素要從舊位置平順地移動並縮放到新位置，輕柔地就定位，讓人看出這是同一個物件而不是兩個。
任何時刻只顯示一份，移動過程中不要讓周圍版面跳動。ABC
移動指標試試
Focus Cards (聚焦卡片)
別稱 Blur siblings on hover, Hover focus blur, Card hover effect
懸停的卡片保持清晰，其餘卡片變得模糊、變暗。
適用情境
卡片網格、藝廊
在[套用位置]加入「聚焦卡片」(Focus Cards) 效果，也叫懸停時模糊其他卡片 (blur siblings on hover)、懸停聚焦模糊 (hover focus blur) 或卡片懸停效果 (card hover effect)。
游標停在某張卡片上時，其他卡片變模糊、變暗並略微縮小，懸停的卡片保持清晰；整個過程平順過渡，游標移開後恢復原狀。
鍵盤焦點時也採用同樣的聚焦效果；沒有懸停任何卡片時，所有卡片都保持清楚易讀。A
移動指標試試
Card Spotlight (卡片聚光燈)
別稱 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
柔和的放射狀光線跟著游標在卡片表面移動，照亮下方的背景。
適用情境
功能卡片、便當網格
在[套用位置]加入「卡片聚光燈」(Card Spotlight) 效果，也叫聚光懸停 (spotlight hover)、游標光暈 (pointer glow)、跟隨滑鼠的光暈 (mouse-following glow) 或放射狀漸層懸停 (radial gradient hover)。
柔和、淡淡的放射狀光暈跟著游標在卡片表面移動，游標移入時淡入，移出時淡出。
光暈放在卡片內容的後面，讓文字保持清楚易讀；在觸控裝置上則不顯示光暈。Hover 中的其他動效
A
將滑鼠移到上面
Curl (頁角捲起)
別稱 Page curl
懸停時，元素的一角像翻頁一樣捲起。
適用情境
卡片、便條
在[套用位置]加入「頁角捲起」(Curl) 懸停效果，也叫翻頁捲角 (page curl)。
元素的一角像翻頁一樣平順地捲起，露出摺角的背面，游標移開後再恢復平整。
摺角要小，不要遮住重要內容，鍵盤焦點時也呈現同樣的效果。A
B
移動指標試試
Direction Aware Hover (方向感知懸停)
別稱 Direction-aware overlay
遮罩層從游標進入的一側滑入，並朝游標離開的一側滑出。
適用情境
圖片藝廊、作品集網格
在[套用位置]加入「方向感知懸停」(Direction Aware Hover) 效果，也叫方向感知遮罩 (direction-aware overlay)。
遮罩層從游標進入的那一側滑入，再朝游標離開的那一側滑出：快速、流暢。
依據游標進入和離開時的位置判斷方向；觸控或鍵盤焦點時則統一使用一個預設方向。