diff --git a/package-lock.json b/package-lock.json
index 05aff34..9816c24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,14 @@
       "name": "project-share-web",
       "version": "0.0.0",
       "dependencies": {
+        "@pixi/react": "^7.1.1",
+        "@react-hook/window-size": "^3.1.1",
         "framer-motion": "^10.16.0",
+        "pixi.js": "^7.3.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.14.1",
+        "react-use": "^17.4.0",
         "styled-components": "^6.0.1"
       },
       "devDependencies": {
@@ -2518,6 +2522,435 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pixi/accessibility": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/accessibility/-/accessibility-7.3.2.tgz",
+      "integrity": "sha512-MdkU22HTauRvq9cMeWZIQGaDDa86sr+m12rKNdLV+FaDQgP/AhP+qCVpK7IKeJa9BrWGXaYMw/vueij7HkyDSA==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2",
+        "@pixi/events": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/app": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/app/-/app-7.3.2.tgz",
+      "integrity": "sha512-3YRFSMvAxDebAz3/JJv+2jzbPkT8cHC0IHmmLRN8krDL1pZV+YjMLgMwN/Oeyv5TSbwNqnrF5su5whNkRaxeZQ==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/assets": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/assets/-/assets-7.3.2.tgz",
+      "integrity": "sha512-yteq6ptAxA09EcwU9D9hl7qr5yWIqy+c2PsXkTDkc76vTAwIamLY3KxLq2aR5y1U4L4O6aHFJd26uNhHcuTPmw==",
+      "dependencies": {
+        "@types/css-font-loading-module": "^0.0.7"
+      },
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/utils": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/color": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/color/-/color-7.3.2.tgz",
+      "integrity": "sha512-jur5PvdOtUBEUTjmPudW5qdQq6yYGlVGsi3HyhasJw14bN+GKJwiCKgIsyrsiNL5HBUXmje4ICwQohf6BqKqxA==",
+      "dependencies": {
+        "@pixi/colord": "^2.9.6"
+      }
+    },
+    "node_modules/@pixi/colord": {
+      "version": "2.9.6",
+      "resolved": "https://registry.npmjs.org/@pixi/colord/-/colord-2.9.6.tgz",
+      "integrity": "sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA=="
+    },
+    "node_modules/@pixi/compressed-textures": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/compressed-textures/-/compressed-textures-7.3.2.tgz",
+      "integrity": "sha512-J3ENMHDPQO6CJRei55gqI0WmiZJIK6SgsW5AEkShT0aAe5miEBSomv70pXw/58ru+4/Hx8cXjamsGt4aQB2D0Q==",
+      "peerDependencies": {
+        "@pixi/assets": "7.3.2",
+        "@pixi/core": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/constants": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-7.3.2.tgz",
+      "integrity": "sha512-Q8W3ncsFxmfgC5EtokpG92qJZabd+Dl+pbQAdHwiPY3v+8UNq77u4VN2qtl1Z04864hCcg7AStIYEDrzqTLF6Q=="
+    },
+    "node_modules/@pixi/core": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/core/-/core-7.3.2.tgz",
+      "integrity": "sha512-Pta3ee8MtJ3yKxGXzglBWgwbEOKMB6Eth+FpLTjL0rgxiqTB550YX6jsNEQQAzcGjCBlO3rC/IF57UZ2go/X6w==",
+      "dependencies": {
+        "@pixi/color": "7.3.2",
+        "@pixi/constants": "7.3.2",
+        "@pixi/extensions": "7.3.2",
+        "@pixi/math": "7.3.2",
+        "@pixi/runner": "7.3.2",
+        "@pixi/settings": "7.3.2",
+        "@pixi/ticker": "7.3.2",
+        "@pixi/utils": "7.3.2",
+        "@types/offscreencanvas": "^2019.6.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/pixijs"
+      }
+    },
+    "node_modules/@pixi/display": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/display/-/display-7.3.2.tgz",
+      "integrity": "sha512-cY5AnZ3TWt5GYGx4e5AQ2/2U9kP+RorBg/O30amJ+8e9bFk9rS8cjh/DDq/hc4lql96BkXAInTl40eHnAML5lQ==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/events": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/events/-/events-7.3.2.tgz",
+      "integrity": "sha512-Moca9epu8jk1wIQCdVYjhz2pD9Ol21m50wvWUKvpgt9yM/AjkCLSDt8HO/PmTpavDrkhx5pVVWeDDA6FyUNaGA==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/extensions": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/extensions/-/extensions-7.3.2.tgz",
+      "integrity": "sha512-Qw84ADfvmVu4Mwj+zTik/IEEK9lWS5n4trbrpQCcEZ+Mb8oRAXWvKz199mi1s7+LaZXDqeCY1yr2PHQaFf1KBA=="
+    },
+    "node_modules/@pixi/extract": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/extract/-/extract-7.3.2.tgz",
+      "integrity": "sha512-KsoflvQZV/XD8A8xbtRnmI4reYekbI4MOi7ilwQe5tMz6O1mO7IzrSukxkSMD02f6SpbAqbi7a1EayTjvY0ECQ==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/filter-alpha": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-alpha/-/filter-alpha-7.3.2.tgz",
+      "integrity": "sha512-nZMdn310wH5ZK1slwv3X4qT8eLoAGO7SgYGCy5IsMtpCtNObzE9XA4tAfhXrjihyzPS9KvszgAbnv1Qpfh0/uw==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/filter-blur": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-blur/-/filter-blur-7.3.2.tgz",
+      "integrity": "sha512-unu3zhwHMhN+iAe7Td2rK40i2UJ2GOhzWK+6jcU3ZkMOsFCT5kgBoMRTejeQVcvCs6GoYK8imbkE7mXt05Vj6A==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/filter-color-matrix": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-color-matrix/-/filter-color-matrix-7.3.2.tgz",
+      "integrity": "sha512-rbyjes/9SMoV9jjPiK0sLMkmLfN8D17GoTJIfq/KLv1x9646W5fL2QSKkN04UkZ+020ndWvIOxK1S97tvRyCfg==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/filter-displacement": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-displacement/-/filter-displacement-7.3.2.tgz",
+      "integrity": "sha512-ZHl7Sfb8JYd9Z6j96OHCC0NhMKhhXJRE5AbkSDohjEMVCK1BV5rDGAHV8WVt/2MJ/j83CXUpydzyMhdM4lMchg==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/filter-fxaa": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-fxaa/-/filter-fxaa-7.3.2.tgz",
+      "integrity": "sha512-9brtlxDnQTZk2XiFBKdBK9e+8CX9LdxxcL7LRpjEyiHuAPvTlQgu9B85LrJ4GzWKqJJKaIIZBzhIoiCLUnfeXg==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/filter-noise": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-noise/-/filter-noise-7.3.2.tgz",
+      "integrity": "sha512-F8GQQ20n7tCjThX6GCXckiXz2YffOCxicTJ0oat9aVDZh+sVsAxYX0aKSdHh0hhv18F0yuc6tPsSL5DYb63xFg==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/graphics": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/graphics/-/graphics-7.3.2.tgz",
+      "integrity": "sha512-PhU6j1yub4tH/s+/gqByzgZ3mLv1mfb6iGXbquycg3+WypcxHZn0opFtI/axsazaQ9SEaWxw1m3i40WG5ANH5g==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2",
+        "@pixi/sprite": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/math": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/math/-/math-7.3.2.tgz",
+      "integrity": "sha512-dutoZ0IVJ5ME7UtYNo2szu4D7qsgtJB7e3ylujBVu7BOP2e710BVtFwFSFV768N14h9H5roGnuzVoDiJac2u+w=="
+    },
+    "node_modules/@pixi/mesh": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mesh/-/mesh-7.3.2.tgz",
+      "integrity": "sha512-LFkt7ELYXQLgbgHpjl68j6JD5ejUwma8zoPn2gqSBbY+6pK/phjvV1Wkh76muF46VvNulgXF0+qLIDdCsfrDaA==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/mesh-extras": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mesh-extras/-/mesh-extras-7.3.2.tgz",
+      "integrity": "sha512-s/tg9TsTZZxLEdCDKWnBChDGkc041HCTP7ykJv4fEROzb9B0lskULYyvv+/YNNKa2Ugb9WnkMknpOdOXCpjyyg==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/mesh": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/mixin-cache-as-bitmap": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mixin-cache-as-bitmap/-/mixin-cache-as-bitmap-7.3.2.tgz",
+      "integrity": "sha512-bZRlyUN5+9kCUjn67V0IFtYIrbmx9Vs4sMOmXyrX3Q4B4gPLE46IzZz3v0IVaTjp32udlQztfJalIaWbuqgb3A==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2",
+        "@pixi/sprite": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/mixin-get-child-by-name": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mixin-get-child-by-name/-/mixin-get-child-by-name-7.3.2.tgz",
+      "integrity": "sha512-mbUi3WxXrkViH7qOgjk4fu2BN36NwNb7u+Fy1J5dS8Bntj57ZVKmEV9PbUy0zYjXE8rVmeAvSu/2kbn5n9UutQ==",
+      "peerDependencies": {
+        "@pixi/display": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/mixin-get-global-position": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mixin-get-global-position/-/mixin-get-global-position-7.3.2.tgz",
+      "integrity": "sha512-1nhWbBgmw6rK7yQJxzeI9yjKYYEkM5i3pee8qVu4YWo3b1xWVQA7osQG7aGM/4qywDkXaA1ZvciA5hfg6f4Q5Q==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/particle-container": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/particle-container/-/particle-container-7.3.2.tgz",
+      "integrity": "sha512-JYc4j4z97KmxyLp+1Lg0SNi8hy6RxcBBNQGk+CSLNXeDWxx3hykT5gj/ORX1eXyzHh1ZCG1XzeVS9Yr8QhlFHA==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2",
+        "@pixi/sprite": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/prepare": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/prepare/-/prepare-7.3.2.tgz",
+      "integrity": "sha512-aLPAXSYLUhMwxzJtn9m0TSZe+dQlZCt09QNBqYbSi8LZId54QMDyvfBb4zBOJZrD2xAZgYL5RIJuKHwZtFX6lQ==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2",
+        "@pixi/graphics": "7.3.2",
+        "@pixi/text": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/react": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@pixi/react/-/react-7.1.1.tgz",
+      "integrity": "sha512-W3LILsYiUxavrLoDGiIuQneFgSzsUuHkt6VVuAaqUPEGjMBzicgA5v5R2dPDmu3B+5BRwAHcJZttUKH7zFjbGw==",
+      "dependencies": {
+        "lodash.isnil": "4.0.0",
+        "lodash.times": "4.3.2",
+        "performance-now": "2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "^7.14.8",
+        "@pixi/app": ">=6.0.0",
+        "@pixi/constants": ">=6.0.0",
+        "@pixi/core": ">=6.0.0",
+        "@pixi/display": ">=6.0.0",
+        "@pixi/extensions": ">=6.0.0",
+        "@pixi/graphics": ">=6.0.0",
+        "@pixi/math": ">=6.0.0",
+        "@pixi/mesh": ">=6.0.0",
+        "@pixi/mesh-extras": ">=6.0.0",
+        "@pixi/particle-container": ">=6.0.0",
+        "@pixi/sprite": ">=6.0.0",
+        "@pixi/sprite-animated": ">=6.0.0",
+        "@pixi/sprite-tiling": ">=6.0.0",
+        "@pixi/text": ">=6.0.0",
+        "@pixi/text-bitmap": ">=6.0.0",
+        "@pixi/ticker": ">=6.0.0",
+        "prop-types": "^15.8.1",
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
+    "node_modules/@pixi/runner": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/runner/-/runner-7.3.2.tgz",
+      "integrity": "sha512-maKotoKJCQiQGBJwfM+iYdQKjrPN/Tn9+72F4WIf706zp/5vKoxW688Rsktg5BX4Mcn7ZkZvcJYTxj2Mv87lFA=="
+    },
+    "node_modules/@pixi/settings": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/settings/-/settings-7.3.2.tgz",
+      "integrity": "sha512-vtxzuARDTbFe0fRYSqB53B+mPpX7v+QjjnCUmVMVvZiWr3QcngMWVml6c6dQDln7IakWoKZRrNG4FpggvDgLVg==",
+      "dependencies": {
+        "@pixi/constants": "7.3.2",
+        "@types/css-font-loading-module": "^0.0.7",
+        "ismobilejs": "^1.1.0"
+      }
+    },
+    "node_modules/@pixi/sprite": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-7.3.2.tgz",
+      "integrity": "sha512-IpWTKXExJNXVcY7ITopJ+JW48DahdbCo/81D2IYzBImq3jyiJM2Km5EoJgvAM5ZQ3Ev3KPPIBzYLD+HoPWcxdw==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/sprite-animated": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/sprite-animated/-/sprite-animated-7.3.2.tgz",
+      "integrity": "sha512-j9pyUe4cefxE9wecNfbWQyL5fBQKvCGYaOA0DE1X46ukBHrIuhA8u3jg2X3N3r4IcbVvxpWFYDrDsWXWeiBmSw==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/sprite": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/sprite-tiling": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/sprite-tiling/-/sprite-tiling-7.3.2.tgz",
+      "integrity": "sha512-tWVVb/rMIx5AczfUrVxa0dZaIufP5C0IOL7IGfFUDQqDu5JSAUC0mwLe4F12jAXBVsqYhCGYx5bIHbPiI5vcSQ==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2",
+        "@pixi/sprite": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/spritesheet": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/spritesheet/-/spritesheet-7.3.2.tgz",
+      "integrity": "sha512-UkwqrPYDqrEdK5ub9qn/9VBvt5caA8ffV5iYR6ssCvrpaQovBKmS+b5pr/BYf8xNTExDpR3OmPIo8iDEYWWLuw==",
+      "peerDependencies": {
+        "@pixi/assets": "7.3.2",
+        "@pixi/core": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/text": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/text/-/text-7.3.2.tgz",
+      "integrity": "sha512-LdtNj+K5tPB/0UcDcO52M/C7xhwFTGFhtdF42fPhRuJawM23M3zm1Y8PapXv+mury+IxCHT1w30YlAi0qTVpKQ==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/sprite": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/text-bitmap": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/text-bitmap/-/text-bitmap-7.3.2.tgz",
+      "integrity": "sha512-p8KLgtZSPowWU/Zj+GVtfsUT8uGYo4TtKKYbLoWuxkRA5Pc1+4C9/rV/EOSFfoZIdW5C+iFg5VxRgBllUQf+aA==",
+      "peerDependencies": {
+        "@pixi/assets": "7.3.2",
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2",
+        "@pixi/mesh": "7.3.2",
+        "@pixi/text": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/text-html": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/text-html/-/text-html-7.3.2.tgz",
+      "integrity": "sha512-IYhBWEPOvqUtlHkS5/c1Hseuricj5jrrGd21ivcvHmcnK/x2m+CRGvvzeBp1mqoYBnDbQVrD2wSXSe4Dv9tEJA==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2",
+        "@pixi/sprite": "7.3.2",
+        "@pixi/text": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/ticker": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/ticker/-/ticker-7.3.2.tgz",
+      "integrity": "sha512-5kIPhBeXwDJohCzKzJJ6T7f1oAGbHAgeiwOjlTO+9lNXUX8ZPj0407V3syuF+64kFqJzIBCznBRpI+fmT4c9SA==",
+      "dependencies": {
+        "@pixi/extensions": "7.3.2",
+        "@pixi/settings": "7.3.2",
+        "@pixi/utils": "7.3.2"
+      }
+    },
+    "node_modules/@pixi/utils": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/utils/-/utils-7.3.2.tgz",
+      "integrity": "sha512-KhNvj9YcY7Zi2dTKZgDpx8C6OxKKR541vwtG6JgdBZZYDeMBOIghN2Vi5zn4diW5BhDfHBmdSJ1wZXEtE2MDwg==",
+      "dependencies": {
+        "@pixi/color": "7.3.2",
+        "@pixi/constants": "7.3.2",
+        "@pixi/settings": "7.3.2",
+        "@types/earcut": "^2.1.0",
+        "earcut": "^2.2.4",
+        "eventemitter3": "^4.0.0",
+        "url": "^0.11.0"
+      }
+    },
+    "node_modules/@react-hook/debounce": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-hook/debounce/-/debounce-3.0.0.tgz",
+      "integrity": "sha512-ir/kPrSfAzY12Gre0sOHkZ2rkEmM4fS5M5zFxCi4BnCeXh2nvx9Ujd+U4IGpKCuPA+EQD0pg1eK2NGLvfWejag==",
+      "dependencies": {
+        "@react-hook/latest": "^1.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/@react-hook/event": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@react-hook/event/-/event-1.2.6.tgz",
+      "integrity": "sha512-JUL5IluaOdn5w5Afpe/puPa1rj8X6udMlQ9dt4hvMuKmTrBS1Ya6sb4sVgvfe2eU4yDuOfAhik8xhbcCekbg9Q==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/@react-hook/latest": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@react-hook/latest/-/latest-1.0.3.tgz",
+      "integrity": "sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/@react-hook/throttle": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@react-hook/throttle/-/throttle-2.2.0.tgz",
+      "integrity": "sha512-LJ5eg+yMV8lXtqK3lR+OtOZ2WH/EfWvuiEEu0M3bhR7dZRfTyEJKxH1oK9uyBxiXPtWXiQggWbZirMCXam51tg==",
+      "dependencies": {
+        "@react-hook/latest": "^1.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/@react-hook/window-size": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@react-hook/window-size/-/window-size-3.1.1.tgz",
+      "integrity": "sha512-yWnVS5LKnOUIrEsI44oz3bIIUYqflamPL27n+k/PC//PsX/YeWBky09oPeAoc9As6jSH16Wgo8plI+ECZaHk3g==",
+      "dependencies": {
+        "@react-hook/debounce": "^3.0.0",
+        "@react-hook/event": "^1.2.1",
+        "@react-hook/throttle": "^2.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.1.tgz",
@@ -2720,6 +3153,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/@types/css-font-loading-module": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz",
+      "integrity": "sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q=="
+    },
+    "node_modules/@types/earcut": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@types/earcut/-/earcut-2.1.4.tgz",
+      "integrity": "sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ=="
+    },
+    "node_modules/@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -2732,6 +3180,11 @@
       "integrity": "sha512-jfT7iTf/4kOQ9S7CHV9BIyRaQqHu67mOjsIQBC3BKZvzvUB6zLxEwJ6sBE3ozcvP8kF6Uk5PXN0Q+c0dfhGX0g==",
       "dev": true
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -2975,6 +3428,11 @@
         "vite": "^4"
       }
     },
