Starfield (星空)
別稱 Stars background, Twinkling stars
細小的星星在如太空般的深色背景上閃爍或漂移。
適用情境
太空或夜晚主題的主視覺
變體
- twinkling
- warp / fly-through
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「星空」(Starfield) 背景，也叫 stars background 或 twinkling stars。
大小不一的小星星各按自己的節奏柔和地閃爍，整片星空非常緩慢地漂移：安靜而平和。
星星數量要適中，保持輕快；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止閃爍和漂移。相似的動效
ABC
Sparkles (閃亮星點)
別稱 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
細小明亮的光點在文字或區塊周圍閃現又消失。
適用情境
大標題、質感點綴
在[套用位置]加入「閃亮星點」(Sparkles) 效果，也叫 glitter 或 twinkle particles。
小小的星形光點在文字周圍分散的位置、隨機的時刻冒出來，閃爍後淡出：輕盈而快速。
光點只作裝飾，要對螢幕閱讀器隱藏，絕不能遮住文字本身；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止閃爍。Particles (粒子)
別稱 Floating particles, Particle field
大量小圓點在背景中漂浮、彼此連線或對游標做出反應。
適用情境
主視覺和區塊背景
在[套用位置]加入「粒子」(Particles) 背景，也叫 floating particles 或 particle field。
大小不一的小圓點各按自己的節奏，沿著柔和、隨意遊走的路徑緩慢漂浮：平靜而輕盈。
圓點數量要適中，在效能較弱的裝置上也保持輕快；離開畫面時暫停；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。Meteors (流星)
別稱 Meteor shower, Shooting Stars
帶著發光尾跡的斜線劃過卡片或區塊。
適用情境
卡片和主視覺點綴
在[套用位置]加入「流星」(Meteors) 效果，也叫流星雨 (meteor shower) 或 shooting stars。
幾道帶著漸隱尾跡的小斜線在隨機時刻斜斜劃過區域，每一道都一閃而過。
數量要少，維持點綴的作用，並在區域邊緣裁切；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止流星。Noise / Grain Texture (雜訊顆粒)
別稱 Film grain, Noise background
細密的顆粒紋理覆蓋在頁面上，有時像底片顆粒一樣閃動。
適用情境
為漸層增添質感與層次
在[套用位置]加入「雜訊顆粒」(Noise / Grain Texture) 疊加層，也叫底片顆粒 (film grain) 或 noise background。
一層細密、淺淡的顆粒紋理覆蓋在表面上，像底片顆粒一樣小幅跳動閃爍：要含蓄，絕不能強到讓內容顯得混濁。
點擊要能穿透疊加層；紋理只產生一次，不要每一格都重新產生；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。Background & Ambient 中的其他動效
Vortex (漩渦)
別稱 Swirling particles
粒子像漩渦一樣繞著中心螺旋旋轉。
適用情境
具張力的主視覺背景
在[套用位置]加入「漩渦」(Vortex) 背景，也叫 swirling particles。
小粒子像漩渦一樣繞著中心點螺旋向內旋轉，在邊緣淡入，接近中心時淡出，形成流暢、連續的漩渦。
粒子數量要適中；離開畫面時暫停；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止旋轉。Wave Background (波浪背景)
別稱 Wavy background, Animated waves
多層波浪線條或形狀沿水平方向起伏流動。
適用情境
區塊分隔、主視覺底部
在[套用位置]加入「波浪背景」(Wave Background)，也叫 wavy background 或 animated waves。
幾層波浪形狀以略有不同的速度橫向流動，彼此交疊、像水一樣變化：緩慢而平順。
讓每層波浪無縫循環、看不到跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就讓波浪靜止。A
B
Animated Beam (動態光束)
別稱 Connecting beam
一道發光脈衝沿著連接兩個元素的線條移動。
適用情境
整合關係圖或資料流程圖
在[套用位置]加入「動態光束」(Animated Beam)效果，也叫 connecting beam。
一道短促的發光脈衝沿著連接兩個元素的線條從一端等速移動到另一端，然後重新開始：流暢、平靜。
連接線本身要一直看得見；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就讓脈衝保持靜止。