npm i framer-motion

import { motion } from "framer-motion";

const BlurTextReveal = ({ text }) => {
    const textVariants = {
        initial: {
            opacity: 0,
            filter: "blur(10px)",
        },
        animate: {
            y: 0,
            opacity: 1,
            filter: "blur(0px)",
            transition: {
                duration: 0.5,
                ease: "easeOut",
                staggerChildren: 0.1,
            },
        },
    };

    const charVariants = {
        initial: {
            opacity: 0,
            filter: "blur(10px)",
        },
        animate: {
            opacity: 1,
            filter: "blur(0px)",
            transition: {
                duration: 0.5,
                ease: "easeOut",
            },
        },
    };

    return (
        <motion.div
            className="flex justify-center items-center"
            initial="initial"
            animate="animate"
        >
            <motion.h1
                className="text-3xl font-bold text-neutral-400"
                variants={textVariants}
                style={{ whiteSpace: "pre-wrap" }}
            >
                {Array.from(text).map((char, index) => (
                    <motion.span
                        key={index}
                        className="inline-block"
                        variants={charVariants}
                        style={{ display: char= " " ? "inline-block" : "inline" }}
                    >
                        {char}
                    </motion.span>
                ))}
            </motion.h1>
        </motion.div>
    );
};

export default BlurTextReveal;