AnimatedShinyText
animated-shiny-text高光文字 · 横扫高光 + 徽标气质 + RSC
用法
基础用法
muted 底色上一道高光横扫，常用于「✨ Introducing…」徽标。
✨ Introducing 瑚琏 Hulian
tsx
<div className="rounded-full border border-border bg-surface px-4 py-1.5">
<AnimatedShinyText className="text-sm">✨ Introducing 瑚琏 Hulian</AnimatedShinyText>
</div>高光带宽度
shimmerWidth 控制扫过的高光带宽度 px（默认 100），越大越柔和。
更宽的高光带
tsx
<AnimatedShinyText className="text-base" shimmerWidth={200}>
更宽的高光带
</AnimatedShinyText>纯文本行内
脱离徽标容器，直接作为一行高光提示文字。
正在加载，请稍候…
tsx
<AnimatedShinyText className="text-lg font-medium">
正在加载，请稍候…
</AnimatedShinyText>何时用
给小段文字加一道横扫高光，常用于 pill 徽标 / "Introducing" 提示条这类轻量营销点缀。要彩色极光渐变文字用 AuroraText；要行内流动渐变用 AnimatedGradientText；普通文本用 Text。
导入
ts
import { AnimatedShinyText } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| shimmerWidth | number | 100 | 高光带宽度（px） |
继承 ComponentPropsWithoutRef<"span">（children / className / style 等）。
禁忌 / 坑
- 高光靠遮罩横扫文字本体，需要文字有可见前景色才看得出来；放在过亮/过暗背景上高光带可能不明显，配合徽标容器（border + bg-surface）效果最佳。
- 渲染为
<span>，无字号/无内容时无可见效果。
相关
Text · Heading · Prose · Markdown · AuroraText · AnimatedGradientText
Playground
✨ Introducing 瑚琏 Hulian
<AnimatedShinyText shimmerWidth={100}>✨ Introducing</AnimatedShinyText>