Components
Spinning Text
Text that spins with 3D effects.
Spinning Text
The SpinningText component creates text that spins with 3D effects. It's perfect for creating eye-catching headings and animated text elements.
Usage
SPINNING-TEXT-IS-AWESOME
<template>
<MSpinningText children="SPINNING-TEXT-IS-AWESOME" />
</template>
Props
children
string required
Text to spin.
style
object
Custom styles to apply to the container.
duration
number
Animation duration in seconds.
className
string
CSS classes to apply to the container.
reverse
boolean
Reverse the spinning direction.
fontSize
number
Font size multiplier.
radius
number
Radius of the spinning circle.
transition
object
Animation transition options.
variants
object
Animation variants for container and items.
Examples
Basic Spinning Text
Welcome to NUXT-MOTION-BLOCK
Create stunning interfaces with our collection of animated components that
ENHANCE-USER-ENGAGEMENT
and drive results. Real-time Preview
See changes instantly as you type with our live preview feature
99.9-PERCENT-UPTIME
<template>
<div class="p-4 flex justify-center">
<MSpinningText children="HELLO-WORLD-FROM-NUXT-MOTION" />
</div>
</template>
Custom Duration
FAST-SPINNING-TEXT
<template>
<div class="p-4 flex justify-center">
<MSpinningText children="FAST-SPINNING-TEXT" :duration="3" />
</div>
</template>
Reverse Direction
REVERSE-SPINNING-TEXT
<template>
<div class="p-4 flex justify-center">
<MSpinningText children="REVERSE-SPINNING-TEXT" :reverse="true" />
</div>
</template>
Custom Size and Radius
LARGE-SPINNING-TEXT
<template>
<div class="p-4 flex justify-center">
<MSpinningText children="LARGE-SPINNING-TEXT" :font-size="2" :radius="8" />
</div>
</template>
With Custom Styling
STYLED-SPINNING-TEXT
<template>
<div class="p-4 flex justify-center">
<MSpinningText children="STYLED-SPINNING-TEXT" className="text-blue-500 font-bold" />
</div>
</template>