'use client'

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

interface MorphingTextProps {
  words: string[]
  className?: string
  interval?: number
  morphDuration?: number
}

const MorphingText: React.FC<MorphingTextProps> = ({
  words,
  className = '',
  interval = 3000,
  morphDuration = 1500,
}) => {
  const [index, setIndex] = useState(0)
  const [morphing, setMorphing] = useState(false)

  const nextIndex = (index + 1) % words.length

  const startMorph = useCallback(() => {
setMorphing(true)
  }, [])

  useEffect(() => {
const timer = setInterval(startMorph, interval)
return () => clearInterval(timer)
  }, [startMorph, interval])

  useEffect(() => {
if (!morphing) return
const timeout = setTimeout(() => {
  setIndex((prev) => (prev + 1) % words.length)
  setMorphing(false)
}, morphDuration)
return () => clearTimeout(timeout)
  }, [morphing, morphDuration, words.length])

  const durationSec = morphDuration / 1000

  return (
<span className={cn('relative inline-flex text-center', className)}>
  <motion.span
    className="inline-block"
    animate={{
      opacity: morphing ? 0 : 1,
      filter: morphing ? 'blur(8px)' : 'blur(0px)',
    }}
    transition={{ duration: durationSec, ease: 'easeInOut' }}
  >
    {words[index]}
  </motion.span>
  <motion.span
    className="absolute inset-0 inline-block"
    animate={{
      opacity: morphing ? 1 : 0,
      filter: morphing ? 'blur(0px)' : 'blur(8px)',
    }}
    transition={{ duration: durationSec, ease: 'easeInOut' }}
  >
    {words[nextIndex]}
  </motion.span>
</span>
  )
}

export default MorphingText

Prop	Type	Default	Description
`words`	`string[]`	`—`	Array of words to morph between.
`className`	`string`	`''`	Additional CSS classes.
`interval`	`number`	`3000`	Time between morphs in milliseconds.
`morphDuration`	`number`	`1500`	Duration of the morph transition in milliseconds.

Morphing Text

Props