提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「搖晃卡片」(Wobble Card) 效果。
游標在卡片上移動時，卡片朝游標方向輕微平移，內容則朝反方向輕微平移並略微放大，平順地跟隨；游標移開後一切回到原位。
保持幅度很小；在觸控裝置上關閉，如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，也要關閉。相似的動效
A
移動指標試試
3D Tilt (3D 傾斜)
別稱 Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
卡片朝游標方向透視旋轉，分層內容從表面浮起。
適用情境
產品卡片和價格卡片
在[套用位置]加入「3D 傾斜」(3D Tilt) 效果，也叫 perspective tilt 或 tilt card。
游標移動時，卡片朝游標方向透視傾斜，內部各層以不同深度從表面浮起；游標移開後平順地恢復平放：平順而含蓄。
傾斜幅度要小，確保文字易讀；在觸控裝置上，以及使用者開啟了「減少動態效果」(prefers-reduced-motion)時，讓卡片保持平放。A
移動指標試試
Magnetic Button (磁吸按鈕)
別稱 Magnetic target, Magnetic hover
游標靠近時元素被吸向游標，離開後又彈回原位。
適用情境
CTA 按鈕、導覽圖示
在[套用位置]加入「磁吸按鈕」(Magnetic Button) 效果，也叫磁吸目標 (magnetic target) 或磁吸懸停 (magnetic hover)。
游標靠近時，按鈕被輕輕吸向游標，按鈕文字移動得再多一點；游標離開後，按鈕帶著一點小彈跳回到原位。
不要讓周圍版面跟著移動；在觸控裝置上，或者如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就關閉吸附。A
移動指標試試
Glare / Holographic Card (炫光全像卡片)
別稱 Glare hover, Glare card, Magic card, Glare
一道明亮的高光像反光一樣隨游標在卡片表面移動。
適用情境
高級卡片或收藏卡
在[套用位置]加入「炫光全像卡片」(Glare / Holographic Card) 效果，也叫 glare card 或 glare hover。
一道柔和明亮的高光隨游標在卡片表面移動，像光線在上面反射，同時卡片朝游標方向微微傾斜；游標移開後兩者都淡出：平順而含蓄。
讓點擊能穿透高光層，確保底下的內容清楚易讀；在觸控裝置上顯示不帶高光的卡片。Hover 中的其他動效
A
將滑鼠移到上面
彩色背景從一側掃入，帶有彈性的輕微過衝。
適用情境
按鈕
在[套用位置]加入「背景彈性掃過」(Background Bounce Sweep) 懸停效果。
新的背景色從一側掃入，帶著彈性稍微越過另一側邊緣後再回穩，同時文字顏色跟著切換以維持可讀性；游標移開時平順地滑出。
讓文字始終位於填色之上，鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
Background Fade (背景色漸變)
別稱 Color Fade
懸停時，背景色和文字顏色交叉漸變為新的顏色。
適用情境
按鈕、導覽項目
在[套用位置]加入「背景色漸變」(Background Fade) 懸停效果，也叫顏色漸變 (color fade)。
游標停在元素上時，背景色和文字顏色平順地交叉漸變為新顏色，移開後再漸變回來：沉穩，不帶任何位移。
兩種狀態下都要讓文字和背景保有足夠的對比，鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
Background Sweep (背景掃過)
別稱 Background Fill, Slide Fill
懸停時，彩色背景從一側邊緣掃過整個元素。
適用情境
按鈕、選單連結
在[套用位置]加入「背景掃過」(Background Sweep) 懸停效果，也叫背景填充 (background fill) 或滑動填充 (slide fill)。
新的背景色從左側邊緣掃到右側，平順、快速、不回彈，游標移開時以同樣方式退回，同時文字顏色跟著切換以維持可讀性。
讓填色始終裁切在元素的形狀之內，鍵盤焦點時也呈現同樣的效果。