novatrix-background

1"use client"
2 
3import { useEffect, useRef } from "react"
4import { Color, Mesh, Program, Renderer, Triangle } from "ogl"
5 
6const vertexShader = `
7attribute vec2 uv;
8attribute vec2 position;
9 
10varying vec2 vUv;
11 
12void main() {
13  vUv = uv;
14  gl_Position = vec4(position, 0, 1);
15}
16`
17 
18const fragmentShader = `
19precision highp float;
20 
21uniform float uTime;
22uniform vec3 uColor;
23uniform vec3 uResolution;
24uniform vec2 uMouse;
25uniform float uAmplitude;
26uniform float uSpeed;
27 
28varying vec2 vUv;
29 
30void main() {
31  float mr = min(uResolution.x, uResolution.y);
32  vec2 uv = (vUv.xy * 2.0 - 1.0) * uResolution.xy / mr;
33 
34  uv += (uMouse - vec2(0.5)) * uAmplitude;
35 
36  float d = -uTime * 0.5 * uSpeed;
37  float a = 0.0;
38  for (float i = 0.0; i < 8.0; ++i) {
39    a += cos(i - d - a * uv.x);
40    d += sin(uv.y * i + a);
41  }
42  d += uTime * 0.5 * uSpeed;
43  vec3 col = vec3(cos(uv * vec2(d, a)) * 0.6 + 0.4, cos(a + d) * 0.5 + 0.5);
44  col = cos(col * cos(vec3(d, a, 2.5)) * 0.5 + 0.5) * uColor;
45  gl_FragColor = vec4(col, 1.0);
46}
47`
48 
49interface NovatrixProps {
50  color?: [number, number, number]
51  speed?: number
52  amplitude?: number
53  mouseReact?: boolean
54}
55 
56export default function Novatrix({
57  color = [1, 1, 1],
58  speed = 1.0,
59  amplitude = 0.1,
60  mouseReact = false,
61  ...rest
62}: NovatrixProps) {
63  const ctnDom = useRef<HTMLDivElement>(null)
64  const mousePos = useRef({ x: 0.5, y: 0.5 })
65 
66  useEffect(() => {
67    if (!ctnDom.current) return
68    const ctn = ctnDom.current
69    const renderer = new Renderer()
70    const gl = renderer.gl
71    gl.clearColor(1, 1, 1, 1)
72 
73    // eslint-disable-next-line prefer-const
74    let program: Program
75 
76    function resize() {
77      const scale = 1
78      renderer.setSize(ctn.offsetWidth * scale, ctn.offsetHeight * scale)
79      if (program) {
80        program.uniforms.uResolution.value = new Color(
81          gl.canvas.width,
82          gl.canvas.height,
83          gl.canvas.width / gl.canvas.height
84        )
85      }
86    }
87    window.addEventListener("resize", resize, false)
88    resize()
89 
90    const geometry = new Triangle(gl)
91    program = new Program(gl, {
92      vertex: vertexShader,
93      fragment: fragmentShader,
94      uniforms: {
95        uTime: { value: 0 },
96        uColor: { value: new Color(...color) },
97        uResolution: {
98          value: new Color(
99            gl.canvas.width,
100            gl.canvas.height,
101            gl.canvas.width / gl.canvas.height
102          ),
103        },
104        uMouse: {
105// … truncated