ShadertoyBackground

Author: Intermentality

package.json

@@ -11,7 +11,8 @@
     "dependencies": {
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-router-dom": "^6.27.0"
+        "react-router-dom": "^6.27.0",
+        "shadertoy-react": "^1.1.2"
     },
     "devDependencies": {
         "@monaco-editor/react": "^4.3.1",

src/Components/Background/index.tsx

@@ -1,5 +1,20 @@
+//@ts-ignore
+import ShadertoyReact from "shadertoy-react";
+//Above is like only JS, but it works with react.
+//@ts-check
+
+const fragmentShader = `
+  void main(void) {
+     vec2 uv = gl_FragCoord.xy/iResolution.xy;
+     vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
+     gl_FragColor = vec4(col*0.25 ,1.0);
+  }
+`;
+
 export function Background(): JSX.Element {
     return <>
-        <div className = "bg-black"></div>
+      <div className="-z-1 fixed top-0 left-0 w-full h-full">
+        <ShadertoyReact fs={fragmentShader} />
+      </div>
     </>;
   }

src/app.tsx

@@ -10,19 +10,23 @@ import PGASGame from './Pages/ProjectsPage/PGASGame';
 
 export const App: React.FC = () => {
     return <>
-      {<Background />}
+        {<Background />}
 
         {/* Top bar stuff */}
-        {<Navbar />}
+        <div className='z-1 relative'>
+          {<Navbar />}
+        </div>
 
         {/* Main page stuff */}
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/proj" element={<Projects />} />
+        <div className='z-0 pt-2'>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/proj" element={<Projects />} />
 
-          {/* Side Pages */}
-          <Route path="/proj-first-glsl" element={<FirstGLSL />} />
-          <Route path="/proj-pgas-game" element={<PGASGame />} />
-        </Routes>
+            {/* Side Pages */}
+            <Route path="/proj-first-glsl" element={<FirstGLSL />} />
+            <Route path="/proj-pgas-game" element={<PGASGame />} />
+          </Routes>
+        </div>
     </>;
 }