閃粒文字

在文字上方隨機生成、汰換四芒星點，形成不斷閃爍的光點層，適合標題與品牌字樣。

載入預覽⋯

Playground

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

文字內容text

星點數量sparklesCount

重生間隔（毫秒）interval

550

文字尺寸className

<SparklesText />

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

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

安裝依賴後，從 registry JSON（/r/sparkles-text.json 的 files[0].content）複製 sparkles-text.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

import { SparklesText } from "@/components/ui/sparkles-text";

<SparklesText text="WebberUI" className="text-5xl font-bold" />

自訂配色與密度：

<SparklesText
  text="閃粒文字"
  colors={{ first: "#fbbf24", second: "#f472b6" }}
  sparklesCount={14}
/>