+    "node_modules/@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
+    },
     "node_modules/acorn": {
       "version": "8.9.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.9.0.tgz",
@@ -3174,6 +3632,19 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/call-bind": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
+      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.1",
+        "set-function-length": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -3301,6 +3772,14 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.31.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.31.0.tgz",
@@ -3335,6 +3814,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
     "node_modules/css-to-react-native": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
@@ -3345,6 +3832,18 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -3372,6 +3871,19 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
+      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -3396,11 +3908,24 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.447",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.447.tgz",
       "integrity": "sha512-sxX0LXh+uL41hSJsujAN86PjhrV/6c79XmpY0TvjZStV6VxIgarf8SRkUoUTuYmFcZQTemsoqo8qXOGw5npWfw=="
     },
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
@@ -3661,11 +4186,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.3.0",
@@ -3707,6 +4236,21 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fast-loops": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+    },
+    "node_modules/fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "node_modules/fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
+    },
     "node_modules/fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -3842,9 +4386,12 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
@@ -3854,6 +4401,20 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
+      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "dependencies": {
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -3920,6 +4481,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/grapheme-splitter": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
@@ -3952,6 +4524,55 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
+      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -4000,6 +4621,15 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz",
+      "integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==",
+      "dependencies": {
+        "css-in-js-utils": "^3.1.0",
+        "fast-loops": "^1.1.3"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -4068,6 +4698,16 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/ismobilejs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz",
+      "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw=="
+    },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4152,12 +4792,22 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.isnil": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnil/-/lodash.isnil-4.0.0.tgz",
+      "integrity": "sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.times": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/lodash.times/-/lodash.times-4.3.2.tgz",
+      "integrity": "sha512-FfaJzl0SA35CRPDh5SWe2BTght6y5KSK7yJv166qIp/8q7qOwBDCvuDZE2RUSMRpBkLF6rZKbLEUoTmaP3qg6A=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -4201,6 +4851,11 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4239,6 +4894,25 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/nano-css": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz",
+      "integrity": "sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==",
+      "dependencies": {
+        "css-tree": "^1.1.2",
+        "csstype": "^3.0.6",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^6.0.0",
+        "rtl-css-js": "^1.14.0",
+        "sourcemap-codec": "^1.4.8",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.0.6"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -4282,6 +4956,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -4389,6 +5079,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -4414,6 +5109,47 @@
         "node": ">=6"
       }
     },
+    "node_modules/pixi.js": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-7.3.2.tgz",
+      "integrity": "sha512-GJickUrT3UcBInGT1CU6cv2oktCdocE5QM74CD3t+weiJPPWIzleNlp7zrBR5QIDdU6bEO8CUgUXH2Y9QvlCMw==",
+      "dependencies": {
+        "@pixi/accessibility": "7.3.2",
+        "@pixi/app": "7.3.2",
+        "@pixi/assets": "7.3.2",
+        "@pixi/compressed-textures": "7.3.2",
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2",
+        "@pixi/events": "7.3.2",
+        "@pixi/extensions": "7.3.2",
+        "@pixi/extract": "7.3.2",
+        "@pixi/filter-alpha": "7.3.2",
+        "@pixi/filter-blur": "7.3.2",
+        "@pixi/filter-color-matrix": "7.3.2",
+        "@pixi/filter-displacement": "7.3.2",
+        "@pixi/filter-fxaa": "7.3.2",
+        "@pixi/filter-noise": "7.3.2",
+        "@pixi/graphics": "7.3.2",
+        "@pixi/mesh": "7.3.2",
+        "@pixi/mesh-extras": "7.3.2",
+        "@pixi/mixin-cache-as-bitmap": "7.3.2",
+        "@pixi/mixin-get-child-by-name": "7.3.2",
+        "@pixi/mixin-get-global-position": "7.3.2",
+        "@pixi/particle-container": "7.3.2",
+        "@pixi/prepare": "7.3.2",
+        "@pixi/sprite": "7.3.2",
+        "@pixi/sprite-animated": "7.3.2",
+        "@pixi/sprite-tiling": "7.3.2",
+        "@pixi/spritesheet": "7.3.2",
+        "@pixi/text": "7.3.2",
+        "@pixi/text-bitmap": "7.3.2",
+        "@pixi/text-html": "7.3.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/pixijs"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.24",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
@@ -4455,6 +5191,16 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -4464,6 +5210,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
+      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -4507,6 +5267,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-router": {
       "version": "6.14.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.1.tgz",
@@ -4537,6 +5302,45 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "peerDependencies": {
+        "react": "*",
+        "tslib": "*"
+      }
+    },
+    "node_modules/react-use": {
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz",
+      "integrity": "sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==",
+      "dependencies": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.3.1",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-use/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4613,6 +5417,11 @@
         "jsesc": "bin/jsesc"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -4679,6 +5488,14 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4710,6 +5527,17 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/semver": {
       "version": "7.5.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
@@ -4725,6 +5553,28 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
+      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "dependencies": {
+        "define-data-property": "^1.1.1",
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
+      "engines": {
+        "node": ">=6.9"
+      }
+    },
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -4751,6 +5601,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4760,6 +5623,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -4768,6 +5639,52 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
+    },
+    "node_modules/stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+    },
+    "node_modules/stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "dependencies": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stacktrace-gps/node_modules/source-map": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+      "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "dependencies": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -4874,6 +5791,14 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -4894,11 +5819,20 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
+    "node_modules/ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
+    },
     "node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -5026,6 +5960,20 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.3.tgz",
+      "integrity": "sha512-6hxOLGfZASQK/cijlZnZJTq8OXAkt/3YGfQX45vvMYXpZoo8NdWZcY73K108Jf759lS1Bv/8wXnHDTSz17dSRw==",
+      "dependencies": {
+        "punycode": "^1.4.1",
+        "qs": "^6.11.2"
+      }
+    },
+    "node_modules/url/node_modules/punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
+    },
     "node_modules/vite": {
       "version": "4.3.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz",
@@ -6737,6 +7685,308 @@
         "fastq": "^1.6.0"
       }
     },
