Merge pull request #15783 from ethereum/fix-morpher-fade

feat: add fade transition for reduced motion

Author: pettinarip

src/components/Morpher/index.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect, useRef, useState } from "react"
 
+import { cn } from "@/lib/utils/cn"
+
 import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion"
 
 type MorpherProps = {
@@ -15,11 +17,12 @@ const Morpher = ({
 }: MorpherProps) => {
   const [currentText, setCurrentText] = useState(words[0])
   const [isAnimating, setIsAnimating] = useState(false)
+  const [isFading, setIsFading] = useState(false)
   const { prefersReducedMotion } = usePrefersReducedMotion()
 
   const morphTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   const morphIntervalRef = useRef<NodeJS.Timeout | null>(null)
-  const counterRef = useRef(1)
+  const counterRef = useRef(0)
   const wordsRef = useRef(words)
   const currentTextRef = useRef(currentText)
   const isAnimatingRef = useRef(false)
@@ -114,13 +117,18 @@ const Morpher = ({
   }
 
   useEffect(() => {
-    // If reduced motion is preferred, show static text cycling
+    // If reduced motion is preferred, show static text cycling with fade
     if (prefersReducedMotion) {
       morphIntervalRef.current = setInterval(() => {
-        const nextWord = wordsRef.current[counterRef.current]
-        setCurrentText(nextWord)
-        currentTextRef.current = nextWord
-        counterRef.current = (counterRef.current + 1) % wordsRef.current.length
+        setIsFading(true)
+        setTimeout(() => {
+          counterRef.current =
+            (counterRef.current + 1) % wordsRef.current.length
+          const nextWord = wordsRef.current[counterRef.current]
+          setCurrentText(nextWord)
+          currentTextRef.current = nextWord
+          setIsFading(false)
+        }, 150) // Half of the fade duration
       }, 3000)
     } else {
       // Defer animation start by 2 seconds to improve initial page load
@@ -159,7 +167,16 @@ const Morpher = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [prefersReducedMotion, charSet])
 
-  return currentText
+  return (
+    <span
+      className={cn(
+        "transition-opacity duration-300 ease-in-out",
+        prefersReducedMotion && isFading && "opacity-0"
+      )}
+    >
+      {currentText}
+    </span>
+  )
 }
 
 export default Morpher