Text set around a circle that turns slowly. Hovering speeds it up and spins it the other way. The center takes any content.
Ember & Oak
Roasted in Lisbon, shipped within two days of the roast.
Shop beans
npx shadcn@latest add https://hyperblur.dev/r/text-circular.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-circular.tsx.
import { TextCircular } from "@/components/hyperblur/text-circular"
<TextCircular text="Small batch coffee" className="text-sm uppercase tracking-widest"><Logo /></TextCircular>| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Small batch coffee" | Text to place on the circle. It repeats to fill the ring. |
| size | number | 220 | Largest diameter in pixels. The ring shrinks to fit narrower parents. |
| fontSize | number | 14 | Letter size in a 200 unit wide drawing, so it scales with the ring. |
| speed | number | 14 | Degrees per second at rest. Negative values turn counterclockwise. |
| hoverBoost | number | 3 | Speed multiplier while hovered or focused. |
| reverseOnHover | boolean | true | Flip the direction of rotation while hovered or focused. |
| separator | string | " • " | Text placed between repeats of `text`. |
| repeat | number | 0 | Copies of `text` around the ring. 0 picks the count from the text length. |
| pulseEvery | number | 0 | Play the hover behavior briefly every N seconds without a pointer. 0 turns it off. |
| accent | string | "#2f7bff" | Color of the dotted inner ring. |
| children | ReactNode | Content centered inside the ring. It does not rotate. |