chore(deps): add react three fiber, and three.js

libs/website/ui/introduction/welcome/welcome.section.tsx

@@ -1,19 +1,47 @@
-/* import { SplineComponent } from '@website/shared/ui/spline/spline-component'; */
-import { WELCOME_CONSTANTS } from '../constants/welcome.constants';
-import { Welcome } from './welcome';
+/* eslint-disable unused-imports/no-unused-vars */
+import type { ThreeElements } from '@react-three/fiber'
+import type * as THREE from 'three'
+import { Canvas, useFrame } from '@react-three/fiber'
+import React, { useRef, useState } from 'react'
+import { WELCOME_CONSTATNTS } from '../constants/welcome.constants'
+import { Welcome } from './welcome'
+
+function Box(props: ThreeElements['mesh']) {
+  const meshRef = useRef<THREE.Mesh>(null!)
+  const [hovered, setHover] = useState(false)
+  const [active, setActive] = useState(false)
+  useFrame((state, delta) => (meshRef.current.rotation.x += delta))
+  return (
+    <mesh
+      {...props}
+      ref={meshRef}
+      scale={active ? 1.5 : 1}
+      onClick={event => setActive(!active)}
+      onPointerOver={event => setHover(true)}
+      onPointerOut={event => setHover(false)}
+    >
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? 'hotpink' : '#2f74c0'} />
+    </mesh>
+  )
+}
 
 export function WelcomeSection() {
-    return (
-        <section className="relative flex justify-center w-full mx-auto lg:mx-0">
-            {/* <SplineComponent
-        className="absolute -bottom-16 lg:left-0 lg:top-0 lg:scale-[1.2]"
-        link="https://prod.spline.design/nnjZJFW1wThAacUS/scene.splinecode"
-      /> */}
-            <div className="w-full h-screen max-w-screen-xl px-5 py-5 lg:px-20 lg:py-14">
-                <section className="w-full lg:w-3/5">
-                    <Welcome socials={WELCOME_CONSTANTS.SOCIALS} />
-                </section>
-            </div>
+  return (
+    <section className="relative flex justify-center w-full mx-auto lg:mx-0">
+      <Canvas>
+        <ambientLight intensity={Math.PI / 2} />
+        <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+        <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+        <Box position={[-1.2, 0, 0]} />
+        <Box position={[1.2, 0, 0]} />
+      </Canvas>
+
+      <div className="w-full h-screen max-w-screen-xl px-5 py-5 lg:px-20 lg:py-14">
+        <section className="w-full lg:w-3/5">
+          <Welcome socials={WELCOME_CONSTATNTS.SOCIALS} />
         </section>
-    );
+      </div>
+    </section>
+  )
 }

package.json

@@ -34,6 +34,7 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@react-three/fiber": "^8.17.10",
     "@remix-run/node": "2.14.0",
     "@remix-run/react": "2.14.0",
     "@remix-run/serve": "2.14.0",
@@ -47,6 +48,7 @@
     "react-day-picker": "8.10.1",
     "react-dom": "^18.3.1",
     "remix-utils": "^7.7.0",
+    "three": "^0.171.0",
     "vaul": "^1.1.1"
   },
   "devDependencies": {
@@ -111,6 +113,7 @@
     "@types/node": "22.8.6",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/three": "^0.170.0",
     "@unocss/eslint-plugin": "^0.62.4",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/coverage-v8": "^2.1.4",