Day 24 - Animate UI Star Background

前言

#

這次要介紹的 Animate UI – Star Background，就像在你的畫面上灑下一整片星河， 讓靜態的頁面瞬間多了點浪漫氣息～

不需要望遠鏡，也不必上太空，只要透過幾行指令安裝、幾個參數調整，就能讓你的網站在夜色中閃爍登場 ✨。

準備好和我一起探索這片互動式星空了嗎？🚀

Star Background

#

1. 使用 Shadcn CLI 加入 Star Background

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

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

   import { StarsBackground } from '@/components/animate-ui/components/backgrounds/stars';
   

   <StarsBackground>...</>
   

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

   StarsBackgroundProps

   #

   參數	參數型態	說明
   factor	number	控制星星的分布密度，值越大星星越多，預設為 0.05，但這個參數我個人覺得影響不大 🤔
   speed	number	控制星星的移動速度，預設為 50，越小越快，越大移動速度越慢
   transition	SpringOptions	控制動畫的彈性與阻尼參數，預設為 { stiffness: 50, damping: 20 }
   starColor	string	星星的顏色，預設為 #fff，可支援 white, black, yellow 等寫法
   pointerEvents	boolean	是否允許滑鼠事件穿透背景，預設為 true
   className	string	外層容器的自訂樣式 class 名稱

小結

#

今天我們了解 Animate UI 的 Star Background，是不是有種置身於宇宙的感覺鴨 🌌 透過 shadcn CLI，就能輕鬆在網頁背景上灑滿閃閃發光的星星 ✨，同時可調整多個參數，像是星星的數量、速度、顏色等，讓你能自由打造專屬的星空場景 💫

Reference

#

• Animate UI Star Background