better design with selfmade shader

components/R3Background.tsx

@@ -0,0 +1,61 @@
+import { useRef, useMemo } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { BufferGeometry, Material, MathUtils, Mesh } from "three";
+import { vertexShader } from './Shaders/Background/vertex';
+import { fragmentShader } from './Shaders/Background/fragment';
+
+const Fragment = () => {
+  // This reference will give us direct access to the mesh
+  const meshRef = useRef<Mesh<BufferGeometry, Material | Material[]>>(null);
+
+  const uniforms = useMemo(
+    () => ({
+      u_intensity: {
+        value: 1.0,
+      },
+      u_time: {
+        value: 0.0,
+      },
+    }),
+    []
+  );
+
+  useFrame((state) => {
+    if(!meshRef.current){
+        return;
+    }
+    const { clock } = state;
+    //@ts-ignore
+    meshRef.current.material.uniforms.u_time.value = 0.4 * clock.getElapsedTime()/5;
+    //@ts-ignore
+    meshRef.current.material.uniforms.u_intensity.value = MathUtils.lerp(
+      //@ts-ignore
+      meshRef.current.material.uniforms.u_intensity.value,
+      1.0,
+      0.02
+    );
+  });
+
+  return (
+    <mesh ref={meshRef} position={[0, 0, 0]} rotation={[-Math.PI/17, Math.PI/20, 0]} scale={1.5}>
+      <planeGeometry args={[20, 20, 200, 200]} />
+      <shaderMaterial
+        fragmentShader={fragmentShader}
+        vertexShader={vertexShader}
+        uniforms={uniforms}
+        wireframe={false}
+      />
+    </mesh>
+  );
+};
+
+
+export const R3Gradient = () => {
+    return (
+    <div className='-z-40 h-screen w-screen fixed bg-black opacity-60'>
+      <Canvas camera={{ position: [0.0, 0.0, 5.0] }}>
+        <Fragment />
+      </Canvas>
+    </div>
+    );
+};