Circular Text
Text Effects
Wraps text around a rotating circular path with optional hover-to-spin behavior and center label.
Loading preview...
Customize
Direction:
Text
Center Text
Radius88
Spin Duration (s)20
Spin On Hover
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | Text rendered around the circle. Include spaces or separators to control spacing. |
radius | number | 88 | Distance from center to characters in pixels. |
spinDuration | number | 20 | Duration in seconds for one full rotation. |
onHover | boolean | false | When true, rotation is paused until hover. |
direction | 'clockwise' | 'counter-clockwise' | 'clockwise' | Rotation direction of the text ring. |
centerText | string | undefined | Optional label rendered at the center of the circle. |
className | string | '' | Additional classes for the container. |
textClassName | string | '' | Additional classes for each character. |