Fixing up/adding things

src/components/App.jsx

@@ -2,19 +2,20 @@ import '../styles/styles.scss';
 import * as THREE from 'three';
 import { useRef, useState } from 'react';
 import { Canvas, useFrame } from '@react-three/fiber';
-import { Text, Environment, MeshReflectorMaterial, useTexture } from '@react-three/drei';
+import { Text, Environment, MeshReflectorMaterial, useTexture, MeshDistortMaterial } from '@react-three/drei';
 import { gsap } from 'gsap';
 
 import dreiVideo from '../assets/videos/drei.mp4';
 import floorTexture from '../assets/textures/texture1.jpg';
 import floorTextureNormal from '../assets/textures/texture1_normal.jpg';
+import font from '../assets/fonts/Inter-Bold.woff';
 
 const Floor = () => {
   const [floor, normal] = useTexture([floorTexture, floorTextureNormal]);
   return (
     // <MeshReflectorMaterial blur={[400, 100]} resolution={512} args={[10, 10]} mirror={0.5} mixBlur={6} mixStrength={1.5} rotation={[0, 0, 0]} color="#a0a0a0" metalness={0.4} roughnessMap={floor} normalMap={normal} normalScale={[2, 2]} />
     <mesh rotation={[-Math.PI / 2, 0, 0]}>
-          <planeGeometry attach='geometry' args={[20, 20]} />
+      <planeGeometry attach='geometry' args={[15, 7]} />
       <MeshReflectorMaterial
         blur={[400, 100]}
         resolution={2048}
@@ -25,13 +26,18 @@ const Floor = () => {
         roughness={10}
         metalness={0.4}
         normalMap={normal}
-            normalScale={[2, 2]}
+        normalScale={[3, 3]}
+        depthScale={1.2}
+        minDepthThreshold={0.4}
+        maxDepthThreshold={1.4}
       />
     </mesh>
   );
 };
 
 const App = () => {
+  const textRef = useRef();
+  const vec = useState(() => new THREE.Vector3());
   const [video] = useState(() => {
     const vid = document.createElement('video');
     vid.src = dreiVideo;
@@ -41,25 +47,49 @@ const App = () => {
     vid.play();
     return vid;
   });
+
+  useFrame((state) => {
+    // state.camera.position.lerp(vec, 0.1);
+  });
   return (
     <>
-      <Canvas concurrent gl={{ alpha: false}} pixelRatio={[1, 1.5]} camera={{ position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
+      <color attach="background" args={["black"]} />
-        <color attach="background" args={['black']} />
+      <fog attach="fog" args={["black", 2.8, 3.5]} />
-        <fog attach="fog" args={['black', 0, 9]} />
       <group position={[0, -1, 0]}>
-          <Text lineHeight={-0.8} maxWidth={4} fontSize={1} position={[-1, 1.5, -4]} rotation={[0, 0, 0]}>
+        <Text
-            Designer and Developer
+          ref={textRef}
-            <meshStandardMaterial>
+          font={font}
-              <videoTexture attach="map" args={[video]}/>
+          textAlign="center"
+          lineHeight={-0.8}
+          maxWidth={3}
+          fontSize={0.75}
+          position={[-2, 1.2, -3.2]}
+          rotation={[0, 0, 0]}
+        >
+          Designer &amp; Developer
+          <meshStandardMaterial toneMapped={false}>
+            <videoTexture
+              attach="map"
+              args={[video]}
+              encoding={THREE.sRGBEncoding}
+            />
           </meshStandardMaterial>
         </Text>
+        <mesh position={[2, 1.8, -3.2]}>
+          <sphereBufferGeometry attach="geometry" />
+          <MeshDistortMaterial
+            attach="material"
+            color="#EDEDED"
+            distort={1} // Strength, 0 disables the effect (default=1)
+            speed={2} // Speed (default=1)
+          />
+        </mesh>
         <Floor />
       </group>
-        <ambientLight intensity={0.5} />
+      <ambientLight position={[0, 0, -1]} intensity={0.5} />
       <spotLight position={[0, 0, 0]} intensity={0.3} />
       <directionalLight position={[0, 0, 0]} intensity={0.7} />
-        <Environment preset='city' />
+      <Environment preset="city" />
-      </Canvas>
     </>
   );
 };

src/scripts/app.js

@@ -1,4 +1,5 @@
 import { Suspense } from 'react';
+import { Canvas } from '@react-three/fiber';
 import { Loader } from '@react-three/drei';
 import { render } from 'react-dom';
 import App from '../components/App';
@@ -6,7 +7,9 @@ import App from '../components/App';
 render(
   <>
     <Suspense fallback={null}>
+      <Canvas gl={{ alpha: false}} pixelRatio={[1, 1.5]} camera={{ position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
         <App />
+      </Canvas>
     </Suspense>
     <Loader />
   </>,