Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

19.0k
231

Spinning Text

PreviousNext

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

Installation

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

Examples

Reverse

Usage

import { SpinningText } from "@/components/magicui/spinning-text";
<SpinningText>learn more • earn more • grow more •</SpinningText>

Props

PropTypeDefaultDescription
childrenReactElementThe text content to be animated in a circular motion.
styleCSSProperties{}Custom styles for the text container.
durationnumber10The duration of the full circular rotation animation.
classNamestringA custom class name for the text container.
reversebooleanfalseDetermines if the animation should rotate in reverse.
radiusnumber5The radius of the circular path for the text animation.
transitionTransitionCustom transition effects for the animation.
variants{ container?: Variants; item?: Variants; }Variants for container and item animations.

Credits