@paper-design/shaders 0.0.18 → 0.0.20

package/README.md

@@ -24,6 +24,4 @@ const meshGradient = new ShaderMount(
   meshGradientFragmentShader,
   shaderParams
 );
-
-meshGradient.setUniforms(shaderParams);
 ```

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /** The core Shader Mounting class. Pass it a canvas element and a fragment shader to get started. */
-export { ShaderMount } from './shader-mount';
+export { ShaderMount, type ShaderMountUniforms } from './shader-mount';
 export { grainCloudsFragmentShader, type GrainCloudsUniforms } from './shaders/grain-clouds';
 /** A shader that renders a mesh gradient with a rotating noise pattern and several layers of fractal noise */
 export { meshGradientFragmentShader, type MeshGradientUniforms } from './shaders/mesh-gradient';

package/dist/index.js

@@ -1,11 +1,11 @@
 /***** Paper Shaders: https://github.com/paper-design/shaders *****/
-var x=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastFrameTime=0;totalAnimationTime=0;speed=1;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;constructor(o,r,t={},a,i=1,s=0){this.canvas=o,this.fragmentShader=r,this.providedUniforms=t,this.totalAnimationTime=s;let n=o.getContext("webgl2",a);if(!n)throw new Error("WebGL not supported");this.gl=n,this.initWebGL(),this.setupResizeObserver(),this.setSpeed(i),this.canvas.setAttribute("data-paper-shaders","true")}initWebGL=()=>{let o=S(this.gl,y,this.fragmentShader);o&&(this.program=o,this.setupPositionAttribute(),this.setupUniforms())};setupPositionAttribute=()=>{let o=this.gl.getAttribLocation(this.program,"a_position"),r=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,r);let t=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(t),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(o),this.gl.vertexAttribPointer(o,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{this.uniformLocations={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_pixelRatio:this.gl.getUniformLocation(this.program,"u_pixelRatio"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution"),...Object.fromEntries(Object.keys(this.providedUniforms).map(o=>[o,this.gl.getUniformLocation(this.program,o)]))}};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let o=window.devicePixelRatio,r=this.canvas.clientWidth*o,t=this.canvas.clientHeight*o;(this.canvas.width!==r||this.canvas.height!==t)&&(this.canvas.width=r,this.canvas.height=t,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=o=>{if(this.hasBeenDisposed)return;let r=o-this.lastFrameTime;this.lastFrameTime=o,this.speed!==0&&(this.totalAnimationTime+=r*this.speed),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.gl.uniform1f(this.uniformLocations.u_pixelRatio,window.devicePixelRatio),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.speed!==0?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};updateProvidedUniforms=()=>{this.gl.useProgram(this.program),Object.entries(this.providedUniforms).forEach(([o,r])=>{let t=this.uniformLocations[o];if(t)if(Array.isArray(r))switch(r.length){case 2:this.gl.uniform2fv(t,r);break;case 3:this.gl.uniform3fv(t,r);break;case 4:this.gl.uniform4fv(t,r);break;default:r.length===9?this.gl.uniformMatrix3fv(t,!1,r):r.length===16?this.gl.uniformMatrix4fv(t,!1,r):console.warn(`Unsupported uniform array length: ${r.length}`)}else typeof r=="number"?this.gl.uniform1f(t,r):typeof r=="boolean"?this.gl.uniform1i(t,r?1:0):console.warn(`Unsupported uniform type for ${o}: ${typeof r}`)})};setSeed=o=>{let r=8.333333333333334;this.totalAnimationTime=o*r,this.lastFrameTime=performance.now(),this.render(performance.now())};setSpeed=(o=1)=>{this.speed=o,this.rafId===null&&o!==0&&(this.lastFrameTime=performance.now(),this.rafId=requestAnimationFrame(this.render)),this.rafId!==null&&o===0&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=o=>{this.providedUniforms={...this.providedUniforms,...o},this.updateProvidedUniforms(),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.gl&&this.program&&(this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},y=`#version 300 es
+var x=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastFrameTime=0;totalAnimationTime=0;speed=1;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;textures=new Map;constructor(e,t,r={},i,a=1,u=0){this.canvas=e,this.fragmentShader=t,this.providedUniforms=r,this.totalAnimationTime=u;let n=e.getContext("webgl2",i);if(!n)throw new Error("WebGL not supported");this.gl=n,this.initProgram(),this.setupPositionAttribute(),this.setupUniforms(),this.setUniformValues(this.providedUniforms),this.setupResizeObserver(),this.setSpeed(a),this.canvas.setAttribute("data-paper-shaders","true")}initProgram=()=>{let e=S(this.gl,y,this.fragmentShader);e&&(this.program=e)};setupPositionAttribute=()=>{let e=this.gl.getAttribLocation(this.program,"a_position"),t=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,t);let r=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(r),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(e),this.gl.vertexAttribPointer(e,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{let e={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_pixelRatio:this.gl.getUniformLocation(this.program,"u_pixelRatio"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution")};Object.entries(this.providedUniforms).forEach(([t,r])=>{if(e[t]=this.gl.getUniformLocation(this.program,t),r instanceof HTMLImageElement){let i=`${t}_aspect_ratio`;e[i]=this.gl.getUniformLocation(this.program,i)}}),this.uniformLocations=e};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let e=this.canvas.clientWidth,t=this.canvas.clientHeight,r=window.devicePixelRatio,i=e*r,a=t*r;if(this.canvas.width!==i||this.canvas.height!==a){if(this.canvas.width=i,this.canvas.height=a,r!==1){let u=window.getComputedStyle(this.canvas).width,n=window.getComputedStyle(this.canvas).height;parseFloat(u)===i&&parseFloat(n)===a&&(this.canvas.style.width=`${e}px`,this.canvas.style.height=`${t}px`)}this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now())}};render=e=>{if(this.hasBeenDisposed)return;if(this.program===null){console.warn("Tried to render before program or gl was initialized");return}let t=e-this.lastFrameTime;this.lastFrameTime=e,this.speed!==0&&(this.totalAnimationTime+=t*this.speed),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.gl.uniform1f(this.uniformLocations.u_pixelRatio,window.devicePixelRatio),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.speed!==0?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};setTextureUniform=(e,t)=>{if(!t.complete||t.naturalWidth===0)throw new Error(`Image for uniform ${e} must be fully loaded`);let r=this.textures.get(e);r&&this.gl.deleteTexture(r);let i=this.gl.createTexture();this.gl.bindTexture(this.gl.TEXTURE_2D,i),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,t);let a=this.gl.getError();if(a!==this.gl.NO_ERROR||i===null){console.error("WebGL error when uploading texture:",a);return}this.textures.set(e,i);let u=this.uniformLocations[e];if(u){let n=this.textures.size-1;this.gl.useProgram(this.program),this.gl.activeTexture(this.gl.TEXTURE0+n),this.gl.bindTexture(this.gl.TEXTURE_2D,i),this.gl.uniform1i(u,n);let c=`${e}_aspect_ratio`,l=this.uniformLocations[c];if(l){let m=t.naturalWidth/t.naturalHeight;this.gl.uniform1f(l,m)}}};setUniformValues=e=>{this.gl.useProgram(this.program),Object.entries(e).forEach(([t,r])=>{let i=this.uniformLocations[t];if(!i){console.warn(`Uniform location for ${t} not found`);return}if(r instanceof HTMLImageElement)this.setTextureUniform(t,r);else if(Array.isArray(r))switch(r.length){case 2:this.gl.uniform2fv(i,r);break;case 3:this.gl.uniform3fv(i,r);break;case 4:this.gl.uniform4fv(i,r);break;default:r.length===9?this.gl.uniformMatrix3fv(i,!1,r):r.length===16?this.gl.uniformMatrix4fv(i,!1,r):console.warn(`Unsupported uniform array length: ${r.length}`)}else typeof r=="number"?this.gl.uniform1f(i,r):typeof r=="boolean"?this.gl.uniform1i(i,r?1:0):console.warn(`Unsupported uniform type for ${t}: ${typeof r}`)})};setSeed=e=>{let t=8.333333333333334;this.totalAnimationTime=e*t,this.lastFrameTime=performance.now(),this.render(performance.now())};setSpeed=(e=1)=>{this.speed=e,this.rafId===null&&e!==0&&(this.lastFrameTime=performance.now(),this.rafId=requestAnimationFrame(this.render)),this.rafId!==null&&e===0&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=e=>{this.providedUniforms={...this.providedUniforms,...e},this.setUniformValues(e),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.gl&&this.program&&(this.textures.forEach(e=>{this.gl.deleteTexture(e)}),this.textures.clear(),this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},y=`#version 300 es
 layout(location = 0) in vec4 a_position;
 
 void main() {
   gl_Position = a_position;
 }
-`;function g(e,o,r){let t=e.createShader(o);return t?(e.shaderSource(t,r),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS)?t:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(t)),e.deleteShader(t),null)):null}function S(e,o,r){let t=g(e,e.VERTEX_SHADER,o),a=g(e,e.FRAGMENT_SHADER,r);if(!t||!a)return null;let i=e.createProgram();return i?(e.attachShader(i,t),e.attachShader(i,a),e.linkProgram(i),e.getProgramParameter(i,e.LINK_STATUS)?(e.detachShader(i,t),e.detachShader(i,a),e.deleteShader(t),e.deleteShader(a),i):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(i)),e.deleteProgram(i),e.deleteShader(t),e.deleteShader(a),null)):null}var w=`#version 300 es
+`;function b(o,e,t){let r=o.createShader(e);return r?(o.shaderSource(r,t),o.compileShader(r),o.getShaderParameter(r,o.COMPILE_STATUS)?r:(console.error("An error occurred compiling the shaders: "+o.getShaderInfoLog(r)),o.deleteShader(r),null)):null}function S(o,e,t){let r=b(o,o.VERTEX_SHADER,e),i=b(o,o.FRAGMENT_SHADER,t);if(!r||!i)return null;let a=o.createProgram();return a?(o.attachShader(a,r),o.attachShader(a,i),o.linkProgram(a),o.getProgramParameter(a,o.LINK_STATUS)?(o.detachShader(a,r),o.detachShader(a,i),o.deleteShader(r),o.deleteShader(i),a):(console.error("Unable to initialize the shader program: "+o.getProgramInfoLog(a)),o.deleteProgram(a),o.deleteShader(r),o.deleteShader(i),null)):null}var w=`#version 300 es
 precision highp float;
 
 uniform vec2 u_resolution;
@@ -93,7 +93,7 @@ void main() {
 
   fragColor = vec4(color * opacity, opacity);
 }
-`;var z=`#version 300 es
+`;var R=`#version 300 es
 precision highp float;
 
 uniform float u_pixelRatio;
@@ -171,7 +171,7 @@ void main() {
     
     fragColor = vec4(color, opacity);
 }
-`;var C=`#version 300 es
+`;var z=`#version 300 es
 precision highp float;
 
 uniform float u_pixelRatio;
@@ -194,15 +194,23 @@ out vec4 fragColor;
 float random(in vec2 st) {
   return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
 }
-float noise(in vec2 st) {
+float noise(vec2 st) {
   vec2 i = floor(st);
   vec2 f = fract(st);
   float a = random(i);
   float b = random(i + vec2(1.0, 0.0));
   float c = random(i + vec2(0.0, 1.0));
   float d = random(i + vec2(1.0, 1.0));
+
+  // Smoothstep for interpolation
   vec2 u = f * f * (3.0 - 2.0 * f);
-  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+
+  // Do the interpolation as two nested mix operations
+  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+
 }
 float fbm(in vec2 n) {
   float total = 0.0, amplitude = .4;
@@ -227,10 +235,9 @@ void main() {
   float ratio = u_resolution.x / u_resolution.y;
 
   uv -= .5;
-  uv /= u_pixelRatio;
   float scale = .5 * u_scale + 1e-4;
   uv *= (1. - step(1. - scale, 1.) / scale);
-  uv *= 3.;
+  uv *= 1.5;
   uv.x *= ratio;
 
   float t = u_time;
@@ -241,9 +248,9 @@ void main() {
   vec2 polar_uv = vec2(atg, .1 * t - (.5 * length(uv)) + 1. / pow(length(uv), .5));
   polar_uv *= u_noiseScale;
 
-  float noise_left = fbm(polar_uv + .05 * t);
+  float noise_left = fbm(polar_uv + mod(.05 * t, 35.));
   polar_uv.x = mod(polar_uv.x, u_noiseScale * TWO_PI);
-  float noise_right = fbm(polar_uv + .05 * t);
+  float noise_right = fbm(polar_uv + mod(.05 * t, 35.));
   float noise = mix(noise_right, noise_left, smoothstep(-.2, .2, uv.x));
 
   float center_shape = 1. - pow(smoothstep(2., .0, length(uv)), 50.);
@@ -275,7 +282,7 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;var k=`#version 300 es
+`;var C=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -332,7 +339,7 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;var R=`#version 300 es
+`;var k=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -419,7 +426,7 @@ void main() {
 
   fragColor = vec4(color * opacity, opacity);
 }
-`;var F={Circle:0,Diamond:1,Square:2,Triangle:3},P=`#version 300 es
+`;var T={Circle:0,Diamond:1,Square:2,Triangle:3},F=`#version 300 es
 precision highp float;
 
 uniform vec2 u_resolution;
@@ -619,7 +626,7 @@ void main() {
   }
   fragColor = vec4(color, opacity);
 }
-`;var U=`#version 300 es
+`;var P=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -662,9 +669,8 @@ void main() {
   float ratio = u_resolution.x / u_resolution.y;
 
   uv -= .5;
-  uv /= u_pixelRatio;
   float scale = .5 * u_scale + 1e-4;
-  uv *= (18. * (1. - step(1. - scale, 1.) / scale));
+  uv *= (9. * (1. - step(1. - scale, 1.) / scale));
   uv += .5;
   uv.x *= ratio;
 
@@ -716,7 +722,7 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;var W=`#version 300 es
+`;var U=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -727,7 +733,7 @@ uniform float u_scale;
 uniform vec4 u_color1;
 uniform vec4 u_color2;
 uniform float u_proportion;
-uniform float u_contour;
+uniform float u_softness;
 uniform float u_octaveCount;
 uniform float u_persistence;
 uniform float u_lacunarity;
@@ -887,7 +893,7 @@ void main() {
     
     float max_amp = get_max_amp(persistence, oct_count);
     float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);
-    float sharpness = clamp(1. - u_contour, 0., 1.);
+    float sharpness = clamp(u_softness, 0., 1.);
     float smooth_w = 0.5 * fwidth(noise_normalized);
     float sharp_noise = smoothstep(
         .5 - .5 * sharpness - smooth_w, 
@@ -900,7 +906,7 @@ void main() {
 
     fragColor = vec4(color, opacity);
 }
-`;var T=`#version 300 es
+`;var E=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -918,9 +924,9 @@ uniform vec4 u_colorMid;
 uniform float u_colorGradient;
 uniform float u_distance;
 uniform float u_edgesSize;
-uniform float u_edgesSharpness;
+uniform float u_edgesSoftness;
 uniform float u_middleSize;
-uniform float u_middleSharpness;
+uniform float u_middleSoftness;
 
 #define TWO_PI 6.28318530718
 
@@ -992,12 +998,12 @@ void main() {
 
   float dot_shape = pow(distance.x, 2.) / (2. * clamp(u_middleSize, 0., 1.) + 1e-4);
   float dot_edge_width = fwidth(dot_shape);
-  float dotSharp = clamp(u_middleSharpness, 0., 1.);
+  float dotSharp = clamp(1. - u_middleSoftness, 0., 1.);
   dot_shape = 1. - smoothstep(.5 * dotSharp - dot_edge_width, 1. - .5 * dotSharp, dot_shape);
 
   float cell_edge_width = fwidth(distance.x);
   float w = .7 * (clamp(u_edgesSize, 0., 1.) - .1);
-  float edgeSharp = clamp(u_edgesSharpness, 0., 1.);
+  float edgeSharp = clamp(u_edgesSoftness, 0., 1.);
   cell_shape = smoothstep(w - cell_edge_width, w + edgeSharp, cell_shape);
 
   dot_shape *= cell_shape;
@@ -1014,7 +1020,7 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;var O=`#version 300 es
+`;var W=`#version 300 es
 precision highp float;
 
 uniform float u_pixelRatio;
@@ -1030,7 +1036,7 @@ uniform float u_frequency;
 uniform float u_amplitude;
 uniform float u_spacing;
 uniform float u_dutyCycle;
-uniform float u_edgeBlur;
+uniform float u_softness;
 
 #define TWO_PI 6.28318530718
 #define PI 3.14159265358979323846
@@ -1064,7 +1070,7 @@ void main() {
   float shape = .5 + .5 * sin((uv.y + offset) * PI / spacing);
   
   float edge_width = .02 / (1. + abs(shape)) * (.001 + u_scale);
-  edge_width += .5 * max(0., u_edgeBlur);
+  edge_width += .5 * max(0., u_softness);
   float dc = clamp(u_dutyCycle, 0., 1.);
   float t = smoothstep(dc - edge_width, dc + edge_width, shape);
 
@@ -1073,7 +1079,7 @@ void main() {
   
   fragColor = vec4(color, opacity);
 }
-`;var A={Checks:0,Stripes:1,Edge:2},B=`#version 300 es
+`;var A={Checks:0,Stripes:1,Edge:2},O=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -1194,7 +1200,7 @@ void main() {
 
     fragColor = vec4(color_mix.rgb, color_mix.a);
 }
-`;var q=`#version 300 es
+`;var L=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -1307,7 +1313,7 @@ void main() {
   
   fragColor = vec4(color, opacity);
 }
-`;var G=`#version 300 es
+`;var B=`#version 300 es
 precision highp float;
 
 uniform float u_scale;
@@ -1324,7 +1330,7 @@ uniform float u_strokeTaper;
 
 uniform float u_noiseFreq;
 uniform float u_noisePower;
-uniform float u_blur;
+uniform float u_softness;
 
 uniform float u_time;
 uniform float u_pixelRatio;
@@ -1371,8 +1377,7 @@ void main() {
   uv -= .5;
   uv += vec2(-u_offsetX, u_offsetY);
 
-  uv *= (.4 + 30. * u_scale);
-  uv /= u_pixelRatio;
+  uv *= (.4 + 15. * u_scale);
   uv.x *= ratio;
 
   float t = u_time;
@@ -1383,7 +1388,7 @@ void main() {
 
   angle_norm += .125 * u_noisePower * snoise(.5 * u_noiseFreq * uv);
 
-  float offset = pow(l, 1. - clamp(0., 1., u_spiralDensity)) + angle_norm;
+  float offset = pow(l, 1. - clamp(u_spiralDensity, 0., 1.)) + angle_norm;
   
   float stripe_map = fract(offset);
   stripe_map -= .5 * u_strokeTaper * l;
@@ -1402,12 +1407,12 @@ void main() {
   mid = pow(mid, 2.);
   shape -= .5 * u_strokeCap * mid;
   
-  shape = smoothstep(stroke_width - edge_width - u_blur, stroke_width + edge_width + u_blur, shape);
+  shape = smoothstep(stroke_width - edge_width - u_softness, stroke_width + edge_width + u_softness, shape);
 
   vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, shape);
   float opacity = mix(u_color1.a, u_color2.a, shape);
 
   fragColor = vec4(color, opacity);
 }
-`;function f(e,o=[0,0,0,1]){if(Array.isArray(e))return e.length===4?e:e.length===3?[...e,1]:f(o);if(typeof e!="string")return f(o);let r,t,a,i=1;if(e.startsWith("#"))[r,t,a,i]=L(e);else if(e.startsWith("rgb"))[r,t,a,i]=D(e);else if(e.startsWith("hsl"))[r,t,a,i]=N(E(e));else return console.error("Unsupported color format",e),f(o);return[m(r,0,1),m(t,0,1),m(a,0,1),m(i,0,1)]}function L(e){e=e.replace(/^#/,""),e.length===3&&(e=e.split("").map(i=>i+i).join("")),e.length===6&&(e=e+"ff");let o=parseInt(e.slice(0,2),16)/255,r=parseInt(e.slice(2,4),16)/255,t=parseInt(e.slice(4,6),16)/255,a=parseInt(e.slice(6,8),16)/255;return[o,r,t,a]}function D(e){let o=e.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);return o?[parseInt(o[1]??"0")/255,parseInt(o[2]??"0")/255,parseInt(o[3]??"0")/255,o[4]===void 0?1:parseFloat(o[4])]:[0,0,0,1]}function E(e){let o=e.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);return o?[parseInt(o[1]??"0"),parseInt(o[2]??"0"),parseInt(o[3]??"0"),o[4]===void 0?1:parseFloat(o[4])]:[0,0,0,1]}function N(e){let[o,r,t,a]=e,i=o/360,s=r/100,n=t/100,_,p,d;if(r===0)_=p=d=n;else{let v=(l,b,u)=>(u<0&&(u+=1),u>1&&(u-=1),u<.16666666666666666?l+(b-l)*6*u:u<.5?b:u<.6666666666666666?l+(b-l)*(.6666666666666666-u)*6:l),c=n<.5?n*(1+s):n+s-n*s,h=2*n-c;_=v(h,c,i+1/3),p=v(h,c,i),d=v(h,c,i-1/3)}return[_,p,d,a]}var m=(e,o,r)=>Math.min(Math.max(e,o),r);export{F as DotsGridShapes,A as PatternShapes,x as ShaderMount,P as dotsGridFragmentShader,R as dotsOrbitFragmentShader,f as getShaderColorFromString,q as godRaysFragmentShader,w as grainCloudsFragmentShader,z as meshGradientFragmentShader,U as metaballsFragmentShader,k as neuroNoiseFragmentShader,W as perlinNoiseFragmentShader,C as smokeRingFragmentShader,G as spiralFragmentShader,I as steppedSimplexNoiseFragmentShader,T as voronoiFragmentShader,B as warpFragmentShader,O as wavesFragmentShader};
+`;function d(o,e=[0,0,0,1]){if(Array.isArray(o))return o.length===4?o:o.length===3?[...o,1]:d(e);if(typeof o!="string")return d(e);let t,r,i,a=1;if(o.startsWith("#"))[t,r,i,a]=D(o);else if(o.startsWith("rgb"))[t,r,i,a]=G(o);else if(o.startsWith("hsl"))[t,r,i,a]=M(q(o));else return console.error("Unsupported color format",o),d(e);return[p(t,0,1),p(r,0,1),p(i,0,1),p(a,0,1)]}function D(o){o=o.replace(/^#/,""),o.length===3&&(o=o.split("").map(a=>a+a).join("")),o.length===6&&(o=o+"ff");let e=parseInt(o.slice(0,2),16)/255,t=parseInt(o.slice(2,4),16)/255,r=parseInt(o.slice(4,6),16)/255,i=parseInt(o.slice(6,8),16)/255;return[e,t,r,i]}function G(o){let e=o.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);return e?[parseInt(e[1]??"0")/255,parseInt(e[2]??"0")/255,parseInt(e[3]??"0")/255,e[4]===void 0?1:parseFloat(e[4])]:[0,0,0,1]}function q(o){let e=o.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);return e?[parseInt(e[1]??"0"),parseInt(e[2]??"0"),parseInt(e[3]??"0"),e[4]===void 0?1:parseFloat(e[4])]:[0,0,0,1]}function M(o){let[e,t,r,i]=o,a=e/360,u=t/100,n=r/100,c,l,m;if(t===0)c=l=m=n;else{let v=(f,g,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<.16666666666666666?f+(g-f)*6*s:s<.5?g:s<.6666666666666666?f+(g-f)*(.6666666666666666-s)*6:f),_=n<.5?n*(1+u):n+u-n*u,h=2*n-_;c=v(h,_,a+1/3),l=v(h,_,a),m=v(h,_,a-1/3)}return[c,l,m,i]}var p=(o,e,t)=>Math.min(Math.max(o,e),t);export{T as DotsGridShapes,A as PatternShapes,x as ShaderMount,F as dotsGridFragmentShader,k as dotsOrbitFragmentShader,d as getShaderColorFromString,L as godRaysFragmentShader,w as grainCloudsFragmentShader,R as meshGradientFragmentShader,P as metaballsFragmentShader,C as neuroNoiseFragmentShader,U as perlinNoiseFragmentShader,z as smokeRingFragmentShader,B as spiralFragmentShader,I as steppedSimplexNoiseFragmentShader,E as voronoiFragmentShader,O as warpFragmentShader,W as wavesFragmentShader};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shader-mount.ts", "../src/shaders/grain-clouds.ts", "../src/shaders/mesh-gradient.ts", "../src/shaders/smoke-ring.ts", "../src/shaders/neuro-noise.ts", "../src/shaders/dots-orbit.ts", "../src/shaders/dots-grid.ts", "../src/shaders/stepped-simplex-noise.ts", "../src/shaders/metaballs.ts", "../src/shaders/perlin-noise.ts", "../src/shaders/voronoi.ts", "../src/shaders/waves.ts", "../src/shaders/warp.ts", "../src/shaders/god-rays.ts", "../src/shaders/spiral.ts", "../src/get-shader-color-from-string.ts"],
-  "sourcesContent": ["export class ShaderMount {\n  private canvas: HTMLCanvasElement;\n  private gl: WebGLRenderingContext;\n  private program: WebGLProgram | null = null;\n  private uniformLocations: Record<string, WebGLUniformLocation | null> = {};\n  /** The fragment shader that we are using */\n  private fragmentShader: string;\n  /** Stores the RAF for the render loop */\n  private rafId: number | null = null;\n  /** Time of the last rendered frame */\n  private lastFrameTime = 0;\n  /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */\n  private totalAnimationTime = 0;\n  /** The current speed that we progress through animation time (multiplies by delta time every update). Allows negatives to play in reverse. If set to 0, rAF will stop entirely so static shaders have no recurring performance costs */\n  private speed = 1;\n  /** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */\n  private providedUniforms: Record<string, number | number[]>;\n  /** Just a sanity check to make sure frames don't run after we're disposed */\n  private hasBeenDisposed = false;\n  /** If the resolution of the canvas has changed since the last render */\n  private resolutionChanged = true;\n\n  constructor(\n    canvas: HTMLCanvasElement,\n    fragmentShader: string,\n    uniforms: Record<string, number | number[]> = {},\n    webGlContextAttributes?: WebGLContextAttributes,\n    /** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */\n    speed = 1,\n    /** Pass a seed to offset the starting u_time value and give deterministic results*/\n    seed = 0\n  ) {\n    this.canvas = canvas;\n    this.fragmentShader = fragmentShader;\n    this.providedUniforms = uniforms;\n    // Base our starting animation time on the provided seed value\n    this.totalAnimationTime = seed;\n\n    const gl = canvas.getContext('webgl2', webGlContextAttributes);\n    if (!gl) {\n      throw new Error('WebGL not supported');\n    }\n    this.gl = gl;\n\n    this.initWebGL();\n    this.setupResizeObserver();\n\n    // Set the animation speed after everything is ready to go\n    this.setSpeed(speed);\n\n    // Mark canvas as paper shader mount\n    this.canvas.setAttribute('data-paper-shaders', 'true');\n  }\n\n  private initWebGL = () => {\n    const program = createProgram(this.gl, vertexShaderSource, this.fragmentShader);\n    if (!program) return;\n    this.program = program;\n\n    this.setupPositionAttribute();\n    this.setupUniforms();\n  };\n\n  private setupPositionAttribute = () => {\n    const positionAttributeLocation = this.gl.getAttribLocation(this.program!, 'a_position');\n    const positionBuffer = this.gl.createBuffer();\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);\n    const positions = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];\n    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);\n    this.gl.enableVertexAttribArray(positionAttributeLocation);\n    this.gl.vertexAttribPointer(positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);\n  };\n\n  private setupUniforms = () => {\n    this.uniformLocations = {\n      u_time: this.gl.getUniformLocation(this.program!, 'u_time'),\n      u_pixelRatio: this.gl.getUniformLocation(this.program!, 'u_pixelRatio'),\n      u_resolution: this.gl.getUniformLocation(this.program!, 'u_resolution'),\n      ...Object.fromEntries(\n        Object.keys(this.providedUniforms).map((key) => [key, this.gl.getUniformLocation(this.program!, key)])\n      ),\n    };\n  };\n\n  private resizeObserver: ResizeObserver | null = null;\n  private setupResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => this.handleResize());\n    this.resizeObserver.observe(this.canvas);\n    this.handleResize();\n  };\n\n  private handleResize = () => {\n    const pixelRatio = window.devicePixelRatio;\n    const newWidth = this.canvas.clientWidth * pixelRatio;\n    const newHeight = this.canvas.clientHeight * pixelRatio;\n    if (this.canvas.width !== newWidth || this.canvas.height !== newHeight) {\n      this.canvas.width = newWidth;\n      this.canvas.height = newHeight;\n      this.resolutionChanged = true;\n      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);\n      this.render(performance.now()); // this is necessary to avoid flashes while resizing (the next scheduled render will set uniforms)\n    }\n  };\n\n  private render = (currentTime: number) => {\n    if (this.hasBeenDisposed) return;\n\n    // Calculate the delta time\n    const dt = currentTime - this.lastFrameTime;\n    this.lastFrameTime = currentTime;\n    // Increase the total animation time by dt * animationSpeed\n    if (this.speed !== 0) {\n      this.totalAnimationTime += dt * this.speed;\n    }\n\n    // Clear the canvas\n    this.gl.clear(this.gl.COLOR_BUFFER_BIT);\n\n    // Update uniforms\n    this.gl.useProgram(this.program);\n\n    // Update the time uniform\n    this.gl.uniform1f(this.uniformLocations.u_time!, this.totalAnimationTime * 0.001);\n\n    // If the resolution has changed, we need to update the uniform\n    if (this.resolutionChanged) {\n      this.gl.uniform2f(this.uniformLocations.u_resolution!, this.gl.canvas.width, this.gl.canvas.height);\n      this.gl.uniform1f(this.uniformLocations.u_pixelRatio!, window.devicePixelRatio);\n      this.resolutionChanged = false;\n    }\n\n    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);\n\n    // Loop if we're animating\n    if (this.speed !== 0) {\n      this.requestRender();\n    } else {\n      this.rafId = null;\n    }\n  };\n\n  private requestRender = () => {\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n    }\n    this.rafId = requestAnimationFrame(this.render);\n  };\n\n  private updateProvidedUniforms = () => {\n    this.gl.useProgram(this.program);\n    Object.entries(this.providedUniforms).forEach(([key, value]) => {\n      const location = this.uniformLocations[key];\n      if (location) {\n        if (Array.isArray(value)) {\n          switch (value.length) {\n            case 2:\n              this.gl.uniform2fv(location, value);\n              break;\n            case 3:\n              this.gl.uniform3fv(location, value);\n              break;\n            case 4:\n              this.gl.uniform4fv(location, value);\n              break;\n            default:\n              if (value.length === 9) {\n                this.gl.uniformMatrix3fv(location, false, value);\n              } else if (value.length === 16) {\n                this.gl.uniformMatrix4fv(location, false, value);\n              } else {\n                console.warn(`Unsupported uniform array length: ${value.length}`);\n              }\n          }\n        } else if (typeof value === 'number') {\n          this.gl.uniform1f(location, value);\n        } else if (typeof value === 'boolean') {\n          this.gl.uniform1i(location, value ? 1 : 0);\n        } else {\n          console.warn(`Unsupported uniform type for ${key}: ${typeof value}`);\n        }\n      }\n    });\n  };\n\n  /** Set a seed to get a deterministic result */\n  public setSeed = (newSeed: number): void => {\n    const oneFrameAt120Fps = 1000 / 120;\n    this.totalAnimationTime = newSeed * oneFrameAt120Fps;\n    this.lastFrameTime = performance.now();\n    this.render(performance.now());\n  };\n\n  /** Set an animation speed (or 0 to stop animation) */\n  public setSpeed = (newSpeed: number = 1): void => {\n    // Set the new animation speed\n    this.speed = newSpeed;\n\n    if (this.rafId === null && newSpeed !== 0) {\n      // Moving from 0 to animating, kick off a new rAF loop\n      this.lastFrameTime = performance.now();\n      this.rafId = requestAnimationFrame(this.render);\n    }\n\n    if (this.rafId !== null && newSpeed === 0) {\n      // Moving from animating to not animating, cancel the rAF loop\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n  };\n\n  /** Update the uniforms that are provided by the outside shader */\n  public setUniforms = (newUniforms: Record<string, number | number[]>): void => {\n    this.providedUniforms = { ...this.providedUniforms, ...newUniforms };\n\n    // If we need to allow users to add uniforms after the shader has been created, we can do that here\n    // But right now we're expecting the uniform list to be predictable and static\n    // this.setupUniforms();\n\n    this.updateProvidedUniforms();\n    this.render(performance.now());\n  };\n\n  /** Dispose of the shader mount, cleaning up all of the WebGL resources */\n  public dispose = (): void => {\n    // Immediately mark as disposed to prevent future renders from leaking in\n    this.hasBeenDisposed = true;\n\n    // Cancel the rAF loop\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n\n    if (this.gl && this.program) {\n      this.gl.deleteProgram(this.program);\n      this.program = null;\n\n      // Reset the WebGL context\n      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n      this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);\n      this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);\n      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);\n\n      // Clear any errors\n      this.gl.getError();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n\n    this.uniformLocations = {};\n  };\n}\n\n/** Vertex shader for the shader mount */\nconst vertexShaderSource = `#version 300 es\nlayout(location = 0) in vec4 a_position;\n\nvoid main() {\n  gl_Position = a_position;\n}\n`;\n\nfunction createShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));\n    gl.deleteShader(shader);\n    return null;\n  }\n\n  return shader;\n}\n\nfunction createProgram(\n  gl: WebGLRenderingContext,\n  vertexShaderSource: string,\n  fragmentShaderSource: string\n): WebGLProgram | null {\n  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);\n  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);\n\n  if (!vertexShader || !fragmentShader) return null;\n\n  const program = gl.createProgram();\n  if (!program) return null;\n\n  gl.attachShader(program, vertexShader);\n  gl.attachShader(program, fragmentShader);\n  gl.linkProgram(program);\n\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));\n    gl.deleteProgram(program);\n    gl.deleteShader(vertexShader);\n    gl.deleteShader(fragmentShader);\n    return null;\n  }\n\n  // Clean up shaders after successful linking\n  gl.detachShader(program, vertexShader);\n  gl.detachShader(program, fragmentShader);\n  gl.deleteShader(vertexShader);\n  gl.deleteShader(fragmentShader);\n\n  return program;\n}\n", "export type GrainCloudsUniforms = {\n  u_scale: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_grainAmount: number;\n};\n\n/**\n * Renders a grainy texture over top of blobby animated clouds\n * This is an example shader that we're using to bootstrap the project\n * Generated by Claude 3.5 Sonnet\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_color1 - the first mixed color\n * u_color2 - the second mixed color\n * u_grainAmount - the power of overlapping grain texture\n */\n\nexport const grainCloudsFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\nuniform float u_time;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_grainAmount;\n\nout vec4 fragColor;\n\n// Simplex 2D noise\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\n\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n\nfloat rand(vec2 n) {\n  return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\n}\nfloat noise(vec2 n) {\n  const vec2 d = vec2(0.0, 1.0);\n  vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\n  return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\n}\nfloat fbm(vec2 n) {\n  float total = 0.0, amplitude = .2;\n  for (int i = 0; i < 6; i++) {\n    total += noise(n) * amplitude;\n    n += n;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (.0004 * (1. - step(1. - scale, 1.) / scale));\n  uv *= u_resolution;\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  // Create blobby texture\n  float n = snoise(uv + u_time);\n  n += 0.5 * snoise(uv * 2.0 - u_time * 0.5);\n  n += 0.25 * snoise(uv * 4.0 + u_time * 0.25);\n  n = n * 0.5 + 0.5;\n\n  // Color interpolation\n  vec3 color = mix(u_color1.rgb, u_color2.rgb, n);\n  float opacity = mix(u_color1.a, u_color2.a, n);\n\n  // Add grain\n  float grain = fbm(uv * 1000.);\n  color.rgb += (grain - 0.5) * u_grainAmount;\n\n  fragColor = vec4(color * opacity, opacity);\n}\n`;\n", "export type MeshGradientUniforms = {\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_color3: [number, number, number, number];\n  u_color4: [number, number, number, number];\n};\n\n/**\n * Mesh Gradient, based on https://www.shadertoy.com/view/wdyczG\n * Renders a mesh gradient with a rotating noise pattern\n * and several layers of fractal noise\n *\n * Uniforms include:\n * u_color1: The first color of the mesh gradient\n * u_color2: The second color of the mesh gradient\n * u_color3: The third color of the mesh gradient\n * u_color4: The fourth color of the mesh gradient\n */\n\nexport const meshGradientFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\n\nout vec4 fragColor;\n\n#define S(a,b,t) smoothstep(a,b,t)\n\nmat2 Rot(float a) {\n    float s = sin(a);\n    float c = cos(a);\n    return mat2(c, -s, s, c);\n}\n\nvec2 hash(vec2 p) {\n    vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));\n    p3 += dot(p3, p3.yzx + 33.33);\n    return fract((p3.xx+p3.yz)*p3.zy);\n}\n\nfloat noise( in vec2 p ) {\n    vec2 i = floor( p );\n    vec2 f = fract( p );\n    vec2 u = f*f*(3.0-2.0*f);\n\n    float n = mix( mix( dot( -1.0+2.0*hash( i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),\n                        dot( -1.0+2.0*hash( i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),\n                   mix( dot( -1.0+2.0*hash( i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),\n                        dot( -1.0+2.0*hash( i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);\n    return 0.5 + 0.5*n;\n}\n\n\nvoid main() {\n    vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n    float ratio = u_resolution.x / u_resolution.y;\n    \n    uv /= u_pixelRatio;\n    \n    vec2 tuv = uv;\n    tuv -= .5;\n\n    // rotate with Noise\n    float degree = noise(vec2(u_time, tuv.x * tuv.y));\n\n    tuv.y *= 1./ratio;\n    tuv *= Rot(radians((degree-.5)*720.+180.));\n    tuv.y *= ratio;\n\n\n    // Wave warp with sin\n    float frequency = 5.;\n    float amplitude = 30.;\n    float speed = u_time * 2.;\n    tuv.x += sin(tuv.y*frequency+speed)/amplitude;\n    tuv.y += sin(tuv.x*frequency*1.5+speed)/(amplitude*.5);\n\n\n    float proportion_1 = S(-.3, .2, (tuv*Rot(radians(-5.))).x);\n    vec3 layer1_color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, proportion_1);\n    float layer1_opacity = mix(u_color1.a, u_color2.a, proportion_1);\n    vec3 layer2_color = mix(u_color3.rgb * u_color3.a, u_color4.rgb * u_color4.a, proportion_1);\n    float layer2_opacity = mix(u_color3.a, u_color4.a, proportion_1);\n\n    float proportion_2 = S(.5, -.3, tuv.y);\n    vec3 color = mix(layer1_color, layer2_color, proportion_2);\n    float opacity = mix(layer1_opacity, layer2_opacity, proportion_2);\n    \n    fragColor = vec4(color, opacity);\n}\n`;\n", "export type SmokeRingUniforms = {\n  u_scale: number;\n  u_colorBack: [number, number, number, number];\n  u_colorInner: [number, number, number, number];\n  u_colorOuter: [number, number, number, number];\n  u_noiseScale: number;\n  u_thickness: number;\n};\n\n/**\n * Smoke Ring by Ksenia Kondrashova\n * Renders a fractional Brownian motion (fBm) noise over the\n * polar coordinates masked with ring shape\n *\n * Uniforms include:\n * u_scale - the scale applied to user space: with scale = 1 the ring fits the screen height\n * u_colorBack - the background color of the scene\n * u_colorInner - the inner color of the ring gradient\n * u_colorOuter - the outer color of the ring gradient\n * u_noiseScale - the resolution of noise texture\n * u_thickness - the thickness of the ring\n */\n\nexport const smokeRingFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorInner;\nuniform vec4 u_colorOuter;\nuniform float u_noiseScale;\nuniform float u_thickness;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nfloat random(in vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\nfloat noise(in vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\nfloat fbm(in vec2 n) {\n  float total = 0.0, amplitude = .4;\n  for (int i = 0; i < 12; i++) {\n    total += noise(n) * amplitude;\n    n += n;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\nfloat get_ring_shape(vec2 uv, float innerRadius, float outerRadius) {\n  float distance = length(uv);\n  float line_width = outerRadius - innerRadius;\n  float ringValue = smoothstep(innerRadius, innerRadius + .8 * line_width, distance);\n  ringValue -= smoothstep(outerRadius, outerRadius + 1.2 * line_width, distance);\n  return clamp(ringValue, 0., 1.);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  uv /= u_pixelRatio;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (1. - step(1. - scale, 1.) / scale);\n  uv *= 3.;\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  float atg = atan(uv.y, uv.x);\n  float angle = (atg + PI) / TWO_PI;\n\n  vec2 polar_uv = vec2(atg, .1 * t - (.5 * length(uv)) + 1. / pow(length(uv), .5));\n  polar_uv *= u_noiseScale;\n\n  float noise_left = fbm(polar_uv + .05 * t);\n  polar_uv.x = mod(polar_uv.x, u_noiseScale * TWO_PI);\n  float noise_right = fbm(polar_uv + .05 * t);\n  float noise = mix(noise_right, noise_left, smoothstep(-.2, .2, uv.x));\n\n  float center_shape = 1. - pow(smoothstep(2., .0, length(uv)), 50.);\n\n  float radius = .4 - .25 * u_thickness;\n  float thickness = u_thickness;\n  thickness = pow(thickness, 2.);\n\n  float ring_shape = get_ring_shape(uv * (.5 + .6 * noise), radius - .2 * thickness, radius + .5 * thickness);\n\n  float ring_shape_outer = 1. - pow(ring_shape, 7.);\n  ring_shape_outer *= ring_shape;\n\n  float ring_shape_inner = ring_shape - ring_shape_outer;\n  ring_shape_inner *= ring_shape;\n\n  float background = u_colorBack.a;\n\n  float opacity = ring_shape_outer * u_colorOuter.a;\n  opacity += ring_shape_inner * u_colorInner.a;\n  opacity += background * (1. - ring_shape_inner * u_colorInner.a - ring_shape_outer * u_colorOuter.a);\n\n  vec3 color = u_colorBack.rgb * (1. - ring_shape) * background;\n  color += u_colorOuter.rgb * ring_shape_outer * u_colorOuter.a;\n  color += u_colorInner.rgb * ring_shape_inner * u_colorInner.a;\n\n  color += u_colorBack.rgb * ring_shape_inner * (1. - u_colorInner.a) * background;\n  color += u_colorBack.rgb * ring_shape_outer * (1. - u_colorOuter.a) * background;\n\n  fragColor = vec4(color, opacity);\n}\n`;\n", "export type NeuroNoiseUniforms = {\n  u_scale: number;\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_brightness: number;\n};\n\n/**\n * Neuro Noise Pattern\n * The original artwork: https://codepen.io/ksenia-k/full/vYwgrWv by Ksenia Kondrashova\n * Renders a fractal-like structure made of several layers of since-arches\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_colorFront - the front color of pattern\n * u_colorBack - the back color of pattern\n * u_brightness - the power (brightness) of pattern lines\n */\n\nexport const neuroNoiseFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_brightness;\n\nout vec4 fragColor;\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nfloat neuro_shape(vec2 uv, float t) {\n  vec2 sine_acc = vec2(0.);\n  vec2 res = vec2(0.);\n  float scale = 8.;\n\n  for (int j = 0; j < 15; j++) {\n    uv = rotate(uv, 1.);\n    sine_acc = rotate(sine_acc, 1.);\n    vec2 layer = uv * scale + float(j) + sine_acc - t;\n    sine_acc += sin(layer);\n    res += (.5 + .5 * cos(layer)) / scale;\n    scale *= (1.2);\n  }\n  return res.x + res.y;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (.001 * (1. - step(1. - scale, 1.) / scale));\n  uv *= u_resolution;\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float t = u_time;\n\n  float noise = neuro_shape(uv, t);\n\n  noise = u_brightness * pow(noise, 3.);\n  noise += pow(noise, 12.);\n  noise = max(.0, noise - .5);\n\n  vec3 color = mix(u_colorBack.rgb * u_colorBack.a, u_colorFront.rgb * u_colorFront.a, noise);\n  float opacity = mix(u_colorBack.a, u_colorFront.a, noise);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n", "export type DotsOrbitUniforms = {\n  u_scale: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_color3: [number, number, number, number];\n  u_color4: [number, number, number, number];\n  u_dotSize: number;\n  u_dotSizeRange: number;\n  u_spreading: number;\n};\n\n/**\n * Dots Pattern with dots moving around their grid position\n * The artwork by Ksenia Kondrashova\n * Renders a dot pattern with dots placed in the center of each cell of animated Voronoi diagram\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_color1 - the first dots color\n * u_color2 - the second dots color\n * u_color3 - the third dots color\n * u_color4 - the fourth dots color\n * u_dotSize (0 .. 1) - the base dot radius (relative to cell size)\n * u_dotSizeRange (0 .. 1) - the dot radius to vary between the cells\n * u_spreading (0 .. 1) - the distance each dot can move around the regular grid\n */\n\nexport const dotsOrbitFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\nuniform float u_dotSize;\nuniform float u_dotSizeRange;\nuniform float u_spreading;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n\nfloat random(in vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\nvec2 random2(vec2 p) {\n  return vec2(random(p), random(200. * p));\n}\n\nvec3 get_voronoi_shape(vec2 _uv, float time) {\n  vec2 i_uv = floor(_uv);\n  vec2 f_uv = fract(_uv);\n\n  float min_dist = 1.;\n  vec2 cell_randomizer = vec2(0.);\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tile_offset = vec2(float(x), float(y));\n      vec2 rand = random2(i_uv + tile_offset);\n      vec2 cell_center = .5 + 1e-4 + .25 * clamp(u_spreading, 0., 1.) * sin(time + TWO_PI * rand);\n      float dist = length(tile_offset + cell_center - f_uv);\n      if (dist < min_dist) {\n        min_dist = dist;\n        cell_randomizer = rand;\n      }\n      min_dist = min(min_dist, dist);\n    }\n  }\n\n  return vec3(min_dist, cell_randomizer);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (.02 * (1. - step(1. - scale, 1.) / scale));\n  uv *= u_resolution;\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float t = u_time;\n\n  vec3 voronoi = get_voronoi_shape(uv, t) + 1e-4;\n\n  float radius = .25 * clamp(u_dotSize, 0., 1.) - .5 * clamp(u_dotSizeRange, 0., 1.) * voronoi[2];\n  float dist = voronoi[0];\n  float edge_width = fwidth(dist);\n  float shape = smoothstep(radius + edge_width, radius - edge_width, dist);\n\n  float color_randomizer = voronoi[1];\n\n  float opacity =\n    u_color1.a * step(0.0, color_randomizer) * step(color_randomizer, 0.25) +\n    u_color2.a * step(0.25, color_randomizer) * step(color_randomizer, 0.5) +\n    u_color3.a * step(0.5, color_randomizer) * step(color_randomizer, 0.75) +\n    u_color4.a * step(0.75, color_randomizer) * step(color_randomizer, 1.0);\n\n  opacity *= shape;\n\n  vec3 color =\n    u_color1.rgb * step(0.0, color_randomizer) * step(color_randomizer, 0.25) +\n    u_color2.rgb * step(0.25, color_randomizer) * step(color_randomizer, 0.5) +\n    u_color3.rgb * step(0.5, color_randomizer) * step(color_randomizer, 0.75) +\n    u_color4.rgb * step(0.75, color_randomizer) * step(color_randomizer, 1.0);\n\n  fragColor = vec4(color * opacity, opacity);\n}\n`;\n", "/** Possible values for the shape uniform */\nexport const DotsGridShapes = {\n  Circle: 0,\n  Diamond: 1,\n  Square: 2,\n  Triangle: 3,\n} as const;\nexport type DotsGridShape = (typeof DotsGridShapes)[keyof typeof DotsGridShapes];\n\nexport type DotsGridUniforms = {\n  u_colorBack: [number, number, number, number];\n  u_colorFill: [number, number, number, number];\n  u_colorStroke: [number, number, number, number];\n  u_dotSize: number;\n  u_gridSpacingX: number;\n  u_gridSpacingY: number;\n  u_strokeWidth: number;\n  u_sizeRange: number;\n  u_opacityRange: number;\n  u_shape: DotsGridShape;\n};\n\n/**\n * Dot Grid Pattern\n * (the size parameters are set in pixels)\n *\n * Uniforms include:\n * u_colorBack - the background color\n * u_colorFill - the dots fill color\n * u_colorStroke - the dots stroke color\n * u_dotSize (px) - the base dot radius\n * u_strokeWidth (px) - the stroke (to be subtracted from u_dotSize)\n * u_gridSpacingX (px) - horizontal grid spacing\n * u_gridSpacingY (px) - xertical grid spacing\n * u_sizeRange (0 .. 1) - variety of dot size\n * u_opacityRange(0 .. 1) - variety of dot opacity to be applied equally to fill and stroke\n * u_shape - shape code (0 - circle, 1 - diamond, 2 - square, 3 - triangle)\n */\n\nexport const dotsGridFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gridSpacingX;\nuniform float u_gridSpacingY;\nuniform float u_strokeWidth;\nuniform float u_sizeRange;\nuniform float u_opacityRange;\nuniform float u_shape;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nfloat hash(vec2 st) {\n    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\nvec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }\n\n  float snoise(vec2 v) {\n    const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n                        -0.577350269189626, 0.024390243902439);\n    vec2 i  = floor(v + dot(v, C.yy));\n    vec2 x0 = v -   i + dot(i, C.xx);\n    vec2 i1;\n    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n    vec4 x12 = x0.xyxy + C.xxzz;\n    x12.xy -= i1;\n    i = mod(i, 289.0);\n    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),\n      dot(x12.zw,x12.zw)), 0.0);\n    m = m*m ;\n    m = m*m ;\n    vec3 x = 2.0 * fract(p * C.www) - 1.0;\n    vec3 h = abs(x) - 0.5;\n    vec3 ox = floor(x + 0.5);\n    vec3 a0 = x - ox;\n    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);\n    vec3 g;\n    g.x = a0.x * x0.x + h.x * x0.y;\n    g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n    return 130.0 * dot(m, g);\n  }\nfloat polygon(vec2 p, float N, float rot) {\n    float a = atan(p.x, p.y) + rot;\n    float r = TWO_PI / float(N);\n\n    return cos(floor(.5 + a/r) * r - a) * length(p);\n}\n\nvoid main() {\n    vec2 uv = gl_FragCoord.xy;\n    uv.y = u_resolution.y - uv.y;\n\n    uv /= u_pixelRatio;\n\n    vec2 grid = fract(uv / vec2(u_gridSpacingX, u_gridSpacingY)) + 1e-4;\n    vec2 grid_idx = floor(uv / vec2(u_gridSpacingX, u_gridSpacingY));\n    float size_randomizer = .5 + .5 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\n    float opacity_randomizer = .5 + .5 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\n\n    vec2 center = vec2(0.5) - 1e-3;\n    vec2 p = (grid - center) * vec2(u_gridSpacingX, u_gridSpacingY);\n\n    float base_size = u_dotSize * (1. - size_randomizer * clamp(u_sizeRange, 0., 1.));\n    float stroke_width = u_strokeWidth;\n\n    float dist;\n    if (u_shape < 0.5) {\n        // Circle\n        dist = length(p);\n    } else if (u_shape < 1.5) {\n        // Diamond\n        dist = polygon(1.5 * p, 4., .25 * PI);\n    } else if (u_shape < 2.5) {\n        // Square\n        dist = polygon(1.5 * p, 4., 1e-3);\n    } else {\n        // Triangle\n        p = p * 2. - 1.;\n        p.y -= .75 * base_size;\n        stroke_width *= 2.;\n        dist = polygon(p, 3., 1e-3);\n    }\n\n    float edge_width = fwidth(dist);\n    float shape_outer = smoothstep(base_size + edge_width, base_size - edge_width, dist);\n    float shape_inner = smoothstep(base_size - u_strokeWidth + edge_width, base_size - u_strokeWidth - edge_width, dist);\n    float stroke = clamp(shape_outer - shape_inner, 0., 1.);\n\n    float dot_opacity = max(0., 1. - opacity_randomizer * clamp(u_opacityRange, 0., 1.));\n\n    vec3 color = u_colorBack.rgb * u_colorBack.a;\n    color = mix(color, u_colorFill.rgb, u_colorFill.a * dot_opacity * shape_inner);\n    color = mix(color, u_colorStroke.rgb, u_colorStroke.a * dot_opacity * stroke);\n\n    float opacity = u_colorBack.a;\n    opacity += u_colorFill.a * shape_inner * dot_opacity;\n    opacity += u_colorStroke.a * stroke * dot_opacity;\n\n    fragColor = vec4(color, opacity);\n}\n`;\n", "export type SteppedSimplexNoiseUniforms = {\n  u_scale: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_color3: [number, number, number, number];\n  u_color4: [number, number, number, number];\n  u_color5: [number, number, number, number];\n  u_steps_number: number;\n};\n\n/**\n * Stepped Simplex Noise by Ksenia Kondrashova\n * Calculates a combination of 2 simplex noises with result rendered as\n * an X-stepped 5-colored gradient\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_color1 - the first gradient color\n * u_color2 - the second gradient color\n * u_color3 - the third gradient color\n * u_color4 - the fourth gradient color\n * u_color5 - the fifth gradient color\n * u_steps_number - the number of solid colors to show as a stepped gradient\n */\n\nexport const steppedSimplexNoiseFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\nuniform vec4 u_color5;\nuniform float u_steps_number;\n\nout vec4 fragColor;\n\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n\nfloat get_noise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nvec4 getColor(int index) {\n  if (index == 0) return u_color1;\n  if (index == 1) return u_color2;\n  if (index == 2) return u_color3;\n  if (index == 3) return u_color4;\n  if (index == 4) return u_color5;\n  return u_color1;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (.0008 * (1. - step(1. - scale, 1.) / scale));\n  uv *= u_resolution;\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float t = u_time;\n\n  float noise = .5 + .5 * get_noise(uv, t);\n  noise = floor(noise * u_steps_number) / u_steps_number;\n\n  vec3 color = u_color1.rgb * u_color1.a;\n  float opacity = u_color1.a;\n  for (int i = 0; i < 5; i++) {\n    vec4 next_c = getColor(i + 1);\n    float proportion = smoothstep((float(i) + .5) / 5., (float(i) + 2.) / 5., noise);\n    color = mix(color, next_c.rgb * next_c.a, proportion);\n    opacity = mix(opacity, next_c.a, proportion);\n  }\n  fragColor = vec4(color, opacity);\n}\n`;\n", "export type MetaballsUniforms = {\n  u_scale: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_color3: [number, number, number, number];\n  u_ballSize: number;\n  u_visibilityRange: number;\n};\n\n/**\n * Metaballs (circular shapes with gooey effect applied)\n * The artwork by Ksenia Kondrashova\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n *    (with scale = 1 metaballs fit the screen height)\n * u_color1 - the mataballs gradient color #1\n * u_color2 - the mataballs gradient color #2\n * u_color3 - the mataballs gradient color #3\n * u_ballSize (0 .. 1) - the size coefficient applied to each ball\n * u_visibilityRange (0 .. 1) - to show 2 to 15 balls\n */\n\nexport const metaballsFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform float u_ballSize;\nuniform float u_visibilityRange;\n\n#define TWO_PI 6.28318530718\n\nout vec4 fragColor;\n\nfloat hash(float x) {\n  return fract(sin(x) * 43758.5453123);\n}\nfloat lerp(float a, float b, float t) {\n  return a + t * (b - a);\n}\nfloat noise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f); // Smoothstep function for interpolation\n  return lerp(hash(i), hash(i + 1.0), u);\n}\n\nfloat get_ball_shape(vec2 uv, vec2 c, float p) {\n  float s = .5 * length(uv - c);\n  s = 1. - clamp(s, 0., 1.);\n  s = pow(s, p);\n  return s;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  uv /= u_pixelRatio;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (18. * (1. - step(1. - scale, 1.) / scale));\n  uv += .5;\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  vec3 total_color = vec3(0.);\n  float total_shape = 0.;\n\n  const int max_balls_number = 15;\n  for (int i = 0; i < max_balls_number; i++) {\n    vec2 pos = vec2(.5) + 1e-4;\n    float idx_fract = float(i) / float(max_balls_number);\n    float angle = TWO_PI * idx_fract;\n\n    float speed = 1. - .2 * idx_fract;\n    float noiseX = noise(angle * 10. + float(i) + t * speed);\n    float noiseY = noise(angle * 20. + float(i) - t * speed);\n\n    pos += 7. * (vec2(noiseX, noiseY) - .5);\n\n    vec4 ball_color;\n    if (i % 3 == 0) {\n      ball_color = u_color1;\n    } else if (i % 3 == 1) {\n      ball_color = u_color2;\n    } else {\n      ball_color = u_color3;\n    }\n\n    float shape = get_ball_shape(uv, pos, 6. - 4. * u_ballSize) * ball_color.a;\n\n    shape *= smoothstep((float(i) - 1.) / float(max_balls_number), idx_fract, u_visibilityRange);\n\n    total_color += ball_color.rgb * shape;\n    total_shape += shape;\n  }\n\n  total_color /= max(total_shape, 1e-4);\n\n  float edge_width = fwidth(total_shape);\n  float final_shape = smoothstep(.4, .4 + edge_width, total_shape);\n\n  vec3 color = total_color * final_shape;\n  float opacity = final_shape;\n\n  if (opacity < .01) {\n    discard;\n  }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n", "export type PerlinNoiseUniforms = {\n  u_scale: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_proportion: number;\n  u_contour: number;\n  u_octaveCount: number;\n  u_persistence: number;\n  u_lacunarity: number;\n};\n\n/**\n * 3d Perlin noise with exposed parameters\n * Based on https://www.shadertoy.com/view/NlSGDz\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_color1 - the first mixed color\n * u_color2 - the second mixed color\n * u_proportion (0 .. 1) - the proportion between u_color1 and u_color2;\n * u_contour - the sharpness of the transition between u_color1 and u_color2 in the noise output\n * u_octaveCount - the number of octaves for Perlin noise;\n *    higher values increase the complexity of the noise\n * u_persistence (0 .. 1) - the amplitude of each successive octave of the noise;\n *    lower values make higher octaves less pronounced\n * u_lacunarity - the frequency of each successive octave of the noise;\n *    higher values increase the detail\n */\n\nexport const perlinNoiseFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_proportion;\nuniform float u_contour;\nuniform float u_octaveCount;\nuniform float u_persistence;\nuniform float u_lacunarity;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n\nuint hash(uint x, uint seed) {\n  const uint m = 0x5bd1e995U;\n  uint hash = seed;\n    // process input\n    uint k = x;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\nuint hash(uvec3 x, uint seed){\n    const uint m = 0x5bd1e995U;\n    uint hash = seed;\n    // process first vector element\n    uint k = x.x; \n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process second vector element\n    k = x.y; \n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process third vector element\n    k = x.z; \n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\n\nvec3 gradientdy(uint hash) {\n    switch (int(hash) & 15) { // look at the last four bits to pick a gradient dy\n    case 0:\n        return vec3(1, 1, 0);\n    case 1:\n        return vec3(-1, 1, 0);\n    case 2:\n        return vec3(1, -1, 0);\n    case 3:\n        return vec3(-1, -1, 0);\n    case 4:\n        return vec3(1, 0, 1);\n    case 5:\n        return vec3(-1, 0, 1);\n    case 6:\n        return vec3(1, 0, -1);\n    case 7:\n        return vec3(-1, 0, -1);\n    case 8:\n        return vec3(0, 1, 1);\n    case 9:\n        return vec3(0, -1, 1);\n    case 10:\n        return vec3(0, 1, -1);\n    case 11:\n        return vec3(0, -1, -1);\n    case 12:\n        return vec3(1, 1, 0);\n    case 13:\n        return vec3(-1, 1, 0);\n    case 14:\n        return vec3(0, -1, 1);\n    case 15:\n        return vec3(0, -1, -1);\n    }\n}\n\nfloat interpolate(float value1, float value2, float value3, float value4, float value5, float value6, float value7, float value8, vec3 t) {\n    return mix(\n        mix(mix(value1, value2, t.x), mix(value3, value4, t.x), t.y),\n        mix(mix(value5, value6, t.x), mix(value7, value8, t.x), t.y),\n        t.z\n    );\n}\n\nvec3 fade(vec3 t) {\n    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);\n}\n\nfloat perlinNoise(vec3 position, uint seed) {\n    position += 1e+4;\n    vec3 floorPosition = floor(position);\n    vec3 fractPosition = fract(position);\n    uvec3 cellCoordinates = uvec3(floorPosition);\n    float value1 = dot(gradientdy(hash(cellCoordinates, seed)), fractPosition);\n    float value2 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 0)), seed)), fractPosition - vec3(1, 0, 0));\n    float value3 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 0)), seed)), fractPosition - vec3(0, 1, 0));\n    float value4 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 0)), seed)), fractPosition - vec3(1, 1, 0));\n    float value5 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 0, 1)), seed)), fractPosition - vec3(0, 0, 1));\n    float value6 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 1)), seed)), fractPosition - vec3(1, 0, 1));\n    float value7 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 1)), seed)), fractPosition - vec3(0, 1, 1));\n    float value8 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 1)), seed)), fractPosition - vec3(1, 1, 1));\n    return interpolate(value1, value2, value3, value4, value5, value6, value7, value8, fade(fractPosition));\n}\n\nfloat p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {\n    float value = 0.0;\n    float amplitude = 1.0;\n    float currentFrequency = 10.;\n    uint currentSeed = uint(0);\n    for (int i = 0; i < octaveCount; i++) {\n        currentSeed = hash(currentSeed, 0x0U);\n        value += perlinNoise(position * currentFrequency, currentSeed) * amplitude;\n        amplitude *= persistence;\n        currentFrequency *= lacunarity;\n    }\n    return value;\n}\n\nfloat get_max_amp(float persistence, float octaveCount) {\n    persistence *= .999;\n    return (1. - pow(persistence, octaveCount)) / (1. - persistence);\n}\n\nvoid main() {\n\n    vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n    float t = .2 * u_time;\n\n    uv -= .5;\n    uv *= (.004 * u_scale * u_resolution);\n    uv /= u_pixelRatio;\n    uv += .5;\n        \n    vec3 p = vec3(uv, t);\n    \n    float oct_count = max(0., floor(u_octaveCount));\n    float persistence = clamp(u_persistence, 0., 1.);\n    float noise = p_noise(p, int(oct_count), persistence, u_lacunarity);\n    \n    float max_amp = get_max_amp(persistence, oct_count);\n    float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);\n    float sharpness = clamp(1. - u_contour, 0., 1.);\n    float smooth_w = 0.5 * fwidth(noise_normalized);\n    float sharp_noise = smoothstep(\n        .5 - .5 * sharpness - smooth_w, \n        .5 + .5 * sharpness + smooth_w, \n        noise_normalized\n    );\n\n    vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, sharp_noise);\n    float opacity = mix(u_color1.a, u_color2.a, sharp_noise);\n\n    fragColor = vec4(color, opacity);\n}\n`;\n", "export type VoronoiUniforms = {\n  u_scale: number;\n  u_colorCell1: [number, number, number, number];\n  u_colorCell2: [number, number, number, number];\n  u_colorCell3: [number, number, number, number];\n  u_colorEdges: [number, number, number, number];\n  u_colorMid: [number, number, number, number];\n  u_colorGradient: number;\n  u_distance: number;\n  u_edgesSize: number;\n  u_edgesSharpness: number;\n  u_middleSize: number;\n  u_middleSharpness: number;\n};\n\n/**\n * Voronoi pattern\n * The artwork by Ksenia Kondrashova\n * Renders a number of circular shapes with gooey effect applied\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_colorCell1 - color #1 of mix used to fill the cell shape\n * u_colorCell2 - color #2 of mix used to fill the cell shape\n * u_colorCell3 - color #3 of mix used to fill the cell shape\n * u_colorEdges - color of borders between the cells\n * u_colorMid - color used to fill the radial shape in the center of each cell\n * u_colorGradient (0 .. 1) - if the cell color is a gradient of palette colors or one color selection\n * u_distance (0 ... 0.5) - how far the cell center can move from regular square grid\n * u_edgesSize (0 .. 1) - the size of borders\n *   (can be set to zero but the edge may get glitchy due to nature of Voronoi diagram)\n * u_edgesSharpness (0 .. 1) - the blur/sharp for cell border\n * u_middleSize (0 .. 1) - the size of shape in the center of each cell\n * u_middleSharpness (0 .. 1) - the smoothness of shape in the center of each cell\n *   (vary from cell color gradient to sharp dot in the middle)\n */\n\nexport const voronoiFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\n\nuniform vec4 u_colorCell1;\nuniform vec4 u_colorCell2;\nuniform vec4 u_colorCell3;\nuniform vec4 u_colorEdges;\nuniform vec4 u_colorMid;\n\nuniform float u_colorGradient;\nuniform float u_distance;\nuniform float u_edgesSize;\nuniform float u_edgesSharpness;\nuniform float u_middleSize;\nuniform float u_middleSharpness;\n\n#define TWO_PI 6.28318530718\n\nout vec4 fragColor;\n\nvec2 hash(vec2 p) {\n  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\n  return fract(sin(p) * 18.5453);\n}\n\nfloat smin(float angle, float b, float k) {\n  float h = clamp(.5 + .5 * (b - angle) / k, 0., 1.);\n  return mix(b, angle, h) - k * h * (1. - h);\n}\n\nvec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, vec2 randomizer) {\n    vec3 color1 = c1.rgb * c1.a;\n    vec3 color2 = c2.rgb * c2.a;\n    vec3 color3 = c3.rgb * c3.a;\n\n    float mixer = clamp(u_colorGradient, 0., 1.);\n    float r1 = smoothstep(.5 - .5 * mixer, .5 + .5 * mixer, randomizer[0]);\n    float r2 = smoothstep(.6 - .6 * mixer, .6 + .4 * mixer, randomizer[1]);\n    vec3 blended_color_2 = mix(color1, color2, r1);\n    float blended_opacity_2 = mix(c1.a, c2.a, r1);\n    vec3 c = mix(blended_color_2, color3, r2);\n    float o = mix(blended_opacity_2, c3.a, r2);\n    \n    return vec4(c, o);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float t = u_time;\n  uv -= .5;\n  uv *= (.01 * u_scale * u_resolution);\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n\n  vec2 randomizer = vec2(0.);\n  vec3 distance = vec3(1.);\n\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tile_offset = vec2(float(x), float(y));\n      vec2 o = hash(i_uv + tile_offset);\n      tile_offset += (.5 + clamp(u_distance, 0., .5) * sin(t + TWO_PI * o)) - f_uv;\n\n      float dist = dot(tile_offset, tile_offset);\n      float old_min_dist = distance.x;\n\n      distance.z = max(distance.x, max(distance.y, min(distance.z, dist)));\n      distance.y = max(distance.x, min(distance.y, dist));\n      distance.x = min(distance.x, dist);\n\n      if (old_min_dist > distance.x) {\n        randomizer = o;\n      }\n    }\n  }\n\n  distance = sqrt(distance);\n\n  distance = sqrt(distance);\n  float cell_shape = min(smin(distance.z, distance.y, .1) - distance.x, 1.);\n\n  float dot_shape = pow(distance.x, 2.) / (2. * clamp(u_middleSize, 0., 1.) + 1e-4);\n  float dot_edge_width = fwidth(dot_shape);\n  float dotSharp = clamp(u_middleSharpness, 0., 1.);\n  dot_shape = 1. - smoothstep(.5 * dotSharp - dot_edge_width, 1. - .5 * dotSharp, dot_shape);\n\n  float cell_edge_width = fwidth(distance.x);\n  float w = .7 * (clamp(u_edgesSize, 0., 1.) - .1);\n  float edgeSharp = clamp(u_edgesSharpness, 0., 1.);\n  cell_shape = smoothstep(w - cell_edge_width, w + edgeSharp, cell_shape);\n\n  dot_shape *= cell_shape;\n\n  vec4 cell_mix = blend_colors(u_colorCell1, u_colorCell2, u_colorCell3, randomizer);\n  \n  vec4 edges = vec4(u_colorEdges.rgb * u_colorEdges.a, u_colorEdges.a);\n\n  vec3 color = mix(edges.rgb, cell_mix.rgb, cell_shape);\n  float opacity = mix(edges.a, cell_mix.a, cell_shape);\n\n  color = mix(color, u_colorMid.rgb * u_colorMid.a, dot_shape);\n  opacity = mix(opacity, u_colorMid.a, dot_shape);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n", "export type WavesUniforms = {\n  u_scale: number;\n  u_rotation: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_shape: number;\n  u_frequency: number;\n  u_amplitude: number;\n  u_spacing: number;\n  u_dutyCycle: number;\n  u_edgeBlur: number;\n};\n\n/**\n * Stepped Simplex Noise by Ksenia Kondrashova\n * Calculates a combination of 2 simplex noises with result rendered as a stepped gradient\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_rotation - the rotation applied to user space\n * u_color1 - the first color\n * u_color2 - the second color\n * u_shape (0 ... 3) - the line shaping coefficient, non-integer\n   values allowed and produce mixed shapes\n   - u_shape = 0 is zigzag\n   - u_shape = 1 is perfect sine wave\n   - u_shape = 2 is irregular wave #1\n   - u_shape = 3 is irregular wave #2\n * u_frequency - the wave frequency\n * u_amplitude - the wave amplitude\n * u_spacing - the density of pattern lines\n * u_dutyCycle (0 ... 1) - the proportion of stroke width to the pattern step\n * u_edgeBlur (0 ... 1) - the blur applied to the lines edges\n */\n\nexport const wavesFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform float u_rotation;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_shape;\nuniform float u_frequency;\nuniform float u_amplitude;\nuniform float u_spacing;\nuniform float u_dutyCycle;\nuniform float u_edgeBlur;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nout vec4 fragColor;\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  uv *= (.02 * max(0., u_scale) * u_resolution);\n  uv = rotate(uv, u_rotation * .5 * PI);\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float wave = .5 * cos(uv.x * u_frequency * TWO_PI);\n  float zigzag = 2. * abs(fract(uv.x * u_frequency) - .5);\n  float irregular = sin(uv.x * .25 * u_frequency * TWO_PI) * cos(uv.x * u_frequency * TWO_PI);\n  float irregular2 = .75 * (sin(uv.x * u_frequency * TWO_PI) + .5 * cos(uv.x * .5 * u_frequency * TWO_PI));\n\n  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));\n  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));\n  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));\n  offset *= 2. * u_amplitude;\n  \n  float spacing = .02 + .98 * u_spacing;\n  float shape = .5 + .5 * sin((uv.y + offset) * PI / spacing);\n  \n  float edge_width = .02 / (1. + abs(shape)) * (.001 + u_scale);\n  edge_width += .5 * max(0., u_edgeBlur);\n  float dc = clamp(u_dutyCycle, 0., 1.);\n  float t = smoothstep(dc - edge_width, dc + edge_width, shape);\n\n  vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, t);\n  float opacity = mix(u_color1.a, u_color2.a, t);\n  \n  fragColor = vec4(color, opacity);\n}\n`;\n", "export const PatternShapes = {\n  Checks: 0,\n  Stripes: 1,\n  Edge: 2,\n} as const;\nexport type PatternShape = (typeof PatternShapes)[keyof typeof PatternShapes];\n\nexport type WarpUniforms = {\n  u_scale: number;\n  u_rotation: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_color3: [number, number, number, number];\n  u_proportion: number;\n  u_softness: number;\n  u_shape: PatternShape;\n  u_shapeScale: number;\n  u_distortion: number;\n  u_swirl: number;\n  u_swirlIterations: number;\n};\n\n/**\n * 3d Perlin noise with exposed parameters\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_rotation - the rotation applied to user space\n * u_color1 - the first pattern color\n * u_color2 - the second pattern color\n * u_color3 - the third pattern color\n * u_proportion (0 .. 1) - the proportion between colors (on 0.5 colors are equally distributed)\n * u_softness (0 .. 1) - the color blur (0 for pronounced edges, 1 for gradient)\n * u_shape (0 ... 2) - the color pattern to be distorted with noise & swirl\n *    - u_shape = 0 is checks\n *    - u_shape = 1 is stripes\n *    - u_shape = 2 is 2 halves of canvas (mapping the canvas height regardless of resolution)\n * u_shapeScale - the scale of color pattern (appies over the global scaling)\n * u_distortion - the noisy distortion over the UV coordinate (applied before the overlapping swirl)\n * u_swirl - the power of swirly distortion\n * u_swirlIterations - the number of swirl iterations (layering curves effect)\n *\n */\n\nexport const warpFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_shape;\nuniform float u_shapeScale;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_swirlIterations;\n\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nfloat random(vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\nfloat noise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  // Smoothstep for interpolation\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  // Do the interpolation as two nested mix operations\n  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n\n}\n\nvec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, float mixer, float edgesWidth, float edge_blur) {\n    vec3 color1 = c1.rgb * c1.a;\n    vec3 color2 = c2.rgb * c2.a;\n    vec3 color3 = c3.rgb * c3.a;\n\n    float r1 = smoothstep(.0 + .35 * edgesWidth, .7 - .35 * edgesWidth + .5 * edge_blur, mixer);\n    float r2 = smoothstep(.3 + .35 * edgesWidth, 1. - .35 * edgesWidth + edge_blur, mixer);\n\n    vec3 blended_color_2 = mix(color1, color2, r1);\n    float blended_opacity_2 = mix(c1.a, c2.a, r1);\n\n    vec3 c = mix(blended_color_2, color3, r2);\n    float o = mix(blended_opacity_2, c3.a, r2);\n    return vec4(c, o);\n}\n\nvoid main() {\n    vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n    vec2 uv_original = uv;\n\n    float t = .5 * u_time;\n\n    float noise_scale = .0005 + .006 * u_scale;\n\n    uv -= .5;\n    uv *= (noise_scale * u_resolution);\n    uv = rotate(uv, u_rotation * .5 * PI);\n    uv /= u_pixelRatio;\n    uv += .5;\n\n    float n1 = noise(uv * 1. + t);\n    float n2 = noise(uv * 2. - t);\n    float angle = n1 * TWO_PI;\n    uv.x += 4. * u_distortion * n2 * cos(angle);\n    uv.y += 4. * u_distortion * n2 * sin(angle);\n\n    float iterations_number = ceil(clamp(u_swirlIterations, 1., 30.));\n    for (float i = 1.; i <= iterations_number; i++) {\n        uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * uv.y);\n        uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * uv.x);\n    }\n\n    float proportion = clamp(u_proportion, 0., 1.);\n\n    float shape = 0.;\n    float mixer = 0.;\n    if (u_shape < .5) {\n      vec2 checks_shape_uv = uv * (.5 + 3.5 * u_shapeScale);\n      shape = .5 + .5 * sin(checks_shape_uv.x) * cos(checks_shape_uv.y);\n      mixer = shape + .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n    } else if (u_shape < 1.5) {\n      vec2 stripes_shape_uv = uv * (.25 + 3. * u_shapeScale);\n      float f = fract(stripes_shape_uv.y);\n      shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);\n      mixer = shape + .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n    } else {\n      float sh = 1. - uv.y;\n      sh -= .5;\n      sh /= (noise_scale * u_resolution.y);\n      sh += .5;\n      float shape_scaling = .2 * (1. - u_shapeScale);\n      shape = smoothstep(.45 - shape_scaling, .55 + shape_scaling, sh + .3 * (proportion - .5));\n      mixer = shape;\n    }\n\n    vec4 color_mix = blend_colors(u_color1, u_color2, u_color3, mixer, 1. - clamp(u_softness, 0., 1.), .01 + .01 * u_scale);\n\n    fragColor = vec4(color_mix.rgb, color_mix.a);\n}\n`;\n", "export type GodRaysUniforms = {\n  u_offsetX: number;\n  u_offsetY: number;\n  u_colorBack: [number, number, number, number];\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_color3: [number, number, number, number];\n  u_spotty: number;\n  u_midSize: number;\n  u_midIntensity: number;\n  u_frequency: number;\n  u_density: number;\n  u_blending: number;\n};\n\n/**\n * GodRays pattern\n * The artwork by Ksenia Kondrashova\n * Renders a number of circular shapes with gooey effect applied\n *\n * Uniforms include:\n *\n * u_offsetX - left / right pan\n * u_offsetY - up / down pan\n * u_colorBack - background RGBA color\n * u_color1 - ray color #1 (also main color of middle spot)\n * u_color2 - ray color #2\n * u_color3 - ray color #3\n * u_frequency - the frequency of rays (the number of sectors)\n * u_spotty - the density of spots in the rings (higher = more spots)\n * u_midSize - the size of the central shape within the rings\n * u_midIntensity - the influence of the central shape on the rings\n * u_density (0 .. 1) - the number of visible rays\n * u_blending (0 .. 1) - blending mode (0 for color mix, 1 for additive blending)\n */\n\nexport const godRaysFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\n\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform float u_frequency;\nuniform float u_spotty;\nuniform float u_midSize;\nuniform float u_midIntensity;\nuniform float u_density;\nuniform float u_blending;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n\nfloat random(vec2 uv) {\n  return fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nfloat noise(vec2 uv) {\n  vec2 i = floor(uv);\n  vec2 f = fract(uv);\n\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat get_noise_shape(vec2 uv, float r, float freq, float density, float time) {\n  uv = rotate(uv, .05 * time);\n  float a = atan(uv.y, uv.x);\n  r -= 3. * time;\n  vec2 left = vec2(a * freq, r);\n  vec2 right = vec2(mod(a, TWO_PI) * freq, r);\n  float n_left = pow(noise(left), density);\n  float n_right = pow(noise(right), density);\n  float shape = mix(n_right, n_left, smoothstep(-.2, .2, uv.x));\n  return shape;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  uv += vec2(-u_offsetX, u_offsetY);\n  uv.x *= ratio;\n\n  float t = .2 * u_time;\n\n  float radius = length(uv);\n  float spots = 4. * abs(u_spotty);\n  float density = 4. - 3. * clamp(u_density, 0., 1.);\n\n  float rays1 = get_noise_shape(uv, radius * spots, 5. * u_frequency, density, t);\n  rays1 *= get_noise_shape(uv, .5 + .75 * radius * spots, 4. * u_frequency, density, -.5 * t);\n  \n  float rays2 = get_noise_shape(uv, 1.5 * radius, 12. * u_frequency, density, t);\n  rays2 *= get_noise_shape(uv, -.5 + 1.1 * radius * spots, 7. * u_frequency, density, .75 * t);\n  \n  float rays3 = get_noise_shape(uv, 2. * radius * spots, 10. * u_frequency, density, t);\n  rays3 *= get_noise_shape(uv, 1.1 * radius, 12. * u_frequency, density, .2 * t);\n\n  float mid_shape = smoothstep(1. * abs(u_midSize), .05 * abs(u_midSize), radius);  \n  rays3 = mix(rays3, 1., (.5 + .5 * rays1) * u_midIntensity * pow(mid_shape, 7.));\n  rays2 = mix(rays2, 1., (.5 + .5 * rays3) * u_midIntensity * pow(mid_shape, 3.));\n  rays1 = mix(rays1, 1., u_midIntensity * pow(mid_shape, 5.));\n  \n  float opacity = rays2 * u_color2.a;\n  opacity += rays3 * u_color3.a;\n  opacity += rays1 * u_color1.a;\n  opacity += u_colorBack.a * (1.0 - rays1 * u_color1.a - rays2 * u_color2.a - rays3 * u_color3.a);\n  opacity = clamp(opacity, 0.0, 1.0);\n\n  vec3 added_color = u_colorBack.rgb * (1. - (rays1 + rays2 + rays3)) * u_colorBack.a;\n  added_color += u_color1.rgb * rays1 * u_color1.a;\n  added_color += u_color2.rgb * rays2 * u_color2.a;\n  added_color += u_color3.rgb * rays3 * u_color3.a;\n\n  added_color += u_colorBack.rgb * rays1 * (1.0 - u_color1.a) * u_colorBack.a;\n  added_color += u_colorBack.rgb * rays2 * (1.0 - u_color2.a) * u_colorBack.a;\n  added_color += u_colorBack.rgb * rays3 * (1.0 - u_color3.a) * u_colorBack.a;\n  \n  vec3 mixed_color = mix(u_colorBack.rgb * u_colorBack.a, u_color2.rgb, rays2 * u_color2.a);\n  mixed_color = mix(mixed_color, u_color3.rgb, rays3 * u_color3.a);\n  mixed_color = mix(mixed_color, u_color1.rgb, rays1 * u_color1.a);\n  \n  vec3 color = mix(mixed_color, added_color, clamp(u_blending, 0., 1.));\n  \n  fragColor = vec4(color, opacity);\n}\n`;\n", "export type SpiralUniforms = {\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_scale: number;\n  u_offsetX: number;\n  u_offsetY: number;\n  u_spiralDensity: number;\n  u_spiralDistortion: number;\n  u_strokeWidth: number;\n  u_strokeTaper: number;\n  u_strokeCap: number;\n  u_noiseFreq: number;\n  u_noisePower: number;\n  u_blur: number;\n};\n\n/**\n * Spiral shape\n * The artwork by Ksenia Kondrashova\n * Generates a dynamic spiral shape with configurable parameters\n *\n * Uniforms include:\n *\n * u_scale - controls the overall scale of the spiral (u_scale = 1 makes it fit the viewport height)\n * u_offsetX - left / right pan\n * u_offsetY - up / down pan\n * u_color1 - the first color used in the spiral (stroke)\n * u_color2 - the second color used in the spiral (back)\n * u_spiralDensity (0 .. 1) - the spacing of the spiral arms\n * u_spiralDistortion (0 .. 1) - adds a wavy distortion effect to the spiral arms\n * u_strokeWidth (0 .. 1) - defines the thickness of the spiral lines.\n * u_strokeCap (0 .. 1) - adjusts the fading of the spiral edges.\n * u_strokeTaper (0 .. 1) - controls the tapering effect along the spiral arms.\n * u_noiseFreq - frequency of the noise applied to the spiral.\n * u_noisePower (0 .. 1) - strength of the noise effect.\n * u_blur - softens the edges of the spiral for a smoother appearance.\n */\n\nexport const spiralFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_scale;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_spiralDensity;\nuniform float u_spiralDistortion;\nuniform float u_strokeWidth;\nuniform float u_strokeCap;\nuniform float u_strokeTaper;\n\nuniform float u_noiseFreq;\nuniform float u_noisePower;\nuniform float u_blur;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nout vec4 fragColor;\n\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\n\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  uv += vec2(-u_offsetX, u_offsetY);\n\n  uv *= (.4 + 30. * u_scale);\n  uv /= u_pixelRatio;\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  float l = length(uv);\n  float angle = atan(uv.y, uv.x) - 2. * t;\n  float angle_norm = angle / TWO_PI;  \n\n  angle_norm += .125 * u_noisePower * snoise(.5 * u_noiseFreq * uv);\n\n  float offset = pow(l, 1. - clamp(0., 1., u_spiralDensity)) + angle_norm;\n  \n  float stripe_map = fract(offset);\n  stripe_map -= .5 * u_strokeTaper * l;\n  \n  stripe_map += .25 * u_noisePower * snoise(u_noiseFreq * uv);\n\n  float shape = 2. * abs(stripe_map - .5);\n  \n  shape *= (1. + u_spiralDistortion * sin(4. * l - t) * cos(PI + l + t));\n    \n  float stroke_width = clamp(u_strokeWidth, fwidth(l), 1. - fwidth(l));\n\n  float edge_width = min(fwidth(l), fwidth(offset));\n\n  float mid = 1. - smoothstep(.0, .9, l);\n  mid = pow(mid, 2.);\n  shape -= .5 * u_strokeCap * mid;\n  \n  shape = smoothstep(stroke_width - edge_width - u_blur, stroke_width + edge_width + u_blur, shape);\n\n  vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, shape);\n  float opacity = mix(u_color1.a, u_color2.a, shape);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n", "/**  Convert color string from HSL, RGB, or hex to 0-to-1-range-RGBA array */\nexport function getShaderColorFromString(\n  colorString: string | [number, number, number] | [number, number, number, number] | undefined,\n  fallback: string | [number, number, number] | [number, number, number, number] = [0, 0, 0, 1]\n): [number, number, number, number] {\n  // If the color string is already an array of 3 or 4 numbers, return it (with alpha=1 if needed)\n  if (Array.isArray(colorString)) {\n    if (colorString.length === 4) return colorString as [number, number, number, number];\n    if (colorString.length === 3) return [...colorString, 1];\n    return getShaderColorFromString(fallback);\n  }\n\n  // If the color string is not a string, return the fallback\n  if (typeof colorString !== 'string') {\n    return getShaderColorFromString(fallback);\n  }\n\n  let r: number,\n    g: number,\n    b: number,\n    a = 1;\n  if (colorString.startsWith('#')) {\n    [r, g, b, a] = hexToRgba(colorString);\n  } else if (colorString.startsWith('rgb')) {\n    [r, g, b, a] = parseRgba(colorString);\n  } else if (colorString.startsWith('hsl')) {\n    [r, g, b, a] = hslaToRgba(parseHsla(colorString));\n  } else {\n    console.error('Unsupported color format', colorString);\n    return getShaderColorFromString(fallback);\n  }\n\n  return [clamp(r, 0, 1), clamp(g, 0, 1), clamp(b, 0, 1), clamp(a, 0, 1)];\n}\n\n/** Convert hex to RGBA (0 to 1 range) */\nfunction hexToRgba(hex: string): [number, number, number, number] {\n  // Remove # if present\n  hex = hex.replace(/^#/, '');\n\n  // Expand three-letter hex to six-letter\n  if (hex.length === 3) {\n    hex = hex\n      .split('')\n      .map((char) => char + char)\n      .join('');\n  }\n  // Expand six-letter hex to eight-letter (add full opacity if no alpha)\n  if (hex.length === 6) {\n    hex = hex + 'ff';\n  }\n\n  // Parse the components\n  const r = parseInt(hex.slice(0, 2), 16) / 255;\n  const g = parseInt(hex.slice(2, 4), 16) / 255;\n  const b = parseInt(hex.slice(4, 6), 16) / 255;\n  const a = parseInt(hex.slice(6, 8), 16) / 255;\n\n  return [r, g, b, a];\n}\n\n/** Parse RGBA string to RGBA (0 to 1 range) */\nfunction parseRgba(rgba: string): [number, number, number, number] {\n  // Match both rgb and rgba patterns\n  const match = rgba.match(/^rgba?\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*(?:,\\s*([0-9.]+))?\\s*\\)$/i);\n  if (!match) return [0, 0, 0, 1];\n\n  return [\n    parseInt(match[1] ?? '0') / 255,\n    parseInt(match[2] ?? '0') / 255,\n    parseInt(match[3] ?? '0') / 255,\n    match[4] === undefined ? 1 : parseFloat(match[4]),\n  ];\n}\n\n/** Parse HSLA string */\nfunction parseHsla(hsla: string): [number, number, number, number] {\n  const match = hsla.match(/^hsla?\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)%\\s*,\\s*(\\d+)%\\s*(?:,\\s*([0-9.]+))?\\s*\\)$/i);\n  if (!match) return [0, 0, 0, 1];\n\n  return [\n    parseInt(match[1] ?? '0'),\n    parseInt(match[2] ?? '0'),\n    parseInt(match[3] ?? '0'),\n    match[4] === undefined ? 1 : parseFloat(match[4]),\n  ];\n}\n\n/** Convert HSLA to RGBA (0 to 1 range) */\nfunction hslaToRgba(hsla: [number, number, number, number]): [number, number, number, number] {\n  const [h, s, l, a] = hsla;\n  const hDecimal = h / 360;\n  const sDecimal = s / 100;\n  const lDecimal = l / 100;\n  let r, g, b;\n\n  if (s === 0) {\n    r = g = b = lDecimal; // achromatic\n  } else {\n    const hue2rgb = (p: number, q: number, t: number) => {\n      if (t < 0) t += 1;\n      if (t > 1) t -= 1;\n      if (t < 1 / 6) return p + (q - p) * 6 * t;\n      if (t < 1 / 2) return q;\n      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n      return p;\n    };\n\n    const q = lDecimal < 0.5 ? lDecimal * (1 + sDecimal) : lDecimal + sDecimal - lDecimal * sDecimal;\n    const p = 2 * lDecimal - q;\n    r = hue2rgb(p, q, hDecimal + 1 / 3);\n    g = hue2rgb(p, q, hDecimal);\n    b = hue2rgb(p, q, hDecimal - 1 / 3);\n  }\n\n  return [r, g, b, a];\n}\n\nexport const clamp = (n: number, min: number, max: number): number => Math.min(Math.max(n, min), max);\n"],
-  "mappings": ";AAAO,IAAMA,EAAN,KAAkB,CACf,OACA,GACA,QAA+B,KAC/B,iBAAgE,CAAC,EAEjE,eAEA,MAAuB,KAEvB,cAAgB,EAEhB,mBAAqB,EAErB,MAAQ,EAER,iBAEA,gBAAkB,GAElB,kBAAoB,GAE5B,YACEC,EACAC,EACAC,EAA8C,CAAC,EAC/CC,EAEAC,EAAQ,EAERC,EAAO,EACP,CACA,KAAK,OAASL,EACd,KAAK,eAAiBC,EACtB,KAAK,iBAAmBC,EAExB,KAAK,mBAAqBG,EAE1B,IAAMC,EAAKN,EAAO,WAAW,SAAUG,CAAsB,EAC7D,GAAI,CAACG,EACH,MAAM,IAAI,MAAM,qBAAqB,EAEvC,KAAK,GAAKA,EAEV,KAAK,UAAU,EACf,KAAK,oBAAoB,EAGzB,KAAK,SAASF,CAAK,EAGnB,KAAK,OAAO,aAAa,qBAAsB,MAAM,CACvD,CAEQ,UAAY,IAAM,CACxB,IAAMG,EAAUC,EAAc,KAAK,GAAIC,EAAoB,KAAK,cAAc,EACzEF,IACL,KAAK,QAAUA,EAEf,KAAK,uBAAuB,EAC5B,KAAK,cAAc,EACrB,EAEQ,uBAAyB,IAAM,CACrC,IAAMG,EAA4B,KAAK,GAAG,kBAAkB,KAAK,QAAU,YAAY,EACjFC,EAAiB,KAAK,GAAG,aAAa,EAC5C,KAAK,GAAG,WAAW,KAAK,GAAG,aAAcA,CAAc,EACvD,IAAMC,EAAY,CAAC,GAAI,GAAI,EAAG,GAAI,GAAI,EAAG,GAAI,EAAG,EAAG,GAAI,EAAG,CAAC,EAC3D,KAAK,GAAG,WAAW,KAAK,GAAG,aAAc,IAAI,aAAaA,CAAS,EAAG,KAAK,GAAG,WAAW,EACzF,KAAK,GAAG,wBAAwBF,CAAyB,EACzD,KAAK,GAAG,oBAAoBA,EAA2B,EAAG,KAAK,GAAG,MAAO,GAAO,EAAG,CAAC,CACtF,EAEQ,cAAgB,IAAM,CAC5B,KAAK,iBAAmB,CACtB,OAAQ,KAAK,GAAG,mBAAmB,KAAK,QAAU,QAAQ,EAC1D,aAAc,KAAK,GAAG,mBAAmB,KAAK,QAAU,cAAc,EACtE,aAAc,KAAK,GAAG,mBAAmB,KAAK,QAAU,cAAc,EACtE,GAAG,OAAO,YACR,OAAO,KAAK,KAAK,gBAAgB,EAAE,IAAKG,GAAQ,CAACA,EAAK,KAAK,GAAG,mBAAmB,KAAK,QAAUA,CAAG,CAAC,CAAC,CACvG,CACF,CACF,EAEQ,eAAwC,KACxC,oBAAsB,IAAM,CAClC,KAAK,eAAiB,IAAI,eAAe,IAAM,KAAK,aAAa,CAAC,EAClE,KAAK,eAAe,QAAQ,KAAK,MAAM,EACvC,KAAK,aAAa,CACpB,EAEQ,aAAe,IAAM,CAC3B,IAAMC,EAAa,OAAO,iBACpBC,EAAW,KAAK,OAAO,YAAcD,EACrCE,EAAY,KAAK,OAAO,aAAeF,GACzC,KAAK,OAAO,QAAUC,GAAY,KAAK,OAAO,SAAWC,KAC3D,KAAK,OAAO,MAAQD,EACpB,KAAK,OAAO,OAASC,EACrB,KAAK,kBAAoB,GACzB,KAAK,GAAG,SAAS,EAAG,EAAG,KAAK,GAAG,OAAO,MAAO,KAAK,GAAG,OAAO,MAAM,EAClE,KAAK,OAAO,YAAY,IAAI,CAAC,EAEjC,EAEQ,OAAUC,GAAwB,CACxC,GAAI,KAAK,gBAAiB,OAG1B,IAAMC,EAAKD,EAAc,KAAK,cAC9B,KAAK,cAAgBA,EAEjB,KAAK,QAAU,IACjB,KAAK,oBAAsBC,EAAK,KAAK,OAIvC,KAAK,GAAG,MAAM,KAAK,GAAG,gBAAgB,EAGtC,KAAK,GAAG,WAAW,KAAK,OAAO,EAG/B,KAAK,GAAG,UAAU,KAAK,iBAAiB,OAAS,KAAK,mBAAqB,IAAK,EAG5E,KAAK,oBACP,KAAK,GAAG,UAAU,KAAK,iBAAiB,aAAe,KAAK,GAAG,OAAO,MAAO,KAAK,GAAG,OAAO,MAAM,EAClG,KAAK,GAAG,UAAU,KAAK,iBAAiB,aAAe,OAAO,gBAAgB,EAC9E,KAAK,kBAAoB,IAG3B,KAAK,GAAG,WAAW,KAAK,GAAG,UAAW,EAAG,CAAC,EAGtC,KAAK,QAAU,EACjB,KAAK,cAAc,EAEnB,KAAK,MAAQ,IAEjB,EAEQ,cAAgB,IAAM,CACxB,KAAK,QAAU,MACjB,qBAAqB,KAAK,KAAK,EAEjC,KAAK,MAAQ,sBAAsB,KAAK,MAAM,CAChD,EAEQ,uBAAyB,IAAM,CACrC,KAAK,GAAG,WAAW,KAAK,OAAO,EAC/B,OAAO,QAAQ,KAAK,gBAAgB,EAAE,QAAQ,CAAC,CAACL,EAAKM,CAAK,IAAM,CAC9D,IAAMC,EAAW,KAAK,iBAAiBP,CAAG,EAC1C,GAAIO,EACF,GAAI,MAAM,QAAQD,CAAK,EACrB,OAAQA,EAAM,OAAQ,CACpB,IAAK,GACH,KAAK,GAAG,WAAWC,EAAUD,CAAK,EAClC,MACF,IAAK,GACH,KAAK,GAAG,WAAWC,EAAUD,CAAK,EAClC,MACF,IAAK,GACH,KAAK,GAAG,WAAWC,EAAUD,CAAK,EAClC,MACF,QACMA,EAAM,SAAW,EACnB,KAAK,GAAG,iBAAiBC,EAAU,GAAOD,CAAK,EACtCA,EAAM,SAAW,GAC1B,KAAK,GAAG,iBAAiBC,EAAU,GAAOD,CAAK,EAE/C,QAAQ,KAAK,qCAAqCA,EAAM,MAAM,EAAE,CAEtE,MACS,OAAOA,GAAU,SAC1B,KAAK,GAAG,UAAUC,EAAUD,CAAK,EACxB,OAAOA,GAAU,UAC1B,KAAK,GAAG,UAAUC,EAAUD,EAAQ,EAAI,CAAC,EAEzC,QAAQ,KAAK,gCAAgCN,CAAG,KAAK,OAAOM,CAAK,EAAE,CAGzE,CAAC,CACH,EAGO,QAAWE,GAA0B,CAC1C,IAAMC,EAAmB,kBACzB,KAAK,mBAAqBD,EAAUC,EACpC,KAAK,cAAgB,YAAY,IAAI,EACrC,KAAK,OAAO,YAAY,IAAI,CAAC,CAC/B,EAGO,SAAW,CAACC,EAAmB,IAAY,CAEhD,KAAK,MAAQA,EAET,KAAK,QAAU,MAAQA,IAAa,IAEtC,KAAK,cAAgB,YAAY,IAAI,EACrC,KAAK,MAAQ,sBAAsB,KAAK,MAAM,GAG5C,KAAK,QAAU,MAAQA,IAAa,IAEtC,qBAAqB,KAAK,KAAK,EAC/B,KAAK,MAAQ,KAEjB,EAGO,YAAeC,GAAyD,CAC7E,KAAK,iBAAmB,CAAE,GAAG,KAAK,iBAAkB,GAAGA,CAAY,EAMnE,KAAK,uBAAuB,EAC5B,KAAK,OAAO,YAAY,IAAI,CAAC,CAC/B,EAGO,QAAU,IAAY,CAE3B,KAAK,gBAAkB,GAGnB,KAAK,QAAU,OACjB,qBAAqB,KAAK,KAAK,EAC/B,KAAK,MAAQ,MAGX,KAAK,IAAM,KAAK,UAClB,KAAK,GAAG,cAAc,KAAK,OAAO,EAClC,KAAK,QAAU,KAGf,KAAK,GAAG,WAAW,KAAK,GAAG,aAAc,IAAI,EAC7C,KAAK,GAAG,WAAW,KAAK,GAAG,qBAAsB,IAAI,EACrD,KAAK,GAAG,iBAAiB,KAAK,GAAG,aAAc,IAAI,EACnD,KAAK,GAAG,gBAAgB,KAAK,GAAG,YAAa,IAAI,EAGjD,KAAK,GAAG,SAAS,GAGf,KAAK,iBACP,KAAK,eAAe,WAAW,EAC/B,KAAK,eAAiB,MAGxB,KAAK,iBAAmB,CAAC,CAC3B,CACF,EAGMf,EAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3B,SAASgB,EAAanB,EAA2BoB,EAAcC,EAAoC,CACjG,IAAMC,EAAStB,EAAG,aAAaoB,CAAI,EACnC,OAAKE,GAELtB,EAAG,aAAasB,EAAQD,CAAM,EAC9BrB,EAAG,cAAcsB,CAAM,EAElBtB,EAAG,mBAAmBsB,EAAQtB,EAAG,cAAc,EAM7CsB,GALL,QAAQ,MAAM,4CAA8CtB,EAAG,iBAAiBsB,CAAM,CAAC,EACvFtB,EAAG,aAAasB,CAAM,EACf,OARW,IAYtB,CAEA,SAASpB,EACPF,EACAG,EACAoB,EACqB,CACrB,IAAMC,EAAeL,EAAanB,EAAIA,EAAG,cAAeG,CAAkB,EACpER,EAAiBwB,EAAanB,EAAIA,EAAG,gBAAiBuB,CAAoB,EAEhF,GAAI,CAACC,GAAgB,CAAC7B,EAAgB,OAAO,KAE7C,IAAMM,EAAUD,EAAG,cAAc,EACjC,OAAKC,GAELD,EAAG,aAAaC,EAASuB,CAAY,EACrCxB,EAAG,aAAaC,EAASN,CAAc,EACvCK,EAAG,YAAYC,CAAO,EAEjBD,EAAG,oBAAoBC,EAASD,EAAG,WAAW,GASnDA,EAAG,aAAaC,EAASuB,CAAY,EACrCxB,EAAG,aAAaC,EAASN,CAAc,EACvCK,EAAG,aAAawB,CAAY,EAC5BxB,EAAG,aAAaL,CAAc,EAEvBM,IAbL,QAAQ,MAAM,4CAA8CD,EAAG,kBAAkBC,CAAO,CAAC,EACzFD,EAAG,cAAcC,CAAO,EACxBD,EAAG,aAAawB,CAAY,EAC5BxB,EAAG,aAAaL,CAAc,EACvB,OAXY,IAqBvB,CCtSO,IAAM8B,EAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECAlC,IAAMC,EAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECInC,IAAMC,EAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECJhC,IAAMC,EAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECQjC,IAAMC,EAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EC1BhC,IAAMC,EAAiB,CAC5B,OAAQ,EACR,QAAS,EACT,OAAQ,EACR,SAAU,CACZ,EAiCaC,EAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECd/B,IAAMC,EAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECF1C,IAAMC,EAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECMhC,IAAMC,EAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECQlC,IAAMC,EAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECF9B,IAAMC,EAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECnC5B,IAAMC,EAAgB,CAC3B,OAAQ,EACR,QAAS,EACT,KAAM,CACR,EAwCaC,EAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECR3B,IAAMC,EAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECE9B,IAAMC,EAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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",
-  "names": ["ShaderMount", "canvas", "fragmentShader", "uniforms", "webGlContextAttributes", "speed", "seed", "gl", "program", "createProgram", "vertexShaderSource", "positionAttributeLocation", "positionBuffer", "positions", "key", "pixelRatio", "newWidth", "newHeight", "currentTime", "dt", "value", "location", "newSeed", "oneFrameAt120Fps", "newSpeed", "newUniforms", "createShader", "type", "source", "shader", "fragmentShaderSource", "vertexShader", "grainCloudsFragmentShader", "meshGradientFragmentShader", "smokeRingFragmentShader", "neuroNoiseFragmentShader", "dotsOrbitFragmentShader", "DotsGridShapes", "dotsGridFragmentShader", "steppedSimplexNoiseFragmentShader", "metaballsFragmentShader", "perlinNoiseFragmentShader", "voronoiFragmentShader", "wavesFragmentShader", "PatternShapes", "warpFragmentShader", "godRaysFragmentShader", "spiralFragmentShader", "getShaderColorFromString", "colorString", "fallback", "g", "b", "a", "hexToRgba", "parseRgba", "hslaToRgba", "parseHsla", "clamp", "hex", "char", "r", "rgba", "match", "hsla", "h", "s", "l", "hDecimal", "sDecimal", "lDecimal", "hue2rgb", "p", "q", "t", "n", "min", "max"]
+  "sourcesContent": ["/** Uniform types that we support to be auto-mapped into the fragment shader */\nexport type ShaderMountUniforms = Record<string, number | number[] | HTMLImageElement>;\n\nexport class ShaderMount {\n  private canvas: HTMLCanvasElement;\n  private gl: WebGLRenderingContext;\n  private program: WebGLProgram | null = null;\n  private uniformLocations: Record<string, WebGLUniformLocation | null> = {};\n  /** The fragment shader that we are using */\n  private fragmentShader: string;\n  /** Stores the RAF for the render loop */\n  private rafId: number | null = null;\n  /** Time of the last rendered frame */\n  private lastFrameTime = 0;\n  /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */\n  private totalAnimationTime = 0;\n  /** The current speed that we progress through animation time (multiplies by delta time every update). Allows negatives to play in reverse. If set to 0, rAF will stop entirely so static shaders have no recurring performance costs */\n  private speed = 1;\n  /** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */\n  private providedUniforms: ShaderMountUniforms;\n  /** Just a sanity check to make sure frames don't run after we're disposed */\n  private hasBeenDisposed = false;\n  /** If the resolution of the canvas has changed since the last render */\n  private resolutionChanged = true;\n  /** Store textures that are provided by the user */\n  private textures: Map<string, WebGLTexture> = new Map();\n\n  constructor(\n    canvas: HTMLCanvasElement,\n    fragmentShader: string,\n    uniforms: ShaderMountUniforms = {},\n    webGlContextAttributes?: WebGLContextAttributes,\n    /** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */\n    speed = 1,\n    /** Pass a seed to offset the starting u_time value and give deterministic results*/\n    seed = 0\n  ) {\n    this.canvas = canvas;\n    this.fragmentShader = fragmentShader;\n    this.providedUniforms = uniforms;\n    // Base our starting animation time on the provided seed value\n    this.totalAnimationTime = seed;\n\n    const gl = canvas.getContext('webgl2', webGlContextAttributes);\n    if (!gl) {\n      throw new Error('WebGL not supported');\n    }\n    this.gl = gl;\n\n    this.initProgram();\n    this.setupPositionAttribute();\n    // Grab the locations of the uniforms in the fragment shader\n    this.setupUniforms();\n    // Put the user provided values into the uniforms\n    this.setUniformValues(this.providedUniforms);\n    // Set up the resize observer to handle window resizing and set u_resolution\n    this.setupResizeObserver();\n\n    // Set the animation speed after everything is ready to go\n    this.setSpeed(speed);\n\n    // Mark canvas as paper shader mount\n    this.canvas.setAttribute('data-paper-shaders', 'true');\n  }\n\n  private initProgram = () => {\n    const program = createProgram(this.gl, vertexShaderSource, this.fragmentShader);\n    if (!program) return;\n    this.program = program;\n  };\n\n  private setupPositionAttribute = () => {\n    const positionAttributeLocation = this.gl.getAttribLocation(this.program!, 'a_position');\n    const positionBuffer = this.gl.createBuffer();\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);\n    const positions = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];\n    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);\n    this.gl.enableVertexAttribArray(positionAttributeLocation);\n    this.gl.vertexAttribPointer(positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);\n  };\n\n  private setupUniforms = () => {\n    // Create a map to store all uniform locations\n    const uniformLocations: Record<string, WebGLUniformLocation | null> = {\n      u_time: this.gl.getUniformLocation(this.program!, 'u_time'),\n      u_pixelRatio: this.gl.getUniformLocation(this.program!, 'u_pixelRatio'),\n      u_resolution: this.gl.getUniformLocation(this.program!, 'u_resolution'),\n    };\n\n    // Add locations for all provided uniforms\n    Object.entries(this.providedUniforms).forEach(([key, value]) => {\n      uniformLocations[key] = this.gl.getUniformLocation(this.program!, key);\n\n      // For texture uniforms, also look for the aspect ratio uniform\n      if (value instanceof HTMLImageElement) {\n        const aspectRatioUniformName = `${key}_aspect_ratio`;\n        uniformLocations[aspectRatioUniformName] = this.gl.getUniformLocation(this.program!, aspectRatioUniformName);\n      }\n    });\n\n    this.uniformLocations = uniformLocations;\n  };\n\n  private resizeObserver: ResizeObserver | null = null;\n  private setupResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => this.handleResize());\n    this.resizeObserver.observe(this.canvas);\n    this.handleResize();\n  };\n\n  private handleResize = () => {\n    const clientWidth = this.canvas.clientWidth;\n    const clientHeight = this.canvas.clientHeight;\n    const pixelRatio = window.devicePixelRatio;\n    const newWidth = clientWidth * pixelRatio;\n    const newHeight = clientHeight * pixelRatio;\n\n    if (this.canvas.width !== newWidth || this.canvas.height !== newHeight) {\n      this.canvas.width = newWidth;\n      this.canvas.height = newHeight;\n\n      // If pixelRatio is not 1, we need the user to set a CSS size or changing the canvas.width/height will\n      // actually resize the element, triggering a resize loop and making the result still 1x dpi, just bigger\n      if (pixelRatio !== 1) {\n        const cssWidth = window.getComputedStyle(this.canvas).width;\n        const cssHeight = window.getComputedStyle(this.canvas).height;\n        // CSS width should not equal newWidth, because newWidth is scaled with dpi\n        if (parseFloat(cssWidth) === newWidth && parseFloat(cssHeight) === newHeight) {\n          // It appears that CSS sizing was unset, so we just caused the entire canvas to resize and will trigger a resize loop\n          // Set an explicit inline CSS size to avoid the loop and preserve 2x rendering\n          this.canvas.style.width = `${clientWidth}px`;\n          this.canvas.style.height = `${clientHeight}px`;\n        }\n      }\n\n      this.resolutionChanged = true;\n      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);\n      this.render(performance.now()); // this is necessary to avoid flashes while resizing (the next scheduled render will set uniforms)\n    }\n  };\n\n  private render = (currentTime: number) => {\n    if (this.hasBeenDisposed) return;\n\n    if (this.program === null) {\n      console.warn('Tried to render before program or gl was initialized');\n      return;\n    }\n\n    // Calculate the delta time\n    const dt = currentTime - this.lastFrameTime;\n    this.lastFrameTime = currentTime;\n    // Increase the total animation time by dt * animationSpeed\n    if (this.speed !== 0) {\n      this.totalAnimationTime += dt * this.speed;\n    }\n\n    // Clear the canvas\n    this.gl.clear(this.gl.COLOR_BUFFER_BIT);\n\n    // Update uniforms\n    this.gl.useProgram(this.program);\n\n    // Update the time uniform\n    this.gl.uniform1f(this.uniformLocations.u_time!, this.totalAnimationTime * 0.001);\n\n    // If the resolution has changed, we need to update the uniform\n    if (this.resolutionChanged) {\n      this.gl.uniform2f(this.uniformLocations.u_resolution!, this.gl.canvas.width, this.gl.canvas.height);\n      this.gl.uniform1f(this.uniformLocations.u_pixelRatio!, window.devicePixelRatio);\n      this.resolutionChanged = false;\n    }\n\n    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);\n\n    // Loop if we're animating\n    if (this.speed !== 0) {\n      this.requestRender();\n    } else {\n      this.rafId = null;\n    }\n  };\n\n  private requestRender = () => {\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n    }\n    this.rafId = requestAnimationFrame(this.render);\n  };\n\n  /** Creates a texture from an image and sets it into a uniform value */\n  private setTextureUniform = (uniformName: string, image: HTMLImageElement): void => {\n    if (!image.complete || image.naturalWidth === 0) {\n      throw new Error(`Image for uniform ${uniformName} must be fully loaded`);\n    }\n\n    // Clean up existing texture if present\n    const existingTexture = this.textures.get(uniformName);\n    if (existingTexture) {\n      this.gl.deleteTexture(existingTexture);\n    }\n\n    // Create and set up the new texture\n    const texture = this.gl.createTexture();\n    this.gl.bindTexture(this.gl.TEXTURE_2D, texture);\n\n    // Set texture parameters\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);\n\n    // Upload image to texture\n    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, image);\n    const error = this.gl.getError();\n    if (error !== this.gl.NO_ERROR || texture === null) {\n      console.error('WebGL error when uploading texture:', error);\n      return;\n    }\n\n    // Store the texture\n    this.textures.set(uniformName, texture);\n\n    // Set up texture unit and uniform\n    const location = this.uniformLocations[uniformName];\n    if (location) {\n      // Use texture unit based on the order textures were added\n      const textureUnit = this.textures.size - 1;\n      this.gl.useProgram(this.program);\n      this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);\n      this.gl.bindTexture(this.gl.TEXTURE_2D, texture);\n      this.gl.uniform1i(location, textureUnit);\n\n      // Calculate and set the aspect ratio uniform\n      const aspectRatioUniformName = `${uniformName}_aspect_ratio`;\n      const aspectRatioLocation = this.uniformLocations[aspectRatioUniformName];\n      if (aspectRatioLocation) {\n        const aspectRatio = image.naturalWidth / image.naturalHeight;\n        this.gl.uniform1f(aspectRatioLocation, aspectRatio);\n      }\n    }\n  };\n\n  /** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */\n  private setUniformValues = (updatedUniforms: ShaderMountUniforms) => {\n    this.gl.useProgram(this.program);\n    Object.entries(updatedUniforms).forEach(([key, value]) => {\n      const location = this.uniformLocations[key];\n      if (!location) {\n        console.warn(`Uniform location for ${key} not found`);\n        return;\n      }\n\n      if (value instanceof HTMLImageElement) {\n        // Texture case, requires a good amount of code so it gets its own function:\n        this.setTextureUniform(key, value);\n      } else if (Array.isArray(value)) {\n        // Array case, supports 2, 3, 4, 9, 16 length arrays\n        switch (value.length) {\n          case 2:\n            this.gl.uniform2fv(location, value);\n            break;\n          case 3:\n            this.gl.uniform3fv(location, value);\n            break;\n          case 4:\n            this.gl.uniform4fv(location, value);\n            break;\n          default:\n            if (value.length === 9) {\n              this.gl.uniformMatrix3fv(location, false, value);\n            } else if (value.length === 16) {\n              this.gl.uniformMatrix4fv(location, false, value);\n            } else {\n              console.warn(`Unsupported uniform array length: ${value.length}`);\n            }\n        }\n      } else if (typeof value === 'number') {\n        // Number case, supports floats and ints\n        this.gl.uniform1f(location, value);\n      } else if (typeof value === 'boolean') {\n        // Boolean case, supports true and false\n        this.gl.uniform1i(location, value ? 1 : 0);\n      } else {\n        console.warn(`Unsupported uniform type for ${key}: ${typeof value}`);\n      }\n    });\n  };\n\n  /** Set a seed to get a deterministic result */\n  public setSeed = (newSeed: number): void => {\n    const oneFrameAt120Fps = 1000 / 120;\n    this.totalAnimationTime = newSeed * oneFrameAt120Fps;\n    this.lastFrameTime = performance.now();\n    this.render(performance.now());\n  };\n\n  /** Set an animation speed (or 0 to stop animation) */\n  public setSpeed = (newSpeed: number = 1): void => {\n    // Set the new animation speed\n    this.speed = newSpeed;\n\n    if (this.rafId === null && newSpeed !== 0) {\n      // Moving from 0 to animating, kick off a new rAF loop\n      this.lastFrameTime = performance.now();\n      this.rafId = requestAnimationFrame(this.render);\n    }\n\n    if (this.rafId !== null && newSpeed === 0) {\n      // Moving from animating to not animating, cancel the rAF loop\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n  };\n\n  /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */\n  public setUniforms = (newUniforms: ShaderMountUniforms): void => {\n    this.providedUniforms = { ...this.providedUniforms, ...newUniforms };\n\n    // If we need to allow users to add uniforms after the shader has been created, we can do that here\n    // But right now we're expecting the uniform list to be predictable and static\n    // this.setupUniforms();\n\n    this.setUniformValues(newUniforms);\n    this.render(performance.now());\n  };\n\n  /** Dispose of the shader mount, cleaning up all of the WebGL resources */\n  public dispose = (): void => {\n    // Immediately mark as disposed to prevent future renders from leaking in\n    this.hasBeenDisposed = true;\n\n    // Cancel the rAF loop\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n\n    if (this.gl && this.program) {\n      // Clean up all textures\n      this.textures.forEach((texture) => {\n        this.gl.deleteTexture(texture);\n      });\n      this.textures.clear();\n\n      this.gl.deleteProgram(this.program);\n      this.program = null;\n\n      // Reset the WebGL context\n      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n      this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);\n      this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);\n      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);\n\n      // Clear any errors\n      this.gl.getError();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n\n    this.uniformLocations = {};\n  };\n}\n\n/** Vertex shader for the shader mount */\nconst vertexShaderSource = `#version 300 es\nlayout(location = 0) in vec4 a_position;\n\nvoid main() {\n  gl_Position = a_position;\n}\n`;\n\nfunction createShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));\n    gl.deleteShader(shader);\n    return null;\n  }\n\n  return shader;\n}\n\nfunction createProgram(\n  gl: WebGLRenderingContext,\n  vertexShaderSource: string,\n  fragmentShaderSource: string\n): WebGLProgram | null {\n  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);\n  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);\n\n  if (!vertexShader || !fragmentShader) return null;\n\n  const program = gl.createProgram();\n  if (!program) return null;\n\n  gl.attachShader(program, vertexShader);\n  gl.attachShader(program, fragmentShader);\n  gl.linkProgram(program);\n\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));\n    gl.deleteProgram(program);\n    gl.deleteShader(vertexShader);\n    gl.deleteShader(fragmentShader);\n    return null;\n  }\n\n  // Clean up shaders after successful linking\n  gl.detachShader(program, vertexShader);\n  gl.detachShader(program, fragmentShader);\n  gl.deleteShader(vertexShader);\n  gl.deleteShader(fragmentShader);\n\n  return program;\n}\n", "export type GrainCloudsUniforms = {\n  u_scale: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_grainAmount: number;\n};\n\n/**\n * Renders a grainy texture over top of blobby animated clouds\n * This is an example shader that we're using to bootstrap the project\n * Generated by Claude 3.5 Sonnet\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_color1 - the first mixed color\n * u_color2 - the second mixed color\n * u_grainAmount - the power of overlapping grain texture\n */\n\nexport const grainCloudsFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\nuniform float u_time;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_grainAmount;\n\nout vec4 fragColor;\n\n// Simplex 2D noise\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\n\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n\nfloat rand(vec2 n) {\n  return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\n}\nfloat noise(vec2 n) {\n  const vec2 d = vec2(0.0, 1.0);\n  vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\n  return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\n}\nfloat fbm(vec2 n) {\n  float total = 0.0, amplitude = .2;\n  for (int i = 0; i < 6; i++) {\n    total += noise(n) * amplitude;\n    n += n;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (.0004 * (1. - step(1. - scale, 1.) / scale));\n  uv *= u_resolution;\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  // Create blobby texture\n  float n = snoise(uv + u_time);\n  n += 0.5 * snoise(uv * 2.0 - u_time * 0.5);\n  n += 0.25 * snoise(uv * 4.0 + u_time * 0.25);\n  n = n * 0.5 + 0.5;\n\n  // Color interpolation\n  vec3 color = mix(u_color1.rgb, u_color2.rgb, n);\n  float opacity = mix(u_color1.a, u_color2.a, n);\n\n  // Add grain\n  float grain = fbm(uv * 1000.);\n  color.rgb += (grain - 0.5) * u_grainAmount;\n\n  fragColor = vec4(color * opacity, opacity);\n}\n`;\n", "export type MeshGradientUniforms = {\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_color3: [number, number, number, number];\n  u_color4: [number, number, number, number];\n};\n\n/**\n * Mesh Gradient, based on https://www.shadertoy.com/view/wdyczG\n * Renders a mesh gradient with a rotating noise pattern\n * and several layers of fractal noise\n *\n * Uniforms include:\n * u_color1: The first color of the mesh gradient\n * u_color2: The second color of the mesh gradient\n * u_color3: The third color of the mesh gradient\n * u_color4: The fourth color of the mesh gradient\n */\n\nexport const meshGradientFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\n\nout vec4 fragColor;\n\n#define S(a,b,t) smoothstep(a,b,t)\n\nmat2 Rot(float a) {\n    float s = sin(a);\n    float c = cos(a);\n    return mat2(c, -s, s, c);\n}\n\nvec2 hash(vec2 p) {\n    vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));\n    p3 += dot(p3, p3.yzx + 33.33);\n    return fract((p3.xx+p3.yz)*p3.zy);\n}\n\nfloat noise( in vec2 p ) {\n    vec2 i = floor( p );\n    vec2 f = fract( p );\n    vec2 u = f*f*(3.0-2.0*f);\n\n    float n = mix( mix( dot( -1.0+2.0*hash( i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),\n                        dot( -1.0+2.0*hash( i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),\n                   mix( dot( -1.0+2.0*hash( i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),\n                        dot( -1.0+2.0*hash( i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);\n    return 0.5 + 0.5*n;\n}\n\n\nvoid main() {\n    vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n    float ratio = u_resolution.x / u_resolution.y;\n    \n    uv /= u_pixelRatio;\n    \n    vec2 tuv = uv;\n    tuv -= .5;\n\n    // rotate with Noise\n    float degree = noise(vec2(u_time, tuv.x * tuv.y));\n\n    tuv.y *= 1./ratio;\n    tuv *= Rot(radians((degree-.5)*720.+180.));\n    tuv.y *= ratio;\n\n\n    // Wave warp with sin\n    float frequency = 5.;\n    float amplitude = 30.;\n    float speed = u_time * 2.;\n    tuv.x += sin(tuv.y*frequency+speed)/amplitude;\n    tuv.y += sin(tuv.x*frequency*1.5+speed)/(amplitude*.5);\n\n\n    float proportion_1 = S(-.3, .2, (tuv*Rot(radians(-5.))).x);\n    vec3 layer1_color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, proportion_1);\n    float layer1_opacity = mix(u_color1.a, u_color2.a, proportion_1);\n    vec3 layer2_color = mix(u_color3.rgb * u_color3.a, u_color4.rgb * u_color4.a, proportion_1);\n    float layer2_opacity = mix(u_color3.a, u_color4.a, proportion_1);\n\n    float proportion_2 = S(.5, -.3, tuv.y);\n    vec3 color = mix(layer1_color, layer2_color, proportion_2);\n    float opacity = mix(layer1_opacity, layer2_opacity, proportion_2);\n    \n    fragColor = vec4(color, opacity);\n}\n`;\n", "export type SmokeRingUniforms = {\n  u_scale: number;\n  u_colorBack: [number, number, number, number];\n  u_colorInner: [number, number, number, number];\n  u_colorOuter: [number, number, number, number];\n  u_noiseScale: number;\n  u_thickness: number;\n};\n\n/**\n * Smoke Ring by Ksenia Kondrashova\n * Renders a fractional Brownian motion (fBm) noise over the\n * polar coordinates masked with ring shape\n *\n * Uniforms include:\n * u_scale - the scale applied to user space: with scale = 1 the ring fits the screen height\n * u_colorBack - the background color of the scene\n * u_colorInner - the inner color of the ring gradient\n * u_colorOuter - the outer color of the ring gradient\n * u_noiseScale - the resolution of noise texture\n * u_thickness - the thickness of the ring\n */\n\nexport const smokeRingFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorInner;\nuniform vec4 u_colorOuter;\nuniform float u_noiseScale;\nuniform float u_thickness;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nfloat random(in vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\nfloat noise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  // Smoothstep for interpolation\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  // Do the interpolation as two nested mix operations\n  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n\n}\nfloat fbm(in vec2 n) {\n  float total = 0.0, amplitude = .4;\n  for (int i = 0; i < 12; i++) {\n    total += noise(n) * amplitude;\n    n += n;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\nfloat get_ring_shape(vec2 uv, float innerRadius, float outerRadius) {\n  float distance = length(uv);\n  float line_width = outerRadius - innerRadius;\n  float ringValue = smoothstep(innerRadius, innerRadius + .8 * line_width, distance);\n  ringValue -= smoothstep(outerRadius, outerRadius + 1.2 * line_width, distance);\n  return clamp(ringValue, 0., 1.);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (1. - step(1. - scale, 1.) / scale);\n  uv *= 1.5;\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  float atg = atan(uv.y, uv.x);\n  float angle = (atg + PI) / TWO_PI;\n\n  vec2 polar_uv = vec2(atg, .1 * t - (.5 * length(uv)) + 1. / pow(length(uv), .5));\n  polar_uv *= u_noiseScale;\n\n  float noise_left = fbm(polar_uv + mod(.05 * t, 35.));\n  polar_uv.x = mod(polar_uv.x, u_noiseScale * TWO_PI);\n  float noise_right = fbm(polar_uv + mod(.05 * t, 35.));\n  float noise = mix(noise_right, noise_left, smoothstep(-.2, .2, uv.x));\n\n  float center_shape = 1. - pow(smoothstep(2., .0, length(uv)), 50.);\n\n  float radius = .4 - .25 * u_thickness;\n  float thickness = u_thickness;\n  thickness = pow(thickness, 2.);\n\n  float ring_shape = get_ring_shape(uv * (.5 + .6 * noise), radius - .2 * thickness, radius + .5 * thickness);\n\n  float ring_shape_outer = 1. - pow(ring_shape, 7.);\n  ring_shape_outer *= ring_shape;\n\n  float ring_shape_inner = ring_shape - ring_shape_outer;\n  ring_shape_inner *= ring_shape;\n\n  float background = u_colorBack.a;\n\n  float opacity = ring_shape_outer * u_colorOuter.a;\n  opacity += ring_shape_inner * u_colorInner.a;\n  opacity += background * (1. - ring_shape_inner * u_colorInner.a - ring_shape_outer * u_colorOuter.a);\n\n  vec3 color = u_colorBack.rgb * (1. - ring_shape) * background;\n  color += u_colorOuter.rgb * ring_shape_outer * u_colorOuter.a;\n  color += u_colorInner.rgb * ring_shape_inner * u_colorInner.a;\n\n  color += u_colorBack.rgb * ring_shape_inner * (1. - u_colorInner.a) * background;\n  color += u_colorBack.rgb * ring_shape_outer * (1. - u_colorOuter.a) * background;\n\n  fragColor = vec4(color, opacity);\n}\n`;\n", "export type NeuroNoiseUniforms = {\n  u_scale: number;\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_brightness: number;\n};\n\n/**\n * Neuro Noise Pattern\n * The original artwork: https://codepen.io/ksenia-k/full/vYwgrWv by Ksenia Kondrashova\n * Renders a fractal-like structure made of several layers of since-arches\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_colorFront - the front color of pattern\n * u_colorBack - the back color of pattern\n * u_brightness - the power (brightness) of pattern lines\n */\n\nexport const neuroNoiseFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_brightness;\n\nout vec4 fragColor;\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nfloat neuro_shape(vec2 uv, float t) {\n  vec2 sine_acc = vec2(0.);\n  vec2 res = vec2(0.);\n  float scale = 8.;\n\n  for (int j = 0; j < 15; j++) {\n    uv = rotate(uv, 1.);\n    sine_acc = rotate(sine_acc, 1.);\n    vec2 layer = uv * scale + float(j) + sine_acc - t;\n    sine_acc += sin(layer);\n    res += (.5 + .5 * cos(layer)) / scale;\n    scale *= (1.2);\n  }\n  return res.x + res.y;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (.001 * (1. - step(1. - scale, 1.) / scale));\n  uv *= u_resolution;\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float t = u_time;\n\n  float noise = neuro_shape(uv, t);\n\n  noise = u_brightness * pow(noise, 3.);\n  noise += pow(noise, 12.);\n  noise = max(.0, noise - .5);\n\n  vec3 color = mix(u_colorBack.rgb * u_colorBack.a, u_colorFront.rgb * u_colorFront.a, noise);\n  float opacity = mix(u_colorBack.a, u_colorFront.a, noise);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n", "export type DotsOrbitUniforms = {\n  u_scale: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_color3: [number, number, number, number];\n  u_color4: [number, number, number, number];\n  u_dotSize: number;\n  u_dotSizeRange: number;\n  u_spreading: number;\n};\n\n/**\n * Dots Pattern with dots moving around their grid position\n * The artwork by Ksenia Kondrashova\n * Renders a dot pattern with dots placed in the center of each cell of animated Voronoi diagram\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_color1 - the first dots color\n * u_color2 - the second dots color\n * u_color3 - the third dots color\n * u_color4 - the fourth dots color\n * u_dotSize (0 .. 1) - the base dot radius (relative to cell size)\n * u_dotSizeRange (0 .. 1) - the dot radius to vary between the cells\n * u_spreading (0 .. 1) - the distance each dot can move around the regular grid\n */\n\nexport const dotsOrbitFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\nuniform float u_dotSize;\nuniform float u_dotSizeRange;\nuniform float u_spreading;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n\nfloat random(in vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\nvec2 random2(vec2 p) {\n  return vec2(random(p), random(200. * p));\n}\n\nvec3 get_voronoi_shape(vec2 _uv, float time) {\n  vec2 i_uv = floor(_uv);\n  vec2 f_uv = fract(_uv);\n\n  float min_dist = 1.;\n  vec2 cell_randomizer = vec2(0.);\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tile_offset = vec2(float(x), float(y));\n      vec2 rand = random2(i_uv + tile_offset);\n      vec2 cell_center = .5 + 1e-4 + .25 * clamp(u_spreading, 0., 1.) * sin(time + TWO_PI * rand);\n      float dist = length(tile_offset + cell_center - f_uv);\n      if (dist < min_dist) {\n        min_dist = dist;\n        cell_randomizer = rand;\n      }\n      min_dist = min(min_dist, dist);\n    }\n  }\n\n  return vec3(min_dist, cell_randomizer);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (.02 * (1. - step(1. - scale, 1.) / scale));\n  uv *= u_resolution;\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float t = u_time;\n\n  vec3 voronoi = get_voronoi_shape(uv, t) + 1e-4;\n\n  float radius = .25 * clamp(u_dotSize, 0., 1.) - .5 * clamp(u_dotSizeRange, 0., 1.) * voronoi[2];\n  float dist = voronoi[0];\n  float edge_width = fwidth(dist);\n  float shape = smoothstep(radius + edge_width, radius - edge_width, dist);\n\n  float color_randomizer = voronoi[1];\n\n  float opacity =\n    u_color1.a * step(0.0, color_randomizer) * step(color_randomizer, 0.25) +\n    u_color2.a * step(0.25, color_randomizer) * step(color_randomizer, 0.5) +\n    u_color3.a * step(0.5, color_randomizer) * step(color_randomizer, 0.75) +\n    u_color4.a * step(0.75, color_randomizer) * step(color_randomizer, 1.0);\n\n  opacity *= shape;\n\n  vec3 color =\n    u_color1.rgb * step(0.0, color_randomizer) * step(color_randomizer, 0.25) +\n    u_color2.rgb * step(0.25, color_randomizer) * step(color_randomizer, 0.5) +\n    u_color3.rgb * step(0.5, color_randomizer) * step(color_randomizer, 0.75) +\n    u_color4.rgb * step(0.75, color_randomizer) * step(color_randomizer, 1.0);\n\n  fragColor = vec4(color * opacity, opacity);\n}\n`;\n", "/** Possible values for the shape uniform */\nexport const DotsGridShapes = {\n  Circle: 0,\n  Diamond: 1,\n  Square: 2,\n  Triangle: 3,\n} as const;\nexport type DotsGridShape = (typeof DotsGridShapes)[keyof typeof DotsGridShapes];\n\nexport type DotsGridUniforms = {\n  u_colorBack: [number, number, number, number];\n  u_colorFill: [number, number, number, number];\n  u_colorStroke: [number, number, number, number];\n  u_dotSize: number;\n  u_gridSpacingX: number;\n  u_gridSpacingY: number;\n  u_strokeWidth: number;\n  u_sizeRange: number;\n  u_opacityRange: number;\n  u_shape: DotsGridShape;\n};\n\n/**\n * Dot Grid Pattern\n * (the size parameters are set in pixels)\n *\n * Uniforms include:\n * u_colorBack - the background color\n * u_colorFill - the dots fill color\n * u_colorStroke - the dots stroke color\n * u_dotSize (px) - the base dot radius\n * u_strokeWidth (px) - the stroke (to be subtracted from u_dotSize)\n * u_gridSpacingX (px) - horizontal grid spacing\n * u_gridSpacingY (px) - xertical grid spacing\n * u_sizeRange (0 .. 1) - variety of dot size\n * u_opacityRange(0 .. 1) - variety of dot opacity to be applied equally to fill and stroke\n * u_shape - shape code (0 - circle, 1 - diamond, 2 - square, 3 - triangle)\n */\n\nexport const dotsGridFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gridSpacingX;\nuniform float u_gridSpacingY;\nuniform float u_strokeWidth;\nuniform float u_sizeRange;\nuniform float u_opacityRange;\nuniform float u_shape;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nfloat hash(vec2 st) {\n    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\nvec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }\n\n  float snoise(vec2 v) {\n    const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n                        -0.577350269189626, 0.024390243902439);\n    vec2 i  = floor(v + dot(v, C.yy));\n    vec2 x0 = v -   i + dot(i, C.xx);\n    vec2 i1;\n    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n    vec4 x12 = x0.xyxy + C.xxzz;\n    x12.xy -= i1;\n    i = mod(i, 289.0);\n    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),\n      dot(x12.zw,x12.zw)), 0.0);\n    m = m*m ;\n    m = m*m ;\n    vec3 x = 2.0 * fract(p * C.www) - 1.0;\n    vec3 h = abs(x) - 0.5;\n    vec3 ox = floor(x + 0.5);\n    vec3 a0 = x - ox;\n    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);\n    vec3 g;\n    g.x = a0.x * x0.x + h.x * x0.y;\n    g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n    return 130.0 * dot(m, g);\n  }\nfloat polygon(vec2 p, float N, float rot) {\n    float a = atan(p.x, p.y) + rot;\n    float r = TWO_PI / float(N);\n\n    return cos(floor(.5 + a/r) * r - a) * length(p);\n}\n\nvoid main() {\n    vec2 uv = gl_FragCoord.xy;\n    uv.y = u_resolution.y - uv.y;\n\n    uv /= u_pixelRatio;\n\n    vec2 grid = fract(uv / vec2(u_gridSpacingX, u_gridSpacingY)) + 1e-4;\n    vec2 grid_idx = floor(uv / vec2(u_gridSpacingX, u_gridSpacingY));\n    float size_randomizer = .5 + .5 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\n    float opacity_randomizer = .5 + .5 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\n\n    vec2 center = vec2(0.5) - 1e-3;\n    vec2 p = (grid - center) * vec2(u_gridSpacingX, u_gridSpacingY);\n\n    float base_size = u_dotSize * (1. - size_randomizer * clamp(u_sizeRange, 0., 1.));\n    float stroke_width = u_strokeWidth;\n\n    float dist;\n    if (u_shape < 0.5) {\n        // Circle\n        dist = length(p);\n    } else if (u_shape < 1.5) {\n        // Diamond\n        dist = polygon(1.5 * p, 4., .25 * PI);\n    } else if (u_shape < 2.5) {\n        // Square\n        dist = polygon(1.5 * p, 4., 1e-3);\n    } else {\n        // Triangle\n        p = p * 2. - 1.;\n        p.y -= .75 * base_size;\n        stroke_width *= 2.;\n        dist = polygon(p, 3., 1e-3);\n    }\n\n    float edge_width = fwidth(dist);\n    float shape_outer = smoothstep(base_size + edge_width, base_size - edge_width, dist);\n    float shape_inner = smoothstep(base_size - u_strokeWidth + edge_width, base_size - u_strokeWidth - edge_width, dist);\n    float stroke = clamp(shape_outer - shape_inner, 0., 1.);\n\n    float dot_opacity = max(0., 1. - opacity_randomizer * clamp(u_opacityRange, 0., 1.));\n\n    vec3 color = u_colorBack.rgb * u_colorBack.a;\n    color = mix(color, u_colorFill.rgb, u_colorFill.a * dot_opacity * shape_inner);\n    color = mix(color, u_colorStroke.rgb, u_colorStroke.a * dot_opacity * stroke);\n\n    float opacity = u_colorBack.a;\n    opacity += u_colorFill.a * shape_inner * dot_opacity;\n    opacity += u_colorStroke.a * stroke * dot_opacity;\n\n    fragColor = vec4(color, opacity);\n}\n`;\n", "export type SteppedSimplexNoiseUniforms = {\n  u_scale: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_color3: [number, number, number, number];\n  u_color4: [number, number, number, number];\n  u_color5: [number, number, number, number];\n  u_steps_number: number;\n};\n\n/**\n * Stepped Simplex Noise by Ksenia Kondrashova\n * Calculates a combination of 2 simplex noises with result rendered as\n * an X-stepped 5-colored gradient\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_color1 - the first gradient color\n * u_color2 - the second gradient color\n * u_color3 - the third gradient color\n * u_color4 - the fourth gradient color\n * u_color5 - the fifth gradient color\n * u_steps_number - the number of solid colors to show as a stepped gradient\n */\n\nexport const steppedSimplexNoiseFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\nuniform vec4 u_color5;\nuniform float u_steps_number;\n\nout vec4 fragColor;\n\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n\nfloat get_noise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nvec4 getColor(int index) {\n  if (index == 0) return u_color1;\n  if (index == 1) return u_color2;\n  if (index == 2) return u_color3;\n  if (index == 3) return u_color4;\n  if (index == 4) return u_color5;\n  return u_color1;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (.0008 * (1. - step(1. - scale, 1.) / scale));\n  uv *= u_resolution;\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float t = u_time;\n\n  float noise = .5 + .5 * get_noise(uv, t);\n  noise = floor(noise * u_steps_number) / u_steps_number;\n\n  vec3 color = u_color1.rgb * u_color1.a;\n  float opacity = u_color1.a;\n  for (int i = 0; i < 5; i++) {\n    vec4 next_c = getColor(i + 1);\n    float proportion = smoothstep((float(i) + .5) / 5., (float(i) + 2.) / 5., noise);\n    color = mix(color, next_c.rgb * next_c.a, proportion);\n    opacity = mix(opacity, next_c.a, proportion);\n  }\n  fragColor = vec4(color, opacity);\n}\n`;\n", "export type MetaballsUniforms = {\n  u_scale: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_color3: [number, number, number, number];\n  u_ballSize: number;\n  u_visibilityRange: number;\n};\n\n/**\n * Metaballs (circular shapes with gooey effect applied)\n * The artwork by Ksenia Kondrashova\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n *    (with scale = 1 metaballs fit the screen height)\n * u_color1 - the mataballs gradient color #1\n * u_color2 - the mataballs gradient color #2\n * u_color3 - the mataballs gradient color #3\n * u_ballSize (0 .. 1) - the size coefficient applied to each ball\n * u_visibilityRange (0 .. 1) - to show 2 to 15 balls\n */\n\nexport const metaballsFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform float u_ballSize;\nuniform float u_visibilityRange;\n\n#define TWO_PI 6.28318530718\n\nout vec4 fragColor;\n\nfloat hash(float x) {\n  return fract(sin(x) * 43758.5453123);\n}\nfloat lerp(float a, float b, float t) {\n  return a + t * (b - a);\n}\nfloat noise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f); // Smoothstep function for interpolation\n  return lerp(hash(i), hash(i + 1.0), u);\n}\n\nfloat get_ball_shape(vec2 uv, vec2 c, float p) {\n  float s = .5 * length(uv - c);\n  s = 1. - clamp(s, 0., 1.);\n  s = pow(s, p);\n  return s;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (9. * (1. - step(1. - scale, 1.) / scale));\n  uv += .5;\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  vec3 total_color = vec3(0.);\n  float total_shape = 0.;\n\n  const int max_balls_number = 15;\n  for (int i = 0; i < max_balls_number; i++) {\n    vec2 pos = vec2(.5) + 1e-4;\n    float idx_fract = float(i) / float(max_balls_number);\n    float angle = TWO_PI * idx_fract;\n\n    float speed = 1. - .2 * idx_fract;\n    float noiseX = noise(angle * 10. + float(i) + t * speed);\n    float noiseY = noise(angle * 20. + float(i) - t * speed);\n\n    pos += 7. * (vec2(noiseX, noiseY) - .5);\n\n    vec4 ball_color;\n    if (i % 3 == 0) {\n      ball_color = u_color1;\n    } else if (i % 3 == 1) {\n      ball_color = u_color2;\n    } else {\n      ball_color = u_color3;\n    }\n\n    float shape = get_ball_shape(uv, pos, 6. - 4. * u_ballSize) * ball_color.a;\n\n    shape *= smoothstep((float(i) - 1.) / float(max_balls_number), idx_fract, u_visibilityRange);\n\n    total_color += ball_color.rgb * shape;\n    total_shape += shape;\n  }\n\n  total_color /= max(total_shape, 1e-4);\n\n  float edge_width = fwidth(total_shape);\n  float final_shape = smoothstep(.4, .4 + edge_width, total_shape);\n\n  vec3 color = total_color * final_shape;\n  float opacity = final_shape;\n\n  if (opacity < .01) {\n    discard;\n  }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n", "export type PerlinNoiseUniforms = {\n  u_scale: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_proportion: number;\n  u_softness: number;\n  u_octaveCount: number;\n  u_persistence: number;\n  u_lacunarity: number;\n};\n\n/**\n * 3d Perlin noise with exposed parameters\n * Based on https://www.shadertoy.com/view/NlSGDz\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_color1 - the first mixed color\n * u_color2 - the second mixed color\n * u_proportion (0 .. 1) - the proportion between u_color1 and u_color2;\n * u_softness - the sharpness of the transition between u_color1 and u_color2 in the noise output\n * u_octaveCount - the number of octaves for Perlin noise;\n *    higher values increase the complexity of the noise\n * u_persistence (0 .. 1) - the amplitude of each successive octave of the noise;\n *    lower values make higher octaves less pronounced\n * u_lacunarity - the frequency of each successive octave of the noise;\n *    higher values increase the detail\n */\n\nexport const perlinNoiseFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_octaveCount;\nuniform float u_persistence;\nuniform float u_lacunarity;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n\nuint hash(uint x, uint seed) {\n  const uint m = 0x5bd1e995U;\n  uint hash = seed;\n    // process input\n    uint k = x;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\nuint hash(uvec3 x, uint seed){\n    const uint m = 0x5bd1e995U;\n    uint hash = seed;\n    // process first vector element\n    uint k = x.x; \n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process second vector element\n    k = x.y; \n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process third vector element\n    k = x.z; \n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\n\nvec3 gradientdy(uint hash) {\n    switch (int(hash) & 15) { // look at the last four bits to pick a gradient dy\n    case 0:\n        return vec3(1, 1, 0);\n    case 1:\n        return vec3(-1, 1, 0);\n    case 2:\n        return vec3(1, -1, 0);\n    case 3:\n        return vec3(-1, -1, 0);\n    case 4:\n        return vec3(1, 0, 1);\n    case 5:\n        return vec3(-1, 0, 1);\n    case 6:\n        return vec3(1, 0, -1);\n    case 7:\n        return vec3(-1, 0, -1);\n    case 8:\n        return vec3(0, 1, 1);\n    case 9:\n        return vec3(0, -1, 1);\n    case 10:\n        return vec3(0, 1, -1);\n    case 11:\n        return vec3(0, -1, -1);\n    case 12:\n        return vec3(1, 1, 0);\n    case 13:\n        return vec3(-1, 1, 0);\n    case 14:\n        return vec3(0, -1, 1);\n    case 15:\n        return vec3(0, -1, -1);\n    }\n}\n\nfloat interpolate(float value1, float value2, float value3, float value4, float value5, float value6, float value7, float value8, vec3 t) {\n    return mix(\n        mix(mix(value1, value2, t.x), mix(value3, value4, t.x), t.y),\n        mix(mix(value5, value6, t.x), mix(value7, value8, t.x), t.y),\n        t.z\n    );\n}\n\nvec3 fade(vec3 t) {\n    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);\n}\n\nfloat perlinNoise(vec3 position, uint seed) {\n    position += 1e+4;\n    vec3 floorPosition = floor(position);\n    vec3 fractPosition = fract(position);\n    uvec3 cellCoordinates = uvec3(floorPosition);\n    float value1 = dot(gradientdy(hash(cellCoordinates, seed)), fractPosition);\n    float value2 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 0)), seed)), fractPosition - vec3(1, 0, 0));\n    float value3 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 0)), seed)), fractPosition - vec3(0, 1, 0));\n    float value4 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 0)), seed)), fractPosition - vec3(1, 1, 0));\n    float value5 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 0, 1)), seed)), fractPosition - vec3(0, 0, 1));\n    float value6 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 1)), seed)), fractPosition - vec3(1, 0, 1));\n    float value7 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 1)), seed)), fractPosition - vec3(0, 1, 1));\n    float value8 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 1)), seed)), fractPosition - vec3(1, 1, 1));\n    return interpolate(value1, value2, value3, value4, value5, value6, value7, value8, fade(fractPosition));\n}\n\nfloat p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {\n    float value = 0.0;\n    float amplitude = 1.0;\n    float currentFrequency = 10.;\n    uint currentSeed = uint(0);\n    for (int i = 0; i < octaveCount; i++) {\n        currentSeed = hash(currentSeed, 0x0U);\n        value += perlinNoise(position * currentFrequency, currentSeed) * amplitude;\n        amplitude *= persistence;\n        currentFrequency *= lacunarity;\n    }\n    return value;\n}\n\nfloat get_max_amp(float persistence, float octaveCount) {\n    persistence *= .999;\n    return (1. - pow(persistence, octaveCount)) / (1. - persistence);\n}\n\nvoid main() {\n\n    vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n    float t = .2 * u_time;\n\n    uv -= .5;\n    uv *= (.004 * u_scale * u_resolution);\n    uv /= u_pixelRatio;\n    uv += .5;\n        \n    vec3 p = vec3(uv, t);\n    \n    float oct_count = max(0., floor(u_octaveCount));\n    float persistence = clamp(u_persistence, 0., 1.);\n    float noise = p_noise(p, int(oct_count), persistence, u_lacunarity);\n    \n    float max_amp = get_max_amp(persistence, oct_count);\n    float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);\n    float sharpness = clamp(u_softness, 0., 1.);\n    float smooth_w = 0.5 * fwidth(noise_normalized);\n    float sharp_noise = smoothstep(\n        .5 - .5 * sharpness - smooth_w, \n        .5 + .5 * sharpness + smooth_w, \n        noise_normalized\n    );\n\n    vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, sharp_noise);\n    float opacity = mix(u_color1.a, u_color2.a, sharp_noise);\n\n    fragColor = vec4(color, opacity);\n}\n`;\n", "export type VoronoiUniforms = {\n  u_scale: number;\n  u_colorCell1: [number, number, number, number];\n  u_colorCell2: [number, number, number, number];\n  u_colorCell3: [number, number, number, number];\n  u_colorEdges: [number, number, number, number];\n  u_colorMid: [number, number, number, number];\n  u_colorGradient: number;\n  u_distance: number;\n  u_edgesSize: number;\n  u_edgesSoftness: number;\n  u_middleSize: number;\n  u_middleSoftness: number;\n};\n\n/**\n * Voronoi pattern\n * The artwork by Ksenia Kondrashova\n * Renders a number of circular shapes with gooey effect applied\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_colorCell1 - color #1 of mix used to fill the cell shape\n * u_colorCell2 - color #2 of mix used to fill the cell shape\n * u_colorCell3 - color #3 of mix used to fill the cell shape\n * u_colorEdges - color of borders between the cells\n * u_colorMid - color used to fill the radial shape in the center of each cell\n * u_colorGradient (0 .. 1) - if the cell color is a gradient of palette colors or one color selection\n * u_distance (0 ... 0.5) - how far the cell center can move from regular square grid\n * u_edgesSize (0 .. 1) - the size of borders\n *   (can be set to zero but the edge may get glitchy due to nature of Voronoi diagram)\n * u_edgesSoftness (0 .. 1) - the blur/sharp for cell border\n * u_middleSize (0 .. 1) - the size of shape in the center of each cell\n * u_middleSoftness (0 .. 1) - the smoothness of shape in the center of each cell\n *   (vary from cell color gradient to sharp dot in the middle)\n */\n\nexport const voronoiFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\n\nuniform vec4 u_colorCell1;\nuniform vec4 u_colorCell2;\nuniform vec4 u_colorCell3;\nuniform vec4 u_colorEdges;\nuniform vec4 u_colorMid;\n\nuniform float u_colorGradient;\nuniform float u_distance;\nuniform float u_edgesSize;\nuniform float u_edgesSoftness;\nuniform float u_middleSize;\nuniform float u_middleSoftness;\n\n#define TWO_PI 6.28318530718\n\nout vec4 fragColor;\n\nvec2 hash(vec2 p) {\n  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\n  return fract(sin(p) * 18.5453);\n}\n\nfloat smin(float angle, float b, float k) {\n  float h = clamp(.5 + .5 * (b - angle) / k, 0., 1.);\n  return mix(b, angle, h) - k * h * (1. - h);\n}\n\nvec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, vec2 randomizer) {\n    vec3 color1 = c1.rgb * c1.a;\n    vec3 color2 = c2.rgb * c2.a;\n    vec3 color3 = c3.rgb * c3.a;\n\n    float mixer = clamp(u_colorGradient, 0., 1.);\n    float r1 = smoothstep(.5 - .5 * mixer, .5 + .5 * mixer, randomizer[0]);\n    float r2 = smoothstep(.6 - .6 * mixer, .6 + .4 * mixer, randomizer[1]);\n    vec3 blended_color_2 = mix(color1, color2, r1);\n    float blended_opacity_2 = mix(c1.a, c2.a, r1);\n    vec3 c = mix(blended_color_2, color3, r2);\n    float o = mix(blended_opacity_2, c3.a, r2);\n    \n    return vec4(c, o);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float t = u_time;\n  uv -= .5;\n  uv *= (.01 * u_scale * u_resolution);\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n\n  vec2 randomizer = vec2(0.);\n  vec3 distance = vec3(1.);\n\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tile_offset = vec2(float(x), float(y));\n      vec2 o = hash(i_uv + tile_offset);\n      tile_offset += (.5 + clamp(u_distance, 0., .5) * sin(t + TWO_PI * o)) - f_uv;\n\n      float dist = dot(tile_offset, tile_offset);\n      float old_min_dist = distance.x;\n\n      distance.z = max(distance.x, max(distance.y, min(distance.z, dist)));\n      distance.y = max(distance.x, min(distance.y, dist));\n      distance.x = min(distance.x, dist);\n\n      if (old_min_dist > distance.x) {\n        randomizer = o;\n      }\n    }\n  }\n\n  distance = sqrt(distance);\n\n  distance = sqrt(distance);\n  float cell_shape = min(smin(distance.z, distance.y, .1) - distance.x, 1.);\n\n  float dot_shape = pow(distance.x, 2.) / (2. * clamp(u_middleSize, 0., 1.) + 1e-4);\n  float dot_edge_width = fwidth(dot_shape);\n  float dotSharp = clamp(1. - u_middleSoftness, 0., 1.);\n  dot_shape = 1. - smoothstep(.5 * dotSharp - dot_edge_width, 1. - .5 * dotSharp, dot_shape);\n\n  float cell_edge_width = fwidth(distance.x);\n  float w = .7 * (clamp(u_edgesSize, 0., 1.) - .1);\n  float edgeSharp = clamp(u_edgesSoftness, 0., 1.);\n  cell_shape = smoothstep(w - cell_edge_width, w + edgeSharp, cell_shape);\n\n  dot_shape *= cell_shape;\n\n  vec4 cell_mix = blend_colors(u_colorCell1, u_colorCell2, u_colorCell3, randomizer);\n  \n  vec4 edges = vec4(u_colorEdges.rgb * u_colorEdges.a, u_colorEdges.a);\n\n  vec3 color = mix(edges.rgb, cell_mix.rgb, cell_shape);\n  float opacity = mix(edges.a, cell_mix.a, cell_shape);\n\n  color = mix(color, u_colorMid.rgb * u_colorMid.a, dot_shape);\n  opacity = mix(opacity, u_colorMid.a, dot_shape);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n", "export type WavesUniforms = {\n  u_scale: number;\n  u_rotation: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_shape: number;\n  u_frequency: number;\n  u_amplitude: number;\n  u_spacing: number;\n  u_dutyCycle: number;\n  u_softness: number;\n};\n\n/**\n * Stepped Simplex Noise by Ksenia Kondrashova\n * Calculates a combination of 2 simplex noises with result rendered as a stepped gradient\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_rotation - the rotation applied to user space\n * u_color1 - the first color\n * u_color2 - the second color\n * u_shape (0 ... 3) - the line shaping coefficient, non-integer\n   values allowed and produce mixed shapes\n   - u_shape = 0 is zigzag\n   - u_shape = 1 is perfect sine wave\n   - u_shape = 2 is irregular wave #1\n   - u_shape = 3 is irregular wave #2\n * u_frequency - the wave frequency\n * u_amplitude - the wave amplitude\n * u_spacing - the density of pattern lines\n * u_dutyCycle (0 ... 1) - the proportion of stroke width to the pattern step\n * u_softness (0 ... 1) - the blur applied to the lines edges\n */\n\nexport const wavesFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform float u_rotation;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_shape;\nuniform float u_frequency;\nuniform float u_amplitude;\nuniform float u_spacing;\nuniform float u_dutyCycle;\nuniform float u_softness;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nout vec4 fragColor;\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  uv *= (.02 * max(0., u_scale) * u_resolution);\n  uv = rotate(uv, u_rotation * .5 * PI);\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float wave = .5 * cos(uv.x * u_frequency * TWO_PI);\n  float zigzag = 2. * abs(fract(uv.x * u_frequency) - .5);\n  float irregular = sin(uv.x * .25 * u_frequency * TWO_PI) * cos(uv.x * u_frequency * TWO_PI);\n  float irregular2 = .75 * (sin(uv.x * u_frequency * TWO_PI) + .5 * cos(uv.x * .5 * u_frequency * TWO_PI));\n\n  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));\n  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));\n  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));\n  offset *= 2. * u_amplitude;\n  \n  float spacing = .02 + .98 * u_spacing;\n  float shape = .5 + .5 * sin((uv.y + offset) * PI / spacing);\n  \n  float edge_width = .02 / (1. + abs(shape)) * (.001 + u_scale);\n  edge_width += .5 * max(0., u_softness);\n  float dc = clamp(u_dutyCycle, 0., 1.);\n  float t = smoothstep(dc - edge_width, dc + edge_width, shape);\n\n  vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, t);\n  float opacity = mix(u_color1.a, u_color2.a, t);\n  \n  fragColor = vec4(color, opacity);\n}\n`;\n", "export const PatternShapes = {\n  Checks: 0,\n  Stripes: 1,\n  Edge: 2,\n} as const;\nexport type PatternShape = (typeof PatternShapes)[keyof typeof PatternShapes];\n\nexport type WarpUniforms = {\n  u_scale: number;\n  u_rotation: number;\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_color3: [number, number, number, number];\n  u_proportion: number;\n  u_softness: number;\n  u_shape: PatternShape;\n  u_shapeScale: number;\n  u_distortion: number;\n  u_swirl: number;\n  u_swirlIterations: number;\n};\n\n/**\n * 3d Perlin noise with exposed parameters\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_rotation - the rotation applied to user space\n * u_color1 - the first pattern color\n * u_color2 - the second pattern color\n * u_color3 - the third pattern color\n * u_proportion (0 .. 1) - the proportion between colors (on 0.5 colors are equally distributed)\n * u_softness (0 .. 1) - the color blur (0 for pronounced edges, 1 for gradient)\n * u_shape (0 ... 2) - the color pattern to be distorted with noise & swirl\n *    - u_shape = 0 is checks\n *    - u_shape = 1 is stripes\n *    - u_shape = 2 is 2 halves of canvas (mapping the canvas height regardless of resolution)\n * u_shapeScale - the scale of color pattern (appies over the global scaling)\n * u_distortion - the noisy distortion over the UV coordinate (applied before the overlapping swirl)\n * u_swirl - the power of swirly distortion\n * u_swirlIterations - the number of swirl iterations (layering curves effect)\n *\n */\n\nexport const warpFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_shape;\nuniform float u_shapeScale;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_swirlIterations;\n\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nfloat random(vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\nfloat noise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  // Smoothstep for interpolation\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  // Do the interpolation as two nested mix operations\n  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n\n}\n\nvec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, float mixer, float edgesWidth, float edge_blur) {\n    vec3 color1 = c1.rgb * c1.a;\n    vec3 color2 = c2.rgb * c2.a;\n    vec3 color3 = c3.rgb * c3.a;\n\n    float r1 = smoothstep(.0 + .35 * edgesWidth, .7 - .35 * edgesWidth + .5 * edge_blur, mixer);\n    float r2 = smoothstep(.3 + .35 * edgesWidth, 1. - .35 * edgesWidth + edge_blur, mixer);\n\n    vec3 blended_color_2 = mix(color1, color2, r1);\n    float blended_opacity_2 = mix(c1.a, c2.a, r1);\n\n    vec3 c = mix(blended_color_2, color3, r2);\n    float o = mix(blended_opacity_2, c3.a, r2);\n    return vec4(c, o);\n}\n\nvoid main() {\n    vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n    vec2 uv_original = uv;\n\n    float t = .5 * u_time;\n\n    float noise_scale = .0005 + .006 * u_scale;\n\n    uv -= .5;\n    uv *= (noise_scale * u_resolution);\n    uv = rotate(uv, u_rotation * .5 * PI);\n    uv /= u_pixelRatio;\n    uv += .5;\n\n    float n1 = noise(uv * 1. + t);\n    float n2 = noise(uv * 2. - t);\n    float angle = n1 * TWO_PI;\n    uv.x += 4. * u_distortion * n2 * cos(angle);\n    uv.y += 4. * u_distortion * n2 * sin(angle);\n\n    float iterations_number = ceil(clamp(u_swirlIterations, 1., 30.));\n    for (float i = 1.; i <= iterations_number; i++) {\n        uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * uv.y);\n        uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * uv.x);\n    }\n\n    float proportion = clamp(u_proportion, 0., 1.);\n\n    float shape = 0.;\n    float mixer = 0.;\n    if (u_shape < .5) {\n      vec2 checks_shape_uv = uv * (.5 + 3.5 * u_shapeScale);\n      shape = .5 + .5 * sin(checks_shape_uv.x) * cos(checks_shape_uv.y);\n      mixer = shape + .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n    } else if (u_shape < 1.5) {\n      vec2 stripes_shape_uv = uv * (.25 + 3. * u_shapeScale);\n      float f = fract(stripes_shape_uv.y);\n      shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);\n      mixer = shape + .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n    } else {\n      float sh = 1. - uv.y;\n      sh -= .5;\n      sh /= (noise_scale * u_resolution.y);\n      sh += .5;\n      float shape_scaling = .2 * (1. - u_shapeScale);\n      shape = smoothstep(.45 - shape_scaling, .55 + shape_scaling, sh + .3 * (proportion - .5));\n      mixer = shape;\n    }\n\n    vec4 color_mix = blend_colors(u_color1, u_color2, u_color3, mixer, 1. - clamp(u_softness, 0., 1.), .01 + .01 * u_scale);\n\n    fragColor = vec4(color_mix.rgb, color_mix.a);\n}\n`;\n", "export type GodRaysUniforms = {\n  u_offsetX: number;\n  u_offsetY: number;\n  u_colorBack: [number, number, number, number];\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_color3: [number, number, number, number];\n  u_spotty: number;\n  u_midSize: number;\n  u_midIntensity: number;\n  u_frequency: number;\n  u_density: number;\n  u_blending: number;\n};\n\n/**\n * GodRays pattern\n * The artwork by Ksenia Kondrashova\n * Renders a number of circular shapes with gooey effect applied\n *\n * Uniforms include:\n *\n * u_offsetX - left / right pan\n * u_offsetY - up / down pan\n * u_colorBack - background RGBA color\n * u_color1 - ray color #1 (also main color of middle spot)\n * u_color2 - ray color #2\n * u_color3 - ray color #3\n * u_frequency - the frequency of rays (the number of sectors)\n * u_spotty - the density of spots in the rings (higher = more spots)\n * u_midSize - the size of the central shape within the rings\n * u_midIntensity - the influence of the central shape on the rings\n * u_density (0 .. 1) - the number of visible rays\n * u_blending (0 .. 1) - blending mode (0 for color mix, 1 for additive blending)\n */\n\nexport const godRaysFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\n\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform float u_frequency;\nuniform float u_spotty;\nuniform float u_midSize;\nuniform float u_midIntensity;\nuniform float u_density;\nuniform float u_blending;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n\nfloat random(vec2 uv) {\n  return fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nfloat noise(vec2 uv) {\n  vec2 i = floor(uv);\n  vec2 f = fract(uv);\n\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat get_noise_shape(vec2 uv, float r, float freq, float density, float time) {\n  uv = rotate(uv, .05 * time);\n  float a = atan(uv.y, uv.x);\n  r -= 3. * time;\n  vec2 left = vec2(a * freq, r);\n  vec2 right = vec2(mod(a, TWO_PI) * freq, r);\n  float n_left = pow(noise(left), density);\n  float n_right = pow(noise(right), density);\n  float shape = mix(n_right, n_left, smoothstep(-.2, .2, uv.x));\n  return shape;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  uv += vec2(-u_offsetX, u_offsetY);\n  uv.x *= ratio;\n\n  float t = .2 * u_time;\n\n  float radius = length(uv);\n  float spots = 4. * abs(u_spotty);\n  float density = 4. - 3. * clamp(u_density, 0., 1.);\n\n  float rays1 = get_noise_shape(uv, radius * spots, 5. * u_frequency, density, t);\n  rays1 *= get_noise_shape(uv, .5 + .75 * radius * spots, 4. * u_frequency, density, -.5 * t);\n  \n  float rays2 = get_noise_shape(uv, 1.5 * radius, 12. * u_frequency, density, t);\n  rays2 *= get_noise_shape(uv, -.5 + 1.1 * radius * spots, 7. * u_frequency, density, .75 * t);\n  \n  float rays3 = get_noise_shape(uv, 2. * radius * spots, 10. * u_frequency, density, t);\n  rays3 *= get_noise_shape(uv, 1.1 * radius, 12. * u_frequency, density, .2 * t);\n\n  float mid_shape = smoothstep(1. * abs(u_midSize), .05 * abs(u_midSize), radius);  \n  rays3 = mix(rays3, 1., (.5 + .5 * rays1) * u_midIntensity * pow(mid_shape, 7.));\n  rays2 = mix(rays2, 1., (.5 + .5 * rays3) * u_midIntensity * pow(mid_shape, 3.));\n  rays1 = mix(rays1, 1., u_midIntensity * pow(mid_shape, 5.));\n  \n  float opacity = rays2 * u_color2.a;\n  opacity += rays3 * u_color3.a;\n  opacity += rays1 * u_color1.a;\n  opacity += u_colorBack.a * (1.0 - rays1 * u_color1.a - rays2 * u_color2.a - rays3 * u_color3.a);\n  opacity = clamp(opacity, 0.0, 1.0);\n\n  vec3 added_color = u_colorBack.rgb * (1. - (rays1 + rays2 + rays3)) * u_colorBack.a;\n  added_color += u_color1.rgb * rays1 * u_color1.a;\n  added_color += u_color2.rgb * rays2 * u_color2.a;\n  added_color += u_color3.rgb * rays3 * u_color3.a;\n\n  added_color += u_colorBack.rgb * rays1 * (1.0 - u_color1.a) * u_colorBack.a;\n  added_color += u_colorBack.rgb * rays2 * (1.0 - u_color2.a) * u_colorBack.a;\n  added_color += u_colorBack.rgb * rays3 * (1.0 - u_color3.a) * u_colorBack.a;\n  \n  vec3 mixed_color = mix(u_colorBack.rgb * u_colorBack.a, u_color2.rgb, rays2 * u_color2.a);\n  mixed_color = mix(mixed_color, u_color3.rgb, rays3 * u_color3.a);\n  mixed_color = mix(mixed_color, u_color1.rgb, rays1 * u_color1.a);\n  \n  vec3 color = mix(mixed_color, added_color, clamp(u_blending, 0., 1.));\n  \n  fragColor = vec4(color, opacity);\n}\n`;\n", "export type SpiralUniforms = {\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_scale: number;\n  u_offsetX: number;\n  u_offsetY: number;\n  u_spiralDensity: number;\n  u_spiralDistortion: number;\n  u_strokeWidth: number;\n  u_strokeTaper: number;\n  u_strokeCap: number;\n  u_noiseFreq: number;\n  u_noisePower: number;\n  u_softness: number;\n};\n\n/**\n * Spiral shape\n * The artwork by Ksenia Kondrashova\n * Generates a dynamic spiral shape with configurable parameters\n *\n * Uniforms include:\n *\n * u_scale - controls the overall scale of the spiral (u_scale = 1 makes it fit the viewport height)\n * u_offsetX - left / right pan\n * u_offsetY - up / down pan\n * u_color1 - the first color used in the spiral (stroke)\n * u_color2 - the second color used in the spiral (back)\n * u_spiralDensity (0 .. 1) - the spacing of the spiral arms\n * u_spiralDistortion (0 .. 1) - adds a wavy distortion effect to the spiral arms\n * u_strokeWidth (0 .. 1) - defines the thickness of the spiral lines.\n * u_strokeCap (0 .. 1) - adjusts the fading of the spiral edges.\n * u_strokeTaper (0 .. 1) - controls the tapering effect along the spiral arms.\n * u_noiseFreq - frequency of the noise applied to the spiral.\n * u_noisePower (0 .. 1) - strength of the noise effect.\n * u_softness - softens the edges of the spiral for a smoother appearance.\n */\n\nexport const spiralFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform float u_scale;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_spiralDensity;\nuniform float u_spiralDistortion;\nuniform float u_strokeWidth;\nuniform float u_strokeCap;\nuniform float u_strokeTaper;\n\nuniform float u_noiseFreq;\nuniform float u_noisePower;\nuniform float u_softness;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nout vec4 fragColor;\n\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\n\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  uv += vec2(-u_offsetX, u_offsetY);\n\n  uv *= (.4 + 15. * u_scale);\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  float l = length(uv);\n  float angle = atan(uv.y, uv.x) - 2. * t;\n  float angle_norm = angle / TWO_PI;  \n\n  angle_norm += .125 * u_noisePower * snoise(.5 * u_noiseFreq * uv);\n\n  float offset = pow(l, 1. - clamp(u_spiralDensity, 0., 1.)) + angle_norm;\n  \n  float stripe_map = fract(offset);\n  stripe_map -= .5 * u_strokeTaper * l;\n  \n  stripe_map += .25 * u_noisePower * snoise(u_noiseFreq * uv);\n\n  float shape = 2. * abs(stripe_map - .5);\n  \n  shape *= (1. + u_spiralDistortion * sin(4. * l - t) * cos(PI + l + t));\n    \n  float stroke_width = clamp(u_strokeWidth, fwidth(l), 1. - fwidth(l));\n\n  float edge_width = min(fwidth(l), fwidth(offset));\n\n  float mid = 1. - smoothstep(.0, .9, l);\n  mid = pow(mid, 2.);\n  shape -= .5 * u_strokeCap * mid;\n  \n  shape = smoothstep(stroke_width - edge_width - u_softness, stroke_width + edge_width + u_softness, shape);\n\n  vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, shape);\n  float opacity = mix(u_color1.a, u_color2.a, shape);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n", "/**  Convert color string from HSL, RGB, or hex to 0-to-1-range-RGBA array */\nexport function getShaderColorFromString(\n  colorString: string | [number, number, number] | [number, number, number, number] | undefined,\n  fallback: string | [number, number, number] | [number, number, number, number] = [0, 0, 0, 1]\n): [number, number, number, number] {\n  // If the color string is already an array of 3 or 4 numbers, return it (with alpha=1 if needed)\n  if (Array.isArray(colorString)) {\n    if (colorString.length === 4) return colorString as [number, number, number, number];\n    if (colorString.length === 3) return [...colorString, 1];\n    return getShaderColorFromString(fallback);\n  }\n\n  // If the color string is not a string, return the fallback\n  if (typeof colorString !== 'string') {\n    return getShaderColorFromString(fallback);\n  }\n\n  let r: number,\n    g: number,\n    b: number,\n    a = 1;\n  if (colorString.startsWith('#')) {\n    [r, g, b, a] = hexToRgba(colorString);\n  } else if (colorString.startsWith('rgb')) {\n    [r, g, b, a] = parseRgba(colorString);\n  } else if (colorString.startsWith('hsl')) {\n    [r, g, b, a] = hslaToRgba(parseHsla(colorString));\n  } else {\n    console.error('Unsupported color format', colorString);\n    return getShaderColorFromString(fallback);\n  }\n\n  return [clamp(r, 0, 1), clamp(g, 0, 1), clamp(b, 0, 1), clamp(a, 0, 1)];\n}\n\n/** Convert hex to RGBA (0 to 1 range) */\nfunction hexToRgba(hex: string): [number, number, number, number] {\n  // Remove # if present\n  hex = hex.replace(/^#/, '');\n\n  // Expand three-letter hex to six-letter\n  if (hex.length === 3) {\n    hex = hex\n      .split('')\n      .map((char) => char + char)\n      .join('');\n  }\n  // Expand six-letter hex to eight-letter (add full opacity if no alpha)\n  if (hex.length === 6) {\n    hex = hex + 'ff';\n  }\n\n  // Parse the components\n  const r = parseInt(hex.slice(0, 2), 16) / 255;\n  const g = parseInt(hex.slice(2, 4), 16) / 255;\n  const b = parseInt(hex.slice(4, 6), 16) / 255;\n  const a = parseInt(hex.slice(6, 8), 16) / 255;\n\n  return [r, g, b, a];\n}\n\n/** Parse RGBA string to RGBA (0 to 1 range) */\nfunction parseRgba(rgba: string): [number, number, number, number] {\n  // Match both rgb and rgba patterns\n  const match = rgba.match(/^rgba?\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*(?:,\\s*([0-9.]+))?\\s*\\)$/i);\n  if (!match) return [0, 0, 0, 1];\n\n  return [\n    parseInt(match[1] ?? '0') / 255,\n    parseInt(match[2] ?? '0') / 255,\n    parseInt(match[3] ?? '0') / 255,\n    match[4] === undefined ? 1 : parseFloat(match[4]),\n  ];\n}\n\n/** Parse HSLA string */\nfunction parseHsla(hsla: string): [number, number, number, number] {\n  const match = hsla.match(/^hsla?\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)%\\s*,\\s*(\\d+)%\\s*(?:,\\s*([0-9.]+))?\\s*\\)$/i);\n  if (!match) return [0, 0, 0, 1];\n\n  return [\n    parseInt(match[1] ?? '0'),\n    parseInt(match[2] ?? '0'),\n    parseInt(match[3] ?? '0'),\n    match[4] === undefined ? 1 : parseFloat(match[4]),\n  ];\n}\n\n/** Convert HSLA to RGBA (0 to 1 range) */\nfunction hslaToRgba(hsla: [number, number, number, number]): [number, number, number, number] {\n  const [h, s, l, a] = hsla;\n  const hDecimal = h / 360;\n  const sDecimal = s / 100;\n  const lDecimal = l / 100;\n  let r, g, b;\n\n  if (s === 0) {\n    r = g = b = lDecimal; // achromatic\n  } else {\n    const hue2rgb = (p: number, q: number, t: number) => {\n      if (t < 0) t += 1;\n      if (t > 1) t -= 1;\n      if (t < 1 / 6) return p + (q - p) * 6 * t;\n      if (t < 1 / 2) return q;\n      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n      return p;\n    };\n\n    const q = lDecimal < 0.5 ? lDecimal * (1 + sDecimal) : lDecimal + sDecimal - lDecimal * sDecimal;\n    const p = 2 * lDecimal - q;\n    r = hue2rgb(p, q, hDecimal + 1 / 3);\n    g = hue2rgb(p, q, hDecimal);\n    b = hue2rgb(p, q, hDecimal - 1 / 3);\n  }\n\n  return [r, g, b, a];\n}\n\nexport const clamp = (n: number, min: number, max: number): number => Math.min(Math.max(n, min), max);\n"],
+  "mappings": "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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECInC,IAAMC,EAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECJhC,IAAMC,EAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECQjC,IAAMC,EAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EC1BhC,IAAMC,EAAiB,CAC5B,OAAQ,EACR,QAAS,EACT,OAAQ,EACR,SAAU,CACZ,EAiCaC,EAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECd/B,IAAMC,EAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECF1C,IAAMC,EAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECMhC,IAAMC,EAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECQlC,IAAMC,EAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECF9B,IAAMC,EAAsB;AAAA;AAAA;AA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",
+  "names": ["ShaderMount", "canvas", "fragmentShader", "uniforms", "webGlContextAttributes", "speed", "seed", "gl", "program", "createProgram", "vertexShaderSource", "positionAttributeLocation", "positionBuffer", "positions", "uniformLocations", "key", "value", "aspectRatioUniformName", "clientWidth", "clientHeight", "pixelRatio", "newWidth", "newHeight", "cssWidth", "cssHeight", "currentTime", "dt", "uniformName", "image", "existingTexture", "texture", "error", "location", "textureUnit", "aspectRatioLocation", "aspectRatio", "updatedUniforms", "newSeed", "oneFrameAt120Fps", "newSpeed", "newUniforms", "createShader", "type", "source", "shader", "fragmentShaderSource", "vertexShader", "grainCloudsFragmentShader", "meshGradientFragmentShader", "smokeRingFragmentShader", "neuroNoiseFragmentShader", "dotsOrbitFragmentShader", "DotsGridShapes", "dotsGridFragmentShader", "steppedSimplexNoiseFragmentShader", "metaballsFragmentShader", "perlinNoiseFragmentShader", "voronoiFragmentShader", "wavesFragmentShader", "PatternShapes", "warpFragmentShader", "godRaysFragmentShader", "spiralFragmentShader", "getShaderColorFromString", "colorString", "fallback", "r", "g", "b", "hexToRgba", "parseRgba", "hslaToRgba", "parseHsla", "clamp", "hex", "char", "a", "rgba", "match", "hsla", "h", "s", "l", "hDecimal", "sDecimal", "lDecimal", "hue2rgb", "p", "q", "t", "n", "min", "max"]
 }

package/dist/shader-mount.d.ts

@@ -1,3 +1,5 @@
+/** Uniform types that we support to be auto-mapped into the fragment shader */
+export type ShaderMountUniforms = Record<string, number | number[] | HTMLImageElement>;
 export declare class ShaderMount {
     private canvas;
     private gl;
@@ -19,12 +21,14 @@ export declare class ShaderMount {
     private hasBeenDisposed;
     /** If the resolution of the canvas has changed since the last render */
     private resolutionChanged;
-    constructor(canvas: HTMLCanvasElement, fragmentShader: string, uniforms?: Record<string, number | number[]>, webGlContextAttributes?: WebGLContextAttributes, 
+    /** Store textures that are provided by the user */
+    private textures;
+    constructor(canvas: HTMLCanvasElement, fragmentShader: string, uniforms?: ShaderMountUniforms, webGlContextAttributes?: WebGLContextAttributes, 
     /** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */
     speed?: number, 
     /** Pass a seed to offset the starting u_time value and give deterministic results*/
     seed?: number);
-    private initWebGL;
+    private initProgram;
     private setupPositionAttribute;
     private setupUniforms;
     private resizeObserver;
@@ -32,13 +36,16 @@ export declare class ShaderMount {
     private handleResize;
     private render;
     private requestRender;
-    private updateProvidedUniforms;
+    /** Creates a texture from an image and sets it into a uniform value */
+    private setTextureUniform;
+    /** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */
+    private setUniformValues;
     /** Set a seed to get a deterministic result */
     setSeed: (newSeed: number) => void;
     /** Set an animation speed (or 0 to stop animation) */
     setSpeed: (newSpeed?: number) => void;
-    /** Update the uniforms that are provided by the outside shader */
-    setUniforms: (newUniforms: Record<string, number | number[]>) => void;
+    /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */
+    setUniforms: (newUniforms: ShaderMountUniforms) => void;
     /** Dispose of the shader mount, cleaning up all of the WebGL resources */
     dispose: () => void;
 }

package/dist/shaders/metaballs.d.ts

@@ -19,4 +19,4 @@ export type MetaballsUniforms = {
  * u_ballSize (0 .. 1) - the size coefficient applied to each ball
  * u_visibilityRange (0 .. 1) - to show 2 to 15 balls
  */
-export declare const metaballsFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform float u_ballSize;\nuniform float u_visibilityRange;\n\n#define TWO_PI 6.28318530718\n\nout vec4 fragColor;\n\nfloat hash(float x) {\n  return fract(sin(x) * 43758.5453123);\n}\nfloat lerp(float a, float b, float t) {\n  return a + t * (b - a);\n}\nfloat noise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f); // Smoothstep function for interpolation\n  return lerp(hash(i), hash(i + 1.0), u);\n}\n\nfloat get_ball_shape(vec2 uv, vec2 c, float p) {\n  float s = .5 * length(uv - c);\n  s = 1. - clamp(s, 0., 1.);\n  s = pow(s, p);\n  return s;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  uv /= u_pixelRatio;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (18. * (1. - step(1. - scale, 1.) / scale));\n  uv += .5;\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  vec3 total_color = vec3(0.);\n  float total_shape = 0.;\n\n  const int max_balls_number = 15;\n  for (int i = 0; i < max_balls_number; i++) {\n    vec2 pos = vec2(.5) + 1e-4;\n    float idx_fract = float(i) / float(max_balls_number);\n    float angle = TWO_PI * idx_fract;\n\n    float speed = 1. - .2 * idx_fract;\n    float noiseX = noise(angle * 10. + float(i) + t * speed);\n    float noiseY = noise(angle * 20. + float(i) - t * speed);\n\n    pos += 7. * (vec2(noiseX, noiseY) - .5);\n\n    vec4 ball_color;\n    if (i % 3 == 0) {\n      ball_color = u_color1;\n    } else if (i % 3 == 1) {\n      ball_color = u_color2;\n    } else {\n      ball_color = u_color3;\n    }\n\n    float shape = get_ball_shape(uv, pos, 6. - 4. * u_ballSize) * ball_color.a;\n\n    shape *= smoothstep((float(i) - 1.) / float(max_balls_number), idx_fract, u_visibilityRange);\n\n    total_color += ball_color.rgb * shape;\n    total_shape += shape;\n  }\n\n  total_color /= max(total_shape, 1e-4);\n\n  float edge_width = fwidth(total_shape);\n  float final_shape = smoothstep(.4, .4 + edge_width, total_shape);\n\n  vec3 color = total_color * final_shape;\n  float opacity = final_shape;\n\n  if (opacity < .01) {\n    discard;\n  }\n\n  fragColor = vec4(color, opacity);\n}\n";
+export declare const metaballsFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform float u_ballSize;\nuniform float u_visibilityRange;\n\n#define TWO_PI 6.28318530718\n\nout vec4 fragColor;\n\nfloat hash(float x) {\n  return fract(sin(x) * 43758.5453123);\n}\nfloat lerp(float a, float b, float t) {\n  return a + t * (b - a);\n}\nfloat noise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f); // Smoothstep function for interpolation\n  return lerp(hash(i), hash(i + 1.0), u);\n}\n\nfloat get_ball_shape(vec2 uv, vec2 c, float p) {\n  float s = .5 * length(uv - c);\n  s = 1. - clamp(s, 0., 1.);\n  s = pow(s, p);\n  return s;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (9. * (1. - step(1. - scale, 1.) / scale));\n  uv += .5;\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  vec3 total_color = vec3(0.);\n  float total_shape = 0.;\n\n  const int max_balls_number = 15;\n  for (int i = 0; i < max_balls_number; i++) {\n    vec2 pos = vec2(.5) + 1e-4;\n    float idx_fract = float(i) / float(max_balls_number);\n    float angle = TWO_PI * idx_fract;\n\n    float speed = 1. - .2 * idx_fract;\n    float noiseX = noise(angle * 10. + float(i) + t * speed);\n    float noiseY = noise(angle * 20. + float(i) - t * speed);\n\n    pos += 7. * (vec2(noiseX, noiseY) - .5);\n\n    vec4 ball_color;\n    if (i % 3 == 0) {\n      ball_color = u_color1;\n    } else if (i % 3 == 1) {\n      ball_color = u_color2;\n    } else {\n      ball_color = u_color3;\n    }\n\n    float shape = get_ball_shape(uv, pos, 6. - 4. * u_ballSize) * ball_color.a;\n\n    shape *= smoothstep((float(i) - 1.) / float(max_balls_number), idx_fract, u_visibilityRange);\n\n    total_color += ball_color.rgb * shape;\n    total_shape += shape;\n  }\n\n  total_color /= max(total_shape, 1e-4);\n\n  float edge_width = fwidth(total_shape);\n  float final_shape = smoothstep(.4, .4 + edge_width, total_shape);\n\n  vec3 color = total_color * final_shape;\n  float opacity = final_shape;\n\n  if (opacity < .01) {\n    discard;\n  }\n\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/shaders/perlin-noise.d.ts

@@ -3,7 +3,7 @@ export type PerlinNoiseUniforms = {
     u_color1: [number, number, number, number];
     u_color2: [number, number, number, number];
     u_proportion: number;
-    u_contour: number;
+    u_softness: number;
     u_octaveCount: number;
     u_persistence: number;
     u_lacunarity: number;
@@ -17,7 +17,7 @@ export type PerlinNoiseUniforms = {
  * u_color1 - the first mixed color
  * u_color2 - the second mixed color
  * u_proportion (0 .. 1) - the proportion between u_color1 and u_color2;
- * u_contour - the sharpness of the transition between u_color1 and u_color2 in the noise output
+ * u_softness - the sharpness of the transition between u_color1 and u_color2 in the noise output
  * u_octaveCount - the number of octaves for Perlin noise;
  *    higher values increase the complexity of the noise
  * u_persistence (0 .. 1) - the amplitude of each successive octave of the noise;
@@ -25,4 +25,4 @@ export type PerlinNoiseUniforms = {
  * u_lacunarity - the frequency of each successive octave of the noise;
  *    higher values increase the detail
  */
-export declare const perlinNoiseFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_proportion;\nuniform float u_contour;\nuniform float u_octaveCount;\nuniform float u_persistence;\nuniform float u_lacunarity;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n\nuint hash(uint x, uint seed) {\n  const uint m = 0x5bd1e995U;\n  uint hash = seed;\n    // process input\n    uint k = x;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\nuint hash(uvec3 x, uint seed){\n    const uint m = 0x5bd1e995U;\n    uint hash = seed;\n    // process first vector element\n    uint k = x.x; \n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process second vector element\n    k = x.y; \n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process third vector element\n    k = x.z; \n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\n\nvec3 gradientdy(uint hash) {\n    switch (int(hash) & 15) { // look at the last four bits to pick a gradient dy\n    case 0:\n        return vec3(1, 1, 0);\n    case 1:\n        return vec3(-1, 1, 0);\n    case 2:\n        return vec3(1, -1, 0);\n    case 3:\n        return vec3(-1, -1, 0);\n    case 4:\n        return vec3(1, 0, 1);\n    case 5:\n        return vec3(-1, 0, 1);\n    case 6:\n        return vec3(1, 0, -1);\n    case 7:\n        return vec3(-1, 0, -1);\n    case 8:\n        return vec3(0, 1, 1);\n    case 9:\n        return vec3(0, -1, 1);\n    case 10:\n        return vec3(0, 1, -1);\n    case 11:\n        return vec3(0, -1, -1);\n    case 12:\n        return vec3(1, 1, 0);\n    case 13:\n        return vec3(-1, 1, 0);\n    case 14:\n        return vec3(0, -1, 1);\n    case 15:\n        return vec3(0, -1, -1);\n    }\n}\n\nfloat interpolate(float value1, float value2, float value3, float value4, float value5, float value6, float value7, float value8, vec3 t) {\n    return mix(\n        mix(mix(value1, value2, t.x), mix(value3, value4, t.x), t.y),\n        mix(mix(value5, value6, t.x), mix(value7, value8, t.x), t.y),\n        t.z\n    );\n}\n\nvec3 fade(vec3 t) {\n    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);\n}\n\nfloat perlinNoise(vec3 position, uint seed) {\n    position += 1e+4;\n    vec3 floorPosition = floor(position);\n    vec3 fractPosition = fract(position);\n    uvec3 cellCoordinates = uvec3(floorPosition);\n    float value1 = dot(gradientdy(hash(cellCoordinates, seed)), fractPosition);\n    float value2 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 0)), seed)), fractPosition - vec3(1, 0, 0));\n    float value3 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 0)), seed)), fractPosition - vec3(0, 1, 0));\n    float value4 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 0)), seed)), fractPosition - vec3(1, 1, 0));\n    float value5 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 0, 1)), seed)), fractPosition - vec3(0, 0, 1));\n    float value6 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 1)), seed)), fractPosition - vec3(1, 0, 1));\n    float value7 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 1)), seed)), fractPosition - vec3(0, 1, 1));\n    float value8 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 1)), seed)), fractPosition - vec3(1, 1, 1));\n    return interpolate(value1, value2, value3, value4, value5, value6, value7, value8, fade(fractPosition));\n}\n\nfloat p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {\n    float value = 0.0;\n    float amplitude = 1.0;\n    float currentFrequency = 10.;\n    uint currentSeed = uint(0);\n    for (int i = 0; i < octaveCount; i++) {\n        currentSeed = hash(currentSeed, 0x0U);\n        value += perlinNoise(position * currentFrequency, currentSeed) * amplitude;\n        amplitude *= persistence;\n        currentFrequency *= lacunarity;\n    }\n    return value;\n}\n\nfloat get_max_amp(float persistence, float octaveCount) {\n    persistence *= .999;\n    return (1. - pow(persistence, octaveCount)) / (1. - persistence);\n}\n\nvoid main() {\n\n    vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n    float t = .2 * u_time;\n\n    uv -= .5;\n    uv *= (.004 * u_scale * u_resolution);\n    uv /= u_pixelRatio;\n    uv += .5;\n        \n    vec3 p = vec3(uv, t);\n    \n    float oct_count = max(0., floor(u_octaveCount));\n    float persistence = clamp(u_persistence, 0., 1.);\n    float noise = p_noise(p, int(oct_count), persistence, u_lacunarity);\n    \n    float max_amp = get_max_amp(persistence, oct_count);\n    float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);\n    float sharpness = clamp(1. - u_contour, 0., 1.);\n    float smooth_w = 0.5 * fwidth(noise_normalized);\n    float sharp_noise = smoothstep(\n        .5 - .5 * sharpness - smooth_w, \n        .5 + .5 * sharpness + smooth_w, \n        noise_normalized\n    );\n\n    vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, sharp_noise);\n    float opacity = mix(u_color1.a, u_color2.a, sharp_noise);\n\n    fragColor = vec4(color, opacity);\n}\n";
+export declare const perlinNoiseFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_octaveCount;\nuniform float u_persistence;\nuniform float u_lacunarity;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n\nuint hash(uint x, uint seed) {\n  const uint m = 0x5bd1e995U;\n  uint hash = seed;\n    // process input\n    uint k = x;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\nuint hash(uvec3 x, uint seed){\n    const uint m = 0x5bd1e995U;\n    uint hash = seed;\n    // process first vector element\n    uint k = x.x; \n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process second vector element\n    k = x.y; \n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process third vector element\n    k = x.z; \n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\n\nvec3 gradientdy(uint hash) {\n    switch (int(hash) & 15) { // look at the last four bits to pick a gradient dy\n    case 0:\n        return vec3(1, 1, 0);\n    case 1:\n        return vec3(-1, 1, 0);\n    case 2:\n        return vec3(1, -1, 0);\n    case 3:\n        return vec3(-1, -1, 0);\n    case 4:\n        return vec3(1, 0, 1);\n    case 5:\n        return vec3(-1, 0, 1);\n    case 6:\n        return vec3(1, 0, -1);\n    case 7:\n        return vec3(-1, 0, -1);\n    case 8:\n        return vec3(0, 1, 1);\n    case 9:\n        return vec3(0, -1, 1);\n    case 10:\n        return vec3(0, 1, -1);\n    case 11:\n        return vec3(0, -1, -1);\n    case 12:\n        return vec3(1, 1, 0);\n    case 13:\n        return vec3(-1, 1, 0);\n    case 14:\n        return vec3(0, -1, 1);\n    case 15:\n        return vec3(0, -1, -1);\n    }\n}\n\nfloat interpolate(float value1, float value2, float value3, float value4, float value5, float value6, float value7, float value8, vec3 t) {\n    return mix(\n        mix(mix(value1, value2, t.x), mix(value3, value4, t.x), t.y),\n        mix(mix(value5, value6, t.x), mix(value7, value8, t.x), t.y),\n        t.z\n    );\n}\n\nvec3 fade(vec3 t) {\n    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);\n}\n\nfloat perlinNoise(vec3 position, uint seed) {\n    position += 1e+4;\n    vec3 floorPosition = floor(position);\n    vec3 fractPosition = fract(position);\n    uvec3 cellCoordinates = uvec3(floorPosition);\n    float value1 = dot(gradientdy(hash(cellCoordinates, seed)), fractPosition);\n    float value2 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 0)), seed)), fractPosition - vec3(1, 0, 0));\n    float value3 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 0)), seed)), fractPosition - vec3(0, 1, 0));\n    float value4 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 0)), seed)), fractPosition - vec3(1, 1, 0));\n    float value5 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 0, 1)), seed)), fractPosition - vec3(0, 0, 1));\n    float value6 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 1)), seed)), fractPosition - vec3(1, 0, 1));\n    float value7 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 1)), seed)), fractPosition - vec3(0, 1, 1));\n    float value8 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 1)), seed)), fractPosition - vec3(1, 1, 1));\n    return interpolate(value1, value2, value3, value4, value5, value6, value7, value8, fade(fractPosition));\n}\n\nfloat p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {\n    float value = 0.0;\n    float amplitude = 1.0;\n    float currentFrequency = 10.;\n    uint currentSeed = uint(0);\n    for (int i = 0; i < octaveCount; i++) {\n        currentSeed = hash(currentSeed, 0x0U);\n        value += perlinNoise(position * currentFrequency, currentSeed) * amplitude;\n        amplitude *= persistence;\n        currentFrequency *= lacunarity;\n    }\n    return value;\n}\n\nfloat get_max_amp(float persistence, float octaveCount) {\n    persistence *= .999;\n    return (1. - pow(persistence, octaveCount)) / (1. - persistence);\n}\n\nvoid main() {\n\n    vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n    float t = .2 * u_time;\n\n    uv -= .5;\n    uv *= (.004 * u_scale * u_resolution);\n    uv /= u_pixelRatio;\n    uv += .5;\n        \n    vec3 p = vec3(uv, t);\n    \n    float oct_count = max(0., floor(u_octaveCount));\n    float persistence = clamp(u_persistence, 0., 1.);\n    float noise = p_noise(p, int(oct_count), persistence, u_lacunarity);\n    \n    float max_amp = get_max_amp(persistence, oct_count);\n    float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);\n    float sharpness = clamp(u_softness, 0., 1.);\n    float smooth_w = 0.5 * fwidth(noise_normalized);\n    float sharp_noise = smoothstep(\n        .5 - .5 * sharpness - smooth_w, \n        .5 + .5 * sharpness + smooth_w, \n        noise_normalized\n    );\n\n    vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, sharp_noise);\n    float opacity = mix(u_color1.a, u_color2.a, sharp_noise);\n\n    fragColor = vec4(color, opacity);\n}\n";

package/dist/shaders/smoke-ring.d.ts

@@ -19,4 +19,4 @@ export type SmokeRingUniforms = {
  * u_noiseScale - the resolution of noise texture
  * u_thickness - the thickness of the ring
  */
-export declare const smokeRingFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorInner;\nuniform vec4 u_colorOuter;\nuniform float u_noiseScale;\nuniform float u_thickness;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nfloat random(in vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\nfloat noise(in vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\nfloat fbm(in vec2 n) {\n  float total = 0.0, amplitude = .4;\n  for (int i = 0; i < 12; i++) {\n    total += noise(n) * amplitude;\n    n += n;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\nfloat get_ring_shape(vec2 uv, float innerRadius, float outerRadius) {\n  float distance = length(uv);\n  float line_width = outerRadius - innerRadius;\n  float ringValue = smoothstep(innerRadius, innerRadius + .8 * line_width, distance);\n  ringValue -= smoothstep(outerRadius, outerRadius + 1.2 * line_width, distance);\n  return clamp(ringValue, 0., 1.);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  uv /= u_pixelRatio;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (1. - step(1. - scale, 1.) / scale);\n  uv *= 3.;\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  float atg = atan(uv.y, uv.x);\n  float angle = (atg + PI) / TWO_PI;\n\n  vec2 polar_uv = vec2(atg, .1 * t - (.5 * length(uv)) + 1. / pow(length(uv), .5));\n  polar_uv *= u_noiseScale;\n\n  float noise_left = fbm(polar_uv + .05 * t);\n  polar_uv.x = mod(polar_uv.x, u_noiseScale * TWO_PI);\n  float noise_right = fbm(polar_uv + .05 * t);\n  float noise = mix(noise_right, noise_left, smoothstep(-.2, .2, uv.x));\n\n  float center_shape = 1. - pow(smoothstep(2., .0, length(uv)), 50.);\n\n  float radius = .4 - .25 * u_thickness;\n  float thickness = u_thickness;\n  thickness = pow(thickness, 2.);\n\n  float ring_shape = get_ring_shape(uv * (.5 + .6 * noise), radius - .2 * thickness, radius + .5 * thickness);\n\n  float ring_shape_outer = 1. - pow(ring_shape, 7.);\n  ring_shape_outer *= ring_shape;\n\n  float ring_shape_inner = ring_shape - ring_shape_outer;\n  ring_shape_inner *= ring_shape;\n\n  float background = u_colorBack.a;\n\n  float opacity = ring_shape_outer * u_colorOuter.a;\n  opacity += ring_shape_inner * u_colorInner.a;\n  opacity += background * (1. - ring_shape_inner * u_colorInner.a - ring_shape_outer * u_colorOuter.a);\n\n  vec3 color = u_colorBack.rgb * (1. - ring_shape) * background;\n  color += u_colorOuter.rgb * ring_shape_outer * u_colorOuter.a;\n  color += u_colorInner.rgb * ring_shape_inner * u_colorInner.a;\n\n  color += u_colorBack.rgb * ring_shape_inner * (1. - u_colorInner.a) * background;\n  color += u_colorBack.rgb * ring_shape_outer * (1. - u_colorOuter.a) * background;\n\n  fragColor = vec4(color, opacity);\n}\n";
+export declare const smokeRingFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorInner;\nuniform vec4 u_colorOuter;\nuniform float u_noiseScale;\nuniform float u_thickness;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nfloat random(in vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\nfloat noise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  // Smoothstep for interpolation\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  // Do the interpolation as two nested mix operations\n  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n\n}\nfloat fbm(in vec2 n) {\n  float total = 0.0, amplitude = .4;\n  for (int i = 0; i < 12; i++) {\n    total += noise(n) * amplitude;\n    n += n;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\nfloat get_ring_shape(vec2 uv, float innerRadius, float outerRadius) {\n  float distance = length(uv);\n  float line_width = outerRadius - innerRadius;\n  float ringValue = smoothstep(innerRadius, innerRadius + .8 * line_width, distance);\n  ringValue -= smoothstep(outerRadius, outerRadius + 1.2 * line_width, distance);\n  return clamp(ringValue, 0., 1.);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (1. - step(1. - scale, 1.) / scale);\n  uv *= 1.5;\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  float atg = atan(uv.y, uv.x);\n  float angle = (atg + PI) / TWO_PI;\n\n  vec2 polar_uv = vec2(atg, .1 * t - (.5 * length(uv)) + 1. / pow(length(uv), .5));\n  polar_uv *= u_noiseScale;\n\n  float noise_left = fbm(polar_uv + mod(.05 * t, 35.));\n  polar_uv.x = mod(polar_uv.x, u_noiseScale * TWO_PI);\n  float noise_right = fbm(polar_uv + mod(.05 * t, 35.));\n  float noise = mix(noise_right, noise_left, smoothstep(-.2, .2, uv.x));\n\n  float center_shape = 1. - pow(smoothstep(2., .0, length(uv)), 50.);\n\n  float radius = .4 - .25 * u_thickness;\n  float thickness = u_thickness;\n  thickness = pow(thickness, 2.);\n\n  float ring_shape = get_ring_shape(uv * (.5 + .6 * noise), radius - .2 * thickness, radius + .5 * thickness);\n\n  float ring_shape_outer = 1. - pow(ring_shape, 7.);\n  ring_shape_outer *= ring_shape;\n\n  float ring_shape_inner = ring_shape - ring_shape_outer;\n  ring_shape_inner *= ring_shape;\n\n  float background = u_colorBack.a;\n\n  float opacity = ring_shape_outer * u_colorOuter.a;\n  opacity += ring_shape_inner * u_colorInner.a;\n  opacity += background * (1. - ring_shape_inner * u_colorInner.a - ring_shape_outer * u_colorOuter.a);\n\n  vec3 color = u_colorBack.rgb * (1. - ring_shape) * background;\n  color += u_colorOuter.rgb * ring_shape_outer * u_colorOuter.a;\n  color += u_colorInner.rgb * ring_shape_inner * u_colorInner.a;\n\n  color += u_colorBack.rgb * ring_shape_inner * (1. - u_colorInner.a) * background;\n  color += u_colorBack.rgb * ring_shape_outer * (1. - u_colorOuter.a) * background;\n\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/shaders/spiral.d.ts

@@ -11,7 +11,7 @@ export type SpiralUniforms = {
     u_strokeCap: number;
     u_noiseFreq: number;
     u_noisePower: number;
-    u_blur: number;
+    u_softness: number;
 };
 /**
  * Spiral shape
@@ -32,6 +32,6 @@ export type SpiralUniforms = {
  * u_strokeTaper (0 .. 1) - controls the tapering effect along the spiral arms.
  * u_noiseFreq - frequency of the noise applied to the spiral.
  * u_noisePower (0 .. 1) - strength of the noise effect.
- * u_blur - softens the edges of the spiral for a smoother appearance.
+ * u_softness - softens the edges of the spiral for a smoother appearance.
  */
-export declare const spiralFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_scale;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_spiralDensity;\nuniform float u_spiralDistortion;\nuniform float u_strokeWidth;\nuniform float u_strokeCap;\nuniform float u_strokeTaper;\n\nuniform float u_noiseFreq;\nuniform float u_noisePower;\nuniform float u_blur;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nout vec4 fragColor;\n\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\n\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  uv += vec2(-u_offsetX, u_offsetY);\n\n  uv *= (.4 + 30. * u_scale);\n  uv /= u_pixelRatio;\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  float l = length(uv);\n  float angle = atan(uv.y, uv.x) - 2. * t;\n  float angle_norm = angle / TWO_PI;  \n\n  angle_norm += .125 * u_noisePower * snoise(.5 * u_noiseFreq * uv);\n\n  float offset = pow(l, 1. - clamp(0., 1., u_spiralDensity)) + angle_norm;\n  \n  float stripe_map = fract(offset);\n  stripe_map -= .5 * u_strokeTaper * l;\n  \n  stripe_map += .25 * u_noisePower * snoise(u_noiseFreq * uv);\n\n  float shape = 2. * abs(stripe_map - .5);\n  \n  shape *= (1. + u_spiralDistortion * sin(4. * l - t) * cos(PI + l + t));\n    \n  float stroke_width = clamp(u_strokeWidth, fwidth(l), 1. - fwidth(l));\n\n  float edge_width = min(fwidth(l), fwidth(offset));\n\n  float mid = 1. - smoothstep(.0, .9, l);\n  mid = pow(mid, 2.);\n  shape -= .5 * u_strokeCap * mid;\n  \n  shape = smoothstep(stroke_width - edge_width - u_blur, stroke_width + edge_width + u_blur, shape);\n\n  vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, shape);\n  float opacity = mix(u_color1.a, u_color2.a, shape);\n\n  fragColor = vec4(color, opacity);\n}\n";
+export declare const spiralFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_scale;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_spiralDensity;\nuniform float u_spiralDistortion;\nuniform float u_strokeWidth;\nuniform float u_strokeCap;\nuniform float u_strokeTaper;\n\nuniform float u_noiseFreq;\nuniform float u_noisePower;\nuniform float u_softness;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nout vec4 fragColor;\n\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\n\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  uv += vec2(-u_offsetX, u_offsetY);\n\n  uv *= (.4 + 15. * u_scale);\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  float l = length(uv);\n  float angle = atan(uv.y, uv.x) - 2. * t;\n  float angle_norm = angle / TWO_PI;  \n\n  angle_norm += .125 * u_noisePower * snoise(.5 * u_noiseFreq * uv);\n\n  float offset = pow(l, 1. - clamp(u_spiralDensity, 0., 1.)) + angle_norm;\n  \n  float stripe_map = fract(offset);\n  stripe_map -= .5 * u_strokeTaper * l;\n  \n  stripe_map += .25 * u_noisePower * snoise(u_noiseFreq * uv);\n\n  float shape = 2. * abs(stripe_map - .5);\n  \n  shape *= (1. + u_spiralDistortion * sin(4. * l - t) * cos(PI + l + t));\n    \n  float stroke_width = clamp(u_strokeWidth, fwidth(l), 1. - fwidth(l));\n\n  float edge_width = min(fwidth(l), fwidth(offset));\n\n  float mid = 1. - smoothstep(.0, .9, l);\n  mid = pow(mid, 2.);\n  shape -= .5 * u_strokeCap * mid;\n  \n  shape = smoothstep(stroke_width - edge_width - u_softness, stroke_width + edge_width + u_softness, shape);\n\n  vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, shape);\n  float opacity = mix(u_color1.a, u_color2.a, shape);\n\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/shaders/voronoi.d.ts

@@ -8,9 +8,9 @@ export type VoronoiUniforms = {
     u_colorGradient: number;
     u_distance: number;
     u_edgesSize: number;
-    u_edgesSharpness: number;
+    u_edgesSoftness: number;
     u_middleSize: number;
-    u_middleSharpness: number;
+    u_middleSoftness: number;
 };
 /**
  * Voronoi pattern
@@ -28,9 +28,9 @@ export type VoronoiUniforms = {
  * u_distance (0 ... 0.5) - how far the cell center can move from regular square grid
  * u_edgesSize (0 .. 1) - the size of borders
  *   (can be set to zero but the edge may get glitchy due to nature of Voronoi diagram)
- * u_edgesSharpness (0 .. 1) - the blur/sharp for cell border
+ * u_edgesSoftness (0 .. 1) - the blur/sharp for cell border
  * u_middleSize (0 .. 1) - the size of shape in the center of each cell
- * u_middleSharpness (0 .. 1) - the smoothness of shape in the center of each cell
+ * u_middleSoftness (0 .. 1) - the smoothness of shape in the center of each cell
  *   (vary from cell color gradient to sharp dot in the middle)
  */
-export declare const voronoiFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\n\nuniform vec4 u_colorCell1;\nuniform vec4 u_colorCell2;\nuniform vec4 u_colorCell3;\nuniform vec4 u_colorEdges;\nuniform vec4 u_colorMid;\n\nuniform float u_colorGradient;\nuniform float u_distance;\nuniform float u_edgesSize;\nuniform float u_edgesSharpness;\nuniform float u_middleSize;\nuniform float u_middleSharpness;\n\n#define TWO_PI 6.28318530718\n\nout vec4 fragColor;\n\nvec2 hash(vec2 p) {\n  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\n  return fract(sin(p) * 18.5453);\n}\n\nfloat smin(float angle, float b, float k) {\n  float h = clamp(.5 + .5 * (b - angle) / k, 0., 1.);\n  return mix(b, angle, h) - k * h * (1. - h);\n}\n\nvec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, vec2 randomizer) {\n    vec3 color1 = c1.rgb * c1.a;\n    vec3 color2 = c2.rgb * c2.a;\n    vec3 color3 = c3.rgb * c3.a;\n\n    float mixer = clamp(u_colorGradient, 0., 1.);\n    float r1 = smoothstep(.5 - .5 * mixer, .5 + .5 * mixer, randomizer[0]);\n    float r2 = smoothstep(.6 - .6 * mixer, .6 + .4 * mixer, randomizer[1]);\n    vec3 blended_color_2 = mix(color1, color2, r1);\n    float blended_opacity_2 = mix(c1.a, c2.a, r1);\n    vec3 c = mix(blended_color_2, color3, r2);\n    float o = mix(blended_opacity_2, c3.a, r2);\n    \n    return vec4(c, o);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float t = u_time;\n  uv -= .5;\n  uv *= (.01 * u_scale * u_resolution);\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n\n  vec2 randomizer = vec2(0.);\n  vec3 distance = vec3(1.);\n\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tile_offset = vec2(float(x), float(y));\n      vec2 o = hash(i_uv + tile_offset);\n      tile_offset += (.5 + clamp(u_distance, 0., .5) * sin(t + TWO_PI * o)) - f_uv;\n\n      float dist = dot(tile_offset, tile_offset);\n      float old_min_dist = distance.x;\n\n      distance.z = max(distance.x, max(distance.y, min(distance.z, dist)));\n      distance.y = max(distance.x, min(distance.y, dist));\n      distance.x = min(distance.x, dist);\n\n      if (old_min_dist > distance.x) {\n        randomizer = o;\n      }\n    }\n  }\n\n  distance = sqrt(distance);\n\n  distance = sqrt(distance);\n  float cell_shape = min(smin(distance.z, distance.y, .1) - distance.x, 1.);\n\n  float dot_shape = pow(distance.x, 2.) / (2. * clamp(u_middleSize, 0., 1.) + 1e-4);\n  float dot_edge_width = fwidth(dot_shape);\n  float dotSharp = clamp(u_middleSharpness, 0., 1.);\n  dot_shape = 1. - smoothstep(.5 * dotSharp - dot_edge_width, 1. - .5 * dotSharp, dot_shape);\n\n  float cell_edge_width = fwidth(distance.x);\n  float w = .7 * (clamp(u_edgesSize, 0., 1.) - .1);\n  float edgeSharp = clamp(u_edgesSharpness, 0., 1.);\n  cell_shape = smoothstep(w - cell_edge_width, w + edgeSharp, cell_shape);\n\n  dot_shape *= cell_shape;\n\n  vec4 cell_mix = blend_colors(u_colorCell1, u_colorCell2, u_colorCell3, randomizer);\n  \n  vec4 edges = vec4(u_colorEdges.rgb * u_colorEdges.a, u_colorEdges.a);\n\n  vec3 color = mix(edges.rgb, cell_mix.rgb, cell_shape);\n  float opacity = mix(edges.a, cell_mix.a, cell_shape);\n\n  color = mix(color, u_colorMid.rgb * u_colorMid.a, dot_shape);\n  opacity = mix(opacity, u_colorMid.a, dot_shape);\n\n  fragColor = vec4(color, opacity);\n}\n";
+export declare const voronoiFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\n\nuniform vec4 u_colorCell1;\nuniform vec4 u_colorCell2;\nuniform vec4 u_colorCell3;\nuniform vec4 u_colorEdges;\nuniform vec4 u_colorMid;\n\nuniform float u_colorGradient;\nuniform float u_distance;\nuniform float u_edgesSize;\nuniform float u_edgesSoftness;\nuniform float u_middleSize;\nuniform float u_middleSoftness;\n\n#define TWO_PI 6.28318530718\n\nout vec4 fragColor;\n\nvec2 hash(vec2 p) {\n  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\n  return fract(sin(p) * 18.5453);\n}\n\nfloat smin(float angle, float b, float k) {\n  float h = clamp(.5 + .5 * (b - angle) / k, 0., 1.);\n  return mix(b, angle, h) - k * h * (1. - h);\n}\n\nvec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, vec2 randomizer) {\n    vec3 color1 = c1.rgb * c1.a;\n    vec3 color2 = c2.rgb * c2.a;\n    vec3 color3 = c3.rgb * c3.a;\n\n    float mixer = clamp(u_colorGradient, 0., 1.);\n    float r1 = smoothstep(.5 - .5 * mixer, .5 + .5 * mixer, randomizer[0]);\n    float r2 = smoothstep(.6 - .6 * mixer, .6 + .4 * mixer, randomizer[1]);\n    vec3 blended_color_2 = mix(color1, color2, r1);\n    float blended_opacity_2 = mix(c1.a, c2.a, r1);\n    vec3 c = mix(blended_color_2, color3, r2);\n    float o = mix(blended_opacity_2, c3.a, r2);\n    \n    return vec4(c, o);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float t = u_time;\n  uv -= .5;\n  uv *= (.01 * u_scale * u_resolution);\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n\n  vec2 randomizer = vec2(0.);\n  vec3 distance = vec3(1.);\n\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tile_offset = vec2(float(x), float(y));\n      vec2 o = hash(i_uv + tile_offset);\n      tile_offset += (.5 + clamp(u_distance, 0., .5) * sin(t + TWO_PI * o)) - f_uv;\n\n      float dist = dot(tile_offset, tile_offset);\n      float old_min_dist = distance.x;\n\n      distance.z = max(distance.x, max(distance.y, min(distance.z, dist)));\n      distance.y = max(distance.x, min(distance.y, dist));\n      distance.x = min(distance.x, dist);\n\n      if (old_min_dist > distance.x) {\n        randomizer = o;\n      }\n    }\n  }\n\n  distance = sqrt(distance);\n\n  distance = sqrt(distance);\n  float cell_shape = min(smin(distance.z, distance.y, .1) - distance.x, 1.);\n\n  float dot_shape = pow(distance.x, 2.) / (2. * clamp(u_middleSize, 0., 1.) + 1e-4);\n  float dot_edge_width = fwidth(dot_shape);\n  float dotSharp = clamp(1. - u_middleSoftness, 0., 1.);\n  dot_shape = 1. - smoothstep(.5 * dotSharp - dot_edge_width, 1. - .5 * dotSharp, dot_shape);\n\n  float cell_edge_width = fwidth(distance.x);\n  float w = .7 * (clamp(u_edgesSize, 0., 1.) - .1);\n  float edgeSharp = clamp(u_edgesSoftness, 0., 1.);\n  cell_shape = smoothstep(w - cell_edge_width, w + edgeSharp, cell_shape);\n\n  dot_shape *= cell_shape;\n\n  vec4 cell_mix = blend_colors(u_colorCell1, u_colorCell2, u_colorCell3, randomizer);\n  \n  vec4 edges = vec4(u_colorEdges.rgb * u_colorEdges.a, u_colorEdges.a);\n\n  vec3 color = mix(edges.rgb, cell_mix.rgb, cell_shape);\n  float opacity = mix(edges.a, cell_mix.a, cell_shape);\n\n  color = mix(color, u_colorMid.rgb * u_colorMid.a, dot_shape);\n  opacity = mix(opacity, u_colorMid.a, dot_shape);\n\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/shaders/waves.d.ts

@@ -8,7 +8,7 @@ export type WavesUniforms = {
     u_amplitude: number;
     u_spacing: number;
     u_dutyCycle: number;
-    u_edgeBlur: number;
+    u_softness: number;
 };
 /**
  * Stepped Simplex Noise by Ksenia Kondrashova
@@ -29,6 +29,6 @@ export type WavesUniforms = {
  * u_amplitude - the wave amplitude
  * u_spacing - the density of pattern lines
  * u_dutyCycle (0 ... 1) - the proportion of stroke width to the pattern step
- * u_edgeBlur (0 ... 1) - the blur applied to the lines edges
+ * u_softness (0 ... 1) - the blur applied to the lines edges
  */
-export declare const wavesFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform float u_rotation;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_shape;\nuniform float u_frequency;\nuniform float u_amplitude;\nuniform float u_spacing;\nuniform float u_dutyCycle;\nuniform float u_edgeBlur;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nout vec4 fragColor;\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  uv *= (.02 * max(0., u_scale) * u_resolution);\n  uv = rotate(uv, u_rotation * .5 * PI);\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float wave = .5 * cos(uv.x * u_frequency * TWO_PI);\n  float zigzag = 2. * abs(fract(uv.x * u_frequency) - .5);\n  float irregular = sin(uv.x * .25 * u_frequency * TWO_PI) * cos(uv.x * u_frequency * TWO_PI);\n  float irregular2 = .75 * (sin(uv.x * u_frequency * TWO_PI) + .5 * cos(uv.x * .5 * u_frequency * TWO_PI));\n\n  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));\n  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));\n  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));\n  offset *= 2. * u_amplitude;\n  \n  float spacing = .02 + .98 * u_spacing;\n  float shape = .5 + .5 * sin((uv.y + offset) * PI / spacing);\n  \n  float edge_width = .02 / (1. + abs(shape)) * (.001 + u_scale);\n  edge_width += .5 * max(0., u_edgeBlur);\n  float dc = clamp(u_dutyCycle, 0., 1.);\n  float t = smoothstep(dc - edge_width, dc + edge_width, shape);\n\n  vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, t);\n  float opacity = mix(u_color1.a, u_color2.a, t);\n  \n  fragColor = vec4(color, opacity);\n}\n";
+export declare const wavesFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform float u_rotation;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_shape;\nuniform float u_frequency;\nuniform float u_amplitude;\nuniform float u_spacing;\nuniform float u_dutyCycle;\nuniform float u_softness;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nout vec4 fragColor;\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  uv *= (.02 * max(0., u_scale) * u_resolution);\n  uv = rotate(uv, u_rotation * .5 * PI);\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float wave = .5 * cos(uv.x * u_frequency * TWO_PI);\n  float zigzag = 2. * abs(fract(uv.x * u_frequency) - .5);\n  float irregular = sin(uv.x * .25 * u_frequency * TWO_PI) * cos(uv.x * u_frequency * TWO_PI);\n  float irregular2 = .75 * (sin(uv.x * u_frequency * TWO_PI) + .5 * cos(uv.x * .5 * u_frequency * TWO_PI));\n\n  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));\n  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));\n  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));\n  offset *= 2. * u_amplitude;\n  \n  float spacing = .02 + .98 * u_spacing;\n  float shape = .5 + .5 * sin((uv.y + offset) * PI / spacing);\n  \n  float edge_width = .02 / (1. + abs(shape)) * (.001 + u_scale);\n  edge_width += .5 * max(0., u_softness);\n  float dc = clamp(u_dutyCycle, 0., 1.);\n  float t = smoothstep(dc - edge_width, dc + edge_width, shape);\n\n  vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, t);\n  float opacity = mix(u_color1.a, u_color2.a, t);\n  \n  fragColor = vec4(color, opacity);\n}\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "license": "MIT",
   "type": "module",
   "publishConfig": {