Components
Text Reveal
Text reveal animation with various effects.
Text Reveal
The TextReveal component animates text with various reveal effects. It's perfect for creating engaging headlines, descriptions, and content sections.
Usage
<template>
<MTextReveal text="Reveal this text with animation" />
</template>
Props
text
string required
Text to reveal.
effect
'fade' | 'slide' | 'bounce' | 'rotate' | 'scale' | 'blur'
Reveal effect.
direction
'up' | 'down' | 'left' | 'right' | 'random'
Reveal direction.
duration
number
Animation duration in seconds.
delay
number
Animation delay in seconds.
stagger
number
Delay between characters in seconds.
Examples
Fade Effect
Transform Your Digital Experience
Create stunning interfaces with our collection of animated components that enhance user engagement and drive results.
Key Features
- Lightning fast performance with optimized load times
- Beautiful animations that captivate your audience
- Easy integration with clean, well-documented code
Why Choose Us?
Our platform offers cutting-edge solutions that help you achieve your goals faster.
With 99.9% uptime and 24/7 support, you can trust us to deliver.
<template>
<MTextReveal effect="fade" text="This text fades in character by character" />
</template>
Slide Effect
Welcome to Our Platform
Discover amazing features and boost your productivity with our cutting-edge solutions.
Lightning Fast
Optimized for performance
Beautiful Effects
Stunning animations
Easy Integration
Simple to implement
<template>
<MTextReveal effect="slide" :duration="0.8" text="This text slides in from below" />
</template>
Typewriter Effect
This text is typed out like a typewriter
<template>
<MTextReveal effect="fade" :duration="2" :delay="0.5" :stagger="0.1" text="This text is typed out like a typewriter" />
</template>
Slow Stagger
Slow stagger effect
<template>
<MTextReveal :stagger="0.1" text="Slow stagger effect" />
</template>
Fast Stagger
Fast stagger effect
<template>
<MTextReveal :stagger="0.02" text="Fast stagger effect" />
</template>