SparklesText
sparkles-text星闪文字 · 随机小星脉冲(客户端生成) + token
用法
基础用法
文本周围随机生成小星脉冲闪烁，默认 primary/chart token 星色。
瑚琏 Hulian
tsx
<SparklesText className="text-4xl font-bold text-foreground">瑚琏 Hulian</SparklesText>星星数量
sparklesCount 控制同时存在的星星数（默认 8），越多越热闹。
Sparkle
tsx
<SparklesText
className="text-4xl font-bold text-foreground"
sparklesCount={20}
>
Sparkle
</SparklesText>自定义星色
colors 传入星色数组，每颗星随机取其中一色。
闪耀时刻
tsx
<SparklesText
className="text-4xl font-bold text-foreground"
colors={["var(--color-chart-2)", "var(--color-chart-4)"]}
>
闪耀时刻
</SparklesText>何时用
给一小段标题/品牌词围绕随机小星脉冲点缀（客户端随机生成星位）。要文字本体彩色流动用 AuroraText / AnimatedGradientText；要横扫高光徽标用 AnimatedShinyText；静态文本用 Text。客户端组件（随机星位 + 动画），源文件已含 "use client"。
导入
ts
import { SparklesText } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| colors | string[] | [primary, chart-1] token | 星色数组 |
| sparklesCount | number | 8 | 星星数量 |
继承 ComponentPropsWithoutRef<"span">（除 color），如 className / style。
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 要渲染的文字 |
禁忌 / 坑
- 星位在客户端随机生成，不要期待 SSR 与首帧水合后位置一致；本身是
"use client"组件，作为子组件可嵌进 server 页，但不能当纯 RSC 用。 - 自定义
colors用瑚琏 token 时须带--color-前缀才能在星点着色里解析（见 hulian token 规范）。 - 星数过大（
sparklesCount偏高）会增加动画节点数，小面积文字上密集星点可能显得杂乱。
相关
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
瑚琏 Hulian
<SparklesText sparklesCount={10}>瑚琏 Hulian</SparklesText>