Components
Text Gradient
Text with animated gradient effects and various animation styles.
Text Gradient
The TextGradient component creates text with animated gradient effects and various animation styles. It's perfect for creating eye-catching headings and text elements with dynamic color transitions.
Usage
TEAL GRADIENT
<template>
<MTextGradient text="GRADIENT" />
</template>
Props
text
string
Text to display with gradient.
as
string
HTML element to render as.
colors
string[]
Array of colors for the gradient.
direction
'horizontal' | 'vertical' | 'diagonal' | 'radial'
Direction of the gradient.
animation
'wave' | 'pulse' | 'flow' | 'rainbow' | 'static'
Animation type for the gradient.
duration
number
Animation duration in seconds.
speed
number
Animation speed multiplier.
size
number
Size of the gradient background.
class
string
CSS classes to apply to the text.
hover
boolean
Enable hover effect.
ariaLabel
string
Accessibility label for the text.
hideFromScreenReader
boolean
Hide from screen readers.
reduceMotion
boolean
Reduce motion for accessibility.
Examples
Basic Text Gradient
Transform Your Digital Experience
Create stunning interfaces with our collection of animated components that
enhance user engagement
and drive results. Lightning Fast
Optimized for performance with minimal load times
Beautiful Effects
Stunning animations that captivate your audience
Easy Integration
Simple to implement with clean, well-documented code
<template>
<MTextGradient text="BASIC GRADIENT" />
</template>
Custom Colors
TEAL GRADIENT
<template>
<div class="p-4">
<MTextGradient
text="TEAL GRADIENT"
:colors="['#0d9488', '#14b8a6', '#2dd4bf']"
animation="wave"
/>
</div>
</template>
Vertical Direction
VERTICAL
<template>
<MTextGradient text="VERTICAL" direction="vertical" />
</template>
Rainbow Animation
RAINBOW
<template>
<MTextGradient text="RAINBOW" animation="rainbow" :duration="2" />
</template>
With Hover Effect
HOVER ME
<template>
<MTextGradient text="HOVER ME" :hover="true" />
</template>
As Heading
Heading Text
<template>
<MTextGradient text="Heading Text" as="h1" class="text-4xl" />
</template>