Day 20 - Animate UI Bubble Background

前言

#

太難得竟然可以完成到 20 篇文章拉 🎉

Animate UI – Bubble Background，就是讓你背景效果變成像是泡泡在動來動去的感覺。想要知道怎麼做的話，就跟著我們一起看下去吧！

Bubble Background

#

在這個範例中，Bubble background 不僅能隨著滑鼠產生互動效果，當滑鼠在畫面中移動時，還會有顏色飄散的感覺。除此之外，我也替對話框文字加上一層帶有 Liquid Glass 質感的邊框，讓內容在視覺上更清晰 ✨

1. 使用 Shadcn CLI 加入 Bubble Background

   npx shadcn@latest add @animate-ui/components-backgrounds-bubble
   

2. Import 元件並將元件放在想要的位置上

   import { BubbleBackground } from '@/components/animate-ui/components/backgrounds/bubble';
   

   <BubbleBackground>...</>
   

3. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   BubbleBackgroundProps

   #

   參數	參數型態	說明
   interactive?	boolean	是否啟用互動效果
   transition?	SpringOptions	動畫過渡設定
   colors?	BubbleColors	設定背景的顏色層次，填入顏色是 RGB 值，可參考下面 BubbleColors，程式碼看起來會像是如下圖

   

   

   BubbleColors

   #

   參數	參數型態	說明
   first	string	第一層顏色
   second	string	第二層顏色
   third	string	第三層顏色
   fourth	string	第四層顏色
   fifth	string	第五層顏色
   sixth	string	第六層顏色

   需要注意的是 string 參數所填入的必須是 RGB 值，而非 hex 格式。實際測試後發現，若填入其他型別的值，將無法正確讀取資料。

   另外，當滑鼠在畫面中移動時，顯示的互動顏色會取決於 第六層顏色 的設定。

   若想要進一步修改背景顏色，建議先參考 蘇桓晨的〈一次搞懂 SVG 中所有常用的濾鏡〉，裡面對 SVG 濾鏡的原理有非常完整的解說。了解原理後，再進入 /components/animate-ui/components/backgrounds/bubble.tsx 檔案中進行調整，就能更靈活地自訂背景效果。

   <svg
       xmlns="http://www.w3.org/2000/svg"
       className="absolute top-0 left-0 w-0 h-0"
   >
       <defs>
           <filter id="goo">
           <feGaussianBlur
               in="SourceGraphic"
               stdDeviation="10"
               result="blur"
           />
           <feColorMatrix
               in="blur"
               mode="matrix"
               values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
               result="goo"
           />
           <feBlend in="SourceGraphic" in2="goo" />
           </filter>
       </defs>
   </svg>
   

小結

#

今天我們一起探索 Animate UI 的 Bubble Background。這個元件會在背景中生成漸層色彩的氣泡，隨著時間緩慢漂浮，透過 interactive 屬性讓氣泡跟隨滑鼠移動，或是自訂顏色與動畫過渡效果，讓整體視覺更符合你的風格 🎨

若你也想要把網頁的顯示內容也套上 Liquid Glass 效果，可以參考 Kumar Anirudha - Apple’s Liquid Glass Design。

想讓你的網站背景更有趣嗎？不妨試試這個 Bubble Background 元件，讓你的頁面也瞬間高級起來！🎈

Reference

#

• Animate UI Bubble Background
• Kumar Anirudha - Apple’s Liquid Glass Design
• Pure CSS Apple Liquid Glass User Card
• 一次搞懂SVG中所有常用的濾鏡