Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
learn more • earn more • grow more • learn more • earn more • grow more •
import { SpinningText } from "@/registry/magicui/spinning-text";
export function SpinningTextBasic() {
return <SpinningText>learn more • earn more • grow more •</SpinningText>;
}
Installation
pnpm dlx shadcn@latest add @magicui/spinning-text
Examples
Reverse
learn more • earn more • grow more • learn more • earn more • grow more •
import { SpinningText } from "@/registry/magicui/spinning-text";
export function SpinningTextBasic() {
return (
<SpinningText reverse className="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 | ReactElement | 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. |
Credits
- Credit to @AayushBharti
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development