Spinning Text
Easily animate text circularly. Customize the animation with variants and transitions.
Examples
Basic Usage
pre-order • pre-order • pre-order •
Custom Transition
motion-primitives • motion-primitives •
Custom Variants
pre-order • pre-order • pre-order •
Installation
npx shadcn add "https://motion-primitives.com/c/spinning-text.json"Component API
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. |
| fontSize | number | 1 | The font size of the text being animated in rem. |
| 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. |
Credit
Initiated by @ibtihelbs