The particlesContainer is unresponsive and laggy as it waits for a response from the globeReady to be true, the goal was for the particles component to entertain the user as the globe loads so having it in the current state is undesired. Modify my code to fix this problem: Transition.jsx: import { motion } from "framer-motion";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import ParticlesContainer from "./ParticlesContainer";
import { useGlobe } from '../components/globe/globeContext';

const Transition = () => {
  const [isLoaded, setIsLoaded] = useState(false);
  const router = useRouter(); 
  const { globeReady } = useGlobe();
  let transitionDelay;

  const baseDelay = router.pathname === '/' ? 0.2 : 0.2;


  const transitionVariants = {
    initial: {
      x: "100%",
      width: "100%",
    },
    animate: {
      x: "0%",
      width: "0%",
    },
    exit: {
      x: ["0%", "100%"],
      width: ["0%", "100%"],
    },
  };

  useEffect(() => {
    // If we're on the homepage and globe is ready, set loaded to true
    if (router.pathname === '/' && globeReady) {
        setIsLoaded(true);
    } else if(router.pathname!== '/') {
        setIsLoaded(true);
      }
  }, [globeReady, router.pathname]);

 if (router.pathname === '/' && !globeReady) {
     transitionDelay = globeReady ? baseDelay : Infinity;
 } else if (router.pathname !== '/' && !globeReady) {
   transitionDelay = baseDelay;
 }

  return (
    <>
      {!isLoaded && (
        <motion.div
          role="status"
          className="fixed top-0 bottom-0 right-full w-screen h-screen z-30 bg-[#2e2257]"
          variants={transitionVariants}
          initial="initial"
          animate="animate"
          exit="exit"
          transition={{ delay: transitionDelay, duration: 0.6, ease: "easeInOut" }}
          aria-hidden="true"
        >
          <motion.img
            src="/logo.svg"
            alt="Descriptive text"
            style={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              width: '500px',
              height: '500px'
            }}
          />
          <motion.img
            src="/hand.gif"
            alt="Descriptive text"
            style={{
              position: 'absolute',
              top: '70%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              width: '500px',
              height: '500px'
            }}
          />
          <ParticlesContainer />
        </motion.div>
      )}
      <motion.div
        role="status"
        className="fixed top-0 bottom-0 right-full w-screen h-screen z-20 bg-[#3b2d71]"
        variants={transitionVariants}
        initial="initial"
        animate="animate"
        exit="exit"
        transition={{ delay: 0.4, duration: 0.6, ease: "easeInOut" }}
        aria-hidden
      /> 
      <motion.div
        role="status"
        className="fixed top-0 bottom-0 right-full w-screen h-screen z-10 bg-[#4b3792]"
        variants={transitionVariants}
        initial="initial"
        animate="animate"
        exit="exit"
        transition={{ delay: 0.6, duration: 0.6, ease: "easeInOut" }}
        aria-hidden
      />
       
    </>
  );
};

export default Transition;
ParticlesContainer.jsx: import { useCallback } from "react";
import { Particles } from "react-tsparticles";
import { loadFull } from "tsparticles";

const ParticlesContainer = () => {
  // init
  const particlesInit = useCallback(async (engine) => {
    await loadFull(engine);
  }, []);

  const particlesLoaded = useCallback(async () => {}, []);

  return (
    <Particles
      className="w-full h-full absolute translate-z-0"
      id="tsparticles"
      init={particlesInit}
      loaded={particlesLoaded}
      options={{
        fullScreen: { enable: false },
        background: {
          color: {
            value: "",
          },
        },
        fpsLimit: 120,
        interactivity: {
          events: {
            onClick: {
              enable: false,
              mode: "push",
            },
            onHover: {
              enable: true,
              mode: "repulse",
            },
            resize: true,
          },
          modes: {
            push: {
              quantity: 90,
            },
            repulse: {
              distance: 200,
              duration: 0.4,
            },
          },
        },
        particles: {
          color: {
            value: "#fff",
          },
          links: {
            color: "#fff",
            distance: 150,
            enable: true,
            opacity: 0.5,
            width: 1,
          },
          collisions: {
            enable: true,
          },
          move: {
            direction: "none",
            enable: true,
            outMode: {
              default: "bounce",
            },
            random: false,
            speed: 1,
            straight: false,
          },
          number: {
            density: {
              enable: true,
              area: 800,
            },
            value: 80,
          },
          opacity: {
            value: 0.5,
          },
          shape: {
            type: "circle",
          },
          size: {
            value: {
              min: 1,
              max: 5,
            },
          },
        },
        detectRetina: true,
      }}
    />
  );
};

export default ParticlesContainer;