@paper-design/shaders 0.0.16 → 0.0.17

package/dist/index.d.ts

@@ -21,4 +21,6 @@ export { perlinNoiseFragmentShader, type PerlinNoiseUniforms } from './shaders/p
 export { voronoiFragmentShader, type VoronoiUniforms } from './shaders/voronoi';
 /** Waves pattern */
 export { wavesFragmentShader, type WavesUniforms } from './shaders/waves';
+/** Warp: distortion + swirl + underlying shapes */
+export { warpFragmentShader, PatternShapes, type PatternShape, type WarpUniforms } from './shaders/warp';
 export { getShaderColorFromString } from './get-shader-color-from-string';

package/dist/index.js

@@ -171,7 +171,7 @@ void main() {
     
     fragColor = vec4(color, opacity);
 }
-`;var R=`#version 300 es
+`;var w=`#version 300 es
 precision highp float;
 
 uniform float u_pixelRatio;
@@ -275,7 +275,7 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;var w=`#version 300 es
+`;var R=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -332,7 +332,7 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;var F=`#version 300 es
+`;var k=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -419,7 +419,7 @@ void main() {
 
   fragColor = vec4(color * opacity, opacity);
 }
-`;var k={Circle:0,Diamond:1,Square:2,Triangle:3},I=`#version 300 es
+`;var F={Circle:0,Diamond:1,Square:2,Triangle:3},P=`#version 300 es
 precision highp float;
 
 uniform vec2 u_resolution;
@@ -532,7 +532,7 @@ void main() {
 
     fragColor = vec4(color, opacity);
 }
