Gradient Text
Advanced text component with stunning gradient animations. Features multiple animation types including flow, pulse, shift, rotate, and wave effects with customizable gradients and hover interactions.
Pro features
What the Pro version adds to this component.
Custom Gradients
Create unlimited gradient combinations with custom colors
Multiple Animations
Flow, pulse, shift, rotate, and wave animation types
Gradient Directions
Horizontal, vertical, diagonal, radial or a custom angle in degrees
Speed Control
Adjustable animation speed for perfect timing
Hover Effects
Interactive hover behaviors to enhance user engagement
Wave Animation
Unique wave-like gradient motion for dynamic effects
Easy Customization
Simple API with extensive customization options
CSS Integration
Works seamlessly with your existing CSS and classes
Installation
Install via CLI
npx @moontra/moonui-cli add gradient-textUsage
Examples
Basic Gradient
Simple gradient text with default settings
Flow Animation
Smooth flowing gradient animation
Pulse Animation
Pulsing gradient effect
Shift Animation
Gradient shifting effect
Rotate Animation
Rotating gradient effect
Wave Animation
Wave-like gradient motion
Custom Colors
Custom gradient colors with warm theme
Cool Colors
Cool gradient color scheme
Gradient Direction
Vertical gradient direction
Diagonal Gradient
Diagonal gradient with custom angle
Fast Animation
Quick animation for attention-grabbing text
Slow Animation
Slow, elegant animation
Hover Effects
Enhanced animation on hover
Large Headline
Gradient text for impactful headlines
Subtle Effect
Subtle gradient for elegant text