這次要介紹的 Animate UI – Star Background，就像在你的畫面上灑下一整片星河，
讓靜態的頁面瞬間多了點浪漫氣息～
不需要望遠鏡，也不必上太空，只要透過幾行指令安裝、幾個參數調整，就能讓你的網站在夜色中閃爍登場 ✨。
準備好和我一起探索這片互動式星空了嗎？🚀
使用 Shadcn CLI 加入 Star Background
npx shadcn@latest add @animate-ui/components-backgrounds-stars
Import 元件並將元件放在想要的位置上
import { StarsBackground } from '@/components/animate-ui/components/backgrounds/stars';
<StarsBackground>...</>
若還有想要微調，可以增加更多參數 (? 表示為選填參數)
| 參數 | 參數型態 | 說明 |
|---|---|---|
| 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，就能輕鬆在網頁背景上灑滿閃閃發光的星星 ✨，同時可調整多個參數，像是星星的數量、速度、顏色等，讓你能自由打造專屬的星空場景 💫
自己的星星自己做
沒錯 還可以馬賽克化🤣
到 components/animate-ui/components/backgrounds/stars.tsx 中 54-61 修改
<div
className="absolute bg-transparent rounded-full"
style={{
width: `${size}px`,
height: `${size}px`,
boxShadow: boxShadow,
}}
/>
星星就可以變成想要的形狀了 🎉
來點什麼星座好呢(不要再亂許願了XD
iThome鐵人賽
看影片追技術