Browse components
Circular Text
Text wrapped around a slowly spinning ring that speeds up, slows down or stops when hovered, with optional content in the middle.
Installation
npx shadcn@latest add @glint-ui/circular-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/circular-text.json
Usage
import { CircularText } from "@/components/ui/circular-text";
<CircularText text="GLINT • MOTION • COMPONENTS • " onHover="speedUp">
<Logo />
</CircularText>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "GLINT • MOTION • COMPONENTS • " | Text around the ring. Trailing separator keeps the loop seamless. |
| spinDuration | number | 20 | Seconds per full turn. |
| onHover | "none" | "speedUp" | "slowDown" | "pause" | "goBonkers" | "speedUp" | What hovering does to the spin. |
| size | number | 220 | Diameter in px. |
| children | ReactNode | — | Optional content in the middle of the ring. |
| className | string | — | Extra classes for the root element. |