import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-dom";

const shaders = Shaders.create({
  helloBlue: {
    frag: GLSL`
    precision highp float;
    varying vec2 uv;
    uniform float blue;
    void main() {
      gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
    }`
  }
});


const GlVfx = () => {
  return (
    <Surface width={300} height={300}>
      {/* 
      // @ts-expect-error uniforms requires string index not number */}
      <Node shader={shaders.helloBlue} uniforms={0.5} />
    </Surface>
  );
};

export default GlVfx;