Spinning Text

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

BUILD LAZILY • BUILD LAZILY •

Customize

Counter-clockwise
Radius (ch)5.0ch
Duration (s)14.0s

Usage

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>
  );
}