文字動畫
閃粒文字
文字周圍持續生成閃爍星點，增添靈動的魔法感。
在文字上方隨機生成、汰換四芒星點，形成不斷閃爍的光點層，適合標題與品牌字樣。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add sparkles-textPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
10
550
編輯中的呼叫預設屬性
<SparklesText/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/sparkles-text.json或在 components.json 設定 registries 後，改用 @webberui/sparkles-text 安裝。
使用
import { SparklesText } from "@/components/ui/sparkles-text";
<SparklesText text="WebberUI" className="text-5xl font-bold" />自訂配色與密度：
<SparklesText
text="閃粒文字"
colors={{ first: "#fbbf24", second: "#f472b6" }}
sparklesCount={14}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要點綴的文字 |
colors | { first: string; second: string } | { first: "#a78bfa", second: "#38bdf8" } | 雙色配色，隨機交替 |
sparklesCount | number | 10 | 同時存在的星點數量 |
interval | number | 550 | 每顆星重生的間隔（毫秒），越小越活躍 |
className | string | — | 透傳到外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，直接渲染靜態文字、不生成任何星點
- 外層帶
aria-label，星點層對輔助科技隱藏（aria-hidden），朗讀時只有文字本身 - 星點僅在掛載後生成，避免 SSR hydration 不一致