"use client"

import React, { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { cn } from "@/lib/utils"

type EffectType = "gradient" | "shimmer" | "glitch" | "reveal" | "pulse"

interface MultiEffectTextProps {
  text: string
  effect?: EffectType
  className?: string
  duration?: number
  delay?: number
  colors?: string[]
}

export function MultiEffectText({
  text,
  effect = "gradient",
  className,
  duration = 2,
  delay = 0,
  colors = ["#3b82f6", "#8b5cf6", "#ec4899"],
}: MultiEffectTextProps) {
  const [isHovered, setIsHovered] = useState(false)
  const [glitchText, setGlitchText] = useState(text)

  // Glitch effect logic
  useEffect(() => {
    if (effect !== "glitch" || !isHovered) {
      setGlitchText(text)
      return
    }

    const interval = setInterval(() => {
      const glitched = text
        .split("")
        .map((char, index) => {
          if (Math.random() < 0.1) {
            const chars = "!@#$%^&*()_+-={}[]|;:,.<>?"
            return chars[Math.floor(Math.random() * chars.length)]
          }
          return char
        })
        .join("")
      setGlitchText(glitched)
    }, 50)

    return () => clearInterval(interval)
  }, [effect, isHovered, text])

  // Gradient Effect
  if (effect === "gradient") {
    return (
      <span
        className={cn(
          "bg-clip-text text-transparent bg-gradient-to-r bg-[length:200%_auto] animate-gradient",
          className
        )}
        style={{
          backgroundImage: `linear-gradient(to right, ${colors.join(", ")}, ${colors[0]})`,
        }}
      >
        {text}
      </span>
    )
  }

  // Shimmer Effect
  if (effect === "shimmer") {
    return (
      <span className={cn("relative inline-block overflow-hidden", className)}>
        <span className="relative z-10">{text}</span>
        <motion.span
          className="absolute inset-0 z-20 text-transparent bg-clip-text bg-gradient-to-r from-transparent via-white to-transparent"
          initial={{ x: "-100%" }}
          animate={{ x: "100%" }}
          transition={{
            repeat: Infinity,
            duration: duration,
            ease: "linear",
            delay: delay,
          }}
        >
          {text}
        </motion.span>
      </span>
    )
  }

  // Glitch Effect
  if (effect === "glitch") {
    return (
      <span
        className={cn("relative inline-block", className)}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <span className="relative z-10">{glitchText}</span>
        {isHovered && (
          <>
            <span
              className="absolute top-0 left-0 -z-10 text-red-500 opacity-70 animate-pulse"
              style={{ clipPath: "polygon(0 0, 100% 0, 100% 45%, 0 45%)", transform: "translate(-2px, -2px)" }}
            >
              {text}
            </span>
            <span
              className="absolute top-0 left-0 -z-10 text-blue-500 opacity-70 animate-pulse"
              style={{ clipPath: "polygon(0 80%, 100% 20%, 100% 100%, 0 100%)", transform: "translate(2px, 2px)" }}
            >
              {text}
            </span>
          </>
        )}
      </span>
    )
  }

  // Reveal Effect
  if (effect === "reveal") {
    return (
      <span className={cn("inline-flex overflow-hidden", className)}>
        {text.split("").map((char, index) => (
          <motion.span
            key={index}
            initial={{ y: "100%", opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{
              duration: 0.5,
              delay: delay + index * 0.05,
              ease: [0.33, 1, 0.68, 1],
            }}
          >
            {char === " " ? "\u00A0" : char}
          </motion.span>
        ))}
      </span>
    )
  }

  // Pulse Effect
  if (effect === "pulse") {
    return (
      <motion.span
        className={cn("inline-block", className)}
        animate={{
          scale: [1, 1.05, 1],
          opacity: [1, 0.8, 1],
          textShadow: [
            "0 0 0px rgba(59, 130, 246, 0)",
            "0 0 10px rgba(59, 130, 246, 0.5)",
            "0 0 0px rgba(59, 130, 246, 0)",
          ],
        }}
        transition={{
          duration: duration,
          repeat: Infinity,
          ease: "easeInOut",
        }}
      >
        {text}
      </motion.span>
    )
  }

  return <span className={className}>{text}</span>
}
Multi Effect Text

Dependencies

Files

Installation