-`;var P=`#version 300 es
+`;var I=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -716,7 +716,7 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;var A=`#version 300 es
+`;var W=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -900,7 +900,7 @@ void main() {
 
     fragColor = vec4(color, opacity);
 }
-`;var O=`#version 300 es
+`;var A=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -1014,7 +1014,7 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;var T=`#version 300 es
+`;var O=`#version 300 es
 precision highp float;
 
 uniform float u_pixelRatio;
@@ -1073,5 +1073,118 @@ void main() {
   
   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]=W(e);else if(e.startsWith("rgb"))[r,t,a,i]=B(e);else if(e.startsWith("hsl"))[r,t,a,i]=G(L(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 W(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 B(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 L(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 G(e){let[o,r,t,a]=e,i=o/360,s=r/100,n=t/100,_,d,p;if(r===0)_=d=p=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),d=v(h,c,i),p=v(h,c,i-1/3)}return[_,d,p,a]}var m=(e,o,r)=>Math.min(Math.max(e,o),r);export{k as DotsGridShapes,g as ShaderMount,I as dotsGridFragmentShader,F as dotsOrbitFragmentShader,f as getShaderColorFromString,z as grainCloudsFragmentShader,C as meshGradientFragmentShader,U as metaballsFragmentShader,w as neuroNoiseFragmentShader,A as perlinNoiseFragmentShader,R as smokeRingFragmentShader,P as steppedSimplexNoiseFragmentShader,O as voronoiFragmentShader,T as wavesFragmentShader};
+`;var T={Checks:0,Stripes:1,Edge:2},B=`#version 300 es
+precision highp float;
+
+uniform float u_time;
+uniform float u_pixelRatio;
+uniform vec2 u_resolution;
+
+uniform float u_scale;
+uniform float u_rotation;
+uniform vec4 u_color1;
+uniform vec4 u_color2;
+uniform vec4 u_color3;
+uniform float u_proportion;
+uniform float u_softness;
+uniform float u_shape;
+uniform float u_shapeScale;
+uniform float u_distortion;
+uniform float u_swirl;
+uniform float u_swirlIterations;
+
+
+out vec4 fragColor;
+
+#define TWO_PI 6.28318530718
+#define PI 3.14159265358979323846
+
+vec2 rotate(vec2 uv, float th) {
+  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
+}
+
+float random(vec2 st) {
+  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
+}
+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));
+  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;
+}
+
+vec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, float mixer, float edgesWidth) {
+    vec3 color1 = c1.rgb * c1.a;
+    vec3 color2 = c2.rgb * c2.a;
+    vec3 color3 = c3.rgb * c3.a;
+            
+    float r1 = smoothstep(.0 + .35 * edgesWidth, .7 - .35 * edgesWidth, mixer);
+    float r2 = smoothstep(.3 + .35 * edgesWidth, 1. - .35 * edgesWidth, mixer);
+
+    vec3 blended_color_2 = mix(color1, color2, r1);
+    float blended_opacity_2 = mix(c1.a, c2.a, r1);
+
+    vec3 c = mix(blended_color_2, color3, r2);
+    float o = mix(blended_opacity_2, c3.a, r2);
+    return vec4(c, o);
+}
+
+void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    vec2 uv_original = uv;
+    
+    float t = .5 * u_time;
+    
+    float noise_scale = .0005 + .006 * u_scale;
+
+    uv -= .5;
+    uv *= (noise_scale * u_resolution);
+    uv = rotate(uv, u_rotation * .5 * PI);
+    uv /= u_pixelRatio;
+    uv += .5;
+        
+    float n1 = noise(uv * 1. + t);
+    float n2 = noise(uv * 2. - t);
+    float angle = n1 * TWO_PI;
+    uv.x += 4. * u_distortion * n2 * cos(angle);
+    uv.y += 4. * u_distortion * n2 * sin(angle);
+
+    float iterations_number = ceil(clamp(u_swirlIterations, 1., 30.));
+    for (float i = 1.; i <= iterations_number; i++) {
+        uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * uv.y);
+        uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * uv.x);
+    }
+    
+    float proportion = clamp(u_proportion, 0., 1.);
+    
+    float shape = 0.;
+    float mixer = 0.;
+    if (u_shape < .5) {
+      vec2 checks_shape_uv = uv * (.5 + 3.5 * u_shapeScale);
+      shape = .5 + .5 * sin(checks_shape_uv.x) * cos(checks_shape_uv.y);
+      mixer = shape + .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
+    } else if (u_shape < 1.5) {
+      vec2 stripes_shape_uv = uv * (.25 + 3. * u_shapeScale);
+      float f = fract(stripes_shape_uv.y);
+      shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);
+      mixer = shape + .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
+    } else {      
+      float sh = 1. - uv.y;
+      sh -= .5;
+      sh /= (noise_scale * u_resolution.y);
+      sh += .5;
+      float shape_scaling = .2 * (1. - u_shapeScale);
+      shape = smoothstep(.45 - shape_scaling, .55 + shape_scaling, sh + .3 * (proportion - .5));
+      mixer = shape;
+    } 
+
+    vec4 color_mix = blend_colors(u_color1, u_color2, u_color3, mixer, 1. - clamp(u_softness, 0., 1.));
+    
+    fragColor = vec4(color_mix.rgb, color_mix.a);
+}
+`;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]=G(e);else if(e.startsWith("hsl"))[r,t,a,i]=D(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 G(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 D(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,T as PatternShapes,g as ShaderMount,P as dotsGridFragmentShader,k as dotsOrbitFragmentShader,f as getShaderColorFromString,z as grainCloudsFragmentShader,C as meshGradientFragmentShader,U as metaballsFragmentShader,R as neuroNoiseFragmentShader,W as perlinNoiseFragmentShader,w as smokeRingFragmentShader,I as steppedSimplexNoiseFragmentShader,A as voronoiFragmentShader,B as warpFragmentShader,O 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/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", "/**  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;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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", "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"]
+  "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/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  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}\n\nvec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, float mixer, float edgesWidth) {\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, mixer);\n    float r2 = smoothstep(.3 + .35 * edgesWidth, 1. - .35 * edgesWidth, 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.));\n    \n    fragColor = vec4(color_mix.rgb, color_mix.a);\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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BvB,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;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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", "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"]
 }

package/dist/shaders/warp.d.ts

@@ -0,0 +1,42 @@
+export declare const PatternShapes: {
+    readonly Checks: 0;
+    readonly Stripes: 1;
+    readonly Edge: 2;
+};
+export type PatternShape = (typeof PatternShapes)[keyof typeof PatternShapes];
+export type WarpUniforms = {
+    u_scale: number;
+    u_rotation: number;
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
+    u_color3: [number, number, number, number];
+    u_proportion: number;
+    u_softness: number;
+    u_shape: PatternShape;
+    u_shapeScale: number;
+    u_distortion: number;
+    u_swirl: number;
+    u_swirlIterations: number;
+};
+/**
+ * 3d Perlin noise with exposed parameters
+ *
+ * Uniforms include:
+ * u_scale - the scale applied to user space
+ * u_rotation - the rotation applied to user space
+ * u_color1 - the first pattern color
+ * u_color2 - the second pattern color
+ * u_color3 - the third pattern color
+ * u_proportion (0 .. 1) - the proportion between colors (on 0.5 colors are equally distributed)
+ * u_softness (0 .. 1) - the color blur (0 for pronounced edges, 1 for gradient)
+ * u_shape (0 ... 2) - the color pattern to be distorted with noise & swirl
+ *    - u_shape = 0 is checks
+ *    - u_shape = 1 is stripes
+ *    - u_shape = 2 is 2 halves of canvas (mapping the canvas height regardless of resolution)
+ * u_shapeScale - the scale of color pattern (appies over the global scaling)
+ * u_distortion - the noisy distortion over the UV coordinate (applied before the overlapping swirl)
+ * u_swirl - the power of swirly distortion
+ * u_swirlIterations - the number of swirl iterations (layering curves effect)
+ *
+ */
+export declare 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  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}\n\nvec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, float mixer, float edgesWidth) {\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, mixer);\n    float r2 = smoothstep(.3 + .35 * edgesWidth, 1. - .35 * edgesWidth, 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.));\n    \n    fragColor = vec4(color_mix.rgb, color_mix.a);\n}\n";

package/package.json

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