WordRotate
word-rotate轮换词 · motion 进出场 + reduced-motion
用法
基础用法
传入词数组，AnimatePresence 逐词上下轮换（默认每词停留 2.5s）。
让开发 更快
tsx
<div className="text-3xl font-bold text-foreground">
让开发 <WordRotate words={["更快", "更稳", "更美", "瑚琏"]} className="text-primary" />
</div>轮换间隔
duration 控制每词停留毫秒，越小切换越快。
设计
tsx
<div className="text-3xl font-bold text-foreground">
<WordRotate words={["设计", "开发", "交付"]} duration={1200} className="text-primary" />
</div>纯轮换标语
单独成行作为 Hero 标语，混排前后缀文案。
专注 效率 的组件库
tsx
<div className="text-4xl font-bold text-foreground">
专注 <WordRotate words={["效率", "体验", "美学"]} className="text-chart-2" /> 的组件库
</div>何时用
在一句固定文案里循环切换若干词（"让开发 更快/更稳/更美"），用 motion 进出场动画。要逐字打字效果用 TypingAnimation；静态文本用 Text。本组件是客户端组件（用 motion + state），源文件已含 "use client"。
导入
ts
import { WordRotate } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| words* | string[] | — | 轮换的词数组 |
| duration | number | 2500 | 每词停留毫秒 |
继承 ComponentPropsWithoutRef<"span">（除 children 及 motion 冲突的 onDrag/onDragStart/onDragEnd/onAnimationStart），如 className / style。
禁忌 / 坑
- 透传给
motion.span，故公开类型剔除了onDrag/onDragStart/onDragEnd/onAnimationStart（motion 12 把它们重定义为手势/动画签名，与 DOM 同名 handler 冲突）——别尝试传这几个。 - 客户端组件，不能在纯 RSC 边界直接当 server 组件用；放进 server 页时它本身带
"use client"可正常作为子组件渲染。 - 尊重
prefers-reduced-motion，用户开启减弱动效时进出场会退化。
相关
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
让开发 更快
<WordRotate words={["更快","更稳","更美"]} duration={2000} />