@paper-design/shaders 0.0.14 → 0.0.15

package/dist/get-shader-color-from-string.d.ts

@@ -0,0 +1,3 @@
+/**  Convert color string from HSL, RGB, or hex to 0-to-1-range-RGBA array */
+export declare function getShaderColorFromString(colorString: string | [number, number, number] | [number, number, number, number] | undefined, fallback?: string | [number, number, number] | [number, number, number, number]): [number, number, number, number];
+export declare const clamp: (n: number, min: number, max: number) => number;

package/dist/get-shader-color-from-string.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,9 +1,14 @@
 /** The core Shader Mounting class. Pass it a canvas element and a fragment shader to get started. */
 export { ShaderMount } from './shader-mount';
-/** An example fragment shader that renders a grainy texture over top of blobby animated clouds */
 export { grainCloudsFragmentShader, type GrainCloudsUniforms } from './shaders/grain-clouds';
 /** A shader that renders a mesh gradient with a rotating noise pattern and several layers of fractal noise */
 export { meshGradientFragmentShader, type MeshGradientUniforms } from './shaders/mesh-gradient';
+/** Fractional Brownian motion (fBm) noise over the polar coordinates, masked with ring shape */
+export { smokeRingFragmentShader, type SmokeRingUniforms } from './shaders/smoke-ring';
 /** A shader rendering a fractal-like structure made of several layers of since-arches */
 export { neuroNoiseFragmentShader, type NeuroNoiseUniforms } from './shaders/neuro-noise';
-export { getShaderColorFromString } from './shader-mount';
+/** A shader rendering an animated dots pattern based on Voronoi diagram */
+export { dotsOrbitFragmentShader, type DotsOrbitUniforms } from './shaders/dots-orbit';
+/** A shader that calculates a combination of 2 simplex noises with result rendered as a stepped gradient */
+export { steppedSimplexNoiseFragmentShader, type SteppedSimplexNoiseUniforms } from './shaders/stepped-simplex-noise';
+export { getShaderColorFromString } from './get-shader-color-from-string';

package/dist/index.js

@@ -1,17 +1,17 @@
 /***** Paper Shaders: https://github.com/paper-design/shaders *****/
