CircularText
circular-text环形文字 · 每字按等分角排到圆周 + 整体匀速自转 + 悬停调速(加速/减速/暂停/抓狂 · 颜色继承 currentColor · reduced-motion 静态)
用法
基础用法
每字按等分角排到圆周，整体匀速自转；悬停默认加速。
tsx
<CircularText
text="瑚琏 · HULIAN UI · 设计系统 · "
className="text-sm font-semibold tracking-widest text-primary"
/>悬停暂停 · 慢速基底
spinDuration 调慢转速，onHover="pause" 悬停冻结旋转。
tsx
<CircularText
text="瑚琏 · HULIAN UI · 设计系统 · "
spinDuration={36}
onHover="pause"
className="text-sm font-semibold tracking-widest text-foreground"
/>深色徽章 · 抓狂模式
radius 缩小做小徽章，onHover="goBonkers" 悬停疯狂加速。
tsx
<div className="flex items-center justify-center rounded-full bg-foreground p-2">
<CircularText
text="★ HULIAN ★ STUDIO ★ "
spinDuration={14}
onHover="goBonkers"
radius={64}
className="text-xs font-bold tracking-[0.2em] text-background"
/>
</div>何时用
徽章/印章/旋转 logo 场景把文本按等分角排到圆周并匀速自转，悬停可调速。要做平铺逐字进场用 SplitText；要故障撕裂用 GlitchText；普通静态标题用 Heading。
导入
ts
import { CircularText } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| text * | string | — | 环绕排布的文本，建议尾部加分隔符（如 ✦）让首尾衔接更顺 |
| spinDuration | number | 20 | 转一圈秒数 |
| onHover | "speedUp" | "slow" | "pause" | "goBonkers" | "speedUp" | 悬停行为：加速 / 减速 / 暂停 / 抓狂 |
| radius | number | 80 | 文字所在圆半径像素 |
其余 <div> 原生属性透传。文字颜色继承 currentColor，用 text-* 工具类着色。
禁忌 / 坑
text首尾会衔接成环：结尾建议补分隔符（·/✦/★），否则末字与首字直接相贴。- 颜色继承
currentColor，必须靠text-*类或父级 color 着色，没有独立颜色 prop。 - 尊重
prefers-reduced-motion：开启减弱动效时静止不自转。
相关
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<CircularText text="瑚琏 · HULIAN UI · " spinDuration={20} onHover="speedUp" radius={80} />