BlurTransition.tsx

import { AnimatePresence, motion } from "motion/react"

type BlurTransitionProps = {
  text: string
  className?: string
}

export function BlurTransition({ text, className = "" }: BlurTransitionProps) {
  return (
    <AnimatePresence mode="popLayout">
      <motion.div
        key={text}
        className={className}
        initial={{
          opacity: 0,
          scale: 1.2,
          filter: "blur(8px)",
        }}
        animate={{
          opacity: 1,
          scale: 1,
          filter: "blur(0px)",
        }}
        exit={{
          opacity: 0,
          scale: 0.8,
          filter: "blur(8px)",
        }}
        transition={{
          type: "spring",
          visualDuration: 0.4,
          bounce: 0.3,
        }}
        style={{
          willChange: "opacity, filter, scale",
        }}
      >
        {text}
      </motion.div>
    </AnimatePresence>
  )
}