Wave Text
An animated text component that creates a smooth wave effect across characters.
Installation
npx smoothui-cli add wave-textFeatures
- Smooth continuous wave animation across text
- Customizable amplitude, duration, and stagger delay
- Natural bounce effect with custom easing
- GPU-accelerated for optimal performance
- Lightweight and easy to use
- Built with Motion
Accessibility
Reduced Motion
Uses useReducedMotion from motion/react. When enabled, the wave animation is fully disabled — characters render statically with no vertical movement and duration: 0 transitions.
Props
Usage
import WaveText from "@repo/smoothui/components/wave-text";
// Basic usage
<WaveText>Hello World</WaveText>
// Customized wave
<WaveText amplitude={12} duration={1.0} staggerDelay={0.04}>
SmoothUI Components
</WaveText>Examples
Large Bold Text
<div className="font-bold text-3xl">
<WaveText amplitude={12} duration={1.0} staggerDelay={0.04}>
SmoothUI Components
</WaveText>
</div>Subtle Wave
<WaveText amplitude={6} duration={1.4} staggerDelay={0.06}>
Smooth wave animations for your text!
</WaveText>Typewriter Text
Animated typewriter text effect for React with character-by-character reveal and looping support. Ideal for hero sections, landing pages, and AI chat interfaces.
Agent Avatar
Canvas-based generative pixel avatar for AI agents. Each seed produces a unique, deterministic pattern with animated color shifts.