Day 22 - Animate UI Hole Background

前言

#

看過那種畫面嗎？整個背景像被「吸進黑洞」一樣，神秘又充滿動感。🌀 這可不是外星科技，而是 Animate UI 的 Hole Background！這個元件能讓你的網頁背景呈現出深邃的空間感，就像畫面正在被無形力量牽引，超適合拿來營造科技感或未來感的氛圍。想要知道怎麼做嗎？跟著我一起看下去 🥳

Hole Background

#

1. 使用 Shadcn CLI 加入 Hole Background

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

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

   import { HoleBackground } from '@/components/animate-ui/components/backgrounds/hole';
   

   <HoleBackground>...</>
   

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

   HoleBackgroundProps

   #

   參數	參數型態	說明
   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，讓畫面瞬間變得又專業又帶點幽默感吧！

Reference

#

• Animate UI Hole Background