閃爍星點背景 Sparkles Bg｜免費 React 元件

以 2D canvas 繪製、每顆星點獨立正弦閃爍的星空背景，密度與顏色皆可調，並會依容器面積自動換算星點數量。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add sparkles-bg

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

星點密度density

閃爍速度speed

星點最大半徑maxSize

1.6

星點顏色color

背景色background

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<SparklesBg/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add https://webberui.com/r/sparkles-bg.json

或在 components.json 設定 registries 後，改用 @webberui/sparkles-bg 安裝。

使用

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，純裝飾不干擾互動與朗讀

Sparkles Bg

把這個效果裝進你的專案

Playground

安裝

使用

Props

可及性

本頁目錄