-var v=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastFrameTime=0;totalAnimationTime=0;isAnimated;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;constructor(r,t,i={},o,n=!0){this.canvas=r,this.fragmentShader=t,this.providedUniforms=i,this.isAnimated=n;let s=r.getContext("webgl",o);if(!s)throw new Error("WebGL not supported");this.gl=s,this.initWebGL(),this.setupResizeObserver(),this.isAnimated?this.startAnimating():this.render(performance.now())}initWebGL=()=>{let r=x(this.gl,_,this.fragmentShader);r&&(this.program=r,this.setupPositionAttribute(),this.setupUniforms())};setupPositionAttribute=()=>{let r=this.gl.getAttribLocation(this.program,"a_position"),t=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,t);let i=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(i),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(r),this.gl.vertexAttribPointer(r,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{this.uniformLocations={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution"),...Object.fromEntries(Object.keys(this.providedUniforms).map(r=>[r,this.gl.getUniformLocation(this.program,r)]))}};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let r=this.canvas.clientWidth,t=this.canvas.clientHeight;(this.canvas.width!==r||this.canvas.height!==t)&&(this.canvas.width=r,this.canvas.height=t,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=r=>{if(this.hasBeenDisposed)return;let t=r-this.lastFrameTime;this.lastFrameTime=r,this.isAnimated&&(this.totalAnimationTime+=t),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.isAnimated?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};updateProvidedUniforms=()=>{this.gl.useProgram(this.program),Object.entries(this.providedUniforms).forEach(([r,t])=>{let i=this.uniformLocations[r];if(i)if(Array.isArray(t))switch(t.length){case 2:this.gl.uniform2fv(i,t);break;case 3:this.gl.uniform3fv(i,t);break;case 4:this.gl.uniform4fv(i,t);break;default:t.length===9?this.gl.uniformMatrix3fv(i,!1,t):t.length===16?this.gl.uniformMatrix4fv(i,!1,t):console.warn(`Unsupported uniform array length: ${t.length}`)}else typeof t=="number"?this.gl.uniform1f(i,t):typeof t=="boolean"?this.gl.uniform1i(i,t?1:0):console.warn(`Unsupported uniform type for ${r}: ${typeof t}`)})};startAnimating=()=>{this.isAnimated=!0,this.lastFrameTime=performance.now(),this.rafId=requestAnimationFrame(this.render)};stopAnimating=()=>{this.isAnimated=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=r=>{this.providedUniforms={...this.providedUniforms,...r},this.updateProvidedUniforms(),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.stopAnimating(),this.gl&&this.program&&(this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},_=`
+var g=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastFrameTime=0;totalAnimationTime=0;speed=1;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;constructor(r,t,o={},i,n=1){this.canvas=r,this.fragmentShader=t,this.providedUniforms=o;let u=r.getContext("webgl",i);if(!u)throw new Error("WebGL not supported");this.gl=u,this.initWebGL(),this.setupResizeObserver(),this.setSpeed(n),this.canvas.setAttribute("data-paper-shaders","true")}initWebGL=()=>{let r=R(this.gl,y,this.fragmentShader);r&&(this.program=r,this.setupPositionAttribute(),this.setupUniforms())};setupPositionAttribute=()=>{let r=this.gl.getAttribLocation(this.program,"a_position"),t=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,t);let o=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(o),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(r),this.gl.vertexAttribPointer(r,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{this.uniformLocations={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution"),...Object.fromEntries(Object.keys(this.providedUniforms).map(r=>[r,this.gl.getUniformLocation(this.program,r)]))}};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let r=Math.min(2,window.devicePixelRatio),t=this.canvas.clientWidth*r,o=this.canvas.clientHeight*r;(this.canvas.width!==t||this.canvas.height!==o)&&(this.canvas.width=t,this.canvas.height=o,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=r=>{if(this.hasBeenDisposed)return;let t=r-this.lastFrameTime;this.lastFrameTime=r,this.speed!==0&&(this.totalAnimationTime+=t*this.speed),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.speed!==0?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};updateProvidedUniforms=()=>{this.gl.useProgram(this.program),Object.entries(this.providedUniforms).forEach(([r,t])=>{let o=this.uniformLocations[r];if(o)if(Array.isArray(t))switch(t.length){case 2:this.gl.uniform2fv(o,t);break;case 3:this.gl.uniform3fv(o,t);break;case 4:this.gl.uniform4fv(o,t);break;default:t.length===9?this.gl.uniformMatrix3fv(o,!1,t):t.length===16?this.gl.uniformMatrix4fv(o,!1,t):console.warn(`Unsupported uniform array length: ${t.length}`)}else typeof t=="number"?this.gl.uniform1f(o,t):typeof t=="boolean"?this.gl.uniform1i(o,t?1:0):console.warn(`Unsupported uniform type for ${r}: ${typeof t}`)})};setSpeed=(r=1)=>{this.speed=r,this.rafId===null&&r!==0&&(this.lastFrameTime=performance.now(),this.rafId=requestAnimationFrame(this.render)),this.rafId!==null&&r===0&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=r=>{this.providedUniforms={...this.providedUniforms,...r},this.updateProvidedUniforms(),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.gl&&this.program&&(this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},y=`
   attribute vec4 a_position;
   void main() {
     gl_Position = a_position;
   }
-`;function b(e,r,t){let i=e.createShader(r);return i?(e.shaderSource(i,t),e.compileShader(i),e.getShaderParameter(i,e.COMPILE_STATUS)?i:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(i)),e.deleteShader(i),null)):null}function x(e,r,t){let i=b(e,e.VERTEX_SHADER,r),o=b(e,e.FRAGMENT_SHADER,t);if(!i||!o)return null;let n=e.createProgram();return n?(e.attachShader(n,i),e.attachShader(n,o),e.linkProgram(n),e.getProgramParameter(n,e.LINK_STATUS)?(e.detachShader(n,i),e.detachShader(n,o),e.deleteShader(i),e.deleteShader(o),n):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(n)),e.deleteProgram(n),e.deleteShader(i),e.deleteShader(o),null)):null}function g(e,r=[0,0,0]){if(Array.isArray(e)&&e.length===3)return e;if(typeof e!="string")return g(r);let t,i,o;if(e.startsWith("#"))[t,i,o]=y(e);else if(e.startsWith("rgb"))[t,i,o]=A(e);else if(e.startsWith("hsl"))[t,i,o]=R(S(e));else return console.error("Unsupported color format",e),g(r);return[t,i,o]}function y(e){e.length===4&&(e=`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`);let r=parseInt(e.slice(1),16),t=(r>>16&255)/255,i=(r>>8&255)/255,o=(r&255)/255;return[t,i,o]}function A(e){let r=e.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);return r?[parseInt(r[1]??"0")/255,parseInt(r[2]??"0")/255,parseInt(r[3]??"0")/255]:[0,0,0]}function S(e){let r=e.match(/^hsl\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/i);return r?[parseInt(r[1]??"0"),parseInt(r[2]??"0"),parseInt(r[3]??"0")]:[0,0,0]}function R(e){let[r,t,i]=e,o=r/360,n=t/100,s=i/100,c,l,h;if(t===0)c=l=h=s;else{let f=(u,p,a)=>(a<0&&(a+=1),a>1&&(a-=1),a<.16666666666666666?u+(p-u)*6*a:a<.5?p:a<.6666666666666666?u+(p-u)*(.6666666666666666-a)*6:u),m=s<.5?s*(1+n):s+n-s*n,d=2*s-m;c=f(d,m,o+1/3),l=f(d,m,o),h=f(d,m,o-1/3)}return[c,l,h]}var F=`
+`;function x(e,r,t){let o=e.createShader(r);return o?(e.shaderSource(o,t),e.compileShader(o),e.getShaderParameter(o,e.COMPILE_STATUS)?o:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(o)),e.deleteShader(o),null)):null}function R(e,r,t){let o=x(e,e.VERTEX_SHADER,r),i=x(e,e.FRAGMENT_SHADER,t);if(!o||!i)return null;let n=e.createProgram();return n?(e.attachShader(n,o),e.attachShader(n,i),e.linkProgram(n),e.getProgramParameter(n,e.LINK_STATUS)?(e.detachShader(n,o),e.detachShader(n,i),e.deleteShader(o),e.deleteShader(i),n):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(n)),e.deleteProgram(n),e.deleteShader(o),e.deleteShader(i),null)):null}var F=`
   precision highp float;
   uniform vec2 u_resolution;
   uniform float u_time;
-  uniform vec3 u_color1;
-  uniform vec3 u_color2;
-  uniform float u_noiseScale;
-  uniform float u_noiseSpeed;
+
+  uniform vec4 u_color1;
+  uniform vec4 u_color2;
+  uniform float u_scale;
   uniform float u_grainAmount;
 
   // Simplex 2D noise
@@ -63,33 +63,32 @@ var v=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null
     }
 
     // Create blobby texture
-    float n = snoise(st * u_noiseScale + u_time * u_noiseSpeed);
-    n += 0.5 * snoise(st * u_noiseScale * 2.0 - u_time * u_noiseSpeed * 0.5);
-    n += 0.25 * snoise(st * u_noiseScale * 4.0 + u_time * u_noiseSpeed * 0.25);
+    float n = snoise(st * u_scale + u_time);
+    n += 0.5 * snoise(st * u_scale * 2.0 - u_time * 0.5);
+    n += 0.25 * snoise(st * u_scale * 4.0 + u_time * 0.25);
     n = n * 0.5 + 0.5;
 
     // Color interpolation
-    vec3 color = mix(u_color1, u_color2, n);
+    vec4 color = mix(u_color1, u_color2, n);
 
     // Add grain
     float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);
     color += (grain - 0.5) * u_grainAmount;
 
-    gl_FragColor = vec4(color, 1.0);
+    gl_FragColor = color;
   }
-`;var w=`
+`;var A=`
 // Mesh Gradient: https://www.shadertoy.com/view/wdyczG
 #define S(a,b,t) smoothstep(a,b,t)
 
 precision highp float;
 
-uniform vec3 u_color1;
-uniform vec3 u_color2;
-uniform vec3 u_color3;
-uniform vec3 u_color4;
+uniform vec4 u_color1;
+uniform vec4 u_color2;
+uniform vec4 u_color3;
+uniform vec4 u_color4;
 uniform vec2 u_resolution;
 uniform float u_time;
-uniform float u_speed;
 
 mat2 Rot(float a)
 {
@@ -128,7 +127,7 @@ void main() {
     tuv -= .5;
 
     // rotate with Noise
-    float degree = noise(vec2(u_time * u_speed, tuv.x * tuv.y));
+    float degree = noise(vec2(u_time, tuv.x * tuv.y));
 
     tuv.y *= 1./ratio;
     tuv *= Rot(radians((degree-.5)*720.+180.));
@@ -144,23 +143,113 @@ void main() {
 
 
     // draw the image
-    vec3 layer1 = mix(u_color1, u_color2, S(-.3, .2, (tuv*Rot(radians(-5.))).x));
-    vec3 layer2 = mix(u_color3, u_color4, S(-.3, .2, (tuv*Rot(radians(-5.))).x));
+    vec4 layer1 = mix(u_color1, u_color2, S(-.3, .2, (tuv*Rot(radians(-5.))).x));
+    vec4 layer2 = mix(u_color3, u_color4, S(-.3, .2, (tuv*Rot(radians(-5.))).x));
 
-    vec3 finalComp = mix(layer1, layer2, S(.5, -.3, tuv.y));
+    vec4 finalComp = mix(layer1, layer2, S(.5, -.3, tuv.y));
+    gl_FragColor = finalComp;
+}
+`;var S=`
 
-    vec3 col = finalComp;
+  precision highp float;
 
-    gl_FragColor = vec4(col,1.0);
-}
-`;var C=`
+  uniform vec4 u_colorBack;
+  uniform vec4 u_color1;
+  uniform vec4 u_color2;
+  uniform float u_scale;
+  uniform float u_thickness;
+  uniform vec2 u_resolution;
+  uniform float u_time;
+
+    #define TWO_PI 6.28318530718
+    #define PI 3.14159265358979323846
+
+    float rand(vec2 n) {
+        return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+    }
+    float noise(vec2 n) {
+        const vec2 d = vec2(0.0, 1.0);
+        vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(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);
+    }
+    float fbm(vec2 n) {
+        float total = 0.0, amplitude = .4;
+        for (int i = 0; i < 12; i++) {
+            total += noise(n) * amplitude;
+            n += n;
+            amplitude *= 0.6;
+        }
+        return total;
+    }
+
+    float get_ring_shape(vec2 uv, float innerRadius, float outerRadius) {
+        float distance = length(uv);
+        float line_width = outerRadius - innerRadius;
+        float ringValue = smoothstep(innerRadius, innerRadius + .8 * line_width, distance);
+        ringValue -= smoothstep(outerRadius, outerRadius + 1.2 * line_width, distance);
+        return clamp(ringValue, 0., 1.);
+    }
+
+    void main() {
+
+        vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+        float ratio = u_resolution.x / u_resolution.y;
+
+        uv -= .5;
+        uv *= 2.;
+        uv.x *= ratio;
+
+        float t = u_time;
+
+        float atg = atan(uv.y, uv.x);
+        float angle = (atg + PI) / TWO_PI;
+
+        vec2 polar_uv = vec2(atg, .1 * t - (.5 * length(uv)) + 1. / pow(length(uv), .5));
+        polar_uv *= u_scale;
+
+        float noise_left = fbm(polar_uv + .05 * t);
+        polar_uv.x = mod(polar_uv.x, u_scale * TWO_PI);
+        float noise_right = fbm(polar_uv + .05 * t);
+        float noise = mix(noise_right, noise_left, smoothstep(-.2, .2, uv.x));
+
+        float center_shape = 1. - pow(smoothstep(2., .0, length(uv)), 50.);
+
+        float radius = .4 - .25 * u_thickness;
+        float thickness = u_thickness;
+        thickness = pow(thickness, 2.);
+
+        float ring_shape = get_ring_shape(uv * (.5 + .6 * noise), radius - .2 * thickness, radius + .5 * thickness);
+        ring_shape = clamp(ring_shape, 0., 1.);
+        
+        float ring_shape_outer = 1. - pow(ring_shape, 7.);
+        ring_shape_outer *= ring_shape;
+        
+        float ring_shape_inner = ring_shape - ring_shape_outer;
+        ring_shape_inner *= ring_shape;
+
+        ring_shape_outer *= u_color2.a;
+        ring_shape_inner *= u_color1.a;
+
+        float background = 1. - ring_shape;
+        background *= u_colorBack.a;
+        
+        vec3 color = u_color2.rgb * ring_shape_outer;
+        color += u_color1.rgb * ring_shape_inner;
+        color += u_colorBack.rgb * background;
+        
+        float opacity = ring_shape_outer;
+        opacity += ring_shape_inner;
+        opacity += background;
+        
+        gl_FragColor = vec4(color, opacity);
+    }
+`;var z=`
 precision mediump float;
 
-uniform vec3 u_colorFront;
-uniform vec3 u_colorBack;
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
 uniform float u_scale;
 uniform float u_brightness;
-uniform float u_speed;
 
 uniform float u_time;
 uniform float u_ratio;
@@ -188,26 +277,168 @@ float neuro_shape(vec2 uv, float t) {
 
 void main() {
   vec2 uv = gl_FragCoord.xy / u_resolution.xy;
-  float ratio = u_resolution.x / u_resolution.y;
-  vec2 uv_r = uv;
-  uv_r -= .5;
-  uv_r *= u_scale;
-  uv_r += .5;
-  uv_r.x *= ratio;
-
-  float t = u_speed * u_time;
+
+  uv -= .5;
+  uv *= (.001 * u_scale * u_resolution);
+  uv += .5;
+
+  float t = u_time;
   vec3 color = vec3(0.);
 
-  float noise = neuro_shape(uv_r, t);
+  float noise = neuro_shape(uv, t);
 
   noise = u_brightness * pow(noise, 3.);
-  noise += pow(noise, 10.);
+  noise += pow(noise, 12.);
   noise = max(.0, noise - .5);
-  noise *= (1. - length(uv - .5));
 
-  color = mix(u_colorBack, u_colorFront, noise);
+  gl_FragColor = mix(u_colorBack, u_colorFront, noise);
+}
+`;var w=`
+precision mediump float;
+
+uniform vec4 u_color1;
+uniform vec4 u_color2;
+uniform vec4 u_color3;
+uniform vec4 u_color4;
+uniform float u_dotSize;
+uniform float u_dotSizeRange;
+uniform float u_scale;
+uniform float u_spreading;
+uniform float u_time;
+uniform float u_ratio;
+uniform vec2 u_resolution;
+
+#define TWO_PI 6.28318530718
+#define PI 3.14159265358979323846
+
+vec2 random2(vec2 p) {
+  return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453);
+}
+
+vec3 get_voronoi_shape(vec2 _uv, float time) {
+  vec2 i_uv = floor(_uv);
+  vec2 f_uv = fract(_uv);
+
+  float min_dist = 1.;
+  vec2 cell_randomizer = vec2(0.);
+  for (int y = -1; y <= 1; y++) {
+    for (int x = -1; x <= 1; x++) {
+      vec2 tile_offset = vec2(float(x), float(y));
+      vec2 rand = random2(i_uv + tile_offset);
+      vec2 cell_center = .5 + u_spreading * sin(time + PI * 2. * rand);
+      float dist = length(tile_offset + cell_center - f_uv);
+      if (dist < min_dist) {
+        min_dist = dist;
+        cell_randomizer = rand;
+      }
+      min_dist = min(min_dist, dist);
+    }
+  }
+
+  return vec3(min_dist, cell_randomizer);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+
+  uv -= .5;
+  uv *= (.001 * u_scale * u_resolution);
+  uv += .5;
+
+  float t = u_time;
+
+  vec3 voronoi = get_voronoi_shape(uv, t);
+  float radius = u_dotSize - u_dotSizeRange * voronoi[2];
+
+  float radius_smoother = .001 + .001 * (u_scale - 1.);
+  float shape = 1. - smoothstep(radius, radius + radius_smoother, voronoi[0]);
+
+  float color_randomizer = voronoi[1];
+  vec4 color =
+    u_color1 * step(0.0, color_randomizer) * step(color_randomizer, 0.25) +
+    u_color2 * step(0.25, color_randomizer) * step(color_randomizer, 0.5) +
+    u_color3 * step(0.5, color_randomizer) * step(color_randomizer, 0.75) +
+    u_color4 * step(0.75, color_randomizer) * step(color_randomizer, 1.0);
+
+  gl_FragColor = color * shape;
+}
+`;var C=`
+precision highp float;
+
+uniform vec4 u_color1;
+uniform vec4 u_color2;
+uniform vec4 u_color3;
+uniform vec4 u_color4;
+uniform vec4 u_color5;
+uniform float u_scale;
+uniform float u_steps_number;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+
+
+vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }
+float snoise(vec2 v) {
+  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
+    -0.577350269189626, 0.024390243902439);
+  vec2 i = floor(v + dot(v, C.yy));
+  vec2 x0 = v - i + dot(i, C.xx);
+  vec2 i1;
+  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+  i = mod(i, 289.0);
+  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
+    + i.x + vec3(0.0, i1.x, 1.0));
+  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),
+      dot(x12.zw, x12.zw)), 0.0);
+  m = m * m;
+  m = m * m;
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
+  vec3 g;
+  g.x = a0.x * x0.x + h.x * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
 
