Wave Text
An animated text component that creates a smooth wave effect across characters.
Installation
pnpm dlx shadcn add @smoothui/wave-textnpx shadcn@latest add @smoothui/wave-textyarn dlx shadcn add @smoothui/wave-textbunx shadcn add @smoothui/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
Props
Prop
Type
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>