Components
Text Shimmer Wave
Text with a wave-like shimmer animation effect.
Text Shimmer Wave
The TextShimmerWave component creates text with a wave-like shimmer animation effect. It's perfect for creating eye-catching headings and text elements with dynamic 3D transformations.
Usage
Wave Animation
Transform Your Digital Experience
T
r
a
n
s
f
o
r
m
Y
o
u
r
D
i
g
i
t
a
l
E
x
p
e
r
i
e
n
c
e
C
r
e
a
t
e
s
t
u
n
n
i
n
g
i
n
t
e
r
f
a
c
e
s
w
i
t
h
o
u
r
c
o
l
l
e
c
t
i
o
n
o
f
a
n
i
m
a
t
e
d
c
o
m
p
o
n
e
n
t
s
t
h
a
t
e
n
h
a
n
c
e
u
s
e
r
e
n
g
a
g
e
m
e
n
t
a
n
d
d
r
i
v
e
r
e
s
u
l
t
s
.
Wave Controls
Live Preview
Title Preview
Transform Your Digital Experience
Subtitle Preview
C
r
e
a
t
e
s
t
u
n
n
i
n
g
i
n
t
e
r
f
a
c
e
s
w
i
t
h
o
u
r
c
o
l
l
e
c
t
i
o
n
o
f
a
n
i
m
a
t
e
d
c
o
m
p
o
n
e
n
t
s
t
h
a
t
e
n
h
a
n
c
e
u
s
e
r
e
n
g
a
g
e
m
e
n
t
a
n
d
d
r
i
v
e
r
e
s
u
l
t
s
.
Example Usage
Feature Highlight
N
e
w
!
Performance
9
9
.
9
%
U
p
t
i
m
e
G
e
t
S
t
a
r
t
e
d
T
o
d
a
y
W
h
y
C
h
o
o
s
e
O
u
r
W
a
v
e
E
f
f
e
c
t
s
?
L
i
g
h
t
n
i
n
g
F
a
s
t
Optimized for performance with minimal load times
B
e
a
u
t
i
f
u
l
E
f
f
e
c
t
s
Stunning animations that captivate your audience
E
a
s
y
I
n
t
e
g
r
a
t
i
o
n
Simple to implement with clean, well-documented code
<template>
<MTextShimmerWave text="Wave Shimmer" />
</template>
Props
text
string required
Text to shimmer with wave effect.
as
string
HTML element to render as.
className
string
CSS classes to apply to the container.
duration
number
Animation duration in seconds.
zDistance
number
Z-axis movement distance.
xDistance
number
X-axis movement distance.
yDistance
number
Y-axis movement distance.
spread
number
Spread of the wave effect.
scaleDistance
number
Scale transformation distance.
rotateYDistance
number
Y-axis rotation distance.
transition
object
Custom transition options.
Examples
Manual Control
C
l
i
c
k
M
e
<template>
<div class="space-y-4">
<div class="flex space-x-2">
<UButton @click="startAnimation">Start</UButton>
<UButton @click="stopAnimation">Stop</UButton>
</div>
<MTextShimmerWave
ref="shimmerRef"
text="Manual Control"
:auto-play="false"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
const shimmerRef = ref()
const startAnimation = () => {
shimmerRef.value?.play()
}
const stopAnimation = () => {
shimmerRef.value?.pause()
}
</script>
Basic Text Shimmer Wave
B
a
s
i
c
W
a
v
e
<template>
<MTextShimmerWave text="Basic Wave" />
</template>
Slow Wave
S
l
o
w
W
a
v
e
<template>
<MTextShimmerWave :duration="2" text="Slow Wave" />
</template>
As Heading
Heading Wave
<template>
<MTextShimmerWave as="h1" class="text-3xl font-bold" text="Heading Wave" />
</template>
Big Wave
B
i
g
W
a
v
e
<template>
<MTextShimmerWave
text="Big Wave"
:z-distance="20"
:x-distance="5"
:y-distance="-5"
:scale-distance="1.3"
:rotate-y-distance="20"
/>
</template>
With Custom Styling
Wave Animation
Transform Your Digital Experience
T
r
a
n
s
f
o
r
m
Y
o
u
r
D
i
g
i
t
a
l
E
x
p
e
r
i
e
n
c
e
C
r
e
a
t
e
s
t
u
n
n
i
n
g
i
n
t
e
r
f
a
c
e
s
w
i
t
h
o
u
r
c
o
l
l
e
c
t
i
o
n
o
f
a
n
i
m
a
t
e
d
c
o
m
p
o
n
e
n
t
s
t
h
a
t
e
n
h
a
n
c
e
u
s
e
r
e
n
g
a
g
e
m
e
n
t
a
n
d
d
r
i
v
e
r
e
s
u
l
t
s
.
Wave Controls
Live Preview
Title Preview
Transform Your Digital Experience
Subtitle Preview
C
r
e
a
t
e
s
t
u
n
n
i
n
g
i
n
t
e
r
f
a
c
e
s
w
i
t
h
o
u
r
c
o
l
l
e
c
t
i
o
n
o
f
a
n
i
m
a
t
e
d
c
o
m
p
o
n
e
n
t
s
t
h
a
t
e
n
h
a
n
c
e
u
s
e
r
e
n
g
a
g
e
m
e
n
t
a
n
d
d
r
i
v
e
r
e
s
u
l
t
s
.
Example Usage
Feature Highlight
N
e
w
!
Performance
9
9
.
9
%
U
p
t
i
m
e
G
e
t
S
t
a
r
t
e
d
T
o
d
a
y
W
h
y
C
h
o
o
s
e
O
u
r
W
a
v
e
E
f
f
e
c
t
s
?
L
i
g
h
t
n
i
n
g
F
a
s
t
Optimized for performance with minimal load times
B
e
a
u
t
i
f
u
l
E
f
f
e
c
t
s
Stunning animations that captivate your audience
E
a
s
y
I
n
t
e
g
r
a
t
i
o
n
Simple to implement with clean, well-documented code
<template>
<div class="p-4">
<MTextShimmerWave
text="TEAL WAVE"
class="text-2xl font-bold text-[#0d9488]"
:z-distance="15"
:duration="1.5"
/>
</div>
</template>
Manual Trigger
C
l
i
c
k
M
e
<template>
<div class="p-4 space-y-4">
<MTextShimmerWave
:text="waveText"
:key="waveKey"
class="text-xl font-bold"
/>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="triggerWave"
>
Replay Wave Animation
</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const waveText = ref("Click Me")
const waveKey = ref(0)
const triggerWave = () => {
waveKey.value++
}
</script>