fix global loader and bug fixes

Author: hardikpatel-dev

src/app/animations/FlipOnScroll.jsx

@@ -19,6 +19,7 @@ export default function FlipOnScroll({ children, delay = 0.5 }) {
           opacity: 1,
           duration: 1.5,
           delay,
+          stagger: 0.1,
           ease: "back.out(1.7)",
           transformOrigin: "center center", // sikka center se ghoome
           scrollTrigger: {

src/components/GlobalLoader.jsx

@@ -80,12 +80,12 @@ export default function GlobalLoader() {
     const pRect = p.getBoundingClientRect();
     const distance = pRect.left - hRect.right; // gap between H and P
 
-    const moveFraction = 0.2; // move 20% toward each other
+    const moveFraction = 0.2; // move 40% toward each other
 
     tl.to(
       h,
       {
-        x: distance * (moveFraction + 0.6), // H moves toward P
+        x: distance * (moveFraction + 0.7), // H moves toward P
         duration: 0.6,
         ease: "power4.out",
       },
@@ -95,7 +95,7 @@ export default function GlobalLoader() {
     tl.to(
       p,
       {
-        x: -distance * moveFraction, // P moves toward H
+        x: -distance * 0.1, // P moves toward H
         duration: 0.6,
         ease: "power4.out",
       },
@@ -135,7 +135,7 @@ export default function GlobalLoader() {
     >
       <h1
         id="loader"
-        className="font-whyte text-text text-center font-bold text-7xl md:text-9xl tracking-wide relative"
+        className="font-whyte text-text text-center text-[12vw] text-nowrap font-bold tracking-wide relative"
       ></h1>
     </div>
   );

src/components/Header.jsx

@@ -28,7 +28,7 @@ export default function Header() {
         opacity: 0, // fade in
         duration: 1.2, // smooth duration
         ease: "power3.out",
-        delay: 2, // 1s delay
+        delay: 2.5, // 1s delay
       });
     }
     initMagneticHover();

src/sections/Hero.jsx

@@ -29,11 +29,11 @@ const Hero = () => {
               className="text-text-muted"
             />
             <div className="py-10 lg:py-12 xl:py-16 text-center lg:text-start">
-              <FadeUpText delay={0.5}>
+              <FadeUpText delay={1}>
                 <h1 className="leading-tight text-[clamp(1.6rem,6vw,3.5rem)] lg:text-[clamp(1.5rem,6vw,3vw)]  font-extrabold box-border uppercase font-whyte text-text-heading text-nowrap">
                   <span className="inline-flex flex-nowrap items-center">
                     Cra
-                    <FlipOnScroll delay={2}>
+                    <FlipOnScroll delay={2.5}>
                       <svg
                         width="28"
                         height="28"
@@ -75,7 +75,7 @@ const Hero = () => {
                   </em>{" "}
                   <span className="inline-flex flex-nowrap items-center">
                     E
-                    <FlipOnScroll delay={2}>
+                    <FlipOnScroll delay={2.5}>
                       <IconBrandVscode
                         stroke={1}
                         className="drop-shadow-lg mb-[4%] md:mb-[2%] xl:mb-[4%] text-blue-500 w-6 sm:w-10 xl:w-12 h-6 sm:h-10 md:h-10 xl:h-12"

src/sections/TechStack.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import gsap from "gsap";
 import FadeUpTextScroll from "@/app/animations/FadeUpTextScroll";
+import FlipOnScroll from "@/app/animations/FlipOnScroll";
 
 const techStack = [
   {
@@ -129,19 +130,21 @@ const TechStack = () => {
                   onMouseEnter={() => setActive(tech.id)}
                   className="h-60 flex flex-1 items-center justify-center p-6 border-r border-b border-t-0 border-gray-300 transition first:border-l-0 last:border-r-0"
                 >
-                  <Image
-                    src={tech.icon}
-                    alt={tech.id}
-                    width={60}
-                    height={60}
-                    quality={50}
-                    loading="lazy"
-                    placeholder="blur"
-                    blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
-                    className={`h-18 w-auto object-contain  ${
-                      active === tech.id ? "filter-invert" : "svg-invert"
-                    }`}
-                  />
+                  <FlipOnScroll>
+                    <Image
+                      src={tech.icon}
+                      alt={tech.id}
+                      width={60}
+                      height={60}
+                      quality={50}
+                      loading="lazy"
+                      placeholder="blur"
+                      blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
+                      className={`h-18 w-auto object-contain  ${
+                        active === tech.id ? "filter-invert" : "svg-invert"
+                      }`}
+                    />
+                  </FlipOnScroll>
                 </a>
               ))}
             </div>
@@ -158,17 +161,19 @@ const TechStack = () => {
                   onMouseEnter={() => setActive(tech.id)}
                   className="h-50 flex flex-1 items-center justify-center p-6 border-r border-gray-300 transition first:border-l-0 last:border-r-0"
                 >
-                  <Image
-                    src={tech.icon}
-                    alt={tech.id}
-                    width={60}
-                    height={60}
-                    quality={50}
-                    loading="lazy"
-                    className={`h-12 w-auto object-contain  ${
-                      active === tech.id ? "filter-invert" : "svg-invert"
-                    }`}
-                  />
+                  <FlipOnScroll>
+                    <Image
+                      src={tech.icon}
+                      alt={tech.id}
+                      width={60}
+                      height={60}
+                      quality={50}
+                      loading="lazy"
+                      className={`h-12 w-auto object-contain  ${
+                        active === tech.id ? "filter-invert" : "svg-invert"
+                      }`}
+                    />
+                  </FlipOnScroll>
                 </a>
               ))}
             </div>
@@ -186,15 +191,17 @@ const TechStack = () => {
                 onMouseEnter={() => setActive(tech.id)}
                 className="h-30 flex flex-1 items-center justify-center p-4 border-r border-b border-gray-300 transition odd:border-l-0 even:border-r-0 last:border-r-0"
               >
-                <Image
-                  src={tech.icon}
-                  alt={tech.id}
-                  width={50}
-                  height={50}
-                  quality={50}
-                  loading="lazy"
-                  className={`h-12 w-auto object-contain svg-invert`}
-                />
+                <FlipOnScroll>
+                  <Image
+                    src={tech.icon}
+                    alt={tech.id}
+                    width={50}
+                    height={50}
+                    quality={50}
+                    loading="lazy"
+                    className={`h-12 w-auto object-contain svg-invert`}
+                  />
+                </FlipOnScroll>
               </a>
             ))}
           </div>