Spinning Text

Text laid along a circular SVG path that rotates continuously — supports center content, direction, and reversal.

spinning-text

0px

Customize

Edit props; preview updates instantly.

Customize

Radius (ch)

5.0ch

Duration (s)

14.0s

Props

Props accepted by SpinningText.

Prop	Type	Default	Description
children	string	—	Letters laid evenly around the ring. The string is also mirrored into an `sr-only` span for screen readers.
duration	number	10	Seconds per full rotation (minimum 0.5).
reverse	boolean	false	Spin counter-clockwise instead of clockwise.
radius	number	5	Ring radius in `ch` units, so the circle scales naturally with the inherited font-size. The wrapper auto-sizes off this value.
center	ReactNode	—	Content rendered at the dead center (icon, badge, button). Sits above the spinning ring and ignores pointer events.
className	string	—	Extra class names on the wrapper. Font-size and color cascade into each glyph via normal CSS inheritance.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/spinning-text.json

Usage

Import the component and drop it into a render.

demo.tsx14 lines

import { SpinningText } from "@/components/lazy-ui/text-animate/spinning-text";

export function Demo() {
  return (
    <SpinningText
      duration={14}
      radius={5}
      center={<span className="text-2xl text-neutral-100">★</span>}
      className="text-[11px] tracking-[0.18em] text-neutral-200"
    >
      BUILD LAZILY • BUILD LAZILY •
    </SpinningText>
  );
}