+    "@pixi/accessibility": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/accessibility/-/accessibility-7.3.2.tgz",
+      "integrity": "sha512-MdkU22HTauRvq9cMeWZIQGaDDa86sr+m12rKNdLV+FaDQgP/AhP+qCVpK7IKeJa9BrWGXaYMw/vueij7HkyDSA==",
+      "requires": {}
+    },
+    "@pixi/app": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/app/-/app-7.3.2.tgz",
+      "integrity": "sha512-3YRFSMvAxDebAz3/JJv+2jzbPkT8cHC0IHmmLRN8krDL1pZV+YjMLgMwN/Oeyv5TSbwNqnrF5su5whNkRaxeZQ==",
+      "requires": {}
+    },
+    "@pixi/assets": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/assets/-/assets-7.3.2.tgz",
+      "integrity": "sha512-yteq6ptAxA09EcwU9D9hl7qr5yWIqy+c2PsXkTDkc76vTAwIamLY3KxLq2aR5y1U4L4O6aHFJd26uNhHcuTPmw==",
+      "requires": {
+        "@types/css-font-loading-module": "^0.0.7"
+      }
+    },
+    "@pixi/color": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/color/-/color-7.3.2.tgz",
+      "integrity": "sha512-jur5PvdOtUBEUTjmPudW5qdQq6yYGlVGsi3HyhasJw14bN+GKJwiCKgIsyrsiNL5HBUXmje4ICwQohf6BqKqxA==",
+      "requires": {
+        "@pixi/colord": "^2.9.6"
+      }
+    },
+    "@pixi/colord": {
+      "version": "2.9.6",
+      "resolved": "https://registry.npmjs.org/@pixi/colord/-/colord-2.9.6.tgz",
+      "integrity": "sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA=="
+    },
+    "@pixi/compressed-textures": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/compressed-textures/-/compressed-textures-7.3.2.tgz",
+      "integrity": "sha512-J3ENMHDPQO6CJRei55gqI0WmiZJIK6SgsW5AEkShT0aAe5miEBSomv70pXw/58ru+4/Hx8cXjamsGt4aQB2D0Q==",
+      "requires": {}
+    },
+    "@pixi/constants": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-7.3.2.tgz",
+      "integrity": "sha512-Q8W3ncsFxmfgC5EtokpG92qJZabd+Dl+pbQAdHwiPY3v+8UNq77u4VN2qtl1Z04864hCcg7AStIYEDrzqTLF6Q=="
+    },
+    "@pixi/core": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/core/-/core-7.3.2.tgz",
+      "integrity": "sha512-Pta3ee8MtJ3yKxGXzglBWgwbEOKMB6Eth+FpLTjL0rgxiqTB550YX6jsNEQQAzcGjCBlO3rC/IF57UZ2go/X6w==",
+      "requires": {
+        "@pixi/color": "7.3.2",
+        "@pixi/constants": "7.3.2",
+        "@pixi/extensions": "7.3.2",
+        "@pixi/math": "7.3.2",
+        "@pixi/runner": "7.3.2",
+        "@pixi/settings": "7.3.2",
+        "@pixi/ticker": "7.3.2",
+        "@pixi/utils": "7.3.2",
+        "@types/offscreencanvas": "^2019.6.4"
+      }
+    },
+    "@pixi/display": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/display/-/display-7.3.2.tgz",
+      "integrity": "sha512-cY5AnZ3TWt5GYGx4e5AQ2/2U9kP+RorBg/O30amJ+8e9bFk9rS8cjh/DDq/hc4lql96BkXAInTl40eHnAML5lQ==",
+      "requires": {}
+    },
+    "@pixi/events": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/events/-/events-7.3.2.tgz",
+      "integrity": "sha512-Moca9epu8jk1wIQCdVYjhz2pD9Ol21m50wvWUKvpgt9yM/AjkCLSDt8HO/PmTpavDrkhx5pVVWeDDA6FyUNaGA==",
+      "requires": {}
+    },
+    "@pixi/extensions": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/extensions/-/extensions-7.3.2.tgz",
+      "integrity": "sha512-Qw84ADfvmVu4Mwj+zTik/IEEK9lWS5n4trbrpQCcEZ+Mb8oRAXWvKz199mi1s7+LaZXDqeCY1yr2PHQaFf1KBA=="
+    },
+    "@pixi/extract": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/extract/-/extract-7.3.2.tgz",
+      "integrity": "sha512-KsoflvQZV/XD8A8xbtRnmI4reYekbI4MOi7ilwQe5tMz6O1mO7IzrSukxkSMD02f6SpbAqbi7a1EayTjvY0ECQ==",
+      "requires": {}
+    },
+    "@pixi/filter-alpha": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-alpha/-/filter-alpha-7.3.2.tgz",
+      "integrity": "sha512-nZMdn310wH5ZK1slwv3X4qT8eLoAGO7SgYGCy5IsMtpCtNObzE9XA4tAfhXrjihyzPS9KvszgAbnv1Qpfh0/uw==",
+      "requires": {}
+    },
+    "@pixi/filter-blur": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-blur/-/filter-blur-7.3.2.tgz",
+      "integrity": "sha512-unu3zhwHMhN+iAe7Td2rK40i2UJ2GOhzWK+6jcU3ZkMOsFCT5kgBoMRTejeQVcvCs6GoYK8imbkE7mXt05Vj6A==",
+      "requires": {}
+    },
+    "@pixi/filter-color-matrix": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-color-matrix/-/filter-color-matrix-7.3.2.tgz",
+      "integrity": "sha512-rbyjes/9SMoV9jjPiK0sLMkmLfN8D17GoTJIfq/KLv1x9646W5fL2QSKkN04UkZ+020ndWvIOxK1S97tvRyCfg==",
+      "requires": {}
+    },
+    "@pixi/filter-displacement": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-displacement/-/filter-displacement-7.3.2.tgz",
+      "integrity": "sha512-ZHl7Sfb8JYd9Z6j96OHCC0NhMKhhXJRE5AbkSDohjEMVCK1BV5rDGAHV8WVt/2MJ/j83CXUpydzyMhdM4lMchg==",
+      "requires": {}
+    },
+    "@pixi/filter-fxaa": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-fxaa/-/filter-fxaa-7.3.2.tgz",
+      "integrity": "sha512-9brtlxDnQTZk2XiFBKdBK9e+8CX9LdxxcL7LRpjEyiHuAPvTlQgu9B85LrJ4GzWKqJJKaIIZBzhIoiCLUnfeXg==",
+      "requires": {}
+    },
+    "@pixi/filter-noise": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-noise/-/filter-noise-7.3.2.tgz",
+      "integrity": "sha512-F8GQQ20n7tCjThX6GCXckiXz2YffOCxicTJ0oat9aVDZh+sVsAxYX0aKSdHh0hhv18F0yuc6tPsSL5DYb63xFg==",
+      "requires": {}
+    },
+    "@pixi/graphics": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/graphics/-/graphics-7.3.2.tgz",
+      "integrity": "sha512-PhU6j1yub4tH/s+/gqByzgZ3mLv1mfb6iGXbquycg3+WypcxHZn0opFtI/axsazaQ9SEaWxw1m3i40WG5ANH5g==",
+      "requires": {}
+    },
+    "@pixi/math": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/math/-/math-7.3.2.tgz",
+      "integrity": "sha512-dutoZ0IVJ5ME7UtYNo2szu4D7qsgtJB7e3ylujBVu7BOP2e710BVtFwFSFV768N14h9H5roGnuzVoDiJac2u+w=="
+    },
+    "@pixi/mesh": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mesh/-/mesh-7.3.2.tgz",
+      "integrity": "sha512-LFkt7ELYXQLgbgHpjl68j6JD5ejUwma8zoPn2gqSBbY+6pK/phjvV1Wkh76muF46VvNulgXF0+qLIDdCsfrDaA==",
+      "requires": {}
+    },
+    "@pixi/mesh-extras": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mesh-extras/-/mesh-extras-7.3.2.tgz",
+      "integrity": "sha512-s/tg9TsTZZxLEdCDKWnBChDGkc041HCTP7ykJv4fEROzb9B0lskULYyvv+/YNNKa2Ugb9WnkMknpOdOXCpjyyg==",
+      "requires": {}
+    },
+    "@pixi/mixin-cache-as-bitmap": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mixin-cache-as-bitmap/-/mixin-cache-as-bitmap-7.3.2.tgz",
+      "integrity": "sha512-bZRlyUN5+9kCUjn67V0IFtYIrbmx9Vs4sMOmXyrX3Q4B4gPLE46IzZz3v0IVaTjp32udlQztfJalIaWbuqgb3A==",
+      "requires": {}
+    },
+    "@pixi/mixin-get-child-by-name": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mixin-get-child-by-name/-/mixin-get-child-by-name-7.3.2.tgz",
+      "integrity": "sha512-mbUi3WxXrkViH7qOgjk4fu2BN36NwNb7u+Fy1J5dS8Bntj57ZVKmEV9PbUy0zYjXE8rVmeAvSu/2kbn5n9UutQ==",
+      "requires": {}
+    },
+    "@pixi/mixin-get-global-position": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mixin-get-global-position/-/mixin-get-global-position-7.3.2.tgz",
+      "integrity": "sha512-1nhWbBgmw6rK7yQJxzeI9yjKYYEkM5i3pee8qVu4YWo3b1xWVQA7osQG7aGM/4qywDkXaA1ZvciA5hfg6f4Q5Q==",
+      "requires": {}
+    },
+    "@pixi/particle-container": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/particle-container/-/particle-container-7.3.2.tgz",
+      "integrity": "sha512-JYc4j4z97KmxyLp+1Lg0SNi8hy6RxcBBNQGk+CSLNXeDWxx3hykT5gj/ORX1eXyzHh1ZCG1XzeVS9Yr8QhlFHA==",
+      "requires": {}
+    },
+    "@pixi/prepare": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/prepare/-/prepare-7.3.2.tgz",
+      "integrity": "sha512-aLPAXSYLUhMwxzJtn9m0TSZe+dQlZCt09QNBqYbSi8LZId54QMDyvfBb4zBOJZrD2xAZgYL5RIJuKHwZtFX6lQ==",
+      "requires": {}
+    },
+    "@pixi/react": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@pixi/react/-/react-7.1.1.tgz",
+      "integrity": "sha512-W3LILsYiUxavrLoDGiIuQneFgSzsUuHkt6VVuAaqUPEGjMBzicgA5v5R2dPDmu3B+5BRwAHcJZttUKH7zFjbGw==",
+      "requires": {
+        "lodash.isnil": "4.0.0",
+        "lodash.times": "4.3.2",
+        "performance-now": "2.1.0",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@pixi/runner": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/runner/-/runner-7.3.2.tgz",
+      "integrity": "sha512-maKotoKJCQiQGBJwfM+iYdQKjrPN/Tn9+72F4WIf706zp/5vKoxW688Rsktg5BX4Mcn7ZkZvcJYTxj2Mv87lFA=="
+    },
+    "@pixi/settings": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/settings/-/settings-7.3.2.tgz",
+      "integrity": "sha512-vtxzuARDTbFe0fRYSqB53B+mPpX7v+QjjnCUmVMVvZiWr3QcngMWVml6c6dQDln7IakWoKZRrNG4FpggvDgLVg==",
+      "requires": {
+        "@pixi/constants": "7.3.2",
+        "@types/css-font-loading-module": "^0.0.7",
+        "ismobilejs": "^1.1.0"
+      }
+    },
+    "@pixi/sprite": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-7.3.2.tgz",
+      "integrity": "sha512-IpWTKXExJNXVcY7ITopJ+JW48DahdbCo/81D2IYzBImq3jyiJM2Km5EoJgvAM5ZQ3Ev3KPPIBzYLD+HoPWcxdw==",
+      "requires": {}
+    },
+    "@pixi/sprite-animated": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/sprite-animated/-/sprite-animated-7.3.2.tgz",
+      "integrity": "sha512-j9pyUe4cefxE9wecNfbWQyL5fBQKvCGYaOA0DE1X46ukBHrIuhA8u3jg2X3N3r4IcbVvxpWFYDrDsWXWeiBmSw==",
+      "requires": {}
+    },
+    "@pixi/sprite-tiling": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/sprite-tiling/-/sprite-tiling-7.3.2.tgz",
+      "integrity": "sha512-tWVVb/rMIx5AczfUrVxa0dZaIufP5C0IOL7IGfFUDQqDu5JSAUC0mwLe4F12jAXBVsqYhCGYx5bIHbPiI5vcSQ==",
+      "requires": {}
+    },
+    "@pixi/spritesheet": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/spritesheet/-/spritesheet-7.3.2.tgz",
+      "integrity": "sha512-UkwqrPYDqrEdK5ub9qn/9VBvt5caA8ffV5iYR6ssCvrpaQovBKmS+b5pr/BYf8xNTExDpR3OmPIo8iDEYWWLuw==",
+      "requires": {}
+    },
+    "@pixi/text": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/text/-/text-7.3.2.tgz",
+      "integrity": "sha512-LdtNj+K5tPB/0UcDcO52M/C7xhwFTGFhtdF42fPhRuJawM23M3zm1Y8PapXv+mury+IxCHT1w30YlAi0qTVpKQ==",
+      "requires": {}
+    },
+    "@pixi/text-bitmap": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/text-bitmap/-/text-bitmap-7.3.2.tgz",
+      "integrity": "sha512-p8KLgtZSPowWU/Zj+GVtfsUT8uGYo4TtKKYbLoWuxkRA5Pc1+4C9/rV/EOSFfoZIdW5C+iFg5VxRgBllUQf+aA==",
+      "requires": {}
+    },
+    "@pixi/text-html": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/text-html/-/text-html-7.3.2.tgz",
+      "integrity": "sha512-IYhBWEPOvqUtlHkS5/c1Hseuricj5jrrGd21ivcvHmcnK/x2m+CRGvvzeBp1mqoYBnDbQVrD2wSXSe4Dv9tEJA==",
+      "requires": {}
+    },
+    "@pixi/ticker": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/ticker/-/ticker-7.3.2.tgz",
+      "integrity": "sha512-5kIPhBeXwDJohCzKzJJ6T7f1oAGbHAgeiwOjlTO+9lNXUX8ZPj0407V3syuF+64kFqJzIBCznBRpI+fmT4c9SA==",
+      "requires": {
+        "@pixi/extensions": "7.3.2",
+        "@pixi/settings": "7.3.2",
+        "@pixi/utils": "7.3.2"
+      }
+    },
+    "@pixi/utils": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@pixi/utils/-/utils-7.3.2.tgz",
+      "integrity": "sha512-KhNvj9YcY7Zi2dTKZgDpx8C6OxKKR541vwtG6JgdBZZYDeMBOIghN2Vi5zn4diW5BhDfHBmdSJ1wZXEtE2MDwg==",
+      "requires": {
+        "@pixi/color": "7.3.2",
+        "@pixi/constants": "7.3.2",
+        "@pixi/settings": "7.3.2",
+        "@types/earcut": "^2.1.0",
+        "earcut": "^2.2.4",
+        "eventemitter3": "^4.0.0",
+        "url": "^0.11.0"
+      }
+    },
+    "@react-hook/debounce": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-hook/debounce/-/debounce-3.0.0.tgz",
+      "integrity": "sha512-ir/kPrSfAzY12Gre0sOHkZ2rkEmM4fS5M5zFxCi4BnCeXh2nvx9Ujd+U4IGpKCuPA+EQD0pg1eK2NGLvfWejag==",
+      "requires": {
+        "@react-hook/latest": "^1.0.2"
+      }
+    },
+    "@react-hook/event": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@react-hook/event/-/event-1.2.6.tgz",
+      "integrity": "sha512-JUL5IluaOdn5w5Afpe/puPa1rj8X6udMlQ9dt4hvMuKmTrBS1Ya6sb4sVgvfe2eU4yDuOfAhik8xhbcCekbg9Q==",
+      "requires": {}
+    },
+    "@react-hook/latest": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@react-hook/latest/-/latest-1.0.3.tgz",
+      "integrity": "sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==",
+      "requires": {}
+    },
+    "@react-hook/throttle": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@react-hook/throttle/-/throttle-2.2.0.tgz",
+      "integrity": "sha512-LJ5eg+yMV8lXtqK3lR+OtOZ2WH/EfWvuiEEu0M3bhR7dZRfTyEJKxH1oK9uyBxiXPtWXiQggWbZirMCXam51tg==",
+      "requires": {
+        "@react-hook/latest": "^1.0.2"
+      }
+    },
+    "@react-hook/window-size": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@react-hook/window-size/-/window-size-3.1.1.tgz",
+      "integrity": "sha512-yWnVS5LKnOUIrEsI44oz3bIIUYqflamPL27n+k/PC//PsX/YeWBky09oPeAoc9As6jSH16Wgo8plI+ECZaHk3g==",
+      "requires": {
+        "@react-hook/debounce": "^3.0.0",
+        "@react-hook/event": "^1.2.1",
+        "@react-hook/throttle": "^2.2.0"
+      }
+    },
     "@remix-run/router": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.1.tgz",
