PreviewCode Installation Copy and paste the following code into your project.components/eldoraui/novatrixbg.tsximport React, { useEffect, useRef } from "react"; import { Renderer, Program, Mesh, Color, Triangle } from "ogl"; // Vertex Shader const vert = ` attribute vec2 uv; attribute vec2 position; varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 0, 1); } `; // Fragment Shader const frag = ` precision highp float; uniform float uTime; uniform vec3 uColor; uniform vec3 uResolution; varying vec2 vUv; void main() { float mr = min(uResolution.x, uResolution.y); vec2 uv = (vUv.xy * 2.0 - 1.0) * uResolution.xy / mr; float d = -uTime * 1.2; float a = 0.0; for (float i = 0.0; i < 8.0; ++i) { a += cos(i - d - a * uv.x); d += sin(uv.y * i + a); } d += uTime * 1.0; vec3 col = vec3(cos(uv * vec2(d, a)) * 0.6 + 0.4, cos(a + d) * 0.5 + 0.5); col = cos(col * cos(vec3(d, a, 2.5)) * 0.5 + 0.5); gl_FragColor = vec4(col, 1.0); } `; interface NovatrixProps {} export const Novatrix: React.FC<NovatrixProps> = () => { const ctnDom = useRef<HTMLDivElement>(null); useEffect(() => { if (!ctnDom.current) { return; } const ctn = ctnDom.current; const renderer = new Renderer(); const gl = renderer.gl; gl.clearColor(1, 1, 1, 1); function resize() { const scale = 1; renderer.setSize(ctn.offsetWidth * scale, ctn.offsetHeight * scale); } window.addEventListener("resize", resize, false); resize(); const geometry = new Triangle(gl); const program = new Program(gl, { vertex: vert, fragment: frag, uniforms: { uTime: { value: 0 }, uColor: { value: new Color(0.3, 0.2, 0.5) }, uResolution: { value: [ gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height, ], }, }, }); const mesh = new Mesh(gl, { geometry, program }); let animateId: number; animateId = requestAnimationFrame(update); function update(t: number) { animateId = requestAnimationFrame(update); program.uniforms.uTime.value = t * 0.001; renderer.render({ scene: mesh }); } ctn.appendChild(gl.canvas); return () => { cancelAnimationFrame(animateId); window.removeEventListener("resize", resize); ctn.removeChild(gl.canvas); gl.getExtension("WEBGL_lose_context")?.loseContext(); }; }, []); return <div ref={ctnDom} className="gradient-canvas h-full w-full"></div>; }; const Background = () => { return ( <div className="h-screen w-screen"> <Novatrix /> </div> ); }; export Background;CopyExpandUpdate the import paths to match your project setup.