transition for the cards on mouse leave

[olibar194]

Description: Smooth effect of transition when the mouse leaves the card

Changes:

• Adds the tailwind className 'transition-all' to the <Tilt> component

[Fan-Karwanta]

Description: Smooth effect of transition when the mouse leaves the card

Changes:

• Adds the tailwind className 'transition-all' to the component

So I deployed my site on vercel, and its fine when the site is visited using PC. BUT, if a person using mobile/android, the COMPUTER 3d will go blank or white. Displaying a white screen. ALSO the first 5 balls are going white/blank also in mobile. I badlyyyyy need help with this as this is my first stepping stone in my developer journey. PLEASE HELP. Or advice any alternatives.

[shahid704]

@Fan-Karwanta replace part of computer canvas with this

const ComputersCanvas = () => { const [isMobile, setIsMobile] = useState(false);

useEffect(() => { const mediaQuery = window.matchMedia("(max-width: 500px)");

  setIsMobile(mediaQuery.matches);

  const onMediaQueryChange = (event) => {
      setIsMobile(event.matches);
  };

  mediaQuery.addEventListener("change", onMediaQueryChange);

  return () => {
      mediaQuery.removeEventListener("change", onMediaQueryChange);
  };

}, []);

const [initialized, setInitialized] = useState(false);

useEffect(() => { if (!initialized) { setInitialized(true); } }, [initialized]);

if (!initialized) { return

; }

return ( <Canvas frameloop="demand" shadows camera={{ position: [20, 3, 5], fov: 25 }} gl={{ preserveDrawingBuffer: true, alpha: true }} > <Suspense fallback={<CanvasLoader/>}> <OrbitControls enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} /> <Computers isMobile={isMobile}/> </Suspense> <Preload all/> </Canvas> ); };

maybe it will help.