Shader gradient background

Build "Shader gradient background" for my site using the Enrichr Library element at https://enrichr.dev/elements/shader-gradient-background.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/shader-gradient-background.json (markup, CSS, JavaScript, parameters).
Requirements: vanilla JavaScript and CSS, no new dependencies; keep the behaviour of the source unchanged; respect prefers-reduced-motion; work on touch screens; keep it accessible.

Settings:
- colorA: #1b4d3e
- colorB: #c6f26b
- speed: 1
- scale: 2.2

Verify: reduced motion shows no movement, it works at 375px wide, there are no console errors, and scrolling stays smooth.

<div class="ef-shader"><canvas class="ef-shader__c" aria-hidden="true"></canvas></div>

.ef-shader { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(135deg, var(--ef-a, #1b4d3e), var(--ef-b, #c6f26b)); }
.ef-shader__c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

// Shader gradient background: a slow, domain-warped noise gradient drawn with one WebGL fragment shader.
// Falls back to the plain CSS gradient when WebGL is missing, and draws a single still frame for reduced motion.
// Put it inside a positioned parent; the element fills it. mount(root, { colorA, colorB, speed, scale })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var wrap = root.querySelector(".ef-shader");
  var canvas = root.querySelector(".ef-shader__c");
  var gl = canvas.getContext("webgl", { antialias: false, alpha: false, powerPreference: "low-power" });
  var opts = {}, raf = 0, visible = true, io = null, prog, u = {}, t0 = performance.now(), still = 2.0;
  var VS = "attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}";
  var FS = "precision mediump float;uniform vec2 uR;uniform float uT,uS;uniform vec3 uA,uB;" +
    "float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}" +
    "float n(vec2 p){vec2 i=floor(p),f=fract(p);f=f*f*(3.-2.*f);return mix(mix(h(i),h(i+vec2(1.,0.)),f.x),mix(h(i+vec2(0.,1.)),h(i+vec2(1.,1.)),f.x),f.y);}" +
    "float fbm(vec2 p){float v=0.,k=.5;for(int i=0;i<4;i++){v+=k*n(p);p*=2.;k*=.5;}return v;}" +
    "void main(){vec2 uv=gl_FragCoord.xy/uR;uv.x*=uR.x/uR.y;vec2 p=uv*uS;" +
    "float q=fbm(p+vec2(uT*.07,0.));float w=fbm(p+3.*q+vec2(0.,uT*.05));" +
    "vec3 c=mix(uA,uB,smoothstep(.2,.8,w));c*=.65+.5*q;gl_FragColor=vec4(c,1.);}";

  function rgb(hex) {
    var m = /^#?([0-9a-f]{6})$/i.exec(hex || "");
    var v = parseInt(m ? m[1] : "1b4d3e", 16);
    return [(v >> 16) / 255, ((v >> 8) & 255) / 255, (v & 255) / 255];
  }
  function sh(type, src) { var s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return gl.getShaderParameter(s, gl.COMPILE_STATUS) ? s : null; }
  function setup() {
    var v = sh(gl.VERTEX_SHADER, VS), f = sh(gl.FRAGMENT_SHADER, FS);
    if (!v || !f) return false;
    prog = gl.createProgram(); gl.attachShader(prog, v); gl.attachShader(prog, f); gl.linkProgram(prog);
    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) return false;
    gl.useProgram(prog);
    var b = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, b);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
    var loc = gl.getAttribLocation(prog, "p"); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
    ["uR", "uT", "uS", "uA", "uB"].forEach(function (k) { u[k] = gl.getUniformLocation(prog, k); });
    return true;
  }
  function size() {
    var dpr = Math.min(window.devicePixelRatio || 1, 1.5);
    var w = Math.max(1, Math.round(wrap.clientWidth * dpr)), hh = Math.max(1, Math.round(wrap.clientHeight * dpr));
    if (canvas.width !== w || canvas.height !== hh) { canvas.width = w; canvas.height = hh; gl.viewport(0, 0, w, hh); }
  }
  function draw(t) {
    size();
    gl.uniform2f(u.uR, canvas.width, canvas.height);
    gl.uniform1f(u.uT, t);
    gl.uniform1f(u.uS, opts.scale);
    gl.uniform3fv(u.uA, rgb(opts.colorA));
    gl.uniform3fv(u.uB, rgb(opts.colorB));
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  }
  function loop(now) {
    raf = requestAnimationFrame(loop);
    if (visible && !document.hidden) draw(((now - t0) / 1000) * opts.speed);
  }
  function update(next) {
    opts = Object.assign({ colorA: "#1b4d3e", colorB: "#c6f26b", speed: 1, scale: 2.2 }, opts, next || {});
    wrap.style.setProperty("--ef-a", opts.colorA);
    wrap.style.setProperty("--ef-b", opts.colorB);
    if (gl && prog && (reduce || !raf)) draw(still);
  }
  var ok = gl && setup();
  update(o);
  if (!ok) { canvas.style.display = "none"; return { update: update, destroy: function () {} }; }
  if (!reduce) {
    if ("IntersectionObserver" in window) { io = new IntersectionObserver(function (e) { visible = e[0].isIntersecting; }); io.observe(wrap); }
    raf = requestAnimationFrame(loop);
  } else {
    draw(still);
    window.addEventListener("resize", function () { draw(still); });
  }
  return { update: update, destroy: function () { cancelAnimationFrame(raf); if (io) io.disconnect(); } };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"colorA":"#1b4d3e","colorB":"#c6f26b","speed":1,"scale":2.2});