Number Ticker (數字遞增)
別稱 Count Up, Animated Counter, Number Counter, countUp
數字出現在畫面上時，從起始值計數到目標值。
適用情境
統計數據、KPI 區塊
變體
- count up
- count down
- formatted currency
- spring based
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「數字遞增」(Number Ticker)，也叫 count up 或 animated counter。
數字進入畫面時，從零計數到目標值，一開始快，接近終點時柔和地放慢。
使用等寬數字，避免周圍內容抖動；只計數一次；對螢幕閱讀器以及開啟了「減少動態效果」(prefers-reduced-motion) 的使用者，直接顯示最終數值。相似的動效
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9,0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Odometer (里程表數字)
別稱 Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
數字變化時，每一位都縱向捲動到新的值。
適用情境
即時計數器、價格
在[套用位置]加入「里程表數字」(Odometer) 數字動畫，也叫 rolling numbers 或拉霸數字 (slot-machine digits)。
數值變化時，每一位都縱向捲動到新的數字，一律往前捲動，各位之間稍微錯開，結尾有輕微的回穩。
讓每一位數字寬度相同，避免整個數字位移；只提供最終數值給螢幕閱讀器。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)。
游標移到文字上時，每個字母快速閃過隨機字元，再從左到右依序定格為真正的字母。
亂碼過程中文字寬度不要跳動，讓螢幕閱讀器始終讀取真實文字，並且在鍵盤焦點時呈現同樣的效果。H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (翻牌文字)
別稱 Text Flipping Board, Flip Board, Vestaboard display
字元像機場航班看板一樣翻動，直到停在目標字母上。
適用情境
狀態看板、復古顯示幕
在[套用位置]加入「翻牌文字」(Split-Flap Text) 效果，也叫翻牌看板 (text flipping board 或 flip board)。
每個字元格快速翻過字母表，直到停在目標字母上，各字元格從左到右依序停穩。
每次文字出現或變化時執行一次，只向螢幕閱讀器朗讀最終文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不翻動、直接顯示最終文字。Data & Numbers 中的其他動效
Animated Map Arcs (動態地圖弧線)
別稱 World Map Animated Lines, Globe Arcs
線條和圓點在地圖或地球上的各個地點之間動態移動。
適用情境
展示全球布局的視覺
在[套用位置]加入「動態地圖弧線」(Animated Map Arcs)，也叫 globe arcs。
曲線在點狀地圖的各地點之間依序畫出，接著往目的地收回，同時目的地有一圈柔和的光環脈動：平靜而穩定。
讓各條弧線錯開時間，絕不同步移動；循環要無縫；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就暫停播放。Bar Chart Grow (長條圖成長)
別稱 Animated Bar Chart, Bar Chart Entrance
長條從零高度升到各自的資料值。
適用情境
儀表板和報表
在[套用位置]加入「長條圖成長」(Bar Chart Grow) 動畫，也叫 animated bar chart 或 bar chart entrance。
各根長條以快速的錯開節奏依序從基線升到各自的數值，落定時平順減速。
圖表進入畫面時只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示完成後的圖表。