@@ -6830,6 +8080,21 @@
       "dev": true,
       "optional": true
     },
+    "@types/css-font-loading-module": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz",
+      "integrity": "sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q=="
+    },
+    "@types/earcut": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@types/earcut/-/earcut-2.1.4.tgz",
+      "integrity": "sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ=="
+    },
+    "@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
     "@types/json-schema": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -6842,6 +8107,11 @@
       "integrity": "sha512-jfT7iTf/4kOQ9S7CHV9BIyRaQqHu67mOjsIQBC3BKZvzvUB6zLxEwJ6sBE3ozcvP8kF6Uk5PXN0Q+c0dfhGX0g==",
       "dev": true
     },
+    "@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A=="
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -6993,6 +8263,11 @@
         "@swc/core": "^1.3.61"
       }
     },
+    "@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
+    },
     "acorn": {
       "version": "8.9.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.9.0.tgz",
@@ -7129,6 +8404,16 @@
         "update-browserslist-db": "^1.0.11"
       }
     },
+    "call-bind": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
+      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "requires": {
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.1",
+        "set-function-length": "^1.1.1"
+      }
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -7212,6 +8497,14 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
+    "copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "core-js-compat": {
       "version": "3.31.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.31.0.tgz",
@@ -7236,6 +8529,14 @@
       "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
       "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
     },
+    "css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
     "css-to-react-native": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
@@ -7246,6 +8547,15 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "requires": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      }
+    },
     "csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -7265,6 +8575,16 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "define-data-property": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
+      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "requires": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      }
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -7283,11 +8603,24 @@
         "esutils": "^2.0.2"
       }
     },
+    "earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "electron-to-chromium": {
       "version": "1.4.447",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.447.tgz",
       "integrity": "sha512-sxX0LXh+uL41hSJsujAN86PjhrV/6c79XmpY0TvjZStV6VxIgarf8SRkUoUTuYmFcZQTemsoqo8qXOGw5npWfw=="
     },
+    "error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "requires": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "esbuild": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
@@ -7480,11 +8813,15 @@
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
     },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "3.3.0",
@@ -7522,6 +8859,21 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "fast-loops": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+    },
+    "fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
+    },
     "fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -7623,15 +8975,26 @@
       "optional": true
     },
     "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
+    "get-intrinsic": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
+      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "requires": {
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      }
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -7677,6 +9040,14 @@
         "slash": "^3.0.0"
       }
     },
+    "gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "requires": {
+        "get-intrinsic": "^1.1.3"
+      }
+    },
     "grapheme-splitter": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
@@ -7703,6 +9074,37 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true
     },
+    "has-property-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
+      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "requires": {
+        "get-intrinsic": "^1.2.2"
+      }
+    },
+    "has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
+    },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+    },
+    "hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "requires": {
+        "function-bind": "^1.1.2"
+      }
+    },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -7739,6 +9141,15 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "inline-style-prefixer": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz",
+      "integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==",
+      "requires": {
+        "css-in-js-utils": "^3.1.0",
+        "fast-loops": "^1.1.3"
+      }
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -7789,6 +9200,16 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "ismobilejs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz",
+      "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw=="
+    },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7849,12 +9270,22 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "lodash.isnil": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnil/-/lodash.isnil-4.0.0.tgz",
+      "integrity": "sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng=="
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "lodash.times": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/lodash.times/-/lodash.times-4.3.2.tgz",
+      "integrity": "sha512-FfaJzl0SA35CRPDh5SWe2BTght6y5KSK7yJv166qIp/8q7qOwBDCvuDZE2RUSMRpBkLF6rZKbLEUoTmaP3qg6A=="
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -7888,6 +9319,11 @@
         }
       }
     },
+    "mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -7917,6 +9353,21 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "nano-css": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz",
+      "integrity": "sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==",
+      "requires": {
+        "css-tree": "^1.1.2",
+        "csstype": "^3.0.6",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^6.0.0",
+        "rtl-css-js": "^1.14.0",
+        "sourcemap-codec": "^1.4.8",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.0.6"
+      }
+    },
     "nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -7945,6 +9396,16 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "optional": true
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
+    "object-inspect": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ=="
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -8022,6 +9483,11 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -8038,6 +9504,43 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
     },
+    "pixi.js": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-7.3.2.tgz",
+      "integrity": "sha512-GJickUrT3UcBInGT1CU6cv2oktCdocE5QM74CD3t+weiJPPWIzleNlp7zrBR5QIDdU6bEO8CUgUXH2Y9QvlCMw==",
+      "requires": {
+        "@pixi/accessibility": "7.3.2",
+        "@pixi/app": "7.3.2",
+        "@pixi/assets": "7.3.2",
+        "@pixi/compressed-textures": "7.3.2",
+        "@pixi/core": "7.3.2",
+        "@pixi/display": "7.3.2",
+        "@pixi/events": "7.3.2",
+        "@pixi/extensions": "7.3.2",
+        "@pixi/extract": "7.3.2",
+        "@pixi/filter-alpha": "7.3.2",
+        "@pixi/filter-blur": "7.3.2",
+        "@pixi/filter-color-matrix": "7.3.2",
+        "@pixi/filter-displacement": "7.3.2",
+        "@pixi/filter-fxaa": "7.3.2",
+        "@pixi/filter-noise": "7.3.2",
+        "@pixi/graphics": "7.3.2",
+        "@pixi/mesh": "7.3.2",
+        "@pixi/mesh-extras": "7.3.2",
+        "@pixi/mixin-cache-as-bitmap": "7.3.2",
+        "@pixi/mixin-get-child-by-name": "7.3.2",
+        "@pixi/mixin-get-global-position": "7.3.2",
+        "@pixi/particle-container": "7.3.2",
+        "@pixi/prepare": "7.3.2",
+        "@pixi/sprite": "7.3.2",
+        "@pixi/sprite-animated": "7.3.2",
+        "@pixi/sprite-tiling": "7.3.2",
+        "@pixi/spritesheet": "7.3.2",
+        "@pixi/text": "7.3.2",
+        "@pixi/text-bitmap": "7.3.2",
+        "@pixi/text-html": "7.3.2"
+      }
+    },
     "postcss": {
       "version": "8.4.24",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
@@ -8059,12 +9562,30 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
       "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
       "dev": true
     },
+    "qs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
+      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -8088,6 +9609,11 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "react-router": {
       "version": "6.14.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.1.tgz",
@@ -8105,6 +9631,40 @@
         "react-router": "6.14.1"
       }
     },
+    "react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "requires": {}
+    },
+    "react-use": {
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz",
+      "integrity": "sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==",
+      "requires": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.3.1",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+          "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+        }
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -8168,6 +9728,11 @@
         }
       }
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -8208,6 +9773,14 @@
         "fsevents": "~2.3.2"
       }
     },
+    "rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -8225,6 +9798,11 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
+    },
     "semver": {
       "version": "7.5.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
@@ -8234,6 +9812,22 @@
         "lru-cache": "^6.0.0"
       }
     },
+    "set-function-length": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
+      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "requires": {
+        "define-data-property": "^1.1.1",
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      }
+    },
+    "set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g=="
+    },
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -8254,17 +9848,76 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true
     },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+    },
+    "stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "requires": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+    },
+    "stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "requires": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA=="
+        }
+      }
+    },
+    "stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "requires": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -8338,6 +9991,11 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -8352,11 +10010,20 @@
         "is-number": "^7.0.0"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
+    "ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
+    },
     "tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "tsutils": {
       "version": "3.21.0",
@@ -8430,6 +10097,22 @@
         "punycode": "^2.1.0"
       }
     },
+    "url": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.3.tgz",
+      "integrity": "sha512-6hxOLGfZASQK/cijlZnZJTq8OXAkt/3YGfQX45vvMYXpZoo8NdWZcY73K108Jf759lS1Bv/8wXnHDTSz17dSRw==",
+      "requires": {
+        "punycode": "^1.4.1",
+        "qs": "^6.11.2"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
+        }
+      }
+    },
     "vite": {
       "version": "4.3.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz",
diff --git a/package.json b/package.json
index 8f53354..412c9ae 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@pixi/react": "^7.1.1",
+    "@react-hook/window-size": "^3.1.1",
     "framer-motion": "^10.16.0",
+    "pixi.js": "^7.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",
+    "react-use": "^17.4.0",
     "styled-components": "^6.0.1"
   },
   "devDependencies": {
diff --git a/public/media/logos/comp-soc.png b/public/media/logos/comp-soc.png
index a9c4cd5..be445d5 100644
Binary files a/public/media/logos/comp-soc.png and b/public/media/logos/comp-soc.png differ
diff --git a/public/media/logos/project-share.png b/public/media/logos/project-share.png
index fd63892..5668804 100644
Binary files a/public/media/logos/project-share.png and b/public/media/logos/project-share.png differ
diff --git a/src/App.css b/src/App.css
index e746b6e..6c6db14 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,4 @@
 #root {
   margin: 0 auto;
-  padding: 1rem;
+  overflow-x: hidden;
 }
diff --git a/src/Footer/Footer.tsx b/src/Footer/Footer.tsx
index 3b17894..40cec92 100644
--- a/src/Footer/Footer.tsx
+++ b/src/Footer/Footer.tsx
@@ -1,53 +1,40 @@
 import styled from 'styled-components'
-import SketchLines from '../components/SketchLines'
 import Logo from '../components/Logo'
-import { ACCENT_COLOR } from '../constants'
 
 const StyledFooterWrapper = styled.div`
-  position: relative;
+  border: 5px solid #fcf6fe;
+  background: #7816f4;
+  width: inherit;
+  margin: 3vw;
+  margin-bottom: 4rem;
+  padding: 32px;
+  height: 50vh;
+  border-radius: 25px;
   display: flex;
-
-  height: 15vh;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2rem 0;
-  background-color: ${ACCENT_COLOR}09;
-  font-size: 0.75rem;
-  text-align: center;
-  z-index: 1;
+  gap: 32px;
 
-  user-select: none;
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
 `
+
 const Footer = () => {
   return (
-    <SketchLines top bottom margin={5000}>
-      <StyledFooterWrapper>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            gap: '0.5rem',
-            alignItems: 'center',
-          }}>
-          <Logo size={64} />
-          {'❤️'}
-          <img
-            src="./media/logos/comp-soc.png"
-            alt="CompSoc"
-            width="100px"
-            draggable={false}
-          />
-        </div>
-        <span
-          style={{
-            color: 'black',
-          }}>
-          Project Share is a{' '}
-          <a href="https://comp-soc.com/special-interest-groups">CompSoc SIG</a>
-        </span>
-      </StyledFooterWrapper>
-    </SketchLines>
+    <StyledFooterWrapper>
+      <Logo animated color="#FBF6FD" size={126} /> ❤️
+      <a
+        href="https://comp-soc.com"
+        target="_blank"
+        rel="noreferrer">
+        <img
+          src="media/logos/comp-soc.png"
+          alt="CompSoc Logo"
+          style={{ height: '126px' }}
+        />
+      </a>
+    </StyledFooterWrapper>
   )
 }
 
