Wavy Text
Advanced component that creates smooth wavy animation effects on text with customizable wave patterns, speeds, and colors. Perfect for dynamic and fluid design aesthetics.
Pro features
What the Pro version adds to this component.
Wave Animations
Multiple wave directions including up, down, and both
Gradient Colors
Support for multiple colors creating beautiful gradient wave effects
Interactive Control
Pause on hover and other interactive features
Fine Control
Precise control over amplitude, frequency, and wave characteristics
Timing Functions
Multiple easing functions including elastic and bounce
Performance Optimized
Hardware-accelerated animations with smooth 60fps performance
Installation
Install via CLI
npx @moontra/moonui-cli add wavy-textUsage
Examples
Basic Wave
Simple wavy effect with default settings
Pause on Hover
Wave animation pauses on hover
Fast Wave
Faster wave animation with a shorter duration
Smooth Wave Pattern
Smooth, flowing wave animation
Linear Wave Pattern
Linear wave movements
Elastic Wave Pattern
Bouncy, elastic wave animation
Custom Wave Colors
Gradient colors for dynamic wave effects
Different Sizes
Various text sizes for different use cases
Wave Intensity
Control the amplitude of wave movements
Wave Frequency
Adjust how many waves appear in the text