Sparkles Bg
可配置密度／顏色的閃爍星點背景。
以 2D canvas 繪製、每顆星點獨立正弦閃爍的星空背景，密度與顏色皆可調，並會依容器面積自動換算星點數量。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1
1
1.6
<SparklesBg />
安裝
npx shadcn@latest add https://webberui.com/r/sparkles-bg.json或在 components.json 設定 registries 後，改用 @webberui/sparkles-bg 安裝。
安裝依賴後，從 registry JSON（/r/sparkles-bg.json 的 files[0].content）複製 sparkles-bg.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { SparklesBg } from "@/components/ui/sparkles-bg";
<SparklesBg density={1.4} color="#ffffff" background="#050506" className="h-[320px] w-full rounded-xl">
<div className="flex h-full items-center justify-center text-white">
Sparkles
</div>
</SparklesBg>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
density | number | 1 | 星點密度倍率，依容器面積換算總數 |
color | string | "#ffffff" | 星點顏色，接受任何 CSS 色值 |
minSize | number | 0.6 | 星點最小半徑（px） |
maxSize | number | 1.6 | 星點最大半徑（px） |
speed | number | 1 | 閃爍速度倍率，1 為預設節奏 |
background | string | "transparent" | 背景色，設 transparent 可疊在既有底色上 |
children | ReactNode | — | 疊在星點之上的前景內容 |
可及性
- 使用者系統開啟「減少動態效果」時，星點以靜態方式一次繪製，不再閃爍
- canvas 帶
aria-hidden且pointer-events-none，純裝飾不干擾互動與朗讀