Spinning Text Component

The SpinningText component is a dynamic and visually engaging UI element that animates text in a circular spinning motion. It is highly customizable, allowing you to control the animation's speed, direction, radius, and more.

Features

Circular Animation: Spins text in a circular path for a unique visual effect.
Customizable Speed: Control the animation duration with the duration prop.
Reverse Animation: Easily reverse the spinning direction using the reverse prop.
Flexible Styling: Customize the font size, radius, and additional styles via props.
Accessible: Includes a screen-reader-friendly version of the text for better accessibility.
Lightweight: Built with motion for smooth animations and optimized performance.

Playground

Adjust speed, radius, and direction live.

Controls

Text

Duration (s) — higher is slower10

Radius5

Reverse direction

Installation

npx shadcn@latest add @sona-ui/spinning-text

Usage


export default function SpinningTextExample() {
  return (
    <div className="flex items-center justify-center min-h-[320px]">
      <SpinningText>This is example text!</SpinningText>
    </div>
  );
}

Props

Property	Type	Default	Description
`children`	`string \| string[]`	`required`	The text content to be animated. Can be a single string or an array of strings.
`style`	`CSSProperties`	`—`	Custom styles for the container.
`duration`	`number`	`10`	Duration of the spinning animation in seconds.
`className`	`string`	`—`	Additional CSS classes for the container.
`reverse`	`boolean`	`false`	Reverses the spinning direction when set to `true`.
`radius`	`number`	`5`	Radius of the circular path in `ch` units.
`transition`	`Transition`	`—`	Custom transition settings for the animation. Merges with the default transition.
`variants`	`{ container?: Variants; item?: Variants; }`	`—`	Custom animation variants for the container and individual characters.