SVG Displacement Distortion (SVG 置換扭曲)
別稱 feTurbulence Distortion, Displacement Map Effect
SVG 濾鏡用動態雜訊讓文字或形狀產生扭曲。
適用情境
液體或漣漪懸停效果
變體
- turbulence wobble
- displacement map surface
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「SVG 置換扭曲」(SVG Displacement Distortion) 懸停效果，也叫置換貼圖效果 (displacement map effect)。
游標移上去時，文字或形狀像隔著流動的水一樣蕩漾晃動，效果柔和地漸入；游標移開後恢復清晰。
只在效果啟用時套用扭曲濾鏡，靜止時不產生任何負擔；鍵盤聚焦時也顯示同樣的效果。相似的動效
ABCDEF
Squiggly Text (扭動文字)
別稱 Wobbly Text, Turbulence Text
透過 SVG 置換濾鏡，字母邊緣像手繪一樣抖動。
適用情境
草圖風或俏皮的標題
在[套用位置]加入「扭動文字」(Squiggly Text) 效果，也叫 wobbly text 或 turbulence text。
字母邊緣輕微抖動，就像每秒被手工重畫好幾次：是含蓄、細碎的抖動，而不是流暢的波浪。
保持文字可讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。ABCDEFGHIJABCDEFGHIJ
Text Distortion (文字扭曲)
別稱 Organic Text Distortion
文字隨捲動或游標移動自然地扭曲、起伏。
適用情境
實驗性作品集
在[套用位置]加入「文字扭曲」(Text Distortion) 效果，也叫 organic text distortion。
一行文字不斷橫向流動，同時自然地扭曲、起伏，彷彿隔著流動的水去看，流動由使用者的捲動驅動。
扭曲要夠輕，確保文字可讀，在較慢的裝置上也要流暢；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就關閉此效果。ABCDEF
字母向下滴落、拉長，彷彿正在融化。
適用情境
恐怖或趣味標題
在[套用位置]加入「融化文字」(Melting Text) 效果。
字母緩慢向下塌陷，下方拉出滴落的液滴，彷彿正在融化，最後停在靜止的融化樣貌。
文字進入畫面時只播放一次，結束時保持文字可讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不做動畫。SVG & Shape 中的其他動效
A
將滑鼠移到上面
SVG Mask Reveal (SVG 遮罩顯現)
別稱 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
遮罩形狀劃過或跟隨游標，露出下方的內容。
適用情境
圖片和內容顯現
在[套用位置]加入「SVG 遮罩顯現」(SVG Mask Reveal) 懸停效果，也叫 clip-path reveal 或聚光燈遮罩 (spotlight mask)。
游標移上去時，圓形遮罩從中心擴大，露出下方的內容；游標移開後再收合：流暢且偏快。
兩個圖層保持完全相同的尺寸，避免任何位移；鍵盤聚焦和點按時也顯示同樣的顯現效果。Blob Morph (液態團塊變形)
別稱 Morphing Blob, Animated Blob, Blob / Morphing Loader, Gooey loader, Morph loader
一團有機形狀持續不斷地改變自身輪廓。
適用情境
背景、頭像和按鈕
在[套用位置]加入「液態團塊變形」(Blob Morph) 循環動畫，也叫 morphing blob 或 animated blob。
一團有機形狀一邊緩緩轉動，一邊不停地慢慢改變輪廓：流暢柔和，沒有尖角。
循環要無縫銜接，形狀不能跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。將滑鼠移到上面
Gooey Effect (黏稠融合)
別稱 Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
藉由模糊與對比濾鏡，相鄰的形狀像液滴一樣相互融合。
適用情境
選單、游標和分頁
在[套用位置]加入「黏稠融合」(Gooey Effect) 效果，也叫 goo effect 或元球 (metaballs)。
游標移上去時，小液滴像液體一樣從主體拉長後脫離；游標移開後，它們流回來並平順地融合在一起。
模糊加對比濾鏡只套用在這一小組形狀上，不要套用到整個頁面；鍵盤聚焦和點按時也顯示同樣的效果。