Components
Word Rotate
Component that rotates through different words with smooth transitions.
Word Rotate
The WordRotate component rotates through different words with smooth transitions. It's perfect for creating dynamic text elements that cycle through different options with engaging animations.
Usage
We Design Amazing Experiences
Design
Transform your digital presence with our cutting-edge solutions that
innovate
99%
Uptime
24/7
Support
10K+
Users
5★
Rating
<template>
<MWordRotate :words="['Design', 'Develop', 'Deploy']" />
</template>
Props
words
string[] required
Array of words to rotate through.
duration
number
Duration each word is visible in milliseconds.
animation
'fade' | 'slide-up' | 'slide-down' | 'scale' | 'flip'
Animation style for transitions.
loop
boolean
Whether to loop through words.
pauseDuration
number
Pause duration between word transitions.
class
string
CSS classes to apply to the word container.
containerClass
string
CSS classes to apply to the container.
startOnView
boolean
Start animation when component enters viewport.
once
boolean
Animate only once.
inViewMargin
string
Margin for in-view detection.
Examples
Basic Word Rotate
We Design Amazing Experiences
Design
Transform your digital presence with our cutting-edge solutions that
innovate
99%
Uptime
24/7
Support
10K+
Users
5★
Rating
<template>
<MWordRotate :words="['Design', 'Develop', 'Deploy']" />
</template>
Flip Animation
Flip
<template>
<MWordRotate
:words="['Create', 'Build', 'Launch']"
animation="flip"
/>
</template>
Slide Animation
Slide
<template>
<MWordRotate
:words="['Imagine', 'Create', 'Innovate']"
animation="slide"
/>
</template>
Pause on Hover
Fast
<template>
<MWordRotate
:words="['Explore', 'Discover', 'Learn']"
:pause-on-hover="true"
/>
</template>
Custom Styling
Styled
<template>
<MWordRotate
:words="['Bold', 'Creative', 'Unique']"
class="text-2xl font-bold text-purple-600"
/>
</template>
Continuous Loop
One
<template>
<MWordRotate
:words="['Forever', 'Always', 'Continuously']"
:loop="true"
/>
</template>
Wobble Card
Card with a wobble effect that responds to cursor movement.
Composables
Composables are reusable functions that encapsulate reactive logic and can be shared across components. They follow the Vue 3 Composition API pattern and provide a clean way to organize and share logic in your Nuxt application.