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 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={}>
<OrbitControls
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>




);
};

maybe it will help.