WordRotate
word-rotateCycles through words with enter and exit transitions.
Usage
Basic usage
Pass in the word array, AnimatePresence rotates up and down word by word (the default stay is 2.5s per word).
<div className="text-3xl font-bold text-foreground">
Let the development <WordRotate words={["faster", "more stable", "more beautiful", "Hulian"]} className="text-primary" />
</div>Rotation interval
duration controls the milliseconds for each word to stay. The smaller it is, the faster the switching is.
<div className="text-3xl font-bold text-foreground">
<WordRotate words={["Design", "Development", "Delivery"]} duration={1200} className="text-primary" />
</div>Pure rotation slogan
Use a separate line as the slogan Hero, and mix the prefix and suffix copywriting.
<div className="text-4xl font-bold text-foreground">
Focus on the component library of <WordRotate words={["efficiency", "experience", "aesthetics"]} className="text-chart-2" />
</div>When to use
Use WordRotate to cycle alternatives inside a fixed phrase, such as “Build faster / safer / more beautifully,” with Motion enter and exit transitions. Use TypingAnimation for character-by-character typing, or Text for static copy. Motion and state make this a client component.
Import
import { WordRotate } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| words* | string[] | — | rotated word array |
| duration | number | 2500 | milliseconds per word |
Inherit ComponentPropsWithoutRef<"span"> (except children and motion conflict onDrag/onDragStart/onDragEnd/onAnimationStart), such as className / style.
Example
<div className="text-3xl font-bold text-foreground">
Build <WordRotate words={["faster", "safer", "more beautifully", "with HulianUI"]} className="text-primary" />
</div>Usage guidelines
- Props pass to
motion.span, but the public type excludesonDrag,onDragStart,onDragEnd, andonAnimationStartbecause Motion 12 gives them gesture/animation signatures that conflict with DOM handlers. - The
"use client"component may be nested under a server component but is not itself a pure RSC. - Under
prefers-reduced-motion, word changes remain visible without animated enter and exit transitions.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<WordRotate words={["faster", "more stable", "more beautiful"]} duration={2000} />