AnimatedGradientText
animated-gradient-text渐变文字 · 行内 chart 渐变流动 + RSC
用法
基础用法
行内徽标级渐变流动文本，默认 chart token 吃明暗主题。
🎉 全新瑚琏组件库
tsx
<AnimatedGradientText className="text-2xl">🎉 全新瑚琏组件库</AnimatedGradientText>流动速度
speed 控制渐变平移速度倍率（默认 1）。
限时优惠进行中
tsx
<AnimatedGradientText className="text-2xl" speed={2.5}>
限时优惠进行中
</AnimatedGradientText>自定义渐变色
colors 传入停靠色数组，渐变首尾自动衔接成无缝循环。
HanFlow 瑚琏
tsx
<AnimatedGradientText
className="text-2xl font-bold"
colors={["var(--color-primary)", "var(--color-chart-3)", "var(--color-chart-5)"]}
>
HanFlow 瑚琏
</AnimatedGradientText>何时用
给一小段行内文字加流动渐变着色，随文排版（inline），默认吃瑚琏 chart token。要文字内部极光/大标题质感用 AuroraText（二者都基于 chart 渐变，AuroraText 偏标题级面积、本组件偏行内嵌入）；要横扫高光徽标用 AnimatedShinyText。
导入
ts
import { AnimatedGradientText } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| colors | string[] | 瑚琏 chart token | 渐变停靠色数组 |
| speed | number | 1 | 流动速度倍率 |
继承 ComponentPropsWithoutRef<"span">（除 color），如 className / style。
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 要渲染的文字 |
禁忌 / 坑
- 行内
<span>，靠字号/前景裁切显色，空内容或无字号无可见效果。 - 自定义
colors用瑚琏 token 时须带--color-前缀才能在渐变里解析（见 hulian token 规范）。
相关
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
🎉 全新瑚琏组件库
<AnimatedGradientText speed={1}>🎉 全新瑚琏</AnimatedGradientText>