From 970f90ed8e9838de34b29649d3ae630889a0c83c Mon Sep 17 00:00:00 2001
From: Ava Gaiety W <ava@wroten.me>
Date: Thu, 19 Jun 2025 12:03:12 -0600
Subject: [PATCH] shader background

---
 _includes/base-header.html      | 189 +++++++++++++++---------------
 package.json                    |   1 +
 vendor/shader-web-background.js | 197 ++++++++++++++++++++++++++++++++
 3 files changed, 293 insertions(+), 94 deletions(-)
 create mode 100644 vendor/shader-web-background.js

diff --git a/_includes/base-header.html b/_includes/base-header.html
index 3674793..1208c48 100644
--- a/_includes/base-header.html
+++ b/_includes/base-header.html
@@ -34,7 +34,7 @@
   <link rel="icon" type="image/png" sizes="32x32" href="/img/site/favicons/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/img/site/favicons/favicon-16x16.png">
   <link rel="manifest" href="/img/site/favicons/site.webmanifest">
-  <script src="https://xemantic.github.io/shader-web-background/dist/shader-web-background.min.js"></script>
+  <script src="/shader-web-background.js"></script>
 
   <script type="x-shader/x-fragment" id="Image">
   precision highp float;
@@ -45,116 +45,117 @@
   // ... other needed uniforms
  
   // -- Paste your Shadertoy code here:
-#define NUM_LAYERS 10.
+  // https://www.shadertoy.com/view/ftt3R7
+  #define NUM_LAYERS 10.
 
-mat2 Rot(float a) {
-  float c = cos(a), s = sin(a);
-  return mat2(c, -s, s, c);
-}
+  mat2 Rot(float a) {
+    float c = cos(a), s = sin(a);
+    return mat2(c, -s, s, c);
+  }
 
