Skip to main content
Animate text in a circular motion with customizable speed, direction, and radius.

​
Usage

<SpinningText
  :duration="10"
  :reverse="false"
  :radius="5"
>
  Spinning Text Around
</SpinningText>

​
Props

​
duration
number
default:"10"
The duration of the full circular rotation animation.
​
reverse
boolean
default:"false"
Determines if the animation should rotate in reverse.
​
radius
number
default:"5"
The radius of the circular path for the text animation.
​
transition
motion-v Transition
default:""
Custom transition effects for the animation.
​
variants
{container: motion-v Variant, item: motion-v Variant}
default:""
Variants for container and item animations.
​
class
string
default:""
A custom class name for the text container.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us