StackBits - React UI & Full-Stack Code Library

Texts > Wavy Text

🌊 Wavy Text

Make your text come alive with WavyText! ✨ This React component creates a smooth, flowing wave animation, making each letter bounce and ripple dynamically. Perfect for playful headings, animated logos, fun UI elements, and engaging website designs, this Framer Motion-powered effect adds a lively and eye-catching motion to your typography. Whether you're aiming for a fun, creative, or interactive feel, WavyText makes your words stand out with style! 🚀

Preview

Mahaul poora wavy!

Follow below steps 👇🏻

Install dependencies

1npm i framer-motion

Component

Create a file wavy-text.tsx in your components folder and paste this code

1import { motion } from 'framer-motion';
2import { FC } from 'react';
3
4type WavyTextProps = {
5  text: string;
6  className?: string;
7};
8
9const WavyText: FC<WavyTextProps> = ({ text, className }) => {
10  return (
11    <div className={`flex flex-wrap overflow-visible ${className}`}>
12      {text.split('').map((char, index) => (
13        <motion.span
14          key={index}
15          initial={{ y: '100%' }}
16          animate={{ y: [0, -15] }}
17          transition={{
18            duration: 0.5,
19            delay: index * 0.1,
20            ease: 'backIn',
21            repeat: Infinity,
22            repeatType: 'reverse'
23          }}
24          className="inline-block"
25        >
26          {char === ' ' ? ' ' : char}
27        </motion.span>
28      ))}
29    </div>
30  );
31};
32
33export default WavyText;

Usage

1<WavyText
2  text="Mahaul poora wavy!"
3  className="text-blue-500 text-xl sm:text-3xl md:text-4xl font-extrabold"
4></WavyText>

⭐️ Got a question or feedback?
Feel free to reach out!