-float Star(vec2 uv, float flare) {
-    float col = 0.;
-    float d = length(uv);
-    float m = .02/d;
+  float Star(vec2 uv, float flare) {
+      float col = 0.;
+      float d = length(uv);
+      float m = .02/d;
+      
+      float rays = max(0., 1. - abs(uv.x * uv.y * 1000.));
+      m += rays * flare;
+      uv *= Rot(3.1415/4.);
+      rays = max(0., 1. - abs(uv.x * uv.y * 1000.));
+      m += rays * .3 * flare;
+      
+      m *= smoothstep(1., .2, d);
+
+      return m;
+  }
+
+  float Hash21(vec2 p) {
+    p = fract(p * vec2(123.34, 456.21));
+    p += dot(p, p+45.32);
     
-    float rays = max(0., 1. - abs(uv.x * uv.y * 1000.));
-    m += rays * flare;
-    uv *= Rot(3.1415/4.);
-    rays = max(0., 1. - abs(uv.x * uv.y * 1000.));
-    m += rays * .3 * flare;
-    
-    m *= smoothstep(1., .2, d);
+    return fract(p.x*p.y);
+  }
 
-    return m;
-}
+  vec3 StarLayer(vec2 uv) {
+      vec3 col = vec3(0.);
+      
+      vec2 gv = fract(uv) - 0.5;
+      vec2 id = floor(uv);
+      
+      for(int y = -1; y <= 1; y++ ) {
+          for(int x = -1; x <= 1; x++) {
+              vec2 offs = vec2(x, y);
 
-float Hash21(vec2 p) {
-  p = fract(p * vec2(123.34, 456.21));
-  p += dot(p, p+45.32);
-  
-  return fract(p.x*p.y);
-}
+              float n = Hash21(id + offs);
+              float size = fract(n*345.32);
+              
+              vec2 p = vec2(n, fract(n*34.));
+              
+              float star = Star(gv - offs - p + .5, smoothstep(.8, 1., size) * .6);
+              
+              vec3 hueShift = fract(n*2345.2 + dot(uv /420.,texture2D(iChannel0, vec2(0.25, 0.)).rg))*vec3(.2, .3, .9)*123.2;
 
-vec3 StarLayer(vec2 uv) {
-    vec3 col = vec3(0.);
-    
-    vec2 gv = fract(uv) - 0.5;
-    vec2 id = floor(uv);
-    
-    for(int y = -1; y <= 1; y++ ) {
-        for(int x = -1; x <= 1; x++) {
-            vec2 offs = vec2(x, y);
+              vec3 color = sin(hueShift) * .5 + .5;
+              color = color * vec3(1., .25, 1.+size);
 
-            float n = Hash21(id + offs);
-            float size = fract(n*345.32);
-            
-            vec2 p = vec2(n, fract(n*34.));
-            
-            float star = Star(gv - offs - p + .5, smoothstep(.8, 1., size) * .6);
-            
-            vec3 hueShift = fract(n*2345.2 + dot(uv /420.,texture2D(iChannel0, vec2(0.25, 0.)).rg))*vec3(.2, .3, .9)*123.2;
+              star *= sin(iTime*3.+n*6.2831)*.4+1.;
+              col += star * size * color;
+          }
+      }
+      
+      return col;
 
-            vec3 color = sin(hueShift) * .5 + .5;
-            color = color * vec3(1., .25, 1.+size);
+  }
 
-            star *= sin(iTime*3.+n*6.2831)*.4+1.;
-            col += star * size * color;
-        }
-    }
-    
-    return col;
+  vec2 N(float angle) {
+    return vec2(sin(angle), cos(angle));
+  }
 
-}
+  void mainImage( out vec4 fragColor, in vec2 fragCoord )
+  {
+      vec2 uv = (fragCoord - 0.5*iResolution.xy)/iResolution.y;
+      vec2 M = (fragCoord - iResolution.xy*.5)/iResolution.y;
+      float t = iTime * .01;
+      
+      uv.x = abs(uv.x);
+      uv.y += tan((5./6.) * 3.1415) * .5;
 
-vec2 N(float angle) {
-  return vec2(sin(angle), cos(angle));
-}
+      vec2 n = N((5./6.) * 3.1415);
+      float d = dot(uv - vec2(.5, 0.), n);
+      uv -= n * max(0., d) * 2.;
 
-void mainImage( out vec4 fragColor, in vec2 fragCoord )
-{
-    vec2 uv = (fragCoord - 0.5*iResolution.xy)/iResolution.y;
-    vec2 M = (fragCoord - iResolution.xy*.5)/iResolution.y;
-    float t = iTime * .01;
-    
-    uv.x = abs(uv.x);
-    uv.y += tan((5./6.) * 3.1415) * .5;
+      // col += smoothstep(.01, .0, abs(d));
 
-    vec2 n = N((5./6.) * 3.1415);
-    float d = dot(uv - vec2(.5, 0.), n);
-    uv -= n * max(0., d) * 2.;
+      n = N((2./3.) * 3.1415);
+      float scale = 1.;
+      uv.x += 1.5 / 1.25;
+      for(int i=0; i<5; i++) {
+          scale *= 1.25;
+          uv *= 1.25;
+          uv.x -= 1.5;
 
-    // col += smoothstep(.01, .0, abs(d));
+          uv.x = abs(uv.x);
+          uv.x -= 0.5;
+          uv -= n * min(0., dot(uv, n)) * 2.;
+      }
 
-    n = N((2./3.) * 3.1415);
-    float scale = 1.;
-    uv.x += 1.5 / 1.25;
-    for(int i=0; i<5; i++) {
-        scale *= 1.25;
-        uv *= 1.25;
-        uv.x -= 1.5;
+   
+      uv += M * 4.;
 
-        uv.x = abs(uv.x);
-        uv.x -= 0.5;
-        uv -= n * min(0., dot(uv, n)) * 2.;
-    }
+      uv *= Rot(t);
+      vec3 col = vec3(0.);
+      
+      float layers = 10.;
+      
+      for(float i=0.; i < 1.; i+=1./NUM_LAYERS) {
+          float depth = fract(i+t);
+          float scale = mix(20., .5, depth);
+          float fade = depth * smoothstep(1., .9, depth);
+          col += StarLayer(uv * scale + i * 453.2) * fade;
+      }
 
- 
-    uv += M * 4.;
-
-    uv *= Rot(t);
-    vec3 col = vec3(0.);
-    
-    float layers = 10.;
-    
-    for(float i=0.; i < 1.; i+=1./NUM_LAYERS) {
-        float depth = fract(i+t);
-        float scale = mix(20., .5, depth);
-        float fade = depth * smoothstep(1., .9, depth);
-        col += StarLayer(uv * scale + i * 453.2) * fade;
-    }
-
-    fragColor = vec4(col,1.0);
-}
+      fragColor = vec4(col,1.0);
+  }
   // -- End of Shadertoy code
     
     