diff --git a/src/Header/Boids.tsx b/src/Header/Boids.tsx
new file mode 100644
index 0000000..838115d
--- /dev/null
+++ b/src/Header/Boids.tsx
@@ -0,0 +1,209 @@
+import React, { useState, useEffect } from 'react'
+import { Container, Graphics, useApp, useTick } from '@pixi/react'
+import * as PIXI from 'pixi.js'
+import { ACCENT_COLOR } from '../constants'
+
+interface Vector {
+  x: number
+  y: number
+}
+
+interface Boid {
+  position: Vector
+  velocity: Vector
+}
+
+const BOID_COUNT = 50
+const VIEW_RADIUS = 50
+const MAX_SPEED = 5
+const SEPARATION_DISTANCE = 50
+const ALIGNMENT_RADIUS = 50
+const COHESION_RADIUS = 50
+const BOID_SIZE = 10
+
+const Boids: React.FC = () => {
+  const [boids, setBoids] = useState<Boid[]>([])
+
+  const app = useApp()
+
+  const stageMargin = 50
+
+  useEffect(() => {
+    const initialBoids: Boid[] = new Array(BOID_COUNT).fill(null).map(() => ({
+      position: {
+        x: Math.random() * app.screen.width,
+        y: Math.random() * app.screen.height,
+      },
+      velocity: {
+        x: Math.random() * MAX_SPEED - MAX_SPEED / 2,
+        y: Math.random() * MAX_SPEED - MAX_SPEED / 2,
+      },
+    }))
+
+    setBoids(initialBoids)
+  }, [])
+
+  const addVectors = (v1: Vector, v2: Vector): Vector => ({
+    x: v1.x + v2.x,
+    y: v1.y + v2.y,
+  })
+
+  const multiplyVector = (v: Vector, scalar: number): Vector => ({
+    x: v.x * scalar,
+    y: v.y * scalar,
+  })
+
+  const limitVector = (v: Vector, max: number): Vector => {
+    const magnitude = Math.sqrt(v.x * v.x + v.y * v.y)
+    if (magnitude > max) {
+      return multiplyVector(v, max / magnitude)
+    }
+    return v
+  }
+
+  const separation = (boid: Boid, neighbors: Boid[]): Vector => {
+    let steer: Vector = { x: 0, y: 0 }
+    let total = 0
+    neighbors.forEach((other) => {
+      const distance = Math.sqrt(
+        Math.pow(boid.position.x - other.position.x, 2) +
+          Math.pow(boid.position.y - other.position.y, 2)
+      )
+      if (distance < SEPARATION_DISTANCE && distance > 0) {
+        const diff: Vector = {
+          x: boid.position.x - other.position.x,
+          y: boid.position.y - other.position.y,
+        }
+        steer = addVectors(steer, diff)
+        total++
+      }
+    })
+    if (total > 0) {
+      steer = multiplyVector(steer, 1 / total)
+    }
+    return steer
+  }
+
+  const alignment = (boid: Boid, neighbors: Boid[]): Vector => {
+    let averageVel: Vector = { x: 0, y: 0 }
+    neighbors.forEach((other) => {
+      averageVel = addVectors(averageVel, other.velocity)
+    })
+    if (neighbors.length > 0) {
+      averageVel = multiplyVector(averageVel, 1 / neighbors.length)
+      return limitVector(averageVel, MAX_SPEED)
+    }
+    return boid.velocity
+  }
+
+  const cohesion = (boid: Boid, neighbors: Boid[]): Vector => {
+    let centerOfMass: Vector = { x: 0, y: 0 }
+    neighbors.forEach((other) => {
+      centerOfMass = addVectors(centerOfMass, other.position)
+    })
+    if (neighbors.length > 0) {
+      centerOfMass = multiplyVector(centerOfMass, 1 / neighbors.length)
+      return {
+        x: centerOfMass.x - boid.position.x,
+        y: centerOfMass.y - boid.position.y,
+      }
+    }
+    return { x: 0, y: 0 }
+  }
+
+  const getNeighbors = (boid: Boid, radius: number): Boid[] => {
+    return boids.filter((other) => {
+      const distance = Math.sqrt(
+        Math.pow(boid.position.x - other.position.x, 2) +
+          Math.pow(boid.position.y - other.position.y, 2)
+      )
+      return distance < radius && distance > 0
+    })
+  }
+
+  useTick((delta) => {
+    const newBoids = boids.map((boid) => {
+      const neighbors = getNeighbors(boid, VIEW_RADIUS)
+
+      // Apply behaviors
+      const sep = separation(boid, getNeighbors(boid, SEPARATION_DISTANCE))
+      const ali = alignment(boid, getNeighbors(boid, ALIGNMENT_RADIUS))
+      const coh = cohesion(boid, getNeighbors(boid, COHESION_RADIUS))
+
+      // Adjust velocity
+      boid.velocity = addVectors(boid.velocity, sep)
+      boid.velocity = addVectors(boid.velocity, ali)
+      boid.velocity = addVectors(boid.velocity, coh)
+      boid.velocity = limitVector(boid.velocity, MAX_SPEED)
+
+      // Update position and apply wrap-around
+      const newPosition = {
+        x: boid.position.x + boid.velocity.x * delta,
+        y: boid.position.y + boid.velocity.y * delta,
+      }
+
+      // Wrap-around logic for x-coordinate
+      if (newPosition.x < -stageMargin) {
+        newPosition.x = app.screen.width + stageMargin
+      } else if (newPosition.x > app.screen.width + stageMargin) {
+        newPosition.x = -stageMargin
+      }
+
+      // Wrap-around logic for y-coordinate
+      if (newPosition.y < -stageMargin) {
+        newPosition.y = app.screen.height + stageMargin
+      } else if (newPosition.y > app.screen.height + stageMargin) {
+        newPosition.y = -stageMargin
+      }
+
+      return {
+        ...boid,
+        position: newPosition,
+      }
+    })
+
+    setBoids(newBoids)
+  })
+
+  const drawTriangle = (
+    g: PIXI.Graphics,
+    x: number,
+    y: number,
+    size: number,
+    rotation: number
+  ) => {
+    g.drawPolygon([
+      x - size,
+      y + size, // Left corner
+      x + size,
+      y + size, // Right corner
+      x,
+      y - size, // Top corner
+    ])
+    g.rotation = rotation
+  }
+
+  const color = new PIXI.Color(ACCENT_COLOR)
+
+  return (
+    <Container>
+      {boids.map((boid, index) => (
+        <Graphics
+          key={index}
+          draw={(g) => {
+            g.clear()
+            g.beginFill(color) // Purple color
+            const rotation =
+              Math.atan2(boid.velocity.y, boid.velocity.x) + Math.PI / 2
+            drawTriangle(g, 0, 0, BOID_SIZE, rotation) // Draw each boid as a triangle
+            g.endFill()
+          }}
+          x={boid.position.x}
+          y={boid.position.y}
+        />
+      ))}
+    </Container>
+  )
+}
+
+export default Boids
diff --git a/src/Header/Gravity.tsx b/src/Header/Gravity.tsx
new file mode 100644
index 0000000..9a5d017
--- /dev/null
+++ b/src/Header/Gravity.tsx
@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react'
+import { Container, useTick, Graphics, useApp } from '@pixi/react'
+import * as PIXI from 'pixi.js'
+import { ACCENT_COLOR } from '../constants'
+
+interface Vector {
+  x: number
+  y: number
+}
+
+interface Planet {
+  position: Vector
+  velocity: Vector
+  mass: number
+}
+
+const G = 6.6743e-7 // Gravitational constant
+
+const Gravity: React.FC = () => {
+  const [planets, setPlanets] = useState<Planet[]>([])
+
+  const app = useApp()
+
+  const STAGE_MARGIN = 50 // Margin from the edge of the screen so when wrapping around the screen, the planet doesn't suddenly get cut off
+
+  const MAX_VEL = 5
+
+  useEffect(() => {
+    const initialPlanets: Planet[] = new Array(50).fill(0).map(() => {
+      const x = Math.random() * app.screen.width
+      const y = Math.random() * app.screen.height
+      const mass = Math.random() * 10000000
+      const velocity = {
+        x: Math.random() * 1 - 0.5,
+        y: Math.random() * 1 - 0.5,
+      }
+      return {
+        position: { x, y },
+        velocity,
+        mass,
+      }
+    })
+
+    setPlanets(initialPlanets)
+  }, [])
+
+  const calculateGravitationalForce = (
+    planet1: Planet,
+    planet2: Planet
+  ): Vector => {
+    const dx = planet2.position.x - planet1.position.x
+    const dy = planet2.position.y - planet1.position.y
+    let distance = Math.sqrt(dx * dx + dy * dy)
+
+    if (distance < 10) {
+      distance = 15
+    }
+
+    const force = (G * (planet1.mass * planet2.mass)) / (distance * distance)
+    return {
+      x: (force * dx) / distance,
+      y: (force * dy) / distance,
+    }
+  }
+
+  useTick((delta) => {
+    const newPlanets = planets.map((planet, index) => {
+      let forceX = 0
+      let forceY = 0
+
+      planets.forEach((otherPlanet, otherIndex) => {
+        if (index !== otherIndex) {
+          const force = calculateGravitationalForce(planet, otherPlanet)
+          forceX += force.x
+          forceY += force.y
+        }
+      })
+
+      const newVelocity = {
+        x: planet.velocity.x + (forceX / planet.mass) * delta,
+        y: planet.velocity.y + (forceY / planet.mass) * delta,
+      }
+
+      if (newVelocity.x > MAX_VEL) {
+        newVelocity.x = MAX_VEL
+      } else if (newVelocity.x < -MAX_VEL) {
+        newVelocity.x = -MAX_VEL
+      }
+
+      if (newVelocity.y > MAX_VEL) {
+        newVelocity.y = MAX_VEL
+      } else if (newVelocity.y < -MAX_VEL) {
+        newVelocity.y = -MAX_VEL
+      }
+
+      const newPosition = {
+        x: planet.position.x + newVelocity.x * delta,
+        y: planet.position.y + newVelocity.y * delta,
+      }
+
+      if (newPosition.x < -STAGE_MARGIN) {
+        newPosition.x = app.screen.width + STAGE_MARGIN
+      }
+
+      if (newPosition.x > app.screen.width + STAGE_MARGIN) {
+        newPosition.x = -STAGE_MARGIN
+      }
+
+      if (newPosition.y < -STAGE_MARGIN) {
+        newPosition.y = app.screen.height + STAGE_MARGIN
+      }
+
+      if (newPosition.y > app.screen.height + STAGE_MARGIN) {
+        newPosition.y = -STAGE_MARGIN
+      }
+
+      return {
+        ...planet,
+        position: newPosition,
+        velocity: newVelocity,
+      }
+    })
+
+    setPlanets(newPlanets)
+  })
+
+  const color = new PIXI.Color(ACCENT_COLOR)
+
+  return (
+    <Container>
+      {planets.map((planet, index) => (
+        <Graphics
+          key={index}
+          draw={(g) => {
+            g.clear()
+            g.beginFill(color) // Purple color in hex
+            g.drawCircle(0, 0, planet.mass / 500000) // Draw circle with radius 20
+            g.endFill()
+          }}
+          x={planet.position.x}
+          y={planet.position.y}
+        />
+      ))}
+    </Container>
+  )
+}
+
+export default Gravity
diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
index c88b682..d94152c 100644
--- a/src/Header/Header.tsx
+++ b/src/Header/Header.tsx
@@ -1,29 +1,91 @@
 import styled from 'styled-components'
+import FlippableCard from '../components/FlippableCard'
+import Logo from '../components/Logo'
+import NextMeeting from '../NextMeetup/NextMeetup'
+import { Stage } from '@pixi/react'
+import Gravity from './Gravity'
 import { ACCENT_COLOR } from '../constants'
+import { useState } from 'react'
+import Boids from './Boids'
 
-const StyledHeader = styled.h1`
-  font-size: 5rem;
-  font-weight: 500;
-  margin: 0;
-  line-height: 4.5rem;
-  color: ${ACCENT_COLOR};
-  width: min-content;
-
-  @media (max-width: 768px) {
-    font-size: 3rem;
-    line-height: 3rem;
-  }
+const StyledHeaderWrapper = styled.div`
+  outline: 5px solid #7816f4;
+  background: repeating-conic-gradient(
+      rgb(252, 246, 254) 0%,
+      rgb(252, 246, 254) 25%,
+      rgb(242, 225, 247) 0%,
+      rgb(242, 225, 247) 50%
+    )
+    50% center / 3px 3px;
+  width: inherit;
+  margin: 3vw;
+  padding: 3vw;
+  height: 75vh;
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
 `
 
 const Header = () => {
+  const possibleStageBackgrounds = [<Gravity />, <Boids />]
+
+  const randomStage = useState(
+    possibleStageBackgrounds[
+      Math.floor(Math.random() * possibleStageBackgrounds.length)
+    ]
+  )[0]
+
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-      }}>
-      <StyledHeader>Project Share</StyledHeader>
-    </div>
+    <StyledHeaderWrapper>
+      <FlippableCard
+        key="unique"
+        frontContent={
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '1rem',
+              width: '100%',
+            }}>
+            <Logo size={120} />
+            <h1 style={{ fontSize: '3.75rem', margin: 0, color: ACCENT_COLOR }}>
+              Project <br />
+              Share
+            </h1>
+          </div>
+        }
+        backContent={
+          <div
+            style={{
+              display: 'flex',
+            }}>
+            <NextMeeting />
+          </div>
+        }
+      />
+
+      <Stage
+        style={{
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          width: '100%',
+          height: '100%',
+          userSelect: 'none',
+          pointerEvents: 'none',
+          zIndex: 0,
+        }}
+        width={window.innerWidth}
+        height={window.innerHeight}
+        options={{ backgroundAlpha: 0 }}>
+        {randomStage}
+      </Stage>
+    </StyledHeaderWrapper>
   )
 }
 
diff --git a/src/Header/Navbar.tsx b/src/Header/Navbar.tsx
index 1e577ac..389217e 100644
--- a/src/Header/Navbar.tsx
+++ b/src/Header/Navbar.tsx
@@ -1,49 +1,116 @@
-import { NextMeetup } from '../NextMeetup'
-import Logo from '../components/Logo'
-import MobileNoShow from '../components/MobileNoShow'
-import SketchLines from '../components/SketchLines'
-import Header from './Header'
+import { motion, AnimatePresence } from 'framer-motion'
+import { useState } from 'react'
 import { styled } from 'styled-components'
+import { useNavigate } from 'react-router-dom'
 
-const StyledBluredNavbar = styled.div`
+const StyledNavbar = styled.div`
+  border: 5px solid #7816f4;
+  outline: 2px solid white;
+  background: white;
+  height: 50px;
+  width: min-contents;
+  margin: auto;
+  margin-top: 1rem;
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
   position: fixed;
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-  mix-blend-mode: normal;
-  max-width: 768px;
-  width: calc(100vw - 30px);
+  padding: 0 1.25rem 0 1.25rem;
+  bottom: 1vw;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 100;
 `
