āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/magicuidesign/magicui/components/spinning-text ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
npx shadcn@latest add @magicui/spinning-text
<Step>Copy and paste the following code into your project.</Step>
<ComponentSource name="spinning-text" /><Step>Update the import paths to match your project setup.</Step>
</Steps> </TabsContent> </Tabs>import { SpinningText } from "@/components/ui/spinning-text"
<SpinningText>learn more ā¢ earn more ā¢ grow more ā¢</SpinningText>
| 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. |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā