From 0e2b5c7f569258b1cfb43dac0f39f054a4df6ef6 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Thu, 6 Nov 2025 19:38:47 +0000
Subject: [PATCH] completionId: cgen-b60f64f75eaf4fde8b6d0f5aeb5feb26

cgen-b60f64f75eaf4fde8b6d0f5aeb5feb26
---
 client/components/PageTransition.tsx | 123 ++++-----------------------
 1 file changed, 18 insertions(+), 105 deletions(-)

diff --git a/client/components/PageTransition.tsx b/client/components/PageTransition.tsx
index 8ff48a8c..ea4edc14 100644
--- a/client/components/PageTransition.tsx
+++ b/client/components/PageTransition.tsx
@@ -5,131 +5,44 @@ interface PageTransitionProps {
   children: React.ReactNode;
 }
 
-const getArmColor = (
-  pathname: string
-): {
-  color: string;
-  glowColor: string;
-  shadowColor: string;
-} => {
+const getArmGlowColor = (pathname: string): string => {
   if (pathname.includes("/labs") || pathname.includes("/research")) {
-    return {
-      color: "#fbbf24",
-      glowColor: "rgba(251, 191, 36, 0.6)",
-      shadowColor: "rgba(251, 191, 36, 0.3)",
-    };
+    return "rgba(251, 191, 36, 0.15)";
   }
   if (pathname.includes("/game-development")) {
-    return {
-      color: "#22c55e",
-      glowColor: "rgba(34, 197, 94, 0.6)",
-      shadowColor: "rgba(34, 197, 94, 0.3)",
-    };
+    return "rgba(34, 197, 94, 0.15)";
   }
   if (pathname.includes("/consulting")) {
-    return {
-      color: "#3b82f6",
-      glowColor: "rgba(59, 130, 246, 0.6)",
-      shadowColor: "rgba(59, 130, 246, 0.3)",
-    };
+    return "rgba(59, 130, 246, 0.15)";
   }
   if (pathname.includes("/community")) {
-    return {
-      color: "#ef4444",
-      glowColor: "rgba(239, 68, 68, 0.6)",
-      shadowColor: "rgba(239, 68, 68, 0.3)",
-    };
+    return "rgba(239, 68, 68, 0.15)";
   }
   if (pathname.includes("/dev-link")) {
-    return {
-      color: "#06b6d4",
-      glowColor: "rgba(6, 182, 212, 0.6)",
-      shadowColor: "rgba(6, 182, 212, 0.3)",
-    };
+    return "rgba(6, 182, 212, 0.15)";
   }
-  return {
-    color: "#ffffff",
-    glowColor: "rgba(255, 255, 255, 0.3)",
-    shadowColor: "rgba(255, 255, 255, 0.1)",
-  };
+  return "rgba(255, 255, 255, 0)";
 };
 
 export default function PageTransition({ children }: PageTransitionProps) {
   const [visible, setVisible] = useState(false);
-  const [isTransitioning, setIsTransitioning] = useState(false);
   const location = useLocation();
-  const armColor = getArmColor(location.pathname);
+  const glowColor = getArmGlowColor(location.pathname);
 
   useEffect(() => {
-    setIsTransitioning(true);
     setVisible(false);
-
-    const transitionTimer = setTimeout(() => {
-      setVisible(true);
-      const visibleTimer = setTimeout(() => {
-        setIsTransitioning(false);
-      }, 600);
-      return () => clearTimeout(visibleTimer);
-    }, 50);
-
-    return () => clearTimeout(transitionTimer);
+    const id = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(id);
   }, [location.pathname]);
 
   return (
-    <>
-      {/* Colored transition overlay */}
-      {isTransitioning && (
-        <div
-          className="fixed inset-0 pointer-events-none z-40"
-          style={{
-            background: `radial-gradient(circle at center, ${armColor.glowColor} 0%, transparent 70%)`,
-            animation: `transitionPulse 600ms ease-out`,
-          }}
-        />
-      )}
-
-      {/* Main content with fade transition */}
-      <div
-        className={`transition-all duration-500 ease-out transform-gpu will-change-[opacity,filter] ${
-          visible
-            ? "opacity-100 blur-none"
-            : "opacity-0 blur-sm"
-        }`}
-        style={{
-          filter: visible ? "none" : `drop-shadow(0 0 20px ${armColor.shadowColor})`,
-        }}
-      >
-        {children}
-      </div>
-
-      <style>{`
-        @keyframes transitionPulse {
-          0% {
-            opacity: 0;
-            background: radial-gradient(
-              circle at center,
-              ${armColor.glowColor} 0%,
-              transparent 50%
-            );
-          }
-          50% {
-            opacity: 1;
-            background: radial-gradient(
-              circle at center,
-              ${armColor.glowColor} 0%,
-              transparent 70%
-            );
-          }
-          100% {
-            opacity: 0;
-            background: radial-gradient(
-              circle at center,
-              ${armColor.glowColor} 0%,
-              transparent 100%
-            );
-          }
-        }
-      `}</style>
-    </>
+    <div
+      className={`transition-opacity duration-300 ease-out transform-gpu will-change-[opacity] ${visible ? "opacity-100" : "opacity-0"}`}
+      style={{
+        boxShadow: visible ? `inset 0 0 80px ${glowColor}` : "none",
+      }}
+    >
+      {children}
+    </div>
   );
 }