Confetti (彩紙噴發)
別稱 Confetti burst, Celebration
彩色紙片噴發而出再飄落下來，用來慶祝成功。
適用情境
購買完成、達成目標
變體
- canvas-confetti
- Confetti on click button
- fireworks
- burst
- side cannons
- rain
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「彩紙噴發」(Confetti) 慶祝效果，也叫彩紙爆發 (confetti burst)。
彩色小紙片從按鈕中快速噴發出來，接著翻滾著飄落並逐漸淡出，形成一陣短促而熱鬧的紙片雨。
每次成功只觸發一次，不要循環，不要擋住頁面上的點擊；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不要播放。相似的動效
點擊試試
Like / Heart Burst (愛心迸發)
別稱 Heart animation, Twitter heart, Favorite toggle
點擊時愛心圖示填滿顏色，並迸發出小粒子或跳動一下。
適用情境
按讚和收藏按鈕
在[套用位置]加入「愛心迸發」(Like / Heart Burst) 動畫，也叫愛心動畫 (heart animation) 或收藏切換 (favorite toggle)。
按讚時愛心填滿顏色並帶彈性地彈一下，同時一圈光環和小圓點向外迸發並淡出，整體快速、俏皮；取消按讚時愛心只是安靜地變空。
做成帶有按下狀態的真正切換按鈕，只在開啟時播放迸發效果。Particles (粒子)
別稱 Floating particles, Particle field
大量小圓點在背景中漂浮、彼此連線或對游標做出反應。
適用情境
主視覺和區塊背景
在[套用位置]加入「粒子」(Particles) 背景，也叫 floating particles 或 particle field。
大小不一的小圓點各按自己的節奏，沿著柔和、隨意遊走的路徑緩慢漂浮：平靜而輕盈。
圓點數量要適中，在效能較弱的裝置上也保持輕快；離開畫面時暫停；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。ABC
Sparkles (閃亮星點)
別稱 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
細小明亮的光點在文字或區塊周圍閃現又消失。
適用情境
大標題、質感點綴
在[套用位置]加入「閃亮星點」(Sparkles) 效果，也叫 glitter 或 twinkle particles。
小小的星形光點在文字周圍分散的位置、隨機的時刻冒出來，閃爍後淡出：輕盈而快速。
光點只作裝飾，要對螢幕閱讀器隱藏，絕不能遮住文字本身；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止閃爍。ABCDEF
將滑鼠移到上面
Letter Scatter (字母飛散)
別稱 Explosive Letter Burst, Scatter Gather Letters
滑鼠懸停時字母四散飛開再歸位，或在進場時向外迸散。
適用情境
俏皮的連結
在[套用位置]加入「字母飛散」(Letter Scatter) 滑鼠懸停效果，也叫 scatter gather letters 或 explosive letter burst。
游標移到文字上時，每個字母帶著一點旋轉朝各自方向飛出一小段；游標移開後再流暢地聚回原來的單字。
字母移動時，單字在版面中佔的位置保持不變，螢幕報讀器要把它當成一個字來讀；鍵盤聚焦時也顯示同樣的效果。Micro-interaction 中的其他動效
點擊試試
Copy-to-Clipboard Feedback (複製回饋)
別稱 Copied state, Copy icon to checkmark
複製圖示變成勾號，標籤短暫顯示「已複製」。
適用情境
程式碼區塊、分享連結
在[套用位置]加入「複製回饋」(Copy-to-Clipboard Feedback) 動畫，也叫已複製狀態 (copied state) 或複製圖示變勾號 (copy icon to checkmark)。
按下複製按鈕時，複製圖示快速縮小消失，同時畫出一個勾號，標籤變為「已複製」，片刻之後一切平順地恢復原狀。
切換過程中保持按鈕尺寸不變，不讓任何東西位移，並把已複製狀態告知螢幕閱讀器。A
拖曳試試
Drag (拖曳)
別稱 Draggable, Drag constraints
拖曳時元素跟著游標移動，並可以限制在某個區域或某條軸上。
適用情境
滑桿、可排序卡片
在[套用位置]加入「拖曳」(Drag) 互動，也叫可拖曳 (draggable) 或拖曳限制 (drag constraints)。
拖曳時元素直接跟著游標，在允許區域的邊緣停住，放開後帶一點回彈地彈回靜止位置。
觸控和滑鼠都要能用，拖曳時下方的頁面不能跟著捲動，並提供用鍵盤移動它的方式。ABC
Floating Label (浮動標籤)
別稱 Float label, Animated placeholder
輸入框取得焦點或已有內容時，預留位置標籤上移並縮小到輸入框上方。
適用情境
表單、登入輸入框
在[套用位置]加入「浮動標籤」(Floating Label)，也叫浮動標籤 (float label) 或動畫預留位置 (animated placeholder)。
輸入框取得焦點或已有值時，原本在框內的標籤平順而快速地上移並縮小，停到輸入框的上緣；只有在輸入框為空且失去焦點時才落回原處。
保持它是與輸入框關聯的真正 label，並確保輸入框高度不變，讓表單永遠不會跳動。