better design with selfmade shader

package.json

@@ -11,10 +11,13 @@
   "dependencies": {
     "@agentofuser/remark-oembed": "^1.0.4",
     "@mavrin/remark-typograf": "^2.2.0",
+    "@react-three/drei": "^9.56.19",
+    "@react-three/fiber": "^8.11.0",
     "@tailwindcss/typography": "^0.5.8",
     "@types/node": "18.11.11",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
+    "@types/three": "^0.149.0",
     "framer-motion": "^8.0.2",
     "gray-matter": "^4.0.3",
     "next": "13.0.6",
@@ -27,9 +30,11 @@
     "rehype-raw": "^6.1.1",
     "rehype-sanitize": "^5.0.1",
     "remark": "^14.0.2",
+    "remark-emoji": "^3.1.0",
     "remark-gfm": "^3.0.1",
     "remark-html": "^15.0.1",
     "remark-smartypants": "^2.0.0",
+    "three": "^0.149.0",
     "typescript": "4.9.3"
   },
   "devDependencies": {