提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「打字機效果」(Typewriter),也叫打字動畫 (typing animation) 或打字文字 (typing text)。
字元以穩定的打字節奏逐一出現,最後一個已輸入字元後面緊跟一個游標,打完後閃爍幾次。
只播放一次、不要循環,讓螢幕閱讀器立即讀到完整文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示完整文字。相似的動效
ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (文字生成)
別稱 Text Generate Effect
頁面載入時,文字逐一淡入,常伴隨模糊逐漸消散,彷彿正在生成。
適用情境
AI 風格的開場文案
在[套用位置]加入「文字生成」(Text Generate) 效果。
文字逐一淡入,同時每個詞上的柔和模糊逐漸消散,彷彿文字正在生成:節奏平穩、沉靜。
頁面載入時只播放一次,讓螢幕閱讀器立即讀到完整文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示、不做動畫。A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
將滑鼠移到上面
Text Scramble (亂碼解碼文字)
別稱 ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
文字被不斷刷新的隨機字元取代,並逐漸還原成最終的詞。
適用情境
科技風主視覺標題、連結懸停
在[套用位置]加入「亂碼解碼文字」(Text Scramble) 懸停效果,也叫文字解碼 (text decode) 或加密文字 (encrypted text)。
游標移到文字上時,每個字母快速閃過隨機字元,再從左到右依序定格為真正的字母。
亂碼過程中文字寬度不要跳動,讓螢幕閱讀器始終讀取真實文字,並且在鍵盤焦點時呈現同樣的效果。Typing Indicator (輸入中指示器)
別稱 Typing dots, Chat is typing
對話泡泡中的三個圓點輪流脈動或上浮,表示對方或 AI 正在輸入。
適用情境
聊天、AI 助理
在[套用位置]加入「輸入中指示器」(Typing Indicator),也叫 typing dots。
對方輸入時,小對話泡泡裡的圓點依序上浮並變亮,節奏柔和、輕緩。
循環要無縫銜接,訊息一到就立刻移除泡泡,並為螢幕閱讀器提供一段簡短的狀態文字來取代圓點。aBcD
移動指標試試
Adaptive Caret (自適應插入點)
別稱 Cursor: Adaptive caret size
文字插入點會隨旁邊字元的大小變長或變短。
適用情境
編輯器、打字效果
在[套用位置]加入「自適應插入點」(Adaptive Caret) 效果,也叫 adaptive caret size。
文字插入點移到離游標最近的字元前面,並迅速拉長或縮短到與該字元同高,尺寸變化流暢俐落,不要彈跳。
保持文字本身不移動,並讓插入點像跟隨游標一樣跟隨鍵盤移動。Text 中的其他動效
ABC DEF
將滑鼠移到上面
Underline Draw (底線繪製)
別稱 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
懸停時,連結下方的底線從一側或中間延伸出來。
適用情境
導覽連結、文內連結
在[套用位置]加入「底線繪製」(Underline Draw) 懸停效果,也叫動畫底線 (animated underline) 或懸停底線動畫 (hover underline animation)。
游標停在連結上時,文字下方的底線從左到右平順延伸,游標移開後再收回:快速而含蓄。
不要讓底線推擠周圍版面,並且在鍵盤焦點時呈現同樣的效果。ABCDEF
將滑鼠移到上面
Variable Font Weight Animation (可變字重動畫)
別稱 Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
藉由可變字型的軸,字母平順地變粗或變細(或改變寬度、傾斜度)。
適用情境
互動式標題
在[套用位置]加入「可變字重動畫」(Variable Font Weight Animation) 懸停效果,也叫字重切換 (font weight shift)。
游標停在文字上時,字母從左到右依序變粗,形成一道流暢的波浪;游標移開後再變細。
使用可變字型,讓字重平順變化而不是跳變;標題變寬時不要推擠附近內容,並且在鍵盤焦點時呈現同樣的效果。Video Text (影片文字)
別稱 Text Video Mask
大型字母如同窗口,裡面顯示正在播放的影片。
適用情境
主視覺標題
在[套用位置]加入「影片文字」(Video Text) 效果,也叫文字影片遮罩 (text video mask)。
讓粗大的字母成為觀看正在播放影片的窗口,動態畫面只在字母形狀內顯示。
影片保持靜音、循環播放且不顯示控制項,為螢幕閱讀器提供真實的文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就顯示一張靜止畫面。