這次要介紹的 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