Circular Text: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add circular-text.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Text around the circletext

Seconds per revolutionspinDuration

Rotation directiondirection

Circle radiusradius

Font sizefontSize

Hover effectonHover

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<CircularText/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/circular-text.en.json

Or, 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-only to assistive technology, and the rotating layer is marked aria-hidden

Circular Text