Morphing Text

'use client'
 
import { MorphingText } from '@/components/text/morphing-text'
 
<MorphingText text="Morphing" />

'use client'
 
import { useState, useEffect, useCallback, useRef } from 'react'
 
import { motion } from 'motion/react'
 
interface MorphingTextProps {
  text: string
  speed?: number
  charSet?: string
  as?: React.ElementType
}
 
export function MorphingText({
  text,
  charSet,
  speed = 30,
  as: Component = 'div',
}: MorphingTextProps) {
  const MotionComponent = motion.create(Component)
 
  const [currentText, setCurrentText] = useState(text)
  const letters = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
 
  const intervalRef = useRef<NodeJS.Timeout | null>(null)
  const iteration = useRef(0)
  const prevText = useRef(text) // Keep track of previous text to avoid unnecessary updates
 
  const morphText = useCallback(() => {
    iteration.current = 0
 
    intervalRef.current = setInterval(() => {
      setCurrentText((prev) => {
        const newText = prev
          .split('')
          .map((letter, index) => {
            if (index < iteration.current) return text[index]
 
            return letters[Math.floor(Math.random() * letters.length)]
          })
          .join('')
 
        // Only update if the new text differs from the previous text
        if (newText !== prev) return newText
 
        return prev
      })
 
      if (iteration.current >= text.length) {
        clearInterval(intervalRef.current as unknown as number)
      }
 
      iteration.current += 1 / 3
    }, speed)
  }, [text, speed, letters])
 
  useEffect(() => {
    if (intervalRef.current) clearInterval(intervalRef.current)
 
    morphText()
 
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current)
    }
  }, [morphText])
 
  useEffect(() => {
    prevText.current = text
  }, [text])
 
  return (
    <MotionComponent
      className="text-4xl font-bold text-white"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5, ease: 'easeOut' }}
    >
      {currentText}
    </MotionComponent>
  )
}