Animated Text With Reveal Effect

RevealText.tsx

import React from 'react';
import { AnimatePresence, motion } from 'framer-motion';

interface RevealTextProps {
	text: string;
}

const RevealText: React.FC<RevealTextProps> = ({ text }) => {
	const [isHovered, setIsHovered] = React.useState(false);

	const characters = text.split('');

	return (
		<div onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
			<AnimatePresence>
				{characters.map((character, index) => {
					const randomChar = getRandomChar();
					return (
						<motion.span
							key={index}
							layout
							className="inline-block"
							initial={{ opacity: 0, y: isHovered ? -2 : 2 }}
							animate={{
								opacity: isHovered ? [0.2, 0.4, 0.6, 0.8, 1] : [0.2, 0.4, 1, 0.6, 0.4],
								y: 0,
								transition: {
									duration: 0.1,
									ease: 'linear',
									delay: 0.02 * index,
								},
							}}
						>
							{isHovered ? character : randomChar}
						</motion.span>
					);
				})}
			</AnimatePresence>
		</div>
	);
};

function getRandomChar() {
	const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	return chars.charAt(Math.floor(Math.random() * chars.length));
}

export default RevealText;