🃏 UI: Parallax 3D Cards

Author: MidHunterX

README.md

@@ -26,6 +26,7 @@
 - [x] If [ prefers-reduced-motion ](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) is set, cursor blob won't show kinetic effects.
 - [x] Gray BG for Artworks @md as a hacky solution to [ Hermann Grid Optical Illusion ](https://en.wikipedia.org/wiki/Grid_illusion) problem.
 - [x] Base64 Placeholder and Lazy-Loading of Resume
+- [x] Card tilt effect enabled only for PC users (because it is resource intensive and might cause navigational stuttering for mobile users)
 - [x] Show Navbar on Hero to avoid confusion on page structure and layout
 - [x] Only show Navbar when needed (i.e. moving to previous section)
 
@@ -75,6 +76,7 @@ Step 4: Profit?
 | @svgr/webpack                  | Webpack Loader for SVGR    |
 | @headlessui/react              | Headless Component Library |
 | react-icon-cloud               | Interactive Word Cloud     |
+| react-parallax-tilt            | Card parallax effect       |
 | framer-motion                  | Animation Framework        |
 | react-intersection-observer    | Intersection Observer API  |
 | sharp                          | Image Optimizer for Web    |

package-lock.json

@@ -19,12 +19,13 @@
     "@svgr/webpack": "^8.1.0",
     "blobity": "^0.2.3",
     "framer-motion": "^11.3.29",
-    "next": "14.1.4",
+    "next": "^14.2.12",
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "react-icon-cloud": "^4.1.4",
     "react-intersection-observer": "^9.13.0",
+    "react-parallax-tilt": "^1.7.239",
     "sharp": "^0.33.5"
   },
   "devDependencies": {

package.json

@@ -10,6 +10,8 @@ import { faBox } from "@fortawesome/free-solid-svg-icons";
 import React, { ReactNode } from 'react';
 import AnimatedTitle from "@/world/effects/animatedTitle";
 import AnimatedBody from "@/world/effects/animatedBody";
+import Tilt from 'react-parallax-tilt';
+import { useEffect, useState } from "react";
 
 
 // █▀█ █▀█ █▀█ ░░█ █▀▀ █▀▀ ▀█▀   █▀▀ ▄▀█ █▀█ █▀▄
@@ -24,17 +26,47 @@ type ProjectCardProps = {
 };
 
 const ProjectCard = ({ img, head, body, techs, children }: ProjectCardProps) => {
+  const [tiltEnable, setTiltEnable] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 1024) {
+        setTiltEnable(true);
+      } else {
+        setTiltEnable(false);
+      }
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
-    <div className="max-w-lg bg-white border border-gray-200 rounded-lg shadow dark:bg-[#161D1F] dark:border-gray-700">
-      <img className="rounded-t-lg" src={img} alt="" />
-      <div className="p-5">
+    <Tilt
+      tiltEnable={tiltEnable}
+      perspective={1000}
+      // scale={1.05}
+      transitionSpeed={2000}
+      style={{ transformStyle: 'preserve-3d' }}
+      className="group max-w-lg bg-white border border-gray-200 rounded-lg shadow dark:bg-[#161D1F] dark:border-gray-700"
+    >
+      <div className="rounded-t-lg overflow-hidden">
+        <img className="group-hover:scale-110 transition duration-500" src={img} alt="" />
+      </div>
 
-        <AnimatedTitle text={`${head}`} />
+      <div className="p-5" style={{ transformStyle: 'preserve-3d' }}>
+        <div className="px-2" style={{transform: "translateZ(3rem)"}}>
+          <AnimatedTitle text={`${head}`} />
+        </div>
         <AnimatedBody text={`${body}`} />
 
         {/* TECHNOLOGIES */}
         {techs && (
-          <ul className="gap-3 flex flex-wrap max-w-md text-gray-500 dark:text-gray-400">
+          <ul style={{transform: "translateZ(2rem)"}} className="gap-3 flex flex-wrap max-w-md text-gray-500 dark:text-gray-400">
             {techs.map((tech, index) => (
               <li key={index} className="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs rounded-lg border border-gray-500 px-2.5 py-1">
                 {tech}
@@ -43,9 +75,11 @@ const ProjectCard = ({ img, head, body, techs, children }: ProjectCardProps) =>
           </ul>
         )}
         {/* BUTTONS */}
-        { children }
+        <div className="px-3 pb-3" style={{transform: "translateZ(4rem)"}}>
+          { children }
+        </div>
       </div>
-    </div>
+    </Tilt>
   );
 };