Blur In Text

'use client';

import { useEffect, useRef, useState } from 'react';
import { motion, useInView, Variants } from 'framer-motion';

interface BlurInTextProps {
  text: string;
  className?: string;
  blurAmount?: number;
  duration?: number;
  delay?: number;
  stagger?: number;
  direction?: 'in' | 'out';
  split?: 'letter' | 'word' | 'none';
  trigger?: 'mount' | 'inView' | 'hover';
  yOffset?: number;
}

export const BlurInText = ({
  text,
  className = '',
  blurAmount = 10,
  duration = 0.8,
  delay = 0,
  stagger = 0.05,
  direction = 'in',
  split = 'letter',
  trigger = 'mount',
  yOffset = 20,
}: Readonly<BlurInTextProps>) => {
  const containerRef = useRef<HTMLSpanElement>(null);
  const isInView = useInView(containerRef, { once: true, amount: 0.5 });
  const [isHovering, setIsHovering] = useState(false);
  const [hasAnimated, setHasAnimated] = useState(false);

  const shouldAnimate = () => {
    switch (trigger) {
      case 'mount':
        return true;
      case 'inView':
        return isInView;
      case 'hover':
        return isHovering;
      default:
        return false;
    }
  };

  useEffect(() => {
    if (shouldAnimate() && !hasAnimated && trigger !== 'hover') {
      setHasAnimated(true);
    }
  }, [isInView]);

  const containerVariants: Variants = {
    hidden: {},
    visible: {
      transition: {
        staggerChildren: split === 'none' ? 0 : stagger,
        delayChildren: delay,
      },
    },
  };

  const itemVariants: Variants = {
    hidden: {
      filter: direction === 'in' ? `blur(${blurAmount}px)` : 'blur(0px)',
      opacity: direction === 'in' ? 0 : 1,
      y: direction === 'in' ? yOffset : 0,
    },
    visible: {
      filter: direction === 'in' ? 'blur(0px)' : `blur(${blurAmount}px)`,
      opacity: direction === 'in' ? 1 : 0,
      y: direction === 'in' ? 0 : yOffset,
      transition: {
        duration,
        ease: [0.25, 0.46, 0.45, 0.94],
      },
    },
  };

  const getElements = () => {
    if (split === 'none') {
      return [text];
    } else if (split === 'word') {
      return text.split(' ');
    } else {
      return text.split('');
    }
  };

  const elements = getElements();

  return (
    <motion.span
      ref={containerRef}
      className={`inline-block ${className}`}
      variants={containerVariants}
      initial="hidden"
      animate={shouldAnimate() || hasAnimated ? 'visible' : 'hidden'}
      onMouseEnter={() => trigger === 'hover' && setIsHovering(true)}
      onMouseLeave={() => trigger === 'hover' && setIsHovering(false)}
    >
      {elements.map((element, index) => (
        <motion.span
          key={`${element}-${index}`}
          className="inline-block"
          variants={itemVariants}
          style={{
            whiteSpace: element === ' ' ? 'pre' : 'normal',
          }}
        >
          {element}
          {split === 'word' && index < elements.length - 1 && '\u00A0'}
        </motion.span>
      ))}
    </motion.span>
  );
};

export default BlurInText;