看過那種畫面嗎？整個背景像被「吸進黑洞」一樣，神秘又充滿動感。🌀 這可不是外星科技，而是 Animate UI 的 Hole Background！這個元件能讓你的網頁背景呈現出深邃的空間感，就像畫面正在被無形力量牽引，超適合拿來營造科技感或未來感的氛圍。想要知道怎麼做嗎？跟著我一起看下去 🥳
使用 Shadcn CLI 加入 Hole Background
npx shadcn@latest add @animate-ui/components-backgrounds-hole
Import 元件並將元件放在想要的位置上
import { HoleBackground } from '@/components/animate-ui/components/backgrounds/hole';
<HoleBackground>...</>
若還有想要微調，可以增加更多參數 (? 表示為選填參數)
| 參數 | 參數型態 | 說明 |
|---|---|---|
| strokeColor? | string |
洞的線條顏色，預設為 #737373 |
| numberOfLines? | number |
洞的線條數量(由外到內那條)，預設為 50 |
| numberOfDiscs? | number |
洞的圓盤數量(一層一層圓形)，控制中心圓盤的數量，最小值是2，再小會出錯，預設為 50 |
| particleRGBColor? | [number, number, number] |
粒子顏色的 RGB 陣列格式，預設是 [255, 255, 255]，若是淺色背景，要記得調整成 [0, 0, 0]，不然會少一個效果 |
| className | string | 自訂元件樣式 class 名稱，可參考 Tailwind CSS |
若有想要客製化修改洞的座標位置，可以至 components/animate-ui/components/backgrounds/hole.tsx 中的 stateRef.current.endDisc 修改
呈現效果如下：
在這次的教學裡，我們一起用 shadcn CLI 安裝 Hole Background，並探索它的各種可調整的參數，像是線條數量、圓盤數量、甚至是粒子顏色。這些細節讓背景不只是「一個洞」，而是能隨你風格變化的動態宇宙！🌌
下次想讓網頁多一點「吸睛」效果（真的會被吸進去那種 😆），就別忘了拿出這個 Hole Background，讓畫面瞬間變得又專業又帶點幽默感吧！
iThome鐵人賽
看影片追技術