[e.cash] Power Payments section improvements

Summary:
The "Powering Internet-scale Payments" section on the homepage had
some performance issues. The animations were not very smooth, and sometimes items
would flash or jitter.

Added some changes to improve this. Seems much smoother now

Test Plan:
preview and check
To compare with current, run locally and test, then switch to master and hard refresh and test

Reviewers: #bitcoin_abc, bytesofman

Reviewed By: #bitcoin_abc, bytesofman

Subscribers: bytesofman

Differential Revision: https://reviews.bitcoinabc.org/D18511

Author: johnkuney

web/e.cash_v2/app/components/Home/PoweringPayments.tsx

@@ -3,11 +3,11 @@
 // file COPYING or http://www.opensource.org/licenses/mit-license.php.
 
 "use client";
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useCallback, useMemo } from "react";
 import ContentContainer from "../Atoms/ContentContainer";
 import Image from "next/image";
 import { cn } from "../../utils/cn";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 
 const eCashFeatures = [
   {
@@ -37,11 +37,8 @@ const eCashFeatures = [
 ];
 
 export default function PoweringPayments() {
-  const [rawHoveredIndex, setRawHoveredIndex] = useState<number | null>(null);
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const [activeIndex, setActiveIndex] = useState<number>(0);
-  const [prevHoveredIndex, setPrevHoveredIndex] = useState<number | null>(null);
-  const [fadeKey, setFadeKey] = useState<number>(0);
   const containerRef = useRef<HTMLDivElement>(null);
 
   type FeatureCardProps = {
@@ -51,22 +48,49 @@ export default function PoweringPayments() {
   };
 
   const FeatureCard = ({ name, index, onHover }: FeatureCardProps) => {
+    const isHovered = hoveredIndex === index;
+
     return (
-      <div
+      <motion.div
         onMouseEnter={() => onHover(index)}
         onMouseLeave={() => onHover(null)}
-        className="custom-box relative flex h-[160px] w-full max-w-[270px] cursor-pointer items-center rounded-xl bg-gradient-to-br from-[#0E0E21] to-[#19193B] p-8 hover:from-[#130D3F] hover:to-[#7316d1]"
+        className="custom-box relative flex h-[160px] w-full max-w-[270px] cursor-pointer items-center rounded-xl bg-gradient-to-br from-[#0E0E21] to-[#19193B] p-8"
+        whileHover={{
+          background: "linear-gradient(135deg, #130D3F 0%, #7316d1 100%)",
+          transition: { duration: 0.2, ease: "easeOut" },
+        }}
       >
-        {index === 2 && hoveredIndex === 2 && (
-          <div className="absolute left-[270px] z-0 h-[3px] w-2/3 bg-[#a77ba8]" />
+        {/* Connection lines with smooth animations */}
+        {index === 2 && (
+          <motion.div
+            className="absolute left-[270px] z-0 h-[3px] w-2/3 bg-[#a77ba8]"
+            initial={{ scaleX: 0, opacity: 0 }}
+            animate={{
+              scaleX: isHovered ? 1 : 0,
+              opacity: isHovered ? 1 : 0,
+            }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+            style={{ transformOrigin: "left center" }}
+          />
         )}
-        {index === 5 && hoveredIndex === 5 && (
-          <div className="absolute right-[270px] z-0 h-[3px] w-2/3 bg-[#a77ba8]" />
+        {index === 5 && (
+          <motion.div
+            className="absolute right-[270px] z-0 h-[3px] w-2/3 bg-[#a77ba8]"
+            initial={{ scaleX: 0, opacity: 0 }}
+            animate={{
+              scaleX: isHovered ? 1 : 0,
+              opacity: isHovered ? 1 : 0,
+            }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+            style={{ transformOrigin: "right center" }}
+          />
         )}
+
         <div className="flex flex-col items-start">
           <span className="text-secondaryText text-sm">0{index}</span>
           <h4 className="text-lg font-bold leading-snug">{name}</h4>
         </div>
+
         <div className="absolute bottom-0 right-0 h-full w-[60%]">
           <Image
             src={`/${name.toLowerCase()}.png`}
@@ -75,51 +99,30 @@ export default function PoweringPayments() {
             className="object-contain object-bottom"
           />
         </div>
-      </div>
+      </motion.div>
     );
   };
 
-  useEffect(() => {
+  // Memoized scroll handler to prevent unnecessary re-renders
+  const handleScroll = useCallback(() => {
     const el = containerRef.current;
     if (!el) return;
 
-    const handleScroll = () => {
-      const child = el.children[0] as HTMLElement;
-      const cardWidth = child.offsetWidth + 16; // gap-4 = 1rem = 16px
-      const index = Math.round(el.scrollLeft / cardWidth);
-      setActiveIndex(index);
-    };
-
-    el.addEventListener("scroll", handleScroll);
-    return () => el.removeEventListener("scroll", handleScroll);
+    const child = el.children[0] as HTMLElement;
+    const cardWidth = child.offsetWidth + 16; // gap-4 = 1rem = 16px
+    const index = Math.round(el.scrollLeft / cardWidth);
+    setActiveIndex(index);
   }, []);
 
   useEffect(() => {
-    if (hoveredIndex !== prevHoveredIndex) {
-      setFadeKey((prev) => prev + 1);
-      setPrevHoveredIndex(hoveredIndex);
-    }
-  }, [hoveredIndex, prevHoveredIndex]);
-
-  useEffect(() => {
-    let timeout: NodeJS.Timeout;
-
-    if (rawHoveredIndex === null) {
-      // Long delay when hovering off all tiles
-      timeout = setTimeout(() => {
-        setHoveredIndex(null);
-      }, 500);
-    } else {
-      // Short delay between switching tiles
-      timeout = setTimeout(() => {
-        setHoveredIndex(rawHoveredIndex);
-      }, 300);
-    }
+    const el = containerRef.current;
+    if (!el) return;
 
-    return () => clearTimeout(timeout);
-  }, [rawHoveredIndex]);
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
 
-  const scrollToIndex = (index: number) => {
+  const scrollToIndex = useCallback((index: number) => {
     const el = containerRef.current;
     if (!el) return;
 
@@ -130,7 +133,51 @@ export default function PoweringPayments() {
         inline: "start",
       });
     }
-  };
+  }, []);
+
+  // Memoized content to prevent unnecessary re-renders
+  const centerContent = useMemo(
+    () => (
+      <div className="absolute flex h-full w-full items-center justify-center overflow-hidden">
+        <AnimatePresence mode="wait">
+          {hoveredIndex !== null ? (
+            <motion.div
+              key={`text-${hoveredIndex}`}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="absolute inset-0 flex items-center justify-center"
+            >
+              <div>
+                <p className="bg-background/70 max-w-[330px] rounded border border-white/10 p-6 text-center backdrop-blur-sm">
+                  {eCashFeatures[hoveredIndex - 1]?.text}
+                </p>
+              </div>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="title"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="absolute inset-0 flex items-center justify-center"
+            >
+              <div>
+                <h2 className="max-w-[330px] text-center">
+                  Powering{" "}
+                  <span className="pink-gradient-text">Internet-Scale</span>{" "}
+                  Payments
+                </h2>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    ),
+    [hoveredIndex]
+  );
 
   return (
     <ContentContainer className="mb-30 max-w-[1400px]">
@@ -147,60 +194,57 @@ export default function PoweringPayments() {
               key={index}
               index={index + 1}
               name={feature.name}
-              onHover={setRawHoveredIndex}
+              onHover={setHoveredIndex}
             />
           ))}
         </div>
+
         <div className="relative z-10 aspect-[550/721] w-full lg:h-[721px] lg:w-[550px] lg:shrink-0">
           <Image
             src="/powering-payments-bg.jpg"
             alt="Powering Internet-Scale Payments"
             fill
             className="object-contain"
           />
-          {hoveredIndex !== null && (
-            <Image
-              key={hoveredIndex}
-              src={`/overlay-${hoveredIndex}.png`}
-              alt="Powering Internet-Scale Payments"
-              fill
-              className="hidden object-contain lg:inline-block"
-            />
-          )}
 
-          <div className="absolute flex h-full w-full items-center justify-center overflow-hidden">
-            <div
-              key={fadeKey}
-              className="animate-fade-in-up absolute inset-0 flex items-center justify-center opacity-0"
-            >
-              <div>
-                {hoveredIndex !== null ? (
-                  <p className="bg-background/70 max-w-[330px] rounded border border-white/10 p-6 text-center">
-                    {eCashFeatures[hoveredIndex - 1]?.text}
-                  </p>
-                ) : (
-                  <h2 className="max-w-[330px] text-center">
-                    Powering{" "}
-                    <span className="pink-gradient-text">Internet-Scale</span>{" "}
-                    Payments
-                  </h2>
-                )}
-              </div>
-            </div>
-          </div>
+          {/* Overlay image with smooth transitions */}
+          <AnimatePresence mode="wait">
+            {hoveredIndex !== null && (
+              <motion.div
+                key={`overlay-${hoveredIndex}`}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.3, ease: "easeOut" }}
+                className="absolute inset-0"
+              >
+                <Image
+                  src={`/overlay-${hoveredIndex}.png`}
+                  alt="Powering Internet-Scale Payments"
+                  fill
+                  className="hidden object-contain lg:inline-block"
+                />
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {centerContent}
         </div>
+
         <div className="hidden grow basis-0 flex-col items-start justify-center gap-2 self-stretch lg:flex [&>*:nth-child(2)]:self-end">
           {eCashFeatures.slice(3, 6).map((feature, index) => (
             <FeatureCard
               key={index}
               index={index + 4}
               name={feature.name}
-              onHover={setRawHoveredIndex}
+              onHover={setHoveredIndex}
             />
           ))}
         </div>
       </motion.div>
+
       <div className="bg-background relative z-20 m-auto mt-[-50px] h-[20px] w-full max-w-[750px] rounded border border-b-0 border-x-[#211a36] border-t-[#211a36] lg:mt-0" />
+
       <div className="bg-background relative z-20 flex w-full items-center justify-between gap-4 px-2 lg:hidden">
         {eCashFeatures.map((feature, index) => (
           <div
@@ -221,26 +265,36 @@ export default function PoweringPayments() {
             </div>
             <span
               className={cn(
-                "text-sm",
+                "text-sm transition-opacity duration-200",
                 activeIndex === index ? "opacity-100" : "opacity-40"
               )}
             >
               0{index + 1}
             </span>
 
             <div className="relative mt-2 aspect-square w-[15px]">
-              {activeIndex === index && (
-                <Image
-                  src="/arrow-up.png"
-                  alt="arrow"
-                  fill
-                  className="object-contain"
-                />
-              )}
+              <AnimatePresence>
+                {activeIndex === index && (
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    exit={{ opacity: 0, scale: 0.8 }}
+                    transition={{ duration: 0.2, ease: "easeOut" }}
+                  >
+                    <Image
+                      src="/arrow-up.png"
+                      alt="arrow"
+                      fill
+                      className="object-contain"
+                    />
+                  </motion.div>
+                )}
+              </AnimatePresence>
             </div>
           </div>
         ))}
       </div>
+
       <div
         className="scrollx-container m-auto mt-3 flex w-[95%] snap-x snap-mandatory gap-4 overflow-x-auto scroll-smooth pb-3 lg:hidden"
         ref={containerRef}
@@ -249,7 +303,7 @@ export default function PoweringPayments() {
           <div
             key={index}
             className={cn(
-              "w-[85%] shrink-0 snap-start transition-opacity",
+              "w-[85%] shrink-0 snap-start transition-all duration-300 ease-out",
               activeIndex === index ? "opacity-100" : "opacity-40"
             )}
           >

web/e.cash_v2/app/globals.css

@@ -205,7 +205,7 @@ h2 {
 
 .custom-box {
   box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.1) inset;
-  backdrop-filter: blur(14px);
+  transition: all 0.2s ease-out;
 }
 
 .custom-filter {