AuroraText
aurora-text极光文字 · bg-clip 流动渐变 + chart token + RSC
用法
基础用法
默认吃瑚琏 chart token 渐变，自动适配明暗主题。
瑚琏 Hulian
tsx
<AuroraText className="text-4xl font-bold">瑚琏 Hulian</AuroraText>流动速度
speed 控制流光速度倍率，越大越快（默认 1）。
Aurora
tsx
<AuroraText className="text-4xl font-bold" speed={3}>
Aurora
</AuroraText>自定义渐变色
colors 传入任意停靠色数组（建议用 token 以吃明暗）。
Spectrum
tsx
<AuroraText
className="text-4xl font-bold"
colors={["var(--color-chart-2)", "var(--color-chart-4)", "var(--color-primary)"]}
>
Spectrum
</AuroraText>标题级排版
作为大标题点缀，混排普通文本仅高亮关键词。
全新 瑚琏 设计系统
tsx
<h2 className="text-3xl font-bold text-foreground">
全新 <AuroraText>瑚琏</AuroraText> 设计系统
</h2>何时用
给一小段标题/品牌词加极光流动渐变（bg-clip 文字裁切），默认吃 4 个瑚琏 chart token 随明暗主题切换。要横扫高光徽标气质用 AnimatedShinyText；要行内随文流动的渐变用 AnimatedGradientText；普通文本用 Text，不要给大段正文套动效。
导入
ts
import { AuroraText } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| colors | string[] | 4 个瑚琏 chart token | 渐变停靠色数组（自动吃明暗主题） |
| speed | number | 1 | 流动速度倍率，越大越快 |
继承 ComponentPropsWithoutRef<"span">（除 color），如 className / style。
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 要渲染的文字 |
禁忌 / 坑
- 渲染为
<span>，效果靠text-*/font-*等字号样式撑出可见面积，给空 children 或无字号时看不到流光。 - 自定义
colors须用可解析的 CSS 颜色值；用 token 时注意瑚琏 token 需带--color-前缀才在 SVG/渐变里解析（见 hulian token 规范）。
相关
Text · Heading · Prose · Markdown · AnimatedShinyText · AnimatedGradientText
Playground
瑚琏 Hulian
<AuroraText speed={1}>瑚琏 Hulian</AuroraText>