+const Background = styled(motion.div)`
+  position: absolute;
+  background-color: #efe2f5; // Or any color you prefer
+  border-radius: 50px;
+  z-index: -1; // Higher than other elements
+  pointer-events: none; // Allow clicks to pass through
+  transition: all 0.3s ease;
+`
+
+const NavbarItem = styled.b`
+  cursor: pointer;
+  color: black;
+  user-select: none;
+  text-decoration: none;
+  font-style: bold;
+  font-weight: 600;
+
+  &:hover {
+    color: black;
+  }
+`
+
+const navBarRoutes = [
+  {
+    name: 'Home',
+    path: '/',
+  },
+  { name: 'Team', path: '/team' },
+  { name: 'About', path: '/about' },
+]
+
+const HoverBackground = ({ hoveredItem }: { hoveredItem: HTMLDivElement }) => {
+  return (
+    <Background
+      initial={{
+        width: hoveredItem.offsetWidth + 20,
+        height: hoveredItem.offsetHeight + 5,
+        x: hoveredItem.offsetLeft - 30,
+        y: hoveredItem.offsetTop - 10,
+        scale: 0.6,
+        opacity: 0,
+      }}
+      animate={{
+        width: hoveredItem.offsetWidth + 20,
+        height: hoveredItem.offsetHeight + 5,
+        x: hoveredItem.offsetLeft - 30,
+        y: hoveredItem.offsetTop - 12,
+        opacity: 1,
+        scale: 1,
+        transition: { duration: 0.01 },
+      }}
+      exit={{
+        opacity: 0,
+        scale: 0.6,
+      }}
+    />
+  )
+}
 
 const Navbar = () => {
+  const [hoveredItem, setHoveredItem] = useState<HTMLDivElement | null>(null)
+
+  const navigate = useNavigate()
+
   return (
-    <StyledBluredNavbar>
-      <MobileNoShow>
-        <div
-          style={{
-            position: 'absolute',
-            transform: 'translate(-120%, 0%)',
-          }}>
-          <Logo size={126} />
-        </div>
-      </MobileNoShow>
-
-      <SketchLines top bottom left right margin={5000}>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-          }}>
-          <Header />
-          <MobileNoShow>
-            <SketchLines left margin={20}>
-              <NextMeetup />
-            </SketchLines>
-          </MobileNoShow>
-        </div>
-      </SketchLines>
-    </StyledBluredNavbar>
+    <StyledNavbar>
+      <AnimatePresence>
+        {hoveredItem && <HoverBackground hoveredItem={hoveredItem} />}
+      </AnimatePresence>
+
+      {navBarRoutes.map((route) => (
+        <NavbarItem
+          onClick={() => navigate(route.path)}
+          onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) =>
+            setHoveredItem(e.currentTarget)
+          }
+          onMouseLeave={() => setHoveredItem(null)}>
+          {route.name}
+        </NavbarItem>
+      ))}
+      <NavbarItem
+        as="a"
+        href="https://discord.gg/wNGukFdBgp"
+        onMouseEnter={(e: any) => setHoveredItem(e.currentTarget)}
+        onMouseLeave={() => setHoveredItem(null)}>
+        Discord
+      </NavbarItem>
+    </StyledNavbar>
   )
 }
+
 export default Navbar
diff --git a/src/NextMeetup/NextMeetup.tsx b/src/NextMeetup/NextMeetup.tsx
index ac2961e..8235de6 100644
--- a/src/NextMeetup/NextMeetup.tsx
+++ b/src/NextMeetup/NextMeetup.tsx
@@ -1,21 +1,14 @@
 import styled from 'styled-components'
-import {
-  DISCORD_INVITE_LINK,
-  NEXT_MEETUP,
-  SECONDARY_COLOR,
-  MeetupDetails,
-} from '../constants'
+import { DISCORD_INVITE_LINK, NEXT_MEETUP, SECONDARY_COLOR } from '../constants'
 import Dot from '../components/Dot'
 import BouncingEllipsis from '../components/BouncingEllipsis'
+import { useEffect, useState } from 'react'
+import NumberFlipper from './NumberFlipper'
 
 const StyledWrapper = styled.div`
   position: relative;
   margin: auto;
   color: ${SECONDARY_COLOR};
-  display: flex;
-  flex-direction: column;
-
-  padding: 1rem;
 
   height: 100%;
 `
@@ -29,38 +22,13 @@ const StyledTitle = styled.h2`
 
 const StyledDetail = styled.p`
   font-size: 1rem;
-  font-weight: 400;
+  font-weight: 500;
   margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5ch;
 `
 
-const StyledButton = styled.button`
-  position: absolute;
-  top: 0;
-  right: 0;
-  background-color: transparent;
-  font-size: 0.75rem;
-  color: white;
-  border: none;
-  cursor: pointer;
-`
-
-function formatDate(date: Date): string {
-  const parsedDate = new Date(date)
-
-  const dayNames = ['Sun', 'Mon', 'Tues', 'Weds', 'Thurs', 'Fri', 'Sat']
-  const dayNumber = parsedDate.getDate()
-  const dayName = dayNames[parsedDate.getDay()]
-  const monthName = parsedDate.toLocaleString('default', { month: 'short' })
-
-  const ordinal = (n: number): string => {
-    const s = ['th', 'st', 'nd', 'rd'],
-      v = n % 100
-    return s[(v - 20) % 10] || s[v] || s[0]
-  }
-
-  return `${dayName} ${dayNumber}${ordinal(dayNumber)} ${monthName}`
-}
-
 const NextMeetingIsTBC = () => (
   <StyledWrapper>
     <StyledTitle>
@@ -75,55 +43,39 @@ const NextMeetingIsTBC = () => (
   </StyledWrapper>
 )
 
-const generateGoogleCalendarLink = (meetup: MeetupDetails) => {
-  const eventEndTime = new Date(meetup.date.getTime() + 60 * 60 * 1000)
+const NextMeeting = () => {
+  const [timeLeft, setTimeLeft] = useState<number | null>(null)
 
-  const googleCalendarLink = `https://www.google.com/calendar/render?action=TEMPLATE&text=${
-    meetup.title
-  }&dates=${meetup.date
-    .toISOString()
-    .replace(/-|:|\.\d\d\d/g, '')}/${eventEndTime
-    .toISOString()
-    .replace(/-|:|\.\d\d\d/g, '')}&location=${meetup.location}&details=${
-    meetup.description
-  }`
+  useEffect(() => {
+    if (!NEXT_MEETUP) return
 
-  return googleCalendarLink
-}
+    const updateTimeLeft = () => {
+      if (!NEXT_MEETUP) return
+      const timeDiff = NEXT_MEETUP.date.getTime() - new Date().getTime()
+      setTimeLeft(timeDiff > 0 ? timeDiff : null)
+    }
 
-const NextMeeting = () => {
-  if (!NEXT_MEETUP) return <NextMeetingIsTBC />
+    const interval = setInterval(updateTimeLeft, 100)
+    updateTimeLeft()
 
-  // if next meetup is more than 3 hours in the past
-  if (NEXT_MEETUP.date < new Date(Date.now() - 3 * 60 * 60 * 1000))
-    return <NextMeetingIsTBC />
+    return () => clearInterval(interval)
+  }, [NEXT_MEETUP])
 
-  const eventGCalURL = generateGoogleCalendarLink(NEXT_MEETUP)
+  if (!NEXT_MEETUP || timeLeft === null) return <NextMeetingIsTBC />
 
-  const eventDate = formatDate(NEXT_MEETUP.date)
-  const eventTime = NEXT_MEETUP.date.toLocaleTimeString('en-US', {
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-  })
-  const eventLocation = NEXT_MEETUP.location
+  const hours = Math.floor(timeLeft / (1000 * 60 * 60))
+  const minutes = Math.floor((timeLeft / (1000 * 60)) % 60)
+  const seconds = Math.floor((timeLeft / 1000) % 60)
 
   return (
     <StyledWrapper>
-      <StyledTitle>
-        Next meet-up
-        <BouncingEllipsis />
-      </StyledTitle>
       <StyledDetail>
-        {eventDate}
-        <Dot />
-        {eventTime}
+        Next meetup
         <Dot />
-        {eventLocation}
+        <NumberFlipper value={hours} precision={hours.toString().length} /> hrs
+        <NumberFlipper value={minutes} precision={2} /> min
+        <NumberFlipper value={seconds} precision={2} /> sec
       </StyledDetail>
-      <StyledButton onClick={() => window.open(eventGCalURL, '_blank')}>
-        🗓️
-      </StyledButton>
     </StyledWrapper>
   )
 }
diff --git a/src/NextMeetup/NumberFlipper.tsx b/src/NextMeetup/NumberFlipper.tsx
new file mode 100644
index 0000000..14be7d9
--- /dev/null
+++ b/src/NextMeetup/NumberFlipper.tsx
@@ -0,0 +1,79 @@
+import { useSpring, MotionValue, useTransform, motion } from 'framer-motion'
+import { useEffect } from 'react'
+import styled from 'styled-components'
+
+const fontSize = 24
+const padding = 0
+const height = fontSize + padding
+
+const NumberFlipperContainer = styled.div`
+  display: flex;
+  overflow: hidden;
+  background: white;
+  padding: 0rem;
+`
+
+const DigitContainer = styled.div`
+  height: ${height}px;
+  position: relative;
+  width: 1ch;
+`
+
+const NumberSpan = styled(motion.span)`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+function NumberFlipper({
+  value,
+  precision,
+}: {
+  value: number
+  precision: number
+}) {
+  return (
+    <NumberFlipperContainer>
+      {new Array(precision).fill(0).map((_, i) => (
+        <Digit key={i} place={10 ** (precision - i -1)} value={value} />
+      ))}
+    </NumberFlipperContainer>
+  )
+}
+
+function Digit({ place, value }: { place: number; value: number }) {
+  let valueRoundedToPlace = Math.floor(value / place)
+  let animatedValue = useSpring(valueRoundedToPlace)
+
+  useEffect(() => {
+    animatedValue.set(valueRoundedToPlace)
+  }, [animatedValue, valueRoundedToPlace])
+
+  return (
+    <DigitContainer>
+      {[...Array(10).keys()].map((i) => (
+        <Number key={i} mv={animatedValue} number={i} />
+      ))}
+    </DigitContainer>
+  )
+}
+
+function Number({ mv, number }: { mv: MotionValue<number>; number: number }) {
+  let y = useTransform(mv, (latest) => {
+    let placeValue = latest % 10
+    let offset = (10 + number - placeValue) % 10
+    let memo = offset * height
+
+    if (offset > 5) {
+      memo -= 10 * height
+    }
+
+    return memo
+  })
+
+  return <NumberSpan style={{ y }}>{number}</NumberSpan>
+}
+
+export default NumberFlipper
diff --git a/src/Pages/Home.tsx b/src/Pages/Home.tsx
index 4bad02f..d0a665a 100644
--- a/src/Pages/Home.tsx
+++ b/src/Pages/Home.tsx
@@ -1,144 +1,76 @@
-import styled from 'styled-components'
-import Navbar from '../Header/Navbar'
-import Spacer from '../components/Spacer'
-import Footer from '../Footer/Footer'
-import Paragraph from '../components/Paragraph'
-import MobileShow from '../components/MobileShow'
-import NextMeeting from '../NextMeetup/NextMeetup'
-import SketchLines from '../components/SketchLines'
 import { Link } from 'react-router-dom'
-import Links from '../Header/Links'
 import ProjectList from '../ProjectList/ProjectList'
 import { PROJECTS, PROJECTS_SHOWN_ON_HOMEPAGE } from '../constants'
 import { StyledLink } from '../components/StyledLink'
-import FlippableCard from '../components/FlippableCard'
-import Logo from '../components/Logo'
+import Footer from '../Footer/Footer'
 import Header from '../Header/Header'
-import Title from '../components/Title'
-
-const StyledMain = styled.div`
-  position: relative;
-  margin: auto;
-  margin-top: 8rem;
-
-  max-width: 768px;
-`
+import Marquee from '../components/Marquee'
+import ScrollText from '../components/ScrollText'
+import Section from '../components/Section'
 
 const Home = () => {
   return (
     <>
-      <div
-        style={{
-          border: '5px solid #7816F4',
-          background:
-            'repeating-conic-gradient(rgb(252, 246, 254) 0%, rgb(252, 246, 254) 25%, rgb(242, 225, 247) 0%, rgb(242, 225, 247) 50%) 50% center / 3px 3px',
-          width: 'calc(100%-2vw)',
-          height: '87dvh',
-          margin: 'auto',
-          borderRadius: '25px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}>
-        <Title />
-      </div>
+      <Header />
+
+      {/* Spent so long making the <Path /> but turns out its ugly :( */}
+      {/* <Path /> */}
+
+      <Section title="Intro">
+        <ScrollText
+          content={[
+            'At Project Share we meet every other week',
+            'and share updates on our own tech projects.',
+            'Show and tell!',
+            'Hear the development of other builders and learn from them',
+          ]}
+        />
+        <br />
+        <br />
+        <br />
+        <ScrollText content={['Welcome!']} />
+      </Section>
 
       <div
         style={{
-          border: '5px solid #7816F4',
-          background:
-            'repeating-conic-gradient(rgb(252, 246, 254) 0%, rgb(252, 246, 254) 25%, rgb(242, 225, 247) 0%, rgb(242, 225, 247) 50%) 50% center / 3px 3px',
-          height: '5vh',
-          width: 'min-contents',
-          margin: 'auto',
-          marginTop: '1rem',
-          borderRadius: '50px',
+          position: 'relative',
+          margin: '5rem',
           display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
           alignItems: 'center',
-          gap: '1rem',
-          position: 'fixed',
-          padding: '0 2rem 0 2rem',
-          bottom: '1vw',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          zIndex: '100',
         }}>
-        <b>Home</b>
-        <b>About</b>
-        <b>Team</b>
-        <b>Discord</b>
+        <div
+          style={{
+            transform: 'rotate(-5deg)',
+          }}>
+          <Marquee />
+        </div>
+        <div
+          style={{
+            transform: 'rotate(3deg) translateY(-50px)',
+          }}>
+          <Marquee />
+        </div>
       </div>
 
-      <StyledMain>
-        <MobileShow>
-          <div style={{ height: '2rem' }} />
-        </MobileShow>
-
-        <Links />
-        <Spacer size={32} />
-
-        <MobileShow>
-          <SketchLines top bottom margin={20}>
-            <NextMeeting />
-          </SketchLines>
-          <Spacer size={32} />
-        </MobileShow>
-
-        <Paragraph title="So... what is this?">
-          <p>
-            Glad you asked! Picture this: every other week, an enthusiastic
-            group of tech lovers huddle together around a metaphorical campfire.
-          </p>
-          <p>
-            Each one of us, from those working on our first website to the
-            seasoned pros building complex multiplayer games, we bring our
-            projects to the table! Fueled by curiosity and a passion for
-            learning, we turn our individual insights into collective "aha!"
-            moments.
-          </p>
-          <p>
-            It's not about the grandeur of the project, but the story it tells,
-            the challenges faced, and the triumphs enjoyed.
-          </p>
-        </Paragraph>
-        <Spacer size={64} />
-        <Paragraph title="Who can join?">
-          <p>
-            Anyone! The only condition? Be prepared to share your journey.
-            Embrace the opportunity to allow us all to learn and grow through
-            your experiences. After all, at the heart of every project lies a
-            story worth sharing. Welcome to Project Share.
-          </p>
-        </Paragraph>
-        <Spacer size={64} />
-        <Paragraph title="Projects that have been shared at Project Share">
-          <p>Take a look</p>
-          <ProjectList
-            projects={PROJECTS.slice(0, PROJECTS_SHOWN_ON_HOMEPAGE)}
-          />
+      <Section title="Projects">
+        <ProjectList projects={PROJECTS.slice(0, PROJECTS_SHOWN_ON_HOMEPAGE)} />
+        {PROJECTS.length > PROJECTS_SHOWN_ON_HOMEPAGE && (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              padding: '0.5rem 0 2rem 0',
+            }}>
+            <StyledLink as={Link} to="/projects">
+              See more
+            </StyledLink>
+          </div>
+        )}
+      </Section>
 
-          {PROJECTS.length > PROJECTS_SHOWN_ON_HOMEPAGE && (
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'center',
-                padding: '0.5rem 0 2rem 0',
-              }}>
-              <StyledLink as={Link} to="/projects">
-                See more
-              </StyledLink>
-            </div>
-          )}
-        </Paragraph>
-        <Spacer size={64} />
-        <Paragraph title="Want to know more about this website?">
-          <p>
-            Check the <Link to="/components">behind the scenes</Link> of this
-            website
-          </p>
-        </Paragraph>
-        <Spacer size={128} />
-      </StyledMain>
+      <Footer />
     </>
   )
 }
