Circular Text for React

Circular Text sets a line of text around a ring that turns slowly, like a stamp or a seal, with anything you like still in its middle: an arrow, a logo, a star. The ring is sized from the text, so the characters never crowd or gap, and the pointer over it can speed it up, slow it down or stop it.

Use it for a "scroll to explore" cue, a badge on a hero, or a seal on a pricing card. For text that follows any curve or path instead of a circle, use Curved Loop; for a spiral, Spiral Text. It's CSS only: each character is rotated to its place and the ring turned by a keyframe animation the install adds to your stylesheet, with no animation library. With reduced motion the ring holds still.

Installation

Usage

import { CircularText } from "@/components/ui/circular-text";

<CircularText text="Scroll to explore • Scroll to explore • ">
  <ArrowDownIcon aria-hidden="true" />
</CircularText>

Demos

Hover

hover is what the pointer over the ring does: fast, the default, spins it four times as fast, slow halves its speed, pause stops it and none leaves it be. The speed changes from wherever the ring is, never jumping back to the start.

Seal

duration is one turn, 20 seconds by default. The ring takes its size from the text and the font size; --circular-text-spacing sets the room each character takes, here a little more for bold capitals on a badge.

Accessibility

Screen readers read the text once, in order, from a visually hidden copy, never the rotated characters. What sits in the middle is yours: give an icon aria-hidden="true" when the text already says what it means. With reduced motion the ring holds still.

FAQ

API Reference