Circular Text
Characters arranged around a circle that spins continuously, with hover speed changes, direction reversal, and reduced-motion support.
Characters are spaced evenly around a circle and the whole ring rotates continuously; on hover it can speed up, slow down, pause, or reverse.
Loading preview…
npx shadcn@latest add https://webberui.com/r/circular-text.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
18
84
20
<CircularText />
Installation
npx shadcn@latest add https://webberui.com/r/circular-text.jsonOr, once registries are configured in components.json, install it as @webberui/circular-text.
Usage
import { CircularText } from "@/components/ui/circular-text";
<CircularText text="WEBBER*UI*ANIMATED*" spinDuration={16} onHover="speedUp" />The * characters and spaces in the string are just separators that leave visual gaps between characters around the circle.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text laid out around the circle; each character occupies one angular slot |
spinDuration | number | 18 | Seconds for one full revolution; smaller is faster |
direction | "cw" | "ccw" | "cw" | Rotation direction: clockwise or counter-clockwise |
radius | number | 84 | Radius of the text baseline circle (px) |
fontSize | number | 20 | Font size (px), which also determines the container padding |
onHover | "speedUp" | "slowDown" | "pause" | "reverse" | "none" | "speedUp" | How the speed changes on hover |
Accessibility
- When the user has "reduce motion" enabled at the system level, the ring stays still and does not rotate
- The complete text is exposed
sr-onlyto assistive technology, and the rotating layer is markedaria-hidden