AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

completionId: cgen-b60f64f75eaf4fde8b6d0f5aeb5feb26

Browse source 
cgen-b60f64f75eaf4fde8b6d0f5aeb5feb26
This commit is contained in:
Builder.io 2025-11-06 19:38:47 +00:00
parent dc56708c28
commit 0e2b5c7f56
1 changed files with 18 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
client/components/PageTransition.tsx
View file

@ -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>
);
}