CircularText
circular-textPlaces characters evenly around a rotating circular path with hover speed modes, inherited color, and a static reduced-motion state.
Usage
Basic usage
Each word is arranged on the circumference according to the equal angle, and the whole rotates at a constant speed; hovering accelerates by default.
<CircularText
text="HULIAN UI · Design System · "
className="text-sm font-semibold tracking-widest text-primary"
/>Hover Pause · Slow Base
spinDuration slows down the rotation speed, onHover="pause" hovers to freeze the rotation.
<CircularText
text="HULIAN UI · Design System · "
spinDuration={36}
onHover="pause"
className="text-sm font-semibold tracking-widest text-foreground"
/>Dark Badge · Crazy Mode
radius shrinks to make a small badge, onHover="goBonkers" hovers and accelerates like crazy.
<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-bg"
/>
</div>When to use
Use CircularText for a badge, seal, or rotating logo that places characters evenly around a circle and adjusts speed on hover. Use SplitText for a staggered character reveal, GlitchText for a torn glitch effect, or Heading for a static title.
Import
import { CircularText } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| text * | string | — | Text to wrap around the ring. Add a trailing separator such as ✦ for a smoother join between the end and start. |
| spinDuration | number | 20 | Seconds per full rotation. |
| onHover | "speedUp" | "slow" | "pause" | "goBonkers" | "speedUp" | Hover behavior: accelerate, slow down, pause, or spin rapidly. |
| radius | number | 80 | Ring radius in pixels. |
All other native <div> attributes are supported. Text inherits currentColor, so use a text-* utility or a parent color to style it.
Usage guidelines
- The start and end of
textmeet to form a loop. Add a trailing separator such as·,✦, or★so the final and first words do not run together. - Color comes from
currentColor; set it with atext-*class or a parent color. There is no separate color prop. - When
prefers-reduced-motionis enabled, the ring remains static.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<CircularText text="HULIAN UI · " spinDuration={20} onHover="speedUp" radius={80} />