Spinning Text
The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
This component uses the nuxt-only syntax with the <ClientOnly>. If you are not using Nuxt, you can simply remove it.
Examples
reverse
API
| Prop Name | Type | Default | Description |
|---|---|---|---|
duration | number | 10 | The duration of the full circular rotation animation. |
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 | motion-v Transition | `` | Custom transition effects for the animation. |
variants | {container: motion-v Variant, item: motion-v Variant} | `` | Variants for container and item animations. |
class | string | "" | A custom class name for the text container. |
Install using CLI
Component Code
You can copy and paste the following code to create this component:
SpinningText.vue
Credits
- Credits to Whbbit1999 for this component.
- Ported from Magic UI Spinning Text.