Starfield Galaxy
視差星場銀河背景，游標可互動，以 canvas 2D 繪製多層星點與星雲亮帶。
以 canvas 2D 疊出多層視差星場：星點閃爍漂移，星雲亮帶緩慢脈動，游標移動時各層依深度不同幅度偏移，營造立體深空。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
220
1
<StarfieldGalaxy />
安裝
npx shadcn@latest add https://webberui.com/r/starfield-galaxy.json或在 components.json 設定 registries 後，改用 @webberui/starfield-galaxy 安裝。
安裝依賴後，從 registry JSON（/r/starfield-galaxy.json 的 files[0].content）複製 starfield-galaxy.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { StarfieldGalaxy } from "@/components/ui/starfield-galaxy";
<StarfieldGalaxy className="h-[340px] w-full">
<div className="relative z-10 flex h-full items-center justify-center">
<h3 className="text-3xl font-bold text-white">Deep Space</h3>
</div>
</StarfieldGalaxy>容器需要自行給定高度（例如 h-[340px]），前景內容用 relative z-10 疊在星場之上。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
starCount | number | 220 | 星點總數，平均分配到三個視差層 |
starColors | string[] | 白/藍/金/青 | 星點顏色池，逐點隨機取用 |
nebulaColors | string[] | 靛/品紅/青 | 三團星雲亮帶顏色 |
nebula | boolean | true | 是否繪製星雲亮帶 |
speed | number | 1 | 星場漂移速度倍率 |
interactive | boolean | true | 游標視差互動（觸控不作用） |
background | string | #05060f | 底色（畫布清除色） |
children | ReactNode | — | 疊在星場之上的前景內容 |
className | string | — | 容器樣式（高度、圓角等） |
可及性
- 使用者系統開啟「減少動態效果」時，只繪製單一靜態星場、停止動畫迴圈
- canvas 標記
aria-hidden，純裝飾不干擾輔助科技 - 游標視差僅在滑鼠指標下生效，觸控與鍵盤操作不受影響