@paper-design/shaders - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

dist/index.d.ts

 /** 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';

dist/index.js

 /***** 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;
@@ -7,10 +7,10 @@ void main() {
   }
-`;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;
@@ -67,9 +67,9 @@
     // 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);
 
@@ -80,5 +80,5 @@ // Add grain
 
-    gl_FragColor = vec4(color, 1.0);
+    gl_FragColor = color;
   }
-`;var w=`
+`;var A=`
 // Mesh Gradient: https://www.shadertoy.com/view/wdyczG
@@ -89,9 +89,8 @@ #define S(a,b,t) smoothstep(a,b,t)
 
-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;
 
@@ -135,3 +134,3 @@ mat2 Rot(float a)
     // 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));
 
@@ -152,19 +151,109 @@ tuv.y *= 1./ratio;
     // 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;
 
@@ -197,24 +286,166 @@ uniform float u_time;
   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;
 
-  gl_FragColor = vec4(color, 1.);
+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);
 }
-`;export{v as ShaderMount,g as getShaderColorFromString,F as grainCloudsFragmentShader,w as meshGradientFragmentShader,C as neuroNoiseFragmentShader};
+
+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);
+}
+
+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;
+}
+`;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

dist/shader-mount.d.ts

@@ -14,4 +14,4 @@ export declare class ShaderMount {
     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) */
@@ -23,3 +23,3 @@ private providedUniforms;
     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;
@@ -34,6 +34,4 @@ private setupPositionAttribute;
     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 */
@@ -44,3 +42,1 @@ setUniforms: (newUniforms: Record<string, number | number[]>) => 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];

dist/shaders/grain-clouds.d.ts

 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;
@@ -16,6 +15,5 @@ };
  * 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";

dist/shaders/mesh-gradient.d.ts

 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];
 };
@@ -18,4 +17,3 @@ /**
  * 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";

dist/shaders/neuro-noise.d.ts

 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;
 };
@@ -18,4 +17,3 @@ /**
  * 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.json

 {
   "name": "@paper-design/shaders",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "license": "MIT",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

82988

increased by55.98%

Number of package files

15

increased by50%

Lines of code

595

increased by85.94%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes