Circular Text

Layouts characters around a circle with optional rotation animation.

Default

Every prop is wired to the controls underneath. Hover the ring to try the selected behavior.

REACT*BITS*COMPONENTS*

Text

On Hover

Spin Duration (s)20

Prop	Type	Default	Description
`text`	`string`	`''`	The text to display in a circular layout.
`spinDuration`	`number`	`20`	The duration (in seconds) for one full rotation.
`onHover`	`'slowDown' \| 'speedUp' \| 'pause' \| 'goBonkers'`	`'speedUp'`	Specifies the hover behavior variant. Options include 'slowDown', 'speedUp', 'pause', and 'goBonkers'.

Keyboard shortcuts and ARIA behavior.

Each character is a separate span, so screen readers may read the text letter by letter. Pass the same text in an aria-label on a wrapper if it carries meaning.