Morphing Text

1"use client"
2 
3import { useCallback, useEffect, useRef } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7const morphTime = 1.5
8const cooldownTime = 0.5
9 
10const useMorphingText = (texts: string[]) => {
11  const textIndexRef = useRef(0)
12  const morphRef = useRef(0)
13  const cooldownRef = useRef(0)
14  const timeRef = useRef(new Date())
15 
16  const text1Ref = useRef<HTMLSpanElement>(null)
17  const text2Ref = useRef<HTMLSpanElement>(null)
18 
19  const setStyles = useCallback(
20    (fraction: number) => {
21      const [current1, current2] = [text1Ref.current, text2Ref.current]
22      if (!current1 || !current2) return
23 
24      current2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`
25      current2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`
26 
27      const invertedFraction = 1 - fraction
28      current1.style.filter = `blur(${Math.min(
29        8 / invertedFraction - 8,
30        100
31      )}px)`
32      current1.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`
33 
34      current1.textContent = texts[textIndexRef.current % texts.length]
35      current2.textContent = texts[(textIndexRef.current + 1) % texts.length]
36    },
37    [texts]
38  )
39 
40  const doMorph = useCallback(() => {
41    morphRef.current -= cooldownRef.current
42    cooldownRef.current = 0
43 
44    let fraction = morphRef.current / morphTime
45 
46    if (fraction > 1) {
47      cooldownRef.current = cooldownTime
48      fraction = 1
49    }
50 
51    setStyles(fraction)
52 
53    if (fraction === 1) {
54      textIndexRef.current++
55    }
56  }, [setStyles])
57 
58  const doCooldown = useCallback(() => {
59    morphRef.current = 0
60    const [current1, current2] = [text1Ref.current, text2Ref.current]
61    if (current1 && current2) {
62      current2.style.filter = "none"
63      current2.style.opacity = "100%"
64      current1.style.filter = "none"
65      current1.style.opacity = "0%"
66    }
67  }, [])
68 
69  useEffect(() => {
70    let animationFrameId: number
71 
72    const animate = () => {
73      animationFrameId = requestAnimationFrame(animate)
74 
75      const newTime = new Date()
76      const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000
77      timeRef.current = newTime
78 
79      cooldownRef.current -= dt
80 
81      if (cooldownRef.current <= 0) doMorph()
82      else doCooldown()
83    }
84 
85    animate()
86    return () => {
87      cancelAnimationFrame(animationFrameId)
88    }
89  }, [doMorph, doCooldown])
90 
91  return { text1Ref, text2Ref }
92}
93 
94interface MorphingTextProps {
95  className?: string
96  texts: string[]
97}
98 
99// … truncated