Wavy Text
Text where each letter moves up and down like a wave. Creates a flowing, ocean-like animation effect.
Install dependencies
npm i framer-motion Utility function
Create a file lib/utils.ts and paste this code
import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Wavy Text
Create a file wavy-text.tsx in your components folder and paste this code
import { cn } from '@/lib/utils';
import { motion } from 'framer-motion';
import { FC } from 'react';
type WavyTextProps = {
text: string;
className?: string;
};
const WavyText: FC<WavyTextProps> = ({ text, className }) => {
return (
<div className={cn('flex flex-wrap overflow-visible p-4', className)}>
{text.split('').map((char, index) => (
<motion.span
key={index}
initial={{ y: '100%' }}
animate={{ y: [0, -15, 0] }}
transition={{
duration: 0.5,
ease: 'easeInOut',
delay: index * 0.1,
repeatDelay: (text.split('').length / 2) * 0.1,
repeat: Infinity,
repeatType: 'reverse'
}}
className="inline-block"
>
{char === ' ' ? ' ' : char}
</motion.span>
))}
</div>
);
};
export default WavyText;Usage
<WavyText text="Wavy Text" className="text-xl" />