Spinning Text

Installation

showLineNumbers

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

showLineNumbers

<SpinningText>learn more • earn more • grow more •</SpinningText>

Prop	Type	Default	Description
`children`	`string \| string[]`	`-`	The text content to be animated in a circular motion.
`style`	`CSSProperties`	`{}`	Custom styles for the text container.
`duration`	`number`	`10`	The duration of the full circular rotation animation.
`className`	`string`	`-`	A custom class name for the text container.
`reverse`	`boolean`	`false`	Determines if the animation should rotate in reverse.
`radius`	`number`	`5`	The radius of the circular path for the text animation.
`transition`	`Transition`	`-`	Custom transition effects for the animation.
`variants`	`{ container?: Variants; item?: Variants; }`	`-`	Variants for container and item animations.