diff --git a/src/ProjectList/ProjectTile.tsx b/src/ProjectList/ProjectTile.tsx
index 6e2fd57..05c23b9 100644
--- a/src/ProjectList/ProjectTile.tsx
+++ b/src/ProjectList/ProjectTile.tsx
@@ -8,6 +8,17 @@ import Dot from '../components/Dot'
 import { useState } from 'react'
 import Logo from '../components/Logo'
 
+const StyledProjectWrapper = styled.div`
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: #f7f6f38c;
+  border: 2px solid #6E1FEB;
+  margin-bottom: 20px;
+  padding: 10px;
+`
+
 const TopBar = styled.div`
   display: flex;
   justify-content: space-between;
@@ -94,7 +105,7 @@ const ProjectTile = ({
   const [isVideoLoaded, setIsVideoLoaded] = useState(false)
 
   return (
-    <div key={id}>
+    <StyledProjectWrapper key={id}>
       <TopBar>
         <ProjectId>#{id}</ProjectId>
         {projectURL && (
@@ -155,7 +166,7 @@ const ProjectTile = ({
           <Description>{description}</Description>
         </div>
       </BottomBar>
-    </div>
+    </StyledProjectWrapper>
   )
 }
 
diff --git a/src/components/FlippableCard.tsx b/src/components/FlippableCard.tsx
index dd5584b..68cf717 100644
--- a/src/components/FlippableCard.tsx
+++ b/src/components/FlippableCard.tsx
@@ -1,7 +1,9 @@
-import { motion, useSpring } from 'framer-motion'
+import { motion, useAnimation, useSpring } from 'framer-motion'
 import { useState, useRef, useEffect } from 'react'
 import styled from 'styled-components'
 import AnimatedTextCharacter from './AnimatedTextCharacter'
+import { NEXT_MEETUP } from '../constants'
+import { NextMeetup } from '../NextMeetup'
 
 const springConfig = {
   type: 'spring',
@@ -9,6 +11,12 @@ const springConfig = {
   damping: 40,
 }
 
+const Anchor = styled.div`
+  position: absolute;
+  visibility: hidden;
+  user-select: none;
+`
+
 const CardSide = styled(motion.div)<{ isHovered: boolean }>`
   width: 100%;
   height: 100%;
@@ -24,26 +32,30 @@ const CardSide = styled(motion.div)<{ isHovered: boolean }>`
       ? '0px 8px 16px 0px rgba(0,0,0,0.6)'
       : '0px 4px 8px 0px rgba(0,0,0,0.2)'};
   transition: 0.2s box-shadow;
-  border: 5px solid #7816f4;
+  outline: 5px solid #7816f4;
   background: white;
   cursor: pointer;
+
+  padding: 1rem;
+  box-sizing: border-box;
 `
 
-const Long = styled(motion.div).attrs({
-  initial: { x: '-50%' },
-  animate: { x: '-50%' },
-})`
+const Long = styled(motion.div)`
+  cursor: pointer;
   border-radius: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: 0.2s box-shadow;
   border: 5px solid #7816f4;
+  outline: 2px solid white;
+
   background: white;
   overflow: hidden;
-  padding: 1rem 2rem 1rem 2rem;
+  padding: 0.75rem 1.5rem 0.75rem 1.5rem;
   position: fixed;
   top: 2dvh;
+  transform: translateX(-50px);
 `
 
 interface FlippableCardProps {
@@ -52,6 +64,16 @@ interface FlippableCardProps {
   key: string
 }
 
+const jiggleAnimation = {
+  scale: [1, 1.02, 1, 0.995, 1],
+  rotate: [0, 5, -2, 2, -1, 1, 0],
+  transition: {
+    duration: 0.75,
+    ease: 'easeInOut',
+    repeatType: 'loop' as const,
+  },
+}
+
 const FlippableCard = ({ frontContent, backContent }: FlippableCardProps) => {
   const [isFlipped, setIsFlipped] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
@@ -66,6 +88,8 @@ const FlippableCard = ({ frontContent, backContent }: FlippableCardProps) => {
   const dx = useSpring(0, springConfig)
   const dy = useSpring(0, springConfig)
 
+  const controls = useAnimation()
+
   const zoom = useSpring(1, {
     duration: 0.1,
     damping: 7,
@@ -76,6 +100,11 @@ const FlippableCard = ({ frontContent, backContent }: FlippableCardProps) => {
     dy.set(rotateY)
   }, [rotateX, rotateY])
 
+  useEffect(() => {
+    // Start the jiggle animation when not hovered
+    setTimeout(() => controls.start(jiggleAnimation), 750)
+  }, [])
+
   const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
     const element = ref.current
 
@@ -83,7 +112,7 @@ const FlippableCard = ({ frontContent, backContent }: FlippableCardProps) => {
       const elementRect = element.getBoundingClientRect()
       if (!isHovered) {
         setIsHovered(true)
-        zoom.set(1.1)
+        zoom.set(1.15)
       }
       const x = event.clientX - (elementRect.left + elementRect.width / 2)
       const y = event.clientY - (elementRect.top + elementRect.height / 2)
@@ -99,13 +128,6 @@ const FlippableCard = ({ frontContent, backContent }: FlippableCardProps) => {
     zoom.set(1)
   }
 
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     if (isFlipped) return
-  //     setIsFlipped(!isFlipped)
-  //   }, 3000)
-  // }, [])
-
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -121,8 +143,8 @@ const FlippableCard = ({ frontContent, backContent }: FlippableCardProps) => {
       },
       {
         root: null,
-        rootMargin: '-200px',
-        threshold: 0.1,
+        rootMargin: '-100px',
+        threshold: 0.01,
       }
     )
 
@@ -146,11 +168,13 @@ const FlippableCard = ({ frontContent, backContent }: FlippableCardProps) => {
           onClick={() => {
             setIsFlipped(!isFlipped)
           }}
+          animate={controls}
           style={{
-            width: '500px',
-            height: '200px',
+            width: '400px',
+            height: '175px',
             perspective: 1200,
             transformStyle: 'preserve-3d',
+            zIndex: 10,
           }}>
           <motion.div
             onMouseMove={handleMouseMove}
@@ -194,11 +218,17 @@ const FlippableCard = ({ frontContent, backContent }: FlippableCardProps) => {
           transition={{
             type: 'spring',
             damping: 12,
+          }}
+          initial={{ x: '-50%' }}
+          animate={{ x: '0%' }}
+          onClick={() => {
+            setIsFlipped(true)
+            window.scrollTo({ top: 0, behavior: 'smooth' })
           }}>
-          <AnimatedTextCharacter text="Next meet-up • Weds 25th Oct • AT_2.11 • 11hrs 5mins 3secs" />
+          <NextMeetup />
         </Long>
       )}
-      <div ref={anchorRef}></div>
+      <Anchor ref={anchorRef}></Anchor>
     </>
   )
 }
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index 1884cd2..26d4173 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -4,6 +4,7 @@ import styled, { css, keyframes } from 'styled-components'
 interface LogoProps {
   size?: number
   animated?: boolean
+  color?: string
 }
 
 const rotateAnimation = keyframes`
@@ -34,7 +35,11 @@ const Rotate = styled.g<{ animated: boolean }>`
   animation-fill-mode: backwards;
 `
 
