Add three.js dep, update page transition animation

src/web/package-lock.json

@@ -13,7 +13,8 @@
         "next-themes": "^0.3.0",
         "react": "^18",
         "react-dom": "^18",
-        "react-icons": "^5.0.1"
+        "react-icons": "^5.0.1",
+        "three": "^0.162.0"
       },
       "devDependencies": {
         "autoprefixer": "^10.4.18",
@@ -4516,6 +4517,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.162.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.162.0.tgz",
+      "integrity": "sha512-xfCYj4RnlozReCmUd+XQzj6/5OjDNHBy5nT6rVwrOKGENAvpXe2z1jL+DZYaMu4/9pNsjH/4Os/VvS9IrH7IOQ=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

src/web/package.json

@@ -14,7 +14,8 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.0.1"
+    "react-icons": "^5.0.1",
+    "three": "^0.162.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.18",

src/web/src/components/transitions.jsx

@@ -4,13 +4,12 @@ import { motion } from "framer-motion";
 
 const PageTransition = ({ children }) => (
   <motion.div
-    initial={{ x: 300, opacity: 0 }}
-    animate={{ x: 0, opacity: 1 }}
-    exit={{ x: 300, opacity: 0 }}
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 1 }}
+    exit={{ opacity: 0 }}
     transition={{
-      type: "spring",
-      stiffness: 260,
-      damping: 20,
+      type: "tween",
+      duration: 0.5, // You can adjust the duration as needed
     }}
   >
     {children}