Spinning Text

The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.

import { SpinningText } from '@/registry/magicui/spinning-text'

export function SpinningTextDemo() {
  return <SpinningText>learn more • earn more • grow more •</SpinningText>
}

Installation

pnpm dlx shadcn@latest add @magicui-solid/spinning-text

bunx shadcn@latest add @magicui-solid/spinning-text

yarn dlx shadcn@latest add @magicui-solid/spinning-text

npx shadcn@latest add @magicui-solid/spinning-text

Examples

Reverse

import { SpinningText } from '@/registry/magicui/spinning-text'

export function SpinningTextDemo2() {
  return (
    <SpinningText reverse class="text-4xl" duration={4} radius={6}>
      learn more • earn more • grow more •
    </SpinningText>
  )
}

Usage

import { SpinningText } from '@/components/magicui/spinning-text'

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

Props

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.
`class`	`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.

Credits

Credit to @AayushBharti

Original:

magicui.design/docs/components/spinning-text