提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「波浪文字」(Wavy Text) 效果,也叫文字波浪 (text wave)。
字母依序上下起伏,讓一道輕柔流暢的波浪不斷穿過整個詞。
無縫循環,讓螢幕閱讀器把它讀作一個詞;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止波浪。相似的動效
ABCDEF
Split Text Stagger (文字拆分交錯)
別稱 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
標題被拆分成字元、單字或行,以短暫延遲依序動畫進場。
適用情境
大標題、章節標題
在[套用位置]加入「文字拆分交錯」(Split Text Stagger) 進場效果,也叫逐字交錯 (letter stagger) 或 staggered text reveal。
把標題拆成單個字母,字母之間留出短暫延遲,依序上移並淡入,快速流暢,不要有彈跳感。
標題進入畫面時只播放一次,讓螢幕閱讀器把它當作一個完整的詞讀出;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示、不做動畫。Bouncing Dots (彈跳圓點)
別稱 Dots loader, Ellipsis loader, Three-dot loader
一排圓點依序彈跳、淡入淡出或縮放。
適用情境
行內載入、聊天等待
在[套用位置]加入「彈跳圓點」(Bouncing Dots),也叫 dots loader 或 three-dot loader。
圓點以輕快、有彈性的節奏依序跳起再落下,一輪結束後稍微停頓,再重新開始。
循環要無縫銜接,並為螢幕閱讀器提供狀態標籤;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止動畫。ABC DEF GHI JKLABC DEF GHI JKL
MNO PQR STU VWXMNO PQR STU VWX
YZA BCD EFG HIJYZA BCD EFG HIJ
Kinetic Typography (動態文字排版)
別稱 Kinetic Text
文字不再是靜態文案,而是作為運動的圖形元素縮放、移動或旋轉。
適用情境
品牌主視覺區塊
在[套用位置]加入「動態文字排版」(Kinetic Typography),也叫 kinetic text。
一列列重複的大字級文字以緩慢、穩定的節奏交替朝相反方向橫向滑動,讓文字本身變成運動的圖形。
每一列都要無縫循環、看不出跳接,螢幕報讀器只讀一次文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止運動。Typing Indicator (輸入中指示器)
別稱 Typing dots, Chat is typing
對話泡泡中的三個圓點輪流脈動或上浮,表示對方或 AI 正在輸入。
適用情境
聊天、AI 助理
在[套用位置]加入「輸入中指示器」(Typing Indicator),也叫 typing dots。
對方輸入時,小對話泡泡裡的圓點依序上浮並變亮,節奏柔和、輕緩。
循環要無縫銜接,訊息一到就立刻移除泡泡,並為螢幕閱讀器提供一段簡短的狀態文字來取代圓點。Text 中的其他動效
ABDEFGHIJKLDEFMN
Word Rotate (文字輪替)
別稱 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
句子中的一個詞以滑動、翻轉或淡入淡出的方式換成清單中的下一個詞。
適用情境
主視覺標語
在[套用位置]加入「文字輪替」(Word Rotate) 效果,也叫輪替詞 (rotating words) 或翻轉詞 (flip words)。
行內的一個詞向上滑出,清單中的下一個詞從下方滑入,每個詞停留片刻後再切換。
詞寬不同時不要讓這一行的其餘部分跳動,不要讓螢幕閱讀器朗讀每次切換;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止輪替。ABCDEF
Animated Gradient Text (動態漸層文字)
別稱 Aurora Text, Rainbow Text Sweep, Gradient Text Color Wave
文字以漸層填色,顏色持續變換或流動。
適用情境
品牌標題
在[套用位置]加入「動態漸層文字」(Animated Gradient Text) 效果,也叫極光文字 (aurora text) 或 rainbow text sweep。
文字以漸層填色,顏色在文字上緩慢、流暢地流動,無縫地無限循環。
任何時刻文字都要在背景上清楚易讀;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就讓顏色保持靜止。ABCDEF
將滑鼠移到上面
Glitch Text (故障文字)
別稱 Text Glitch, RGB Split Glitch
文字像訊號故障一樣抖動,出現切片錯位和紅青色分離。
適用情境
賽博龐克或遊戲風格標題
在[套用位置]加入「故障文字」(Glitch Text) 滑鼠懸停效果,也叫 text glitch 或 RGB 分離故障 (RGB split glitch)。
游標停在文字上時,文字以快速、俐落的陣發方式抖動:細細的橫向切片左右跳動,兩份彩色副本像訊號故障一樣錯開;游標移開後恢復原狀。
真正的文字在文件中只保留一份,避免螢幕報讀器讀出副本;鍵盤聚焦時也顯示同樣的效果。