星座連線背景
canvas 漂浮粒子與鄰近連線，游標靠近時吸附匯聚。
以 Canvas 2D 繪製緩慢漂移的星點，鄰近的點之間自動連線、透明度隨距離遞減；游標靠近時粒子會被輕輕吸附匯聚並與游標連線。內建 ResizeObserver 自適應尺寸、離開視窗自動暫停動畫，適合作為 Hero 或深色區塊的裝飾背景。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
64
110
1
160
<ConstellationBackground />
安裝
npx shadcn@latest add https://webberui.com/r/constellation-background.json或在 components.json 設定 registries 後，改用 @webberui/constellation-background 安裝。
安裝依賴後，從 registry JSON（/r/constellation-background.json 的 files[0].content）複製 constellation-background.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { ConstellationBackground } from "@/components/ui/constellation-background";
<ConstellationBackground
particleCount={72}
linkDistance={110}
color="#9db4d6"
className="rounded-3xl bg-slate-950"
>
<div className="px-8 py-24 text-center text-white">
<h1 className="text-4xl font-semibold">把想法連成星圖</h1>
</div>
</ConstellationBackground>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
particleCount | number | 64 | 粒子（星點）數量，依容器大小建議 40–120 |
linkDistance | number | 110 | 兩點距離小於此值（px）時繪製連線，透明度隨距離遞減 |
color | string | "#94a3b8" | 星點與連線的顏色，接受任何 CSS 顏色字串 |
speed | number | 1 | 漂移速度倍率：0.5 更沉靜、2 更活躍 |
mouseRadius | number | 160 | 游標引力半徑（px），範圍內的粒子會被吸向游標並與其連線 |
children | React.ReactNode | — | 疊在星空之上的內容（自動置於 z-10 層） |
className | string | — | 透傳到外層容器 |
可及性
- Canvas 為純裝飾層並標記
aria-hidden，資訊內容一律由children承載，輔助科技不會讀到粒子圖形 - 使用者系統開啟「減少動態效果」時，只渲染一幀靜態星圖，不啟動動畫迴圈與游標互動
- 元件離開視窗時以 IntersectionObserver 自動暫停
requestAnimationFrame，降低耗電與背景效能負擔 - 游標吸附僅為視覺增強，不攔截點擊（canvas 設
pointer-events-none），children內的互動元素照常運作