diff --git a/package.json b/package.json
index f4256b7..0bac6c6 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "build": "npx @11ty/eleventy",
     "postbuild": "run-s postbuild:*",
     "postbuild:highlighttheme": "cp ./node_modules/@catppuccin/highlightjs/css/catppuccin-variables.rgb.css ./_site",
+    "postbuild:shader": "cp ./vendor/shader-web-background.js ./_site",
     "postbuild:styles": "npx tailwindcss -i styles.css -o _site/styles.css --env production",
     "optimize": "rm -rf _site/_jampack && jampack _site",
     "test": "echo \"Error: no test specified\" && exit 1",
diff --git a/vendor/shader-web-background.js b/vendor/shader-web-background.js
new file mode 100644
index 0000000..ad92b4c
--- /dev/null
+++ b/vendor/shader-web-background.js
@@ -0,0 +1,197 @@
+// -- https://xemantic.github.io/shader-web-background/
+const shaderWebBackground = {}; (() => {
+  'use strict'; const t = (a, b) => {
+    b.initHalfFloatRGBATexture(b.width, b.height); a.texParameteri(a.TEXTURE_2D,
+      a.TEXTURE_MIN_FILTER, a.LINEAR); a.texParameteri(a.TEXTURE_2D, a.TEXTURE_MAG_FILTER,
+        a.LINEAR); a.texParameteri(a.TEXTURE_2D, a.TEXTURE_WRAP_S, a.CLAMP_TO_EDGE); a.texParameteri(a.TEXTURE_2D,
+          a.TEXTURE_WRAP_T, a.CLAMP_TO_EDGE)
+  }, x = (a, b) => {
+    console.warn("shader-web-background cannot shade, adding fallback CSS classes");
+    document.documentElement.classList.add("shader-web-background-fallback"); b.classList.add("shader-web-background-fallback");
+    if (a instanceof shaderWebBackground.GlError) console.warn("Not sufficient WebGL support:",
+      a); else throw a;
+  };
+  function y(a, b) { if (!a) throw new shaderWebBackground.ConfigError(b); }
+  function z(a) {
+    y(a instanceof HTMLCanvasElement, "config.canvas must be instance of canvas");
+    return a
+  }
+  function A() {
+    const a = document.createElement("canvas"), b = a.style; a.id = "shader-web-background"; b.width =
+      "100vw"; b.height = "100vh"; b.position = "fixed"; b.top = "0"; b.left = "0"; b.zIndex = -9999; return a
+  }
+  function B(a, b, c) {
+    y(a instanceof HTMLScriptElement && a.type === b, 'Shader source element of id "' +
+      c + '" should be of type: <script type="' + (b + '" id="' + c + '">'))
+  }
+  function D(a) {
+    const b = document.getElementById(a); y(b, 'Missing shader source: <script type="x-shader/x-fragment" id="' +
+      (a + '">')); B(b, "x-shader/x-fragment", a); return b.text
+  }
+  function E(a) {
+    a += "Vertex"; const b = document.getElementById(a); return b ? (B(b, "x-shader/x-vertex",
+      a), b.text) : "attribute vec2 V;void main(){gl_Position=vec4(V,0,1);}"
+  }
+  function F(a, b) { "loading" !== document.readyState ? b() : window.addEventListener(a, b) }
+  class G {
+    constructor(a, b, c, d) {
+      this.g = c; const l = a.gl; this.h = () => {
+        for (const f of d) f.u(l,
+          f.location, b)
+      }; this.i = () => {
+        var f = c.v, h = a.gl; h.bindBuffer(h.ARRAY_BUFFER, a.j); h.enableVertexAttribArray(f);
+        h.vertexAttribPointer(f, 2, h.FLOAT, !1, 0, 0); h.drawArrays(h.TRIANGLE_STRIP, 0, 4); h.disableVertexAttribArray(f);
+        h.bindBuffer(h.ARRAY_BUFFER, null); f = a.gl; for (h = 0; h < a.g; h++)f.activeTexture(f.TEXTURE0 +
+          h), f.bindTexture(f.TEXTURE_2D, null); a.g = 0
+      }
+    }
+  }
+  function H(a) {
+    var b = { antialias: !1, depth: !1, alpha: !1 }; try { return new I(a, b) } catch (c) {
+      throw new shaderWebBackground.GlError(c.message);
+    }
+  }
+  function J(a, b, c, d, l, f) {
+    function h(e, m, n) {
+      try {
+        {
+          var k = p; const q = k.gl, P = K(k, e, q.VERTEX_SHADER, m),
+            Q = K(k, e, q.FRAGMENT_SHADER, n), v = q.createProgram(); q.attachShader(v, P); q.attachShader(v,
+              Q); q.linkProgram(v); var r = v
+        } return r
+      } catch (q) {
+        throw new shaderWebBackground.ConfigError(q.message);
+      }
+    } const p = H(a), w = [], g = {
+      gl: p.gl, canvas: a, width: 0, height: 0, cssPixelRatio: 0, cssWidth: 0,
+      cssHeight: 0, isOverShader: (e, m) => {
+        const n = a.getBoundingClientRect(); return e >= n.left &&
+          e <= n.right && m >= n.top && m <= n.bottom
+      }, toShaderX: e => (e - a.getBoundingClientRect().left) *
+        g.cssPixelRatio + .5, toShaderY: e => a.height - (e - a.getBoundingClientRect().top) * g.cssPixelRatio -
+          .5, s: () => g.cssWidth !== a.clientWidth || g.cssHeight !== a.clientHeight ? (g.resize(), !0) :
+            !1, resize: () => {
+              const e = window.devicePixelRatio || 1, m = a.clientWidth, n = a.clientHeight,
+              k = Math.floor(m * e), r = Math.floor(n * e); a.width = k; a.height = r; g.width = k; g.height = r; g.cssPixelRatio =
+                e; g.cssWidth = m; g.cssHeight = n; p.gl.viewport(0, 0, p.canvas.width, p.canvas.height); for (const q of w) q.g.l(k,
+                  r)
+            }, texture: (e, m) => {
+              {
+                var n = p; const k = n.gl; m = m instanceof L ? m.g : m; k.activeTexture(k.TEXTURE0 +
+                  n.g); k.bindTexture(k.TEXTURE_2D, m); k.uniform1i(e, n.g++)
+              }
+            }, buffers: {}, initHalfFloatRGBATexture: (e,
+              m) => { p.h.g(e, m) }
+    }, R = Object.keys(b).length - 1; let S = 0; for (const e in b) {
+      if (S++ < R) {
+        const k =
+          b[e].texture || t; g.buffers[e] = M(p, () => { k(p.gl, g) })
+      } const m = N(p, h(e, E(e), D(e)), g.buffers[e]),
+        n = b[e].uniforms || {}; var u = Object.keys(n); for (const k of m.m) y(n[k.name], 'No configuration for uniform "' +
+          k.name + '" defined in shader "' + e + '"'), u = u.filter(r => r !== k.name); 0 !== u.length && console.warn('Extra uniforms configured for shader "' +
+            e + '", which are not present in the shader code - might have been removed by GLSL compiler if not used: ' +
+            u.join(", ")); u = m.m.map(k => ({ location: k.location, u: n[k.name] })); w.push(new G(p, g,
+              m, u))
+    } const C = () => {
+      g.s() && d && d(g.width, g.height, g); l && l(g); for (const e of w) e.g.i(e.h,
+        e.i); f && f(g); requestAnimationFrame(C)
+    }; F("load", () => {
+      g.resize(); c && c(g); d && d(g.width,
+        g.height, g); requestAnimationFrame(C)
+    }); return g
+  }
+  shaderWebBackground.Error = class extends Error { constructor(a) { super(a); this.name = "shaderWebBackground.Error" } };
+  shaderWebBackground.ConfigError = class extends shaderWebBackground.Error {
+    constructor(a) {
+      super(a);
+      this.name = "shaderWebBackground.ConfigError"
+    }
+  };
+  shaderWebBackground.GlError = class extends shaderWebBackground.Error {
+    constructor(a) {
+      super(a); this.name =
+        "shaderWebBackground.GlError"
+    }
+  };
+  shaderWebBackground.shade = function(a) {
+    y(a, "Missing config argument"); const b = a.canvas ?
+      z(a.canvas) : A(); y(a.shaders, "No shaders specified in config"); try {
+        const c = J(b, a.shaders,
+          a.onInit, a.onResize, a.onBeforeFrame, a.onAfterFrame); a.canvas || F("DOMContentLoaded",
+            () => { document.body.appendChild(b) }); return c
+      } catch (c) { (a.onError || x)(c, b) }
+  }; const O = [-1, 1, 1, 1, -1, -1, 1, -1];
+  function T(a, b) { return a.j(a.gl.getExtension(b), b + " extension is not supported") }
+  class U { constructor(a, b) { this.gl = a; this.j = b } g() { } }
+  class V extends U {
+    constructor(a, b) {
+      super(a, b); this.h = T(this, "OES_texture_half_float");
+      T(this, "OES_texture_half_float_linear")
+    } g(a, b) {
+      const c = this.gl; c.texImage2D(c.TEXTURE_2D,
+        0, c.RGBA, a, b, 0, c.RGBA, this.h.HALF_FLOAT_OES, null)
+    }
+  }
+  class W extends U {
+    constructor(a, b) { super(a, b); T(this, "EXT_color_buffer_float"); this.gl.getExtension("OES_texture_float_linear") } g(a,
+      b) {
+        const c = this.gl; c.texImage2D(c.TEXTURE_2D, 0, c.RGBA16F, a, b, 0, c.RGBA, c.HALF_FLOAT,
+          null)
+    }
+  }
+  function X(a) {
+    a = a.split(/\r?\n/); const b = a.length.toString().length; var c = []; a.forEach((d,
+      l) => {
+        l = (l + 1).toString(); l = l.length >= b ? l : " ".repeat(b - l.length) + l; c.push(l + ": " + d +
+          "\n")
+    }); return c.join("")
+  } function M(a, b) { return new L(a.gl, () => { b(a.gl) }) }
+  function N(a, b, c) {
+    const d = a.gl; a = []; const l = d.getProgramParameter(b, d.ACTIVE_UNIFORMS);
+    for (let f = 0; f < l; f++) {
+      const h = d.getActiveUniform(b, f); a.push({
+        name: h.name, location: d.getUniformLocation(b,
+          h.name)
+      })
+    } return {
+      v: d.getAttribLocation(b, "V"), m: a, l: c ? (f, h) => c.l(f, h) : () => { }, i: (f,
+        h) => { d.useProgram(b); f(); c ? (f = c.g, c.g = c.h, c.h = f, c.i(h)) : h() }
+    }
+  }
+  function K(a, b, c, d) {
+    a = a.gl; c = a.createShader(c); a.shaderSource(c, d); a.compileShader(c);
+    if (!a.getShaderParameter(c, a.COMPILE_STATUS)) {
+      const l = String(a.getShaderInfoLog(c));
+      a.deleteShader(c); b = "Cannot compile shader - " + b + ": " + l; console.log(b); console.log(X(d));
+      throw Error(b);
+    } return c
+  }
+  class I {
+    constructor(a, b) {
+      this.canvas = a; const c = (l, f) => { if (!l) throw Error(f); return l };
+      let d = a.getContext("webgl2", b); if (d) this.h = new W(d, c); else if (d = a.getContext("webgl",
+        b)) this.h = new V(d, c); c(d, "webgl context not supported on supplied canvas element: " +
+          a); this.gl = d; a = d.createBuffer(); d.bindBuffer(d.ARRAY_BUFFER, a); d.bufferData(d.ARRAY_BUFFER,
+            new Float32Array(O), d.STATIC_DRAW); d.bindBuffer(d.ARRAY_BUFFER, null); this.j = a; this.buffers =
+              {}; this.g = 0
+    }
+  }
+  function Y(a) {
+    const b = a.gl, c = b.createTexture(); b.bindTexture(b.TEXTURE_2D, c); a.o(b);
+    b.bindTexture(b.TEXTURE_2D, null); return c
+  }
+  class L {
+    constructor(a, b) {
+      this.j = a.createFramebuffer(); this.gl = a; this.o = b; this.g = this.h =
+        null
+    } l() {
+      this.h && this.gl.deleteTexture(this.h); this.g && this.gl.deleteTexture(this.g);
+      this.h = Y(this); this.g = Y(this)
+    } i(a) {
+      const b = this.gl; b.bindFramebuffer(b.FRAMEBUFFER,
+        this.j); b.framebufferTexture2D(b.FRAMEBUFFER, b.COLOR_ATTACHMENT0, b.TEXTURE_2D, this.g,
+          0); a(); b.framebufferTexture2D(b.FRAMEBUFFER, b.COLOR_ATTACHMENT0, b.TEXTURE_2D, null,
+            0); b.bindFramebuffer(b.FRAMEBUFFER, null)
+    }
+  };
+})()