-  gl_FragColor = vec4(color, 1.);
+float get_noise(vec2 uv, float t) {
+  float noise = .5 * snoise(uv - vec2(0., .3 * t));
+  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));
+
+  return noise;
+}
+
+vec4 getColor(int index) {
+  if (index == 0) return u_color1;
+  if (index == 1) return u_color2;
+  if (index == 2) return u_color3;
+  if (index == 3) return u_color4;
+  if (index == 4) return u_color5;
+  return u_color1;
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+
+  uv -= .5;
+  uv *= (.001 * u_scale * u_resolution);
+  uv += .5;
+
+  float t =  u_time;
+
+  float noise = .5 + .5 * get_noise(uv, t);
+  noise = floor(noise * u_steps_number) / u_steps_number;
+
+  vec4 col = u_color1;
+  for (int i = 0; i < 5; i++) {
+      vec4 next_col = getColor(i + 1);
+      col = mix(col, next_col, smoothstep((float(i) + .5) / 5., (float(i) + 2.) / 5., noise));
+  }
+  gl_FragColor = col;
 }
-`;export{v as ShaderMount,g as getShaderColorFromString,F as grainCloudsFragmentShader,w as meshGradientFragmentShader,C as neuroNoiseFragmentShader};
+`;function f(e,r=[0,0,0,1]){if(Array.isArray(e))return e.length===4?e:e.length===3?[...e,1]:f(r);if(typeof e!="string")return f(r);let t,o,i,n=1;if(e.startsWith("#"))[t,o,i,n]=U(e);else if(e.startsWith("rgb"))[t,o,i,n]=I(e);else if(e.startsWith("hsl"))[t,o,i,n]=P(L(e));else return console.error("Unsupported color format",e),f(r);return[l(t,0,1),l(o,0,1),l(i,0,1),l(n,0,1)]}function U(e){e=e.replace(/^#/,""),e.length===3&&(e=e.split("").map(n=>n+n).join("")),e.length===6&&(e=e+"ff");let r=parseInt(e.slice(0,2),16)/255,t=parseInt(e.slice(2,4),16)/255,o=parseInt(e.slice(4,6),16)/255,i=parseInt(e.slice(6,8),16)/255;return[r,t,o,i]}function I(e){let r=e.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);return r?[parseInt(r[1]??"0")/255,parseInt(r[2]??"0")/255,parseInt(r[3]??"0")/255,r[4]===void 0?1:parseFloat(r[4])]:[0,0,0,1]}function L(e){let r=e.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);return r?[parseInt(r[1]??"0"),parseInt(r[2]??"0"),parseInt(r[3]??"0"),r[4]===void 0?1:parseFloat(r[4])]:[0,0,0,1]}function P(e){let[r,t,o,i]=e,n=r/360,u=t/100,a=o/100,h,d,v;if(t===0)h=d=v=a;else{let p=(m,b,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<.16666666666666666?m+(b-m)*6*s:s<.5?b:s<.6666666666666666?m+(b-m)*(.6666666666666666-s)*6:m),c=a<.5?a*(1+u):a+u-a*u,_=2*a-c;h=p(_,c,n+1/3),d=p(_,c,n),v=p(_,c,n-1/3)}return[h,d,v,i]}var l=(e,r,t)=>Math.min(Math.max(e,r),t);export{g as ShaderMount,w as dotsOrbitFragmentShader,f as getShaderColorFromString,F as grainCloudsFragmentShader,A as meshGradientFragmentShader,z as neuroNoiseFragmentShader,S as smokeRingFragmentShader,C as steppedSimplexNoiseFragmentShader};
 //# 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/neuro-noise.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  /** Whether we RAF the render or not */\n  private isAnimated: boolean;\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    animated = true\n  ) {\n    this.canvas = canvas;\n    this.fragmentShader = fragmentShader;\n    this.providedUniforms = uniforms;\n    this.isAnimated = animated;\n\n    const gl = canvas.getContext('webgl', webGlContextAttributes);\n    if (!gl) {\n      throw new Error('WebGL not supported');\n    }\n    this.gl = gl;\n\n    this.initWebGL();\n    this.setupResizeObserver();\n    if (this.isAnimated) {\n      this.startAnimating();\n    } else {\n      this.render(performance.now());\n    }\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_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 newWidth = this.canvas.clientWidth;\n    const newHeight = this.canvas.clientHeight;\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());\n    }\n  };\n\n  private render = (currentTime: number) => {\n    if (this.hasBeenDisposed) return;\n\n    const dt = currentTime - this.lastFrameTime;\n    this.lastFrameTime = currentTime;\n\n    if (this.isAnimated) {\n      this.totalAnimationTime += dt;\n    }\n\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    // 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.resolutionChanged = false;\n    }\n\n    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);\n\n    // Loop if we're animating\n\n    if (this.isAnimated) {\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  /** Start the animation loop, can be called during instantiation or later by an outside source */\n  public startAnimating = (): void => {\n    this.isAnimated = true;\n    this.lastFrameTime = performance.now();\n    this.rafId = requestAnimationFrame(this.render);\n  };\n\n  /** Stop the animation loop */\n  public stopAnimating = (): void => {\n    this.isAnimated = false;\n    if (this.rafId) {\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    this.hasBeenDisposed = true;\n    this.stopAnimating();\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 = `\n  attribute vec4 a_position;\n  void 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\n/**  Convert color string from HSL, RGB, or hex to 0-to-1-range-RGB array */\nexport function getShaderColorFromString(\n  colorString: string | [number, number, number] | undefined,\n  fallback: string | [number, number, number] = [0, 0, 0]\n): [number, number, number] {\n  // If the color string is already an array of 3 numbers, return it\n  // Allowing this pass-through is useful for creating default objects in TypeScript with either syntax\n  if (Array.isArray(colorString) && colorString.length === 3) {\n    return colorString;\n  }\n\n  // If the color string is not a string, return the fallback\n  if (typeof colorString !== 'string') {\n    // Return the fallback color, processed, with no additional fallback argument\n    // It'll default to [0, 0, 0] if not parseable\n    return getShaderColorFromString(fallback);\n  }\n\n  let r: number, g: number, b: number;\n  if (colorString.startsWith('#')) {\n    [r, g, b] = hexToRgb(colorString);\n  } else if (colorString.startsWith('rgb')) {\n    [r, g, b] = parseRgb(colorString);\n  } else if (colorString.startsWith('hsl')) {\n    [r, g, b] = hslToRgb(parseHsl(colorString));\n  } else {\n    console.error('Unsupported color format', colorString);\n    // Return the fallback color, processed, with no additional fallback argument\n    // It'll default to [0, 0, 0] if not parseable\n    return getShaderColorFromString(fallback);\n  }\n  return [r, g, b];\n}\n\n/** Convert hex to RGB (0 to 1 range) */\nfunction hexToRgb(hex: string): [number, number, number] {\n  // Expand three-letter hex to six-letter\n  if (hex.length === 4) {\n    hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;\n  }\n  const bigint = parseInt(hex.slice(1), 16);\n  const r = ((bigint >> 16) & 255) / 255;\n  const g = ((bigint >> 8) & 255) / 255;\n  const b = (bigint & 255) / 255;\n  return [r, g, b];\n}\n\n/** Parse RGB string to RGB (0 to 1 range) */\nfunction parseRgb(rgb: string): [number, number, number] {\n  const match = rgb.match(/^rgb\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)$/i);\n  if (!match) return [0, 0, 0];\n  return [parseInt(match[1] ?? '0') / 255, parseInt(match[2] ?? '0') / 255, parseInt(match[3] ?? '0') / 255];\n}\n\n/** Parse HSL string */\nfunction parseHsl(hsl: string): [number, number, number] {\n  const match = hsl.match(/^hsl\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)%\\s*,\\s*(\\d+)%\\s*\\)$/i);\n  if (!match) return [0, 0, 0];\n  return [parseInt(match[1] ?? '0'), parseInt(match[2] ?? '0'), parseInt(match[3] ?? '0')];\n}\n\n/** Convert HSL to RGB (0 to 1 range) */\nfunction hslToRgb(hsl: [number, number, number]): [number, number, number] {\n  const [h, s, l] = hsl;\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];\n}\n", "export type GrainCloudsUniforms = {\n  u_color1: [number, number, number];\n  u_color2: [number, number, number];\n  u_noiseScale: number;\n  u_noiseSpeed: 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_color1: The first color of the clouds\n * u_color2: The second color of the clouds\n * u_noiseScale: The scale of the noise\n * u_noiseSpeed: The speed of the noise\n * u_grainAmount: The amount of grain on the texture\n */\nexport const grainCloudsFragmentShader = `\n  precision highp float;\n  uniform vec2 u_resolution;\n  uniform float u_time;\n  uniform vec3 u_color1;\n  uniform vec3 u_color2;\n  uniform float u_noiseScale;\n  uniform float u_noiseSpeed;\n  uniform float u_grainAmount;\n\n  // Simplex 2D noise\n  vec3 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  }\n\n  void main() {\n    vec2 st = gl_FragCoord.xy / u_resolution.xy;\n\n    // Calculate the aspect ratio of the shader\n    float shaderAspect = u_resolution.x / u_resolution.y;\n\n    // Define the aspect ratio of your content (e.g., 1.0 for square)\n    float contentAspect = 1.0;\n\n    // Adjust st to maintain content aspect ratio\n    if (shaderAspect > contentAspect) {\n      float scale = shaderAspect / contentAspect;\n      st.x = (st.x - 0.5) * scale + 0.5;\n    } else {\n      float scale = contentAspect / shaderAspect;\n      st.y = (st.y - 0.5) * scale + 0.5;\n    }\n\n    // Create blobby texture\n    float n = snoise(st * u_noiseScale + u_time * u_noiseSpeed);\n    n += 0.5 * snoise(st * u_noiseScale * 2.0 - u_time * u_noiseSpeed * 0.5);\n    n += 0.25 * snoise(st * u_noiseScale * 4.0 + u_time * u_noiseSpeed * 0.25);\n    n = n * 0.5 + 0.5;\n\n    // Color interpolation\n    vec3 color = mix(u_color1, u_color2, n);\n\n    // Add grain\n    float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);\n    color += (grain - 0.5) * u_grainAmount;\n\n    gl_FragColor = vec4(color, 1.0);\n  }\n`;\n", "import { getShaderColorFromString } from '../shader-mount';\n\nexport type MeshGradientUniforms = {\n  u_color1: [number, number, number];\n  u_color2: [number, number, number];\n  u_color3: [number, number, number];\n  u_color4: [number, number, number];\n  u_speed: 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 * u_speed: The speed of the noise\n */\n\nexport const meshGradientFragmentShader = `\n// Mesh Gradient: https://www.shadertoy.com/view/wdyczG\n#define S(a,b,t) smoothstep(a,b,t)\n\nprecision highp float;\n\nuniform vec3 u_color1;\nuniform vec3 u_color2;\nuniform vec3 u_color3;\nuniform vec3 u_color4;\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\n\nmat2 Rot(float a)\n{\n    float s = sin(a);\n    float c = cos(a);\n    return mat2(c, -s, s, c);\n}\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{\n    vec2 i = floor( p );\n    vec2 f = fract( p );\n\n\tvec2 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\treturn 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    vec2 tuv = uv;\n    tuv -= .5;\n\n    // rotate with Noise\n    float degree = noise(vec2(u_time * u_speed, tuv.x * tuv.y));\n\n    tuv.y *= 1./ratio;\n    tuv *= Rot(radians((degree-.5)*720.+180.));\n\ttuv.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   \ttuv.y += sin(tuv.x*frequency*1.5+speed)/(amplitude*.5);\n\n\n    // draw the image\n    vec3 layer1 = mix(u_color1, u_color2, S(-.3, .2, (tuv*Rot(radians(-5.))).x));\n    vec3 layer2 = mix(u_color3, u_color4, S(-.3, .2, (tuv*Rot(radians(-5.))).x));\n\n    vec3 finalComp = mix(layer1, layer2, S(.5, -.3, tuv.y));\n\n    vec3 col = finalComp;\n\n    gl_FragColor = vec4(col,1.0);\n}\n`;\n", "export type NeuroNoiseUniforms = {\n  u_colorFront: [number, number, number];\n  u_colorBack: [number, number, number];\n  u_scale: number;\n  u_brightness: number;\n  u_speed: 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_colorFront: The front color of pattern\n * u_colorBack: The back color of pattern\n * u_brightness: The power/brightness of pattern lines\n * u_scale: The scale applied to coordinates\n * u_speed: The speed coefficient for pattern animation\n */\n\nexport const neuroNoiseFragmentShader = `\nprecision mediump float;\n\nuniform vec3 u_colorFront;\nuniform vec3 u_colorBack;\nuniform float u_scale;\nuniform float u_brightness;\nuniform float u_speed;\n\nuniform float u_time;\nuniform float u_ratio;\nuniform vec2 u_resolution;\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  float ratio = u_resolution.x / u_resolution.y;\n  vec2 uv_r = uv;\n  uv_r -= .5;\n  uv_r *= u_scale;\n  uv_r += .5;\n  uv_r.x *= ratio;\n\n  float t = u_speed * u_time;\n  vec3 color = vec3(0.);\n\n  float noise = neuro_shape(uv_r, t);\n\n  noise = u_brightness * pow(noise, 3.);\n  noise += pow(noise, 10.);\n  noise = max(.0, noise - .5);\n  noise *= (1. - length(uv - .5));\n\n  color = mix(u_colorBack, u_colorFront, noise);\n\n  gl_FragColor = vec4(color, 1.);\n}\n`;\n"],
-  "mappings": "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",
-  "names": ["ShaderMount", "canvas", "fragmentShader", "uniforms", "webGlContextAttributes", "animated", "gl", "program", "createProgram", "vertexShaderSource", "positionAttributeLocation", "positionBuffer", "positions", "key", "newWidth", "newHeight", "currentTime", "dt", "value", "location", "newUniforms", "createShader", "type", "source", "shader", "fragmentShaderSource", "vertexShader", "getShaderColorFromString", "colorString", "fallback", "r", "g", "b", "hexToRgb", "parseRgb", "hslToRgb", "parseHsl", "hex", "bigint", "rgb", "match", "hsl", "h", "s", "l", "hDecimal", "sDecimal", "lDecimal", "hue2rgb", "p", "q", "t", "grainCloudsFragmentShader", "meshGradientFragmentShader", "neuroNoiseFragmentShader"]
+  "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/stepped-simplex-noise.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    speed = 1\n  ) {\n    this.canvas = canvas;\n    this.fragmentShader = fragmentShader;\n    this.providedUniforms = uniforms;\n\n    const gl = canvas.getContext('webgl', 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_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 pxRatio = Math.min(2, window.devicePixelRatio);\n    const newWidth = this.canvas.clientWidth * pxRatio;\n    const newHeight = this.canvas.clientHeight * pxRatio;\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());\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    // 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.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 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 = `\n  attribute vec4 a_position;\n  void 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_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_scale: 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_color1: The first color of the clouds\n * u_color2: The second color of the clouds\n * u_scale: The scale of the noise\n * u_grainAmount: The amount of grain on the texture\n */\nexport const grainCloudsFragmentShader = `\n  precision highp float;\n  uniform vec2 u_resolution;\n  uniform float u_time;\n\n  uniform vec4 u_color1;\n  uniform vec4 u_color2;\n  uniform float u_scale;\n  uniform float u_grainAmount;\n\n  // Simplex 2D noise\n  vec3 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  }\n\n  void main() {\n    vec2 st = gl_FragCoord.xy / u_resolution.xy;\n\n    // Calculate the aspect ratio of the shader\n    float shaderAspect = u_resolution.x / u_resolution.y;\n\n    // Define the aspect ratio of your content (e.g., 1.0 for square)\n    float contentAspect = 1.0;\n\n    // Adjust st to maintain content aspect ratio\n    if (shaderAspect > contentAspect) {\n      float scale = shaderAspect / contentAspect;\n      st.x = (st.x - 0.5) * scale + 0.5;\n    } else {\n      float scale = contentAspect / shaderAspect;\n      st.y = (st.y - 0.5) * scale + 0.5;\n    }\n\n    // Create blobby texture\n    float n = snoise(st * u_scale + u_time);\n    n += 0.5 * snoise(st * u_scale * 2.0 - u_time * 0.5);\n    n += 0.25 * snoise(st * u_scale * 4.0 + u_time * 0.25);\n    n = n * 0.5 + 0.5;\n\n    // Color interpolation\n    vec4 color = mix(u_color1, u_color2, n);\n\n    // Add grain\n    float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);\n    color += (grain - 0.5) * u_grainAmount;\n\n    gl_FragColor = color;\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 = `\n// Mesh Gradient: https://www.shadertoy.com/view/wdyczG\n#define S(a,b,t) smoothstep(a,b,t)\n\nprecision highp float;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nmat2 Rot(float a)\n{\n    float s = sin(a);\n    float c = cos(a);\n    return mat2(c, -s, s, c);\n}\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{\n    vec2 i = floor( p );\n    vec2 f = fract( p );\n\n\tvec2 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\treturn 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    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\ttuv.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   \ttuv.y += sin(tuv.x*frequency*1.5+speed)/(amplitude*.5);\n\n\n    // draw the image\n    vec4 layer1 = mix(u_color1, u_color2, S(-.3, .2, (tuv*Rot(radians(-5.))).x));\n    vec4 layer2 = mix(u_color3, u_color4, S(-.3, .2, (tuv*Rot(radians(-5.))).x));\n\n    vec4 finalComp = mix(layer1, layer2, S(.5, -.3, tuv.y));\n    gl_FragColor = finalComp;\n}\n`;\n", "export type SmokeRingUniforms = {\n  u_colorBack: [number, number, number, number];\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_scale: number;\n  u_thickness: number;\n};\n\n/**\n * Smoke Ring, based on https://codepen.io/ksenia-k/full/zYyqRWE\n * Renders a fractional Brownian motion (fBm) noise over the\n * polar coordinates masked with ring shape\n *\n * Uniforms include:\n * u_colorBack: The back color of the scene\n * u_color1: Main color of the ring\n * u_color2: The third color of the mesh gradient\n * u_color4: The fourth color of the mesh gradient\n * u_scale: The scale of the noise\n * u_thickness: The thickness of the ring\n */\n\nexport const smokeRingFragmentShader = `\n\n  precision highp float;\n\n  uniform vec4 u_colorBack;\n  uniform vec4 u_color1;\n  uniform vec4 u_color2;\n  uniform float u_scale;\n  uniform float u_thickness;\n  uniform vec2 u_resolution;\n  uniform float u_time;\n\n    #define TWO_PI 6.28318530718\n    #define PI 3.14159265358979323846\n\n    float rand(vec2 n) {\n        return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\n    }\n    float 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    }\n    float fbm(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\n    float 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\n    void main() {\n\n        vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n        float ratio = u_resolution.x / u_resolution.y;\n\n        uv -= .5;\n        uv *= 2.;\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_scale;\n\n        float noise_left = fbm(polar_uv + .05 * t);\n        polar_uv.x = mod(polar_uv.x, u_scale * 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        ring_shape = clamp(ring_shape, 0., 1.);\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        ring_shape_outer *= u_color2.a;\n        ring_shape_inner *= u_color1.a;\n\n        float background = 1. - ring_shape;\n        background *= u_colorBack.a;\n        \n        vec3 color = u_color2.rgb * ring_shape_outer;\n        color += u_color1.rgb * ring_shape_inner;\n        color += u_colorBack.rgb * background;\n        \n        float opacity = ring_shape_outer;\n        opacity += ring_shape_inner;\n        opacity += background;\n        \n        gl_FragColor = vec4(color, opacity);\n    }\n`;\n", "export type NeuroNoiseUniforms = {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_scale: 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_colorFront: The front color of pattern\n * u_colorBack: The back color of pattern\n * u_brightness: The power/brightness of pattern lines\n * u_scale: The scale applied to coordinates\n */\n\nexport const neuroNoiseFragmentShader = `\nprecision mediump float;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_scale;\nuniform float u_brightness;\n\nuniform float u_time;\nuniform float u_ratio;\nuniform vec2 u_resolution;\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  uv *= (.001 * u_scale * u_resolution);\n  uv += .5;\n\n  float t = u_time;\n  vec3 color = vec3(0.);\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  gl_FragColor = mix(u_colorBack, u_colorFront, noise);\n}\n`;\n", "export type DotsOrbitUniforms = {\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_scale: 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_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_scale: The scale applied to pattern\n * u_dotSize: The base dot radius (relative to cell size)\n * u_dotSizeRange: Dot radius to vary between the cells\n * u_spreading: How far dots are moving around the straight grid\n */\n\nexport const dotsOrbitFragmentShader = `\nprecision mediump float;\n\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_scale;\nuniform float u_spreading;\nuniform float u_time;\nuniform float u_ratio;\nuniform vec2 u_resolution;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nvec2 random2(vec2 p) {\n  return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453);\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 + u_spreading * sin(time + PI * 2. * 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  uv *= (.001 * u_scale * u_resolution);\n  uv += .5;\n\n  float t = u_time;\n\n  vec3 voronoi = get_voronoi_shape(uv, t);\n  float radius = u_dotSize - u_dotSizeRange * voronoi[2];\n\n  float radius_smoother = .001 + .001 * (u_scale - 1.);\n  float shape = 1. - smoothstep(radius, radius + radius_smoother, voronoi[0]);\n\n  float color_randomizer = voronoi[1];\n  vec4 color =\n    u_color1 * step(0.0, color_randomizer) * step(color_randomizer, 0.25) +\n    u_color2 * step(0.25, color_randomizer) * step(color_randomizer, 0.5) +\n    u_color3 * step(0.5, color_randomizer) * step(color_randomizer, 0.75) +\n    u_color4 * step(0.75, color_randomizer) * step(color_randomizer, 1.0);\n\n  gl_FragColor = color * shape;\n}\n`;\n", "export type SteppedSimplexNoiseUniforms = {\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_scale: 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 a stepped gradient\n *\n * Uniforms include:\n * u_color1: The first color\n * u_color2: The second color\n * u_color3: The third color\n * u_color4: The fourth color\n * u_color5: The fifth color\n * u_scale: The scale applied to coordinates\n * u_steps_number: The number of colors to show as a stepped gradient\n */\n\nexport const steppedSimplexNoiseFragmentShader = `\nprecision highp float;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\nuniform vec4 u_color5;\nuniform float u_scale;\nuniform float u_steps_number;\n\nuniform float u_time;\nuniform vec2 u_resolution;\n\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  uv *= (.001 * u_scale * u_resolution);\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  vec4 col = u_color1;\n  for (int i = 0; i < 5; i++) {\n      vec4 next_col = getColor(i + 1);\n      col = mix(col, next_col, smoothstep((float(i) + .5) / 5., (float(i) + 2.) / 5., noise));\n  }\n  gl_FragColor = col;\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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A;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECClC,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;ECGnC,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;ECHhC,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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",
+  "names": ["ShaderMount", "canvas", "fragmentShader", "uniforms", "webGlContextAttributes", "speed", "gl", "program", "createProgram", "vertexShaderSource", "positionAttributeLocation", "positionBuffer", "positions", "key", "pxRatio", "newWidth", "newHeight", "currentTime", "dt", "value", "location", "newSpeed", "newUniforms", "createShader", "type", "source", "shader", "fragmentShaderSource", "vertexShader", "grainCloudsFragmentShader", "meshGradientFragmentShader", "smokeRingFragmentShader", "neuroNoiseFragmentShader", "dotsOrbitFragmentShader", "steppedSimplexNoiseFragmentShader", "getShaderColorFromString", "colorString", "fallback", "r", "g", "b", "a", "hexToRgba", "parseRgba", "hslaToRgba", "parseHsla", "clamp", "hex", "char", "rgba", "match", "hsla", "h", "s", "l", "hDecimal", "sDecimal", "lDecimal", "hue2rgb", "p", "q", "t", "n", "min", "max"]
 }

package/dist/shader-mount.d.ts

@@ -11,15 +11,15 @@ export declare class ShaderMount {
     private lastFrameTime;
     /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */
     private totalAnimationTime;
-    /** Whether we RAF the render or not */
-    private isAnimated;
+    /** 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 */
+    private speed;
     /** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */
     private providedUniforms;
     /** Just a sanity check to make sure frames don't run after we're disposed */
     private hasBeenDisposed;
     /** If the resolution of the canvas has changed since the last render */
     private resolutionChanged;
-    constructor(canvas: HTMLCanvasElement, fragmentShader: string, uniforms?: Record<string, number | number[]>, webGlContextAttributes?: WebGLContextAttributes, animated?: boolean);
+    constructor(canvas: HTMLCanvasElement, fragmentShader: string, uniforms?: Record<string, number | number[]>, webGlContextAttributes?: WebGLContextAttributes, speed?: number);
     private initWebGL;
     private setupPositionAttribute;
     private setupUniforms;
@@ -29,14 +29,10 @@ export declare class ShaderMount {
     private render;
     private requestRender;
     private updateProvidedUniforms;
-    /** Start the animation loop, can be called during instantiation or later by an outside source */
-    startAnimating: () => void;
-    /** Stop the animation loop */
-    stopAnimating: () => void;
+    /** Set an animation speed (or 0 to stop animation) */
+    setSpeed: (newSpeed?: number) => void;
     /** Update the uniforms that are provided by the outside shader */
     setUniforms: (newUniforms: Record<string, number | number[]>) => void;
     /** Dispose of the shader mount, cleaning up all of the WebGL resources */
     dispose: () => void;
 }
-/**  Convert color string from HSL, RGB, or hex to 0-to-1-range-RGB array */
-export declare function getShaderColorFromString(colorString: string | [number, number, number] | undefined, fallback?: string | [number, number, number]): [number, number, number];

package/dist/shaders/dots-orbit.d.ts

@@ -0,0 +1,26 @@
+export type DotsOrbitUniforms = {
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
+    u_color3: [number, number, number, number];
+    u_color4: [number, number, number, number];
+    u_scale: number;
+    u_dotSize: number;
+    u_dotSizeRange: number;
+    u_spreading: number;
+};
+/**
+ * Dots Pattern with dots moving around their grid position
+ * The artwork by Ksenia Kondrashova
+ * Renders a dot pattern with dots placed in the center of each cell of animated Voronoi diagram
+ *
+ * Uniforms include:
+ * u_color1: The first dots color
+ * u_color2: The second dots color
+ * u_color3: The third dots color
+ * u_color4: The fourth dots color
+ * u_scale: The scale applied to pattern
+ * u_dotSize: The base dot radius (relative to cell size)
+ * u_dotSizeRange: Dot radius to vary between the cells
+ * u_spreading: How far dots are moving around the straight grid
+ */
+export declare const dotsOrbitFragmentShader = "\nprecision mediump float;\n\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_scale;\nuniform float u_spreading;\nuniform float u_time;\nuniform float u_ratio;\nuniform vec2 u_resolution;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nvec2 random2(vec2 p) {\n  return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453);\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 + u_spreading * sin(time + PI * 2. * 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  uv *= (.001 * u_scale * u_resolution);\n  uv += .5;\n\n  float t = u_time;\n\n  vec3 voronoi = get_voronoi_shape(uv, t);\n  float radius = u_dotSize - u_dotSizeRange * voronoi[2];\n\n  float radius_smoother = .001 + .001 * (u_scale - 1.);\n  float shape = 1. - smoothstep(radius, radius + radius_smoother, voronoi[0]);\n\n  float color_randomizer = voronoi[1];\n  vec4 color =\n    u_color1 * step(0.0, color_randomizer) * step(color_randomizer, 0.25) +\n    u_color2 * step(0.25, color_randomizer) * step(color_randomizer, 0.5) +\n    u_color3 * step(0.5, color_randomizer) * step(color_randomizer, 0.75) +\n    u_color4 * step(0.75, color_randomizer) * step(color_randomizer, 1.0);\n\n  gl_FragColor = color * shape;\n}\n";

package/dist/shaders/grain-clouds.d.ts

@@ -1,8 +1,7 @@
 export type GrainCloudsUniforms = {
-    u_color1: [number, number, number];
-    u_color2: [number, number, number];
-    u_noiseScale: number;
-    u_noiseSpeed: number;
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
+    u_scale: number;
     u_grainAmount: number;
 };
 /**
@@ -13,8 +12,7 @@ export type GrainCloudsUniforms = {
  * Uniforms include:
  * u_color1: The first color of the clouds
  * u_color2: The second color of the clouds
- * u_noiseScale: The scale of the noise
- * u_noiseSpeed: The speed of the noise
+ * u_scale: The scale of the noise
  * u_grainAmount: The amount of grain on the texture
  */
-export declare const grainCloudsFragmentShader = "\n  precision highp float;\n  uniform vec2 u_resolution;\n  uniform float u_time;\n  uniform vec3 u_color1;\n  uniform vec3 u_color2;\n  uniform float u_noiseScale;\n  uniform float u_noiseSpeed;\n  uniform float u_grainAmount;\n\n  // Simplex 2D noise\n  vec3 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  }\n\n  void main() {\n    vec2 st = gl_FragCoord.xy / u_resolution.xy;\n\n    // Calculate the aspect ratio of the shader\n    float shaderAspect = u_resolution.x / u_resolution.y;\n\n    // Define the aspect ratio of your content (e.g., 1.0 for square)\n    float contentAspect = 1.0;\n\n    // Adjust st to maintain content aspect ratio\n    if (shaderAspect > contentAspect) {\n      float scale = shaderAspect / contentAspect;\n      st.x = (st.x - 0.5) * scale + 0.5;\n    } else {\n      float scale = contentAspect / shaderAspect;\n      st.y = (st.y - 0.5) * scale + 0.5;\n    }\n\n    // Create blobby texture\n    float n = snoise(st * u_noiseScale + u_time * u_noiseSpeed);\n    n += 0.5 * snoise(st * u_noiseScale * 2.0 - u_time * u_noiseSpeed * 0.5);\n    n += 0.25 * snoise(st * u_noiseScale * 4.0 + u_time * u_noiseSpeed * 0.25);\n    n = n * 0.5 + 0.5;\n\n    // Color interpolation\n    vec3 color = mix(u_color1, u_color2, n);\n\n    // Add grain\n    float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);\n    color += (grain - 0.5) * u_grainAmount;\n\n    gl_FragColor = vec4(color, 1.0);\n  }\n";
+export declare const grainCloudsFragmentShader = "\n  precision highp float;\n  uniform vec2 u_resolution;\n  uniform float u_time;\n\n  uniform vec4 u_color1;\n  uniform vec4 u_color2;\n  uniform float u_scale;\n  uniform float u_grainAmount;\n\n  // Simplex 2D noise\n  vec3 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  }\n\n  void main() {\n    vec2 st = gl_FragCoord.xy / u_resolution.xy;\n\n    // Calculate the aspect ratio of the shader\n    float shaderAspect = u_resolution.x / u_resolution.y;\n\n    // Define the aspect ratio of your content (e.g., 1.0 for square)\n    float contentAspect = 1.0;\n\n    // Adjust st to maintain content aspect ratio\n    if (shaderAspect > contentAspect) {\n      float scale = shaderAspect / contentAspect;\n      st.x = (st.x - 0.5) * scale + 0.5;\n    } else {\n      float scale = contentAspect / shaderAspect;\n      st.y = (st.y - 0.5) * scale + 0.5;\n    }\n\n    // Create blobby texture\n    float n = snoise(st * u_scale + u_time);\n    n += 0.5 * snoise(st * u_scale * 2.0 - u_time * 0.5);\n    n += 0.25 * snoise(st * u_scale * 4.0 + u_time * 0.25);\n    n = n * 0.5 + 0.5;\n\n    // Color interpolation\n    vec4 color = mix(u_color1, u_color2, n);\n\n    // Add grain\n    float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);\n    color += (grain - 0.5) * u_grainAmount;\n\n    gl_FragColor = color;\n  }\n";

package/dist/shaders/mesh-gradient.d.ts

@@ -1,9 +1,8 @@
 export type MeshGradientUniforms = {
-    u_color1: [number, number, number];
-    u_color2: [number, number, number];
-    u_color3: [number, number, number];
-    u_color4: [number, number, number];
-    u_speed: number;
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
+    u_color3: [number, number, number, number];
+    u_color4: [number, number, number, number];
 };
 /**
  * Mesh Gradient, based on https://www.shadertoy.com/view/wdyczG
@@ -15,6 +14,5 @@ export type MeshGradientUniforms = {
  * u_color2: The second color of the mesh gradient
  * u_color3: The third color of the mesh gradient
  * u_color4: The fourth color of the mesh gradient
- * u_speed: The speed of the noise
  */
-export declare const meshGradientFragmentShader = "\n// Mesh Gradient: https://www.shadertoy.com/view/wdyczG\n#define S(a,b,t) smoothstep(a,b,t)\n\nprecision highp float;\n\nuniform vec3 u_color1;\nuniform vec3 u_color2;\nuniform vec3 u_color3;\nuniform vec3 u_color4;\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\n\nmat2 Rot(float a)\n{\n    float s = sin(a);\n    float c = cos(a);\n    return mat2(c, -s, s, c);\n}\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{\n    vec2 i = floor( p );\n    vec2 f = fract( p );\n\n\tvec2 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\treturn 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    vec2 tuv = uv;\n    tuv -= .5;\n\n    // rotate with Noise\n    float degree = noise(vec2(u_time * u_speed, tuv.x * tuv.y));\n\n    tuv.y *= 1./ratio;\n    tuv *= Rot(radians((degree-.5)*720.+180.));\n\ttuv.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   \ttuv.y += sin(tuv.x*frequency*1.5+speed)/(amplitude*.5);\n\n\n    // draw the image\n    vec3 layer1 = mix(u_color1, u_color2, S(-.3, .2, (tuv*Rot(radians(-5.))).x));\n    vec3 layer2 = mix(u_color3, u_color4, S(-.3, .2, (tuv*Rot(radians(-5.))).x));\n\n    vec3 finalComp = mix(layer1, layer2, S(.5, -.3, tuv.y));\n\n    vec3 col = finalComp;\n\n    gl_FragColor = vec4(col,1.0);\n}\n";
+export declare const meshGradientFragmentShader = "\n// Mesh Gradient: https://www.shadertoy.com/view/wdyczG\n#define S(a,b,t) smoothstep(a,b,t)\n\nprecision highp float;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nmat2 Rot(float a)\n{\n    float s = sin(a);\n    float c = cos(a);\n    return mat2(c, -s, s, c);\n}\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{\n    vec2 i = floor( p );\n    vec2 f = fract( p );\n\n\tvec2 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\treturn 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    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\ttuv.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   \ttuv.y += sin(tuv.x*frequency*1.5+speed)/(amplitude*.5);\n\n\n    // draw the image\n    vec4 layer1 = mix(u_color1, u_color2, S(-.3, .2, (tuv*Rot(radians(-5.))).x));\n    vec4 layer2 = mix(u_color3, u_color4, S(-.3, .2, (tuv*Rot(radians(-5.))).x));\n\n    vec4 finalComp = mix(layer1, layer2, S(.5, -.3, tuv.y));\n    gl_FragColor = finalComp;\n}\n";

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

@@ -1,9 +1,8 @@
 export type NeuroNoiseUniforms = {
-    u_colorFront: [number, number, number];
-    u_colorBack: [number, number, number];
+    u_colorFront: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
     u_scale: number;
     u_brightness: number;
-    u_speed: number;
 };
 /**
  * Neuro Noise Pattern;
@@ -15,6 +14,5 @@ export type NeuroNoiseUniforms = {
  * u_colorBack: The back color of pattern
  * u_brightness: The power/brightness of pattern lines
  * u_scale: The scale applied to coordinates
- * u_speed: The speed coefficient for pattern animation
  */
-export declare const neuroNoiseFragmentShader = "\nprecision mediump float;\n\nuniform vec3 u_colorFront;\nuniform vec3 u_colorBack;\nuniform float u_scale;\nuniform float u_brightness;\nuniform float u_speed;\n\nuniform float u_time;\nuniform float u_ratio;\nuniform vec2 u_resolution;\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  float ratio = u_resolution.x / u_resolution.y;\n  vec2 uv_r = uv;\n  uv_r -= .5;\n  uv_r *= u_scale;\n  uv_r += .5;\n  uv_r.x *= ratio;\n\n  float t = u_speed * u_time;\n  vec3 color = vec3(0.);\n\n  float noise = neuro_shape(uv_r, t);\n\n  noise = u_brightness * pow(noise, 3.);\n  noise += pow(noise, 10.);\n  noise = max(.0, noise - .5);\n  noise *= (1. - length(uv - .5));\n\n  color = mix(u_colorBack, u_colorFront, noise);\n\n  gl_FragColor = vec4(color, 1.);\n}\n";
+export declare const neuroNoiseFragmentShader = "\nprecision mediump float;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_scale;\nuniform float u_brightness;\n\nuniform float u_time;\nuniform float u_ratio;\nuniform vec2 u_resolution;\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  uv *= (.001 * u_scale * u_resolution);\n  uv += .5;\n\n  float t = u_time;\n  vec3 color = vec3(0.);\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  gl_FragColor = mix(u_colorBack, u_colorFront, noise);\n}\n";

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

@@ -0,0 +1,21 @@
+export type SmokeRingUniforms = {
+    u_colorBack: [number, number, number, number];
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
+    u_scale: number;
+    u_thickness: number;
+};
+/**
+ * Smoke Ring, based on https://codepen.io/ksenia-k/full/zYyqRWE
+ * Renders a fractional Brownian motion (fBm) noise over the
+ * polar coordinates masked with ring shape
+ *
+ * Uniforms include:
+ * u_colorBack: The back color of the scene
+ * u_color1: Main color of the ring
+ * u_color2: The third color of the mesh gradient
+ * u_color4: The fourth color of the mesh gradient
+ * u_scale: The scale of the noise
+ * u_thickness: The thickness of the ring
+ */
+export declare const smokeRingFragmentShader = "\n\n  precision highp float;\n\n  uniform vec4 u_colorBack;\n  uniform vec4 u_color1;\n  uniform vec4 u_color2;\n  uniform float u_scale;\n  uniform float u_thickness;\n  uniform vec2 u_resolution;\n  uniform float u_time;\n\n    #define TWO_PI 6.28318530718\n    #define PI 3.14159265358979323846\n\n    float rand(vec2 n) {\n        return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\n    }\n    float 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    }\n    float fbm(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\n    float 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\n    void main() {\n\n        vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n        float ratio = u_resolution.x / u_resolution.y;\n\n        uv -= .5;\n        uv *= 2.;\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_scale;\n\n        float noise_left = fbm(polar_uv + .05 * t);\n        polar_uv.x = mod(polar_uv.x, u_scale * 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        ring_shape = clamp(ring_shape, 0., 1.);\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        ring_shape_outer *= u_color2.a;\n        ring_shape_inner *= u_color1.a;\n\n        float background = 1. - ring_shape;\n        background *= u_colorBack.a;\n        \n        vec3 color = u_color2.rgb * ring_shape_outer;\n        color += u_color1.rgb * ring_shape_inner;\n        color += u_colorBack.rgb * background;\n        \n        float opacity = ring_shape_outer;\n        opacity += ring_shape_inner;\n        opacity += background;\n        \n        gl_FragColor = vec4(color, opacity);\n    }\n";

package/dist/shaders/stepped-simplex-noise.d.ts

@@ -0,0 +1,23 @@
+export type SteppedSimplexNoiseUniforms = {
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
+    u_color3: [number, number, number, number];
+    u_color4: [number, number, number, number];
+    u_color5: [number, number, number, number];
+    u_scale: number;
+    u_steps_number: number;
+};
+/**
+ * Stepped Simplex Noise by Ksenia Kondrashova
+ * Calculates a combination of 2 simplex noises with result rendered as a stepped gradient
+ *
+ * Uniforms include:
+ * u_color1: The first color
+ * u_color2: The second color
+ * u_color3: The third color
+ * u_color4: The fourth color
+ * u_color5: The fifth color
+ * u_scale: The scale applied to coordinates
+ * u_steps_number: The number of colors to show as a stepped gradient
+ */
+export declare const steppedSimplexNoiseFragmentShader = "\nprecision highp float;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\nuniform vec4 u_color5;\nuniform float u_scale;\nuniform float u_steps_number;\n\nuniform float u_time;\nuniform vec2 u_resolution;\n\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  uv *= (.001 * u_scale * u_resolution);\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  vec4 col = u_color1;\n  for (int i = 0; i < 5; i++) {\n      vec4 next_col = getColor(i + 1);\n      col = mix(col, next_col, smoothstep((float(i) + .5) / 5., (float(i) + 2.) / 5., noise));\n  }\n  gl_FragColor = col;\n}\n";

package/package.json

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