FX · Text

Text running around a slowly turning circle, with an optional centre icon.

SCROLL TO EXPLORE • RAD UI FX •
bash
npx shadcn@latest add https://www.rad-ui.com/r/circular-text.json
React
import CircularText from "@/components/fx/circular-text"

<CircularText text="SCROLL TO EXPLORE • RAD UI FX • ">
    <ArrowDown aria-hidden="true" />
</CircularText>
  • The ring is an aria-hidden SVG; the text is read once, trimmed.
  • Pauses on hover and offscreen; `paused` stops it.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) stops the rotation.
PropTypeDefaultDescription
text
string
—

Text around the ring.

size
number
160

Diameter in px.

duration
number
16

Seconds per turn.

direction
'clockwise' | 'counterclockwise'
'clockwise'

Spin direction.

children
ReactNode
—

Centre content.

paused
boolean
false

Stop spinning.

Edit this page on GitHub →