Components
Text Shimmer
Text with shimmer effect that moves across the content.
Text Shimmer
The TextShimmer component creates text with a shimmer effect that moves across the content. It's perfect for creating eye-catching headings and text elements with a sparkling animation.
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>
<MTextShimmer text="Shimmering Text Effect" :duration="3" :spread="1.5" class="text-4xl font-bold" />
</template>
Props
text
string required
Text to shimmer.
as
string
HTML element to render as.
class
string
CSS classes to apply to the container.
duration
number
Animation duration in seconds.
spread
number
Spread of the shimmer effect.
Examples
Basic Text Shimmer
Transform Your Digital Experience
Create stunning interfaces with our collection of animated components
Lightning Fast
Optimized for performance
Beautiful Effects
Stunning animations
Easy Integration
Simple to implement
<template>
<MTextShimmer text="Basic Shimmer" />
</template>
Slow Shimmer
Slow Shimmer
<template>
<MTextShimmer text="Slow Shimmer" :duration="4" />
</template>
As Heading
Heading Shimmer
<template>
<MTextShimmer text="Heading Shimmer" as="h1" class="text-3xl font-bold" />
</template>
Wide Shimmer
Wide Shimmer
<template>
<MTextShimmer text="Wide Shimmer" :spread="5" />
</template>
Styled Shimmer
Styled Shimmer
<template>
<MTextShimmer text="Styled Shimmer" class="text-2xl font-bold text-blue-600" />
</template>