Circular Text
Free
Text set evenly around a slowly turning ring, with a slot in the middle for an icon or logo.
Made to be played
Hover the ring or focus the button
Customize
16s
On hover
2
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/circular-text.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/circular-text.tsx.
Usage
import { CircularText } from "@/components/ui/circular-text";
<CircularText text="Made to be played" hoverEffect="speedUp" className="font-bold uppercase">
<Logo className="size-10" />
</CircularText>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text around the ring. |
| duration | number | 20 | Seconds for one full turn. 0 keeps the ring still. |
| hoverEffect | "speedUp" | "pause" | "reverse" | "speedUp" | What the ring does while hovered or while something inside it has focus. |
| size | number | 200 | Width and height of the ring in pixels. |
| fontSize | number | 15 | Size of the ring text in pixels. |
| repeat | number | 2 | How many times the text goes around. Letters are always spread to fill the ring evenly. |
| separator | string | " • " | Placed after each repetition, so the seam looks like every other gap. |
| children | ReactNode | — | Content for the middle of the ring, such as an icon or a logo. |
| className | string | — | Extra classes for the ring, such as font and color. |
Dependencies: motion