前言

太難得竟然可以完成到 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

BubbleColors

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

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

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

```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中所有常用的濾鏡