-const Logo: FC<LogoProps> = ({ size = 126, animated = false }) => {
+const Logo: FC<LogoProps> = ({
+  size = 126,
+  animated = false,
+  color = '#7816F4',
+}) => {
   return (
     <svg
       width={size}
@@ -46,30 +51,30 @@ const Logo: FC<LogoProps> = ({ size = 126, animated = false }) => {
         <Rotate animated={animated}>
           <path
             d="M77.1208 32.6825H80.7965C80.7965 31.7005 80.4037 30.7595 79.7053 30.069C79.0069 29.3785 78.0618 28.9961 77.08 29.007L77.1208 32.6825ZM24.8109 25.2702V21.5945C23.8361 21.5945 22.9011 21.9818 22.2118 22.671C21.5225 23.3604 21.1353 24.2953 21.1353 25.2702H24.8109ZM80.7965 42.2126V32.6825H73.4452V42.2126H80.7965ZM77.1208 32.6825C77.08 29.007 77.08 29.007 77.08 29.007C77.0795 29.007 77.0795 29.007 77.079 29.007C77.0786 29.007 77.0781 29.007 77.0767 29.007C77.0749 29.0071 77.0717 29.0071 77.0671 29.0072C77.0584 29.0073 77.045 29.0074 77.0271 29.0076C76.9917 29.008 76.9389 29.0085 76.8691 29.0092C76.7303 29.0106 76.5254 29.0125 76.2635 29.0148C75.7388 29.0193 74.9853 29.0251 74.0696 29.03C72.2377 29.0399 69.7631 29.0465 67.186 29.0333C64.6043 29.0201 61.9394 28.9873 59.722 28.9192C57.3779 28.8472 55.8598 28.7419 55.3494 28.6462L53.9944 35.8716C55.178 36.0936 57.3136 36.2001 59.4964 36.2671C61.8052 36.338 64.5413 36.3713 67.1483 36.3846C69.7594 36.3979 72.2616 36.3912 74.1095 36.3813C75.034 36.3763 75.7958 36.3705 76.3269 36.3659C76.5925 36.3636 76.8006 36.3616 76.9421 36.3602C77.0133 36.3595 77.0675 36.3589 77.1048 36.3585C77.1231 36.3583 77.1369 36.3582 77.1466 36.3581C77.1516 36.358 77.1548 36.358 77.1576 36.358C77.159 36.358 77.1599 36.3579 77.1604 36.3579C77.1608 36.3579 77.1608 36.3579 77.1613 36.3579C77.1613 36.3579 77.1617 36.3579 77.1208 32.6825ZM55.3494 28.6462C55.5474 28.6833 55.444 28.7488 54.9708 28.282C54.4801 27.7981 54.0137 27.1857 53.2653 26.2421C52.6151 25.4221 51.715 24.3072 50.6137 23.4158C49.4554 22.4783 47.8418 21.5945 45.7772 21.5945V28.9458C45.6216 28.9458 45.6506 28.8562 45.9888 29.1298C46.3835 29.4495 46.8333 29.9626 47.5059 30.8105C48.0803 31.5347 48.91 32.6297 49.8083 33.5158C50.724 34.4189 52.1024 35.5169 53.9944 35.8716L55.3494 28.6462ZM45.7772 21.5945H24.8109V28.9458H45.7772V21.5945ZM21.1353 25.2702V68.1299H28.4866V25.2702H21.1353ZM21.1353 68.1299C21.1353 72.0592 23.6916 74.3896 26.2061 75.529C28.5819 76.6051 31.3499 76.8881 33.4939 76.8881V69.5368C31.826 69.5368 30.2525 69.2914 29.2397 68.8324C28.7636 68.6169 28.5839 68.4313 28.5354 68.3688C28.5278 68.3587 28.4866 68.3339 28.4866 68.1299H21.1353Z"
-            fill="#7816F4"
+            fill={color}
           />
           <path
             d="M38.6612 46.9521L25.8696 67.87L32.2654 74.0598H74.7664L89.8274 46.9521H38.6612Z"
-            fill="#7816F4"
+            fill={color}
           />
           <path
             d="M25.8696 67.7629L23.7137 66.4443C23.0966 67.4537 23.2621 68.7558 24.1122 69.5787L25.8696 67.7629ZM38.6612 46.8451V44.3179C37.7811 44.3179 36.9644 44.7757 36.5053 45.5266L38.6612 46.8451ZM89.8274 46.8451L92.036 48.0724C92.4712 47.2894 92.4592 46.3351 92.0053 45.5634C91.5513 44.7917 90.7225 44.3179 89.8274 44.3179V46.8451ZM74.7664 73.9528V76.4798C75.6839 76.4798 76.5298 75.9822 76.9754 75.18L74.7664 73.9528ZM32.2654 73.9528L30.508 75.7686L31.2428 76.4798L32.5 76.8931L32.2654 73.9528ZM28.0255 69.0811L40.817 48.1633L36.5053 45.5266L23.7137 66.4443L28.0255 69.0811ZM38.6612 49.3722H89.8274V44.3179H38.6612V49.3722ZM87.6184 45.6176L72.5573 72.7256L76.9754 75.18L92.036 48.0724L87.6184 45.6176ZM74.7664 71.4258H32.2654L32.5 76.8931L74.7664 76.4798V71.4258ZM34.0228 72.137L27.6271 65.9472L24.1122 69.5787L30.508 75.7686L34.0228 72.137Z"
-            fill="#7816F4"
+            fill={color}
           />
         </Rotate>
         <path
           d="M51 101.311C78.7859 101.311 101.311 78.7859 101.311 51C101.311 23.2141 78.7859 0.689209 51 0.689209C23.2141 0.689209 0.689209 23.2141 0.689209 51C0.689209 78.7859 23.2141 101.311 51 101.311Z"
-          stroke="#7816F4"
+          stroke={color}
           strokeWidth={3}
         />
         <path
           d="M101.311 0.689209H0.689209V101.311H101.311V0.689209Z"
-          stroke="#7816F4"
+          stroke={color}
           strokeWidth={3}
         />
         <path
           d="M0.459473 101.541L51 51M51 51L101.541 0.459473M51 51L0.459473 0.459473M51 51L101.541 101.541"
-          stroke="#7816F4"
+          stroke={color}
           strokeWidth={3}
         />
       </g>
diff --git a/src/components/Marquee.tsx b/src/components/Marquee.tsx
new file mode 100644
index 0000000..7a18ba6
--- /dev/null
+++ b/src/components/Marquee.tsx
@@ -0,0 +1,126 @@
+import styled from 'styled-components'
+import { motion, useSpring, useViewportScroll } from 'framer-motion'
+import { ACCENT_COLOR } from '../constants'
+import { useEffect } from 'react'
+
+const MarqueeContainer = styled.div`
+  position: relative;
+  height: max-content;
+  overflow: hidden;
+`
+
+const Track = styled(motion.div)`
+  white-space: nowrap;
+  height: 50px;
+  position: relative;
+  transition: height 0.2s, opacity 0.2s;
+  background-color: ${ACCENT_COLOR};
+
+  width: 500vw;
+
+  z-index: 5;
+  padding: 0.5rem 0;
+  cursor: pointer;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 4rem;
+
+  &:hover::after {
+    top: 0%;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -100%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    z-index: 10;
+    transition: top 0.2s ease, opacity 0.2s ease;
+    mix-blend-mode: difference;
+  }
+`
+
+const Title = styled.h1`
+  color: white;
+  margin: 0px 0;
+  font-size: 4rem;
+
+  font-family: 'Helvetica Neue';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 32px;
+`
+
+const Marquee = () => {
+  // const trackRef = useRef<HTMLDivElement>(null)
+  // const [contentWidth, setContentWidth] = useState(0)
+  // const direction = 0
+
+  // useEffect(() => {
+  //   if (trackRef.current) {
+  //     const width = trackRef.current.offsetWidth
+  //     setContentWidth(width)
+  //   }
+  // }, [])
+
+  // const marqueeVariants = {
+  //   animate: {
+  //     x: [0, -1035],
+  //     transition: {
+  //       x: {
+  //         repeat: Infinity,
+  //         repeatType: 'loop',
+  //         duration: 5,
+  //         ease: 'linear',
+  //       },
+  //     },
+  //   },
+  // }
+
+  const direction = Math.random() > 0.5 ? 1 : -1
+
+  const { scrollYProgress } = useViewportScroll()
+  const marqueeX = useSpring(0, { stiffness: 300, damping: 200 })
+
+  useEffect(() => {
+    const unsubscribeY = scrollYProgress.onChange((latest: any) => {
+      marqueeX.set(latest * -1035 * direction)
+    })
+
+    return () => {
+      unsubscribeY()
+    }
+  }, [scrollYProgress, marqueeX])
+
+  return (
+    <MarqueeContainer>
+      <Track
+        // ref={trackRef}
+        style={{ x: marqueeX }}>
+        {Array.from({ length: 50 }).map(() => (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            <Title>Join Discord</Title>
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 41 41"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M0.87868 35.8787C-0.292893 37.0503 -0.292893 38.9497 0.87868 40.1213C2.05025 41.2929 3.94975 41.2929 5.12132 40.1213L0.87868 35.8787ZM41 3C41 1.34314 39.6569 -1.66829e-06 38 -1.59846e-06L11 -4.60494e-07C9.34315 -3.90663e-07 8 1.34315 8 3C8 4.65685 9.34315 6 11 6L35 6L35 30C35 31.6569 36.3431 33 38 33C39.6569 33 41 31.6569 41 30L41 3ZM5.12132 40.1213L40.1213 5.12132L35.8787 0.878678L0.87868 35.8787L5.12132 40.1213Z"
+                fill="white"
+              />
+            </svg>
+          </div>
+        ))}
+      </Track>
+    </MarqueeContainer>
+  )
+}
+
+export default Marquee
diff --git a/src/components/Path.tsx b/src/components/Path.tsx
new file mode 100644
index 0000000..766983f
--- /dev/null
+++ b/src/components/Path.tsx
@@ -0,0 +1,137 @@
+import { useEffect, useRef, useState } from 'react'
+import { ACCENT_COLOR } from '../constants'
+import styled from 'styled-components'
+
+const SVGAnimatedPath = () => {
+  const pathRef = useRef<SVGPathElement | null>(null)
+  const svgRef = useRef<SVGSVGElement | null>(null)
+
+  useEffect(() => {
+    if (!svgRef.current) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!svgRef.current) return
+          if (!pathRef.current) return
+          if (entry.isIntersecting) {
+            svgRef.current.style.opacity = '1'
+            const length = pathRef.current.getTotalLength()
+            pathRef.current.style.strokeDasharray = `${length} ${length}`
+            pathRef.current.style.strokeDashoffset = `${length}`
+            pathRef.current.getBoundingClientRect() // Trigger reflow to apply initial styles
+            pathRef.current.style.transition =
+              'stroke-dashoffset 2s ease-in-out'
+            pathRef.current.style.strokeDashoffset = '0'
+          }
+        })
+      },
+      {
+        root: null,
+        rootMargin: '-100px',
+        threshold: 0.5,
+      }
+    )
+
+    if (svgRef.current) {
+      observer.observe(svgRef.current)
+    }
+
+    return () => {
+      if (svgRef.current) {
+        observer.unobserve(svgRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <svg
+      ref={svgRef}
+      width="100%"
+      height="100%"
+      viewBox="0 0 2110 416"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ opacity: 0 }}>
+      <path
+        ref={pathRef}
+        opacity="0.5"
+        d="M0 356.534C33.873 284.282 73.5334 194.539 152.173 133.771C221.686 80.0562 373.779 -14.7109 513.712 29.1033C664.354 76.27 624.523 387.304 994.233 411.65C1216.88 426.311 1390.45 285.373 1411 199.5C1430.48 118.069 1386.49 -19.3348 1182.66 5.43266C959.509 32.5481 925.378 265.622 1182.66 320.761C1439.01 375.7 1816.07 292.186 1944.55 239.764C2071.19 188.092 2095.19 105.066 2110 83.6024"
+        stroke="#7816F4"
+        strokeWidth="5"
+      />
+    </svg>
+  )
+}
+
+const Container = styled.div<{ scrollY: number }>`
+  transform: ${({ scrollY }) => `translateY( ${scrollY * 0.005}px)`};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.1s ease-in-out;
+`
+
+const Title = styled.h1`
+  font-size: 2rem;
+  margin: 0.5rem 0;
+  mix-blend-mode: multiply;
+  color: ${ACCENT_COLOR};
+`
+
+const Subtitle = styled(Title)`
+  font-size: 5rem;
+  font-style: italic;
+  transform: rotate(-2deg);
+  color: ${ACCENT_COLOR};
+`
+
+const AnimatedText = () => {
+  const [scrollY, setScrollY] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollY(window.pageYOffset)
+    }
+    window.addEventListener('scroll', handleScroll, { passive: true })
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  return (
+    <Container scrollY={scrollY}>
+      <Title>Are you building something?</Title>
+      <Subtitle>Share it</Subtitle>
+    </Container>
+  )
+}
+
+const Path = () => {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <AnimatedText />
+      <div
+        style={{
+          position: 'absolute',
+          transform: 'translate(-50%, -50%)',
+          top: '50%',
+          left: '50%',
+          width: '100%',
+        }}>
+        <SVGAnimatedPath />
+      </div>
+    </div>
+  )
+}
+
+export default Path
diff --git a/src/components/ScrollText.tsx b/src/components/ScrollText.tsx
new file mode 100644
index 0000000..113476b
--- /dev/null
+++ b/src/components/ScrollText.tsx
@@ -0,0 +1,69 @@
+import React, { useRef } from 'react'
+import styled from 'styled-components'
+import { motion, useScroll, useTransform } from 'framer-motion'
+
+const ScrollTextWrapper = styled.div`
+  font-size: 4rem;
+  font-weight: 600;
+  margin: 0;
+
+  @media (max-width: 768px) {
+    font-size: 2rem;
+  }
+`
+
+const TextContainer = styled.span`
+  position: relative;
+  overflow: hidden;
+`
+
+const StaticText = styled(motion.span)``
+
+interface ContentLineProps {
+  content: string
+}
+
+const ContentLine: React.FC<ContentLineProps> = ({ content }) => {
+  const contentRef = useRef<HTMLSpanElement>(null)
+  const { scrollYProgress } = useScroll({
+    target: contentRef,
+    offset: ['end end', 'start start'],
+  })
+
+  const customTransform = (value: number) => {
+    if (value >= 0.4 && value <= 0.75) {
+      return (value - 0.4) * 10
+    } else if (value > 0.75 && value <= 0.8) {
+      return Math.max(1 - (value - 0.75) * 10, 0.2)
+    } else if (value > 0.8) {
+      return 0.2
+    }
+    return 0
+  }
+
+  const scrollValue = useTransform(scrollYProgress, customTransform)
+
+  return (
+    <TextContainer ref={contentRef}>
+      <StaticText style={{ opacity: scrollValue }}>{content}</StaticText>
+    </TextContainer>
+  )
+}
+
+interface ScrollTextProps {
+  content: string[]
+}
+
+const ScrollText: React.FC<ScrollTextProps> = ({ content }) => {
+  return (
+    <ScrollTextWrapper>
+      {content.map((item) => (
+        <>
+          <ContentLine content={item} />{' '}
+        </>
+      ))}
+    </ScrollTextWrapper>
+  )
+}
+
+export default ScrollText
diff --git a/src/components/Section.tsx b/src/components/Section.tsx
new file mode 100644
index 0000000..2c60af1
--- /dev/null
+++ b/src/components/Section.tsx
@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+
+const StyledMain = styled.div`
+  position: relative;
+  margin: auto;
+  margin-top: 8rem;
+  padding: 1rem;
+
+  max-width: 858px;
+`
+
+const StyledRotatedText = styled.p`
+  position: absolute;
+  transform-origin: top left;
+  transform: rotate(90deg);
+  left: 10px;
+  font-size: 2rem;
+  margin-bottom: 2rem;
+
+  @media (max-width: 768px) {
+    position: relative;
+    transform: rotate(0deg);
+    margin-bottom: 0;
+    left: 0;
+  }
+`
+
+const Section = ({
+  children,
+  title,
+  ...props
+}: {
+  children: React.ReactNode
+  title?: string
+}) => {
+  return (
+    <StyledMain {...props}>
+      <StyledRotatedText>{title}</StyledRotatedText>
+      {children}
+    </StyledMain>
+  )
+}
+
+export default Section
diff --git a/src/components/Title.tsx b/src/components/Title.tsx
deleted file mode 100644
index 9063dde..0000000
--- a/src/components/Title.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import FlippableCard from './FlippableCard'
-import NextMeeting from '../NextMeetup/NextMeetup'
-import Logo from './Logo'
-import Header from '../Header/Header'
-
-const Title = () => {
-  return (
-    <FlippableCard
-      key="unique"
-      frontContent={
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            gap: '1rem',
-          }}>
-          <Logo size={140} />
-          <Header />
-        </div>
-      }
-      backContent={
-        <div
-          style={{
-            display: 'flex',
-          }}>
-          <NextMeeting />
-        </div>
-      }
-    />
-  )
-}
-
-export default Title
diff --git a/src/constants.ts b/src/constants.ts
index 88e4f4e..5ef3dbb 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -13,7 +13,7 @@ export interface MeetupDetails {
 
 export const NEXT_MEETUP: MeetupDetails | undefined = {
   title: 'Project Share!',
-  date: new Date('2023-09-20T15:00:00'),
+  date: new Date('2023-12-16T15:55:00'),
   location: 'AT 2.05',
   description: 'Bring your laptop!',
 }
diff --git a/src/index.css b/src/index.css
index df0383a..c460d2c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,8 +14,8 @@
 }
 /* text selection */
 ::selection {
-  color: #fff;
-  background-color: #7816f4;
+  color: #000;
+  background-color: #91e014;
 }
 
 a {
diff --git a/src/main.tsx b/src/main.tsx
index 66b6f19..ec57028 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -9,11 +9,13 @@ import Team from './Pages/Team'
 import Projects from './Pages/Projects'
 import Components from './Pages/Components'
 import ScrollToTop from './components/ScrollToTop'
+import Navbar from './Header/Navbar'
 
 ReactDOM.render(
   <React.StrictMode>
     <Router basename={import.meta.env.BASE_URL}>
       <ScrollToTop />
+      <Navbar />
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/team" element={<Team />} />