From dc56708c285d8dbfd59ff3880559e417b0886a15 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Thu, 6 Nov 2025 19:34:11 +0000
Subject: [PATCH] completionId: cgen-a924b60b51d9456ba1b0bc3620f6136c

cgen-a924b60b51d9456ba1b0bc3620f6136c
---
 client/components/PageTransition.tsx | 124 +++++++++++++++++++++++++--
 1 file changed, 117 insertions(+), 7 deletions(-)

diff --git a/client/components/PageTransition.tsx b/client/components/PageTransition.tsx
index 845cd89b..8ff48a8c 100644
--- a/client/components/PageTransition.tsx
+++ b/client/components/PageTransition.tsx
@@ -5,21 +5,131 @@ interface PageTransitionProps {
   children: React.ReactNode;
 }
 
+const getArmColor = (
+  pathname: string
+): {
+  color: string;
+  glowColor: string;
+  shadowColor: 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)",
+    };
+  }
+  if (pathname.includes("/game-development")) {
+    return {
+      color: "#22c55e",
+      glowColor: "rgba(34, 197, 94, 0.6)",
+      shadowColor: "rgba(34, 197, 94, 0.3)",
+    };
+  }
+  if (pathname.includes("/consulting")) {
+    return {
+      color: "#3b82f6",
+      glowColor: "rgba(59, 130, 246, 0.6)",
+      shadowColor: "rgba(59, 130, 246, 0.3)",
+    };
+  }
+  if (pathname.includes("/community")) {
+    return {
+      color: "#ef4444",
+      glowColor: "rgba(239, 68, 68, 0.6)",
+      shadowColor: "rgba(239, 68, 68, 0.3)",
+    };
+  }
+  if (pathname.includes("/dev-link")) {
+    return {
+      color: "#06b6d4",
+      glowColor: "rgba(6, 182, 212, 0.6)",
+      shadowColor: "rgba(6, 182, 212, 0.3)",
+    };
+  }
+  return {
+    color: "#ffffff",
+    glowColor: "rgba(255, 255, 255, 0.3)",
+    shadowColor: "rgba(255, 255, 255, 0.1)",
+  };
+};
+
 export default function PageTransition({ children }: PageTransitionProps) {
   const [visible, setVisible] = useState(false);
+  const [isTransitioning, setIsTransitioning] = useState(false);
   const location = useLocation();
+  const armColor = getArmColor(location.pathname);
 
   useEffect(() => {
+    setIsTransitioning(true);
     setVisible(false);
-    const id = requestAnimationFrame(() => setVisible(true));
-    return () => cancelAnimationFrame(id);
+
+    const transitionTimer = setTimeout(() => {
+      setVisible(true);
+      const visibleTimer = setTimeout(() => {
+        setIsTransitioning(false);
+      }, 600);
+      return () => clearTimeout(visibleTimer);
+    }, 50);
+
+    return () => clearTimeout(transitionTimer);
   }, [location.pathname]);
 
   return (
-    <div
-      className={`transition-opacity duration-300 ease-out transform-gpu will-change-[opacity] ${visible ? "opacity-100" : "opacity-0"}`}
-    >
-      {children}
-    </div>
+    <>
+      {/* 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>
+    </>
   );
 }