Spinning Text

Use Spinning Text for a short decorative phrase that can orbit around an icon, mark, or focal point. Keep the text concise because the circular treatment is intended for recognition, not long reading.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Motion

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

Basic usage

spinning-label.tsx

import SpinningText from "@/components/ui/spinning-text/spinning-text";
 
export function SpinningLabel() {
return <SpinningText>Explore Sona UI</SpinningText>;
}

Examples

Adjust duration, direction, radius, and text styling to fit the composition. Use reverse when the surrounding movement needs the opposite direction.

Usage


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

API

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.

Accessibility

The component includes a screen-reader-friendly text alternative. Do not use rotating text as the only place for essential information.

Styling

Use className and the radius options to fit the text around a central element. Reduced-motion preferences should retain the text without continuous rotation.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Sona UI