completionId: cgen-b60f64f75eaf4fde8b6d0f5aeb5feb26

cgen-b60f64f75eaf4fde8b6d0f5aeb5feb26

client/components/PageTransition.tsx

@@ -5,131 +5,44 @@ interface PageTransitionProps {
   children: React.ReactNode;
 }
 
-const getArmColor = (
+const getArmGlowColor = (pathname: string): string => {
-  pathname: string
-): {
-  color: string;
-  glowColor: string;
-  shadowColor: string;
-} => {
   if (pathname.includes("/labs") || pathname.includes("/research")) {
-    return {
+    return "rgba(251, 191, 36, 0.15)";
-      color: "#fbbf24",
-      glowColor: "rgba(251, 191, 36, 0.6)",
-      shadowColor: "rgba(251, 191, 36, 0.3)",
-    };
   }
   if (pathname.includes("/game-development")) {
-    return {
+    return "rgba(34, 197, 94, 0.15)";
-      color: "#22c55e",
-      glowColor: "rgba(34, 197, 94, 0.6)",
-      shadowColor: "rgba(34, 197, 94, 0.3)",
-    };
   }
   if (pathname.includes("/consulting")) {
-    return {
+    return "rgba(59, 130, 246, 0.15)";
-      color: "#3b82f6",
-      glowColor: "rgba(59, 130, 246, 0.6)",
-      shadowColor: "rgba(59, 130, 246, 0.3)",
-    };
   }
   if (pathname.includes("/community")) {
-    return {
+    return "rgba(239, 68, 68, 0.15)";
-      color: "#ef4444",
-      glowColor: "rgba(239, 68, 68, 0.6)",
-      shadowColor: "rgba(239, 68, 68, 0.3)",
-    };
   }
   if (pathname.includes("/dev-link")) {
-    return {
+    return "rgba(6, 182, 212, 0.15)";
-      color: "#06b6d4",
-      glowColor: "rgba(6, 182, 212, 0.6)",
-      shadowColor: "rgba(6, 182, 212, 0.3)",
-    };
   }
-  return {
+  return "rgba(255, 255, 255, 0)";
-    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);
+  const glowColor = getArmGlowColor(location.pathname);
 
   useEffect(() => {
-    setIsTransitioning(true);
     setVisible(false);
-
+    const id = requestAnimationFrame(() => setVisible(true));
-    const transitionTimer = setTimeout(() => {
+    return () => cancelAnimationFrame(id);
-      setVisible(true);
-      const visibleTimer = setTimeout(() => {
-        setIsTransitioning(false);
-      }, 600);
-      return () => clearTimeout(visibleTimer);
-    }, 50);
-
-    return () => clearTimeout(transitionTimer);
   }, [location.pathname]);
 
   return (
-    <>
+    <div
-      {/* Colored transition overlay */}
+      className={`transition-opacity duration-300 ease-out transform-gpu will-change-[opacity] ${visible ? "opacity-100" : "opacity-0"}`}
-      {isTransitioning && (
+      style={{
-        <div
+        boxShadow: visible ? `inset 0 0 80px ${glowColor}` : "none",
-          className="fixed inset-0 pointer-events-none z-40"
+      }}
-          style={{
+    >
-            background: `radial-gradient(circle at center, ${armColor.glowColor} 0%, transparent 70%)`,
+      {children}
-            animation: `transitionPulse 600ms ease-out`,
+    </div>
-          }}
-        />
-      )}
-
-      {/* 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>
-    </>
   );
 }