Aurora Background (極光背景)
別稱 Northern lights gradient
柔和模糊的色帶像極光一樣在內容後方飄動。
適用情境
主視覺區塊
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「極光背景」(Aurora Background)，也叫 northern lights gradient。
柔和、模糊的色帶在內容後方緩慢飄動搖曳，彼此重疊交融，就像北極光：非常緩慢、如夢似幻。
上方文字要保持清楚易讀，不要每一格畫面都重新對色帶做模糊，以維持流暢；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止飄動。相似的動效
Mesh Gradient (網格漸層)
別稱 Animated mesh gradient
多個顏色點平順地交融、漂移，形成有機的多色背景。
適用情境
到達頁背景
在[套用位置]加入「網格漸層」(Mesh Gradient) 背景，也叫 animated mesh gradient。
幾團柔和的色塊彼此交融，在區域內緩慢漂移，讓背景以有機的方式不斷變化：非常緩慢、流暢。
不論顏色怎麼交融，都要讓上層內容清楚好讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止漂移。Animated Gradient (動態漸層)
別稱 Gradient animation, Moving gradient, Background gradient animation
漸層背景中的顏色緩慢變化、平移或旋轉。
適用情境
主視覺背景、按鈕
在[套用位置]加入「動態漸層」(Animated Gradient)背景，也叫 gradient animation 或 moving gradient。
漸層的顏色在區域內緩慢平移，柔和、連續地流動，循環重新開始時不能出現明顯的跳動。
上方的文字在每種顏色上都要清楚易讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止移動。Light Rays (光芒)
別稱 God rays, Light shafts
柔和的光束在背景上輕輕搖曳。
適用情境
營造氛圍的頁首
在[套用位置]加入「光芒」(Light Rays) 背景，也叫 god rays 或 light shafts。
幾道柔和的半透明光束從頂端呈扇形散開，左右輕輕搖曳，同時略微變亮變暗：緩慢而富有氛圍。
光束要放在內容後面，並且夠淡，不影響閱讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止光束。Wave Background (波浪背景)
別稱 Wavy background, Animated waves
多層波浪線條或形狀沿水平方向起伏流動。
適用情境
區塊分隔、主視覺底部
在[套用位置]加入「波浪背景」(Wave Background)，也叫 wavy background 或 animated waves。
幾層波浪形狀以略有不同的速度橫向流動，彼此交疊、像水一樣變化：緩慢而平順。
讓每層波浪無縫循環、看不到跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就讓波浪靜止。Background & Ambient 中的其他動效
Background Beams (背景光束)
別稱 Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
細細的發光線條沿路徑移動，有時撞到表面會迸散開來。
適用情境
主視覺背景
在[套用位置]加入「背景光束」(Background Beams)效果，也叫 light beams 或 background lines。
背景中鋪著幾條淺色曲線路徑，短短的發光條一條接一條地沿路徑移動，節奏平穩、等速。
光束要錯開時間，絕不同步移動，並放在內容後方；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止光束。將滑鼠移到上面
Background Boxes (背景方格)
別稱 Tile hover background
傾斜的方格網格在游標經過時亮起顏色。
適用情境
主視覺背景
在[套用位置]加入「背景方格」(Background Boxes) 效果，也叫 tile hover background。
用傾斜的方格網格鋪滿區域；游標經過的方格要立刻亮起，再慢慢暗回去，留下一段短短的拖尾。
方格要放在內容後面，不能擋住對內容的點擊；在觸控裝置上改為點亮被點按的方格。A
Border Beam (邊框光束)
別稱 Shine border, Animated border, Glowing effect, Moving Border
一道明亮的高光沿著卡片邊框環繞移動。
適用情境
精選卡片、CTA
在[套用位置]加入「邊框光束」(Border Beam) 效果，也叫 shine border 或 moving border。
一道短而亮的高光沿著卡片邊框以均勻、從容的速度環繞移動，循環時不能出現明顯跳動。
效果不能改變卡片的內容和尺寸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止光束。