background animation and navbar logo animation

2026-01-29 17:07:07 +05:00
parent 49f5c0979a
commit e71d774ccb
19 changed files with 388 additions and 35 deletions
--- a/components/pageTransition/pageTransition.tsx
+++ b/components/pageTransition/pageTransition.tsx
@@ -0,0 +1,63 @@
+"use client";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import "./page-transition.css";
+
+export default function PageTransition({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  useEffect(() => {
+    setIsTransitioning(true);
+    
+    const timer = setTimeout(() => {
+      setIsTransitioning(false);
+    }, 1500); // Animatsiya davomiyligi
+
+    return () => clearTimeout(timer);
+  }, [pathname]);
+
+  return (
+    <>
+      {/* Transition overlay */}
+      <div className={`page-transition-overlay ${isTransitioning ? "active" : ""}`}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 423.22 424.82"
+          className="transition-svg"
+        >
+          <defs>
+            <linearGradient id="transition-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="#ff0000" />
+              <stop offset="50%" stopColor="#ff4444" />
+              <stop offset="100%" stopColor="#ff0000" />
+            </linearGradient>
+            
+            <filter id="transition-glow">
+              <feGaussianBlur stdDeviation="5" result="coloredBlur"/>
+              <feMerge>
+                <feMergeNode in="coloredBlur"/>
+                <feMergeNode in="SourceGraphic"/>
+              </feMerge>
+            </filter>
+          </defs>
+          <g>
+            <polygon
+              className="transition-path"
+              points="352.86 365.08 347.11 365.08 347.11 381 289.38 381 289.38 365.08 283.63 365.08 283.63 381 204.78 381 204.78 365.08 199.03 365.08 199.03 381 141.32 381 141.32 365.08 135.57 365.08 135.57 381 77.87 381 77.87 365.08 71.86 365.08 71.85 381 17.21 381 17.21 386.74 72.11 386.74 72.11 424.82 74.04 424.82 74.04 386.74 350.94 386.74 350.94 424.82 352.86 424.82 352.86 386.74 406.02 386.74 406.02 381 352.86 381 352.86 365.08"
+            />
+            <path
+              className="transition-path"
+              d="m72.11,157.74v73.55l-41.42,23.89h3.83l37.58-21.68-.04,21.68h5.79v-24.99l57.7-33.27v58.26h5.75v-57.15l57.71-33.29v90.44h5.75v-90.43l39.43,22.77,39.43,22.77v44.89h5.74v-41.58l57.73,33.32v8.25h5.75v-95.41h-1.92v82.75l-61.56-35.55v-98.77l59.59-34.35-.97-1.66-58.62,33.81V0h-1.92v42.86h-88.43v115.23l-5.2,3-14.21,8.16-27.25,15.74-11.05,6.37v-73.53l36.14-20.85-.96-1.66-35.19,20.29v-35.03h-1.92v36.13l-65.36,37.7v-37.25h-1.92v38.35l-53.08,30.6.96,1.67,52.12-30.07ZM204.78,48.58h78.85v60.71l-78.85,45.48V48.58Zm0,108.41l78.85-45.49v92.14l-78.85-45.54v-1.11Zm-126.91,1.92l57.7-33.32v69.11l-57.7,33.26v-69.05Z"
+            />
+          </g>
+        </svg>
+      </div>
+      
+      {/* Page content */}
+      <div className={`page-content ${isTransitioning ? "transitioning" : ""}`}>
+        {children}
+      </div>
+    </>
+  );
+}