bluedither 1.0.0

package/dist/bluedither-shader.js

@@ -0,0 +1,4867 @@
+var j=Object.defineProperty;var q=(e,o,t)=>o in e?j(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t;var a=(e,o,t)=>q(e,typeof o!="symbol"?o+"":o,t);var Z=`#version 300 es
+precision mediump float;
+
+layout(location = 0) in vec4 a_position;
+
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+uniform float u_imageAspectRatio;
+uniform float u_originX;
+uniform float u_originY;
+uniform float u_worldWidth;
+uniform float u_worldHeight;
+uniform float u_fit;
+uniform float u_scale;
+uniform float u_rotation;
+uniform float u_offsetX;
+uniform float u_offsetY;
+
+out vec2 v_objectUV;
+out vec2 v_objectBoxSize;
+out vec2 v_responsiveUV;
+out vec2 v_responsiveBoxGivenSize;
+out vec2 v_patternUV;
+out vec2 v_patternBoxSize;
+out vec2 v_imageUV;
+
+vec3 getBoxSize(float boxRatio, vec2 givenBoxSize) {
+  vec2 box = vec2(0.);
+  // fit = none
+  box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y);
+  float noFitBoxWidth = box.x;
+  if (u_fit == 1.) { // fit = contain
+    box.x = boxRatio * min(u_resolution.x / boxRatio, u_resolution.y);
+  } else if (u_fit == 2.) { // fit = cover
+    box.x = boxRatio * max(u_resolution.x / boxRatio, u_resolution.y);
+  }
+  box.y = box.x / boxRatio;
+  return vec3(box, noFitBoxWidth);
+}
+
+void main() {
+  gl_Position = a_position;
+
+  vec2 uv = gl_Position.xy * .5;
+  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
+  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
+  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
+  float r = u_rotation * 3.14159265358979323846 / 180.;
+  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
+
+  // ===================================================
+
+  float fixedRatio = 1.;
+  vec2 fixedRatioBoxGivenSize = vec2(
+  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  );
+
+  v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize).xy;
+  vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;
+
+  v_objectUV = uv;
+  v_objectUV *= objectWorldScale;
+  v_objectUV += boxOrigin * (objectWorldScale - 1.);
+  v_objectUV += graphicOffset;
+  v_objectUV /= u_scale;
+  v_objectUV = graphicRotation * v_objectUV;
+
+  // ===================================================
+
+  v_responsiveBoxGivenSize = vec2(
+  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  );
+  float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
+  vec2 responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize).xy;
+  vec2 responsiveBoxScale = u_resolution.xy / responsiveBoxSize;
+
+  #ifdef ADD_HELPERS
+  v_responsiveHelperBox = uv;
+  v_responsiveHelperBox *= responsiveBoxScale;
+  v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.);
+  #endif
+
+  v_responsiveUV = uv;
+  v_responsiveUV *= responsiveBoxScale;
+  v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.);
+  v_responsiveUV += graphicOffset;
+  v_responsiveUV /= u_scale;
+  v_responsiveUV.x *= responsiveRatio;
+  v_responsiveUV = graphicRotation * v_responsiveUV;
+  v_responsiveUV.x /= responsiveRatio;
+
+  // ===================================================
+
+  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
+  vec2 patternBoxGivenSize = vec2(
+  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  );
+  patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;
+
+  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize);
+  v_patternBoxSize = boxSizeData.xy;
+  float patternBoxNoFitBoxWidth = boxSizeData.z;
+  vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;
+
+  v_patternUV = uv;
+  v_patternUV += graphicOffset / patternBoxScale;
+  v_patternUV += boxOrigin;
+  v_patternUV -= boxOrigin / patternBoxScale;
+  v_patternUV *= u_resolution.xy;
+  v_patternUV /= u_pixelRatio;
+  if (u_fit > 0.) {
+    v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);
+  }
+  v_patternUV /= u_scale;
+  v_patternUV = graphicRotation * v_patternUV;
+  v_patternUV += boxOrigin / patternBoxScale;
+  v_patternUV -= boxOrigin;
+  // x100 is a default multiplier between vertex and fragmant shaders
+  // we use it to avoid UV presision issues
+  v_patternUV *= .01;
+
+  // ===================================================
+
+  vec2 imageBoxSize;
+  if (u_fit == 1.) { // contain
+    imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
+  } else if (u_fit == 2.) { // cover
+    imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
+  } else {
+    imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);
+  }
+  imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;
+  vec2 imageBoxScale = u_resolution.xy / imageBoxSize;
+
+  v_imageUV = uv;
+  v_imageUV *= imageBoxScale;
+  v_imageUV += boxOrigin * (imageBoxScale - 1.);
+  v_imageUV += graphicOffset;
+  v_imageUV /= u_scale;
+  v_imageUV.x *= u_imageAspectRatio;
+  v_imageUV = graphicRotation * v_imageUV;
+  v_imageUV.x /= u_imageAspectRatio;
+
+  v_imageUV += .5;
+  v_imageUV.y = 1. - v_imageUV.y;
+}`,z=8294400,X=class{constructor(e,o,t,i,n=0,s=0,r=2,l=z,m=[]){a(this,"parentElement");a(this,"canvasElement");a(this,"gl");a(this,"program",null);a(this,"uniformLocations",{});a(this,"fragmentShader");a(this,"rafId",null);a(this,"lastRenderTime",0);a(this,"currentFrame",0);a(this,"speed",0);a(this,"currentSpeed",0);a(this,"providedUniforms");a(this,"mipmaps",[]);a(this,"hasBeenDisposed",!1);a(this,"resolutionChanged",!0);a(this,"textures",new Map);a(this,"minPixelRatio");a(this,"maxPixelCount");a(this,"isSafari",oe());a(this,"uniformCache",{});a(this,"textureUnitMap",new Map);a(this,"initProgram",()=>{let e=$(this.gl,Z,this.fragmentShader);e&&(this.program=e)});a(this,"setupPositionAttribute",()=>{let e=this.gl.getAttribLocation(this.program,"a_position"),o=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,o);let t=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(t),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(e),this.gl.vertexAttribPointer(e,2,this.gl.FLOAT,!1,0,0)});a(this,"setupUniforms",()=>{let e={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_pixelRatio:this.gl.getUniformLocation(this.program,"u_pixelRatio"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution")};Object.entries(this.providedUniforms).forEach(([o,t])=>{if(e[o]=this.gl.getUniformLocation(this.program,o),t instanceof HTMLImageElement){let i=`${o}AspectRatio`;e[i]=this.gl.getUniformLocation(this.program,i)}}),this.uniformLocations=e});a(this,"renderScale",1);a(this,"parentWidth",0);a(this,"parentHeight",0);a(this,"parentDevicePixelWidth",0);a(this,"parentDevicePixelHeight",0);a(this,"devicePixelsSupported",!1);a(this,"resizeObserver",null);a(this,"setupResizeObserver",()=>{this.resizeObserver=new ResizeObserver(([e])=>{if(e?.borderBoxSize[0]){let o=e.devicePixelContentBoxSize?.[0];o!==void 0&&(this.devicePixelsSupported=!0,this.parentDevicePixelWidth=o.inlineSize,this.parentDevicePixelHeight=o.blockSize),this.parentWidth=e.borderBoxSize[0].inlineSize,this.parentHeight=e.borderBoxSize[0].blockSize}this.handleResize()}),this.resizeObserver.observe(this.parentElement)});a(this,"handleVisualViewportChange",()=>{this.resizeObserver?.disconnect(),this.setupResizeObserver()});a(this,"handleResize",()=>{let e=0,o=0,t=Math.max(1,window.devicePixelRatio),i=visualViewport?.scale??1;if(this.devicePixelsSupported){let u=Math.max(1,this.minPixelRatio/t);e=this.parentDevicePixelWidth*u*i,o=this.parentDevicePixelHeight*u*i}else{let u=Math.max(t,this.minPixelRatio)*i;if(this.isSafari){let d=te();u*=Math.max(1,d)}e=Math.round(this.parentWidth)*u,o=Math.round(this.parentHeight)*u}let n=Math.sqrt(this.maxPixelCount)/Math.sqrt(e*o),s=Math.min(1,n),r=Math.round(e*s),l=Math.round(o*s),m=r/Math.round(this.parentWidth);(this.canvasElement.width!==r||this.canvasElement.height!==l||this.renderScale!==m)&&(this.renderScale=m,this.canvasElement.width=r,this.canvasElement.height=l,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))});a(this,"render",e=>{if(this.hasBeenDisposed)return;if(this.program===null){console.warn("Tried to render before program or gl was initialized");return}let o=e-this.lastRenderTime;this.lastRenderTime=e,this.currentSpeed!==0&&(this.currentFrame+=o*this.currentSpeed),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.currentFrame*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.gl.uniform1f(this.uniformLocations.u_pixelRatio,this.renderScale),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.currentSpeed!==0?this.requestRender():this.rafId=null});a(this,"requestRender",()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)});a(this,"setTextureUniform",(e,o)=>{if(!o.complete||o.naturalWidth===0)throw new Error(`Paper Shaders: image for uniform ${e} must be fully loaded`);let t=this.textures.get(e);t&&this.gl.deleteTexture(t),this.textureUnitMap.has(e)||this.textureUnitMap.set(e,this.textureUnitMap.size);let i=this.textureUnitMap.get(e);this.gl.activeTexture(this.gl.TEXTURE0+i);let n=this.gl.createTexture();this.gl.bindTexture(this.gl.TEXTURE_2D,n),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,o),this.mipmaps.includes(e)&&(this.gl.generateMipmap(this.gl.TEXTURE_2D),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR_MIPMAP_LINEAR));let s=this.gl.getError();if(s!==this.gl.NO_ERROR||n===null){console.error("Paper Shaders: WebGL error when uploading texture:",s);return}this.textures.set(e,n);let r=this.uniformLocations[e];if(r){this.gl.uniform1i(r,i);let l=`${e}AspectRatio`,m=this.uniformLocations[l];if(m){let u=o.naturalWidth/o.naturalHeight;this.gl.uniform1f(m,u)}}});a(this,"areUniformValuesEqual",(e,o)=>e===o?!0:Array.isArray(e)&&Array.isArray(o)&&e.length===o.length?e.every((t,i)=>this.areUniformValuesEqual(t,o[i])):!1);a(this,"setUniformValues",e=>{this.gl.useProgram(this.program),Object.entries(e).forEach(([o,t])=>{let i=t;if(t instanceof HTMLImageElement&&(i=`${t.src.slice(0,200)}|${t.naturalWidth}x${t.naturalHeight}`),this.areUniformValuesEqual(this.uniformCache[o],i))return;this.uniformCache[o]=i;let n=this.uniformLocations[o];if(!n){console.warn(`Uniform location for ${o} not found`);return}if(t instanceof HTMLImageElement)this.setTextureUniform(o,t);else if(Array.isArray(t)){let s=null,r=null;if(t[0]!==void 0&&Array.isArray(t[0])){let l=t[0].length;if(t.every(m=>m.length===l))s=t.flat(),r=l;else{console.warn(`All child arrays must be the same length for ${o}`);return}}else s=t,r=s.length;switch(r){case 2:this.gl.uniform2fv(n,s);break;case 3:this.gl.uniform3fv(n,s);break;case 4:this.gl.uniform4fv(n,s);break;case 9:this.gl.uniformMatrix3fv(n,!1,s);break;case 16:this.gl.uniformMatrix4fv(n,!1,s);break;default:console.warn(`Unsupported uniform array length: ${r}`)}}else typeof t=="number"?this.gl.uniform1f(n,t):typeof t=="boolean"?this.gl.uniform1i(n,t?1:0):console.warn(`Unsupported uniform type for ${o}: ${typeof t}`)})});a(this,"getCurrentFrame",()=>this.currentFrame);a(this,"setFrame",e=>{this.currentFrame=e,this.lastRenderTime=performance.now(),this.render(performance.now())});a(this,"setSpeed",(e=1)=>{this.speed=e,this.setCurrentSpeed(document.hidden?0:e)});a(this,"setCurrentSpeed",e=>{this.currentSpeed=e,this.rafId===null&&e!==0&&(this.lastRenderTime=performance.now(),this.rafId=requestAnimationFrame(this.render)),this.rafId!==null&&e===0&&(cancelAnimationFrame(this.rafId),this.rafId=null)});a(this,"setMaxPixelCount",(e=z)=>{this.maxPixelCount=e,this.handleResize()});a(this,"setMinPixelRatio",(e=2)=>{this.minPixelRatio=e,this.handleResize()});a(this,"setUniforms",e=>{this.setUniformValues(e),this.providedUniforms={...this.providedUniforms,...e},this.render(performance.now())});a(this,"handleDocumentVisibilityChange",()=>{this.setCurrentSpeed(document.hidden?0:this.speed)});a(this,"dispose",()=>{this.hasBeenDisposed=!0,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.gl&&this.program&&(this.textures.forEach(e=>{this.gl.deleteTexture(e)}),this.textures.clear(),this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),visualViewport?.removeEventListener("resize",this.handleVisualViewportChange),document.removeEventListener("visibilitychange",this.handleDocumentVisibilityChange),this.uniformLocations={},this.canvasElement.remove(),delete this.parentElement.paperShaderMount});if(e instanceof HTMLElement)this.parentElement=e;else throw new Error("Paper Shaders: parent element must be an HTMLElement");if(!document.querySelector("style[data-paper-shader]")){let x=document.createElement("style");x.innerHTML=ee,x.setAttribute("data-paper-shader",""),document.head.prepend(x)}let u=document.createElement("canvas");this.canvasElement=u,this.parentElement.prepend(u),this.fragmentShader=o,this.providedUniforms=t,this.mipmaps=m,this.currentFrame=s,this.minPixelRatio=r,this.maxPixelCount=l;let d=u.getContext("webgl2",i);if(!d)throw new Error("Paper Shaders: WebGL is not supported in this browser");this.gl=d,this.initProgram(),this.setupPositionAttribute(),this.setupUniforms(),this.setUniformValues(this.providedUniforms),this.setupResizeObserver(),visualViewport?.addEventListener("resize",this.handleVisualViewportChange),this.setSpeed(n),this.parentElement.setAttribute("data-paper-shader",""),this.parentElement.paperShaderMount=this,document.addEventListener("visibilitychange",this.handleDocumentVisibilityChange)}};function O(e,o,t){let i=e.createShader(o);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 $(e,o,t){let i=e.getShaderPrecisionFormat(e.FRAGMENT_SHADER,e.MEDIUM_FLOAT),n=i?i.precision:null;n&&n<23&&(o=o.replace(/precision\s+(lowp|mediump)\s+float;/g,"precision highp float;"),t=t.replace(/precision\s+(lowp|mediump)\s+float/g,"precision highp float").replace(/\b(uniform|varying|attribute)\s+(lowp|mediump)\s+(\w+)/g,"$1 highp $3"));let s=O(e,e.VERTEX_SHADER,o),r=O(e,e.FRAGMENT_SHADER,t);if(!s||!r)return null;let l=e.createProgram();return l?(e.attachShader(l,s),e.attachShader(l,r),e.linkProgram(l),e.getProgramParameter(l,e.LINK_STATUS)?(e.detachShader(l,s),e.detachShader(l,r),e.deleteShader(s),e.deleteShader(r),l):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(l)),e.deleteProgram(l),e.deleteShader(s),e.deleteShader(r),null)):null}var ee=`@layer paper-shaders {
+  :where([data-paper-shader]) {
+    isolation: isolate;
+    position: relative;
+
+    & canvas {
+      contain: strict;
+      display: block;
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      corner-shape: inherit;
+    }
+  }
+}`;function oe(){let e=navigator.userAgent.toLowerCase();return e.includes("safari")&&!e.includes("chrome")&&!e.includes("android")}function te(){let e=visualViewport?.scale??1,o=visualViewport?.width??window.innerWidth,t=window.innerWidth-document.documentElement.clientWidth,i=e*o+t,n=outerWidth/i,s=Math.round(100*n);return s%5===0?s/100:s===33?1/3:s===67?2/3:s===133?4/3:n}var c=`
+#define TWO_PI 6.28318530718
+#define PI 3.14159265358979323846
+`,f=`
+vec2 rotate(vec2 uv, float th) {
+  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
+}
+`,w=`
+  float hash11(float p) {
+    p = fract(p * 0.3183099) + 0.1;
+    p *= p + 19.19;
+    return fract(p * p);
+  }
+`,g=`
+  float hash21(vec2 p) {
+    p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;
+    p += dot(p, p + 19.19);
+    return fract(p.x * p.y);
+  }
+`,_=`
+  float randomR(vec2 p) {
+    vec2 uv = floor(p) / 100. + .5;
+    return texture(u_noiseTexture, fract(uv)).r;
+  }
+`,E=`
+  vec2 randomGB(vec2 p) {
+    vec2 uv = floor(p) / 100. + .5;
+    return texture(u_noiseTexture, fract(uv)).gb;
+  }
+`,p=`
+  color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);
+`,h=`
+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);
+}
+`,ae=`
+float fiberRandom(vec2 p) {
+  vec2 uv = floor(p) / 100.;
+  return texture(u_noiseTexture, fract(uv)).b;
+}
+
+float fiberValueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = fiberRandom(i);
+  float b = fiberRandom(i + vec2(1.0, 0.0));
+  float c = fiberRandom(i + vec2(0.0, 1.0));
+  float d = fiberRandom(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float fiberNoiseFbm(in vec2 n, vec2 seedOffset) {
+  float total = 0.0, amplitude = 1.;
+  for (int i = 0; i < 4; i++) {
+    n = rotate(n, .7);
+    total += fiberValueNoise(n + seedOffset) * amplitude;
+    n *= 2.;
+    amplitude *= 0.6;
+  }
+  return total;
+}
+
+float fiberNoise(vec2 uv, vec2 seedOffset) {
+  float epsilon = 0.001;
+  float n1 = fiberNoiseFbm(uv + vec2(epsilon, 0.0), seedOffset);
+  float n2 = fiberNoiseFbm(uv - vec2(epsilon, 0.0), seedOffset);
+  float n3 = fiberNoiseFbm(uv + vec2(0.0, epsilon), seedOffset);
+  float n4 = fiberNoiseFbm(uv - vec2(0.0, epsilon), seedOffset);
+  return length(vec2(n1 - n2, n3 - n4)) / (2.0 * epsilon);
+}
+`,D={maxColorCount:10},ce=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colors[${D.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_distortion;
+uniform float u_swirl;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+
+in vec2 v_objectUV;
+out vec4 fragColor;
+
+${c}
+${f}
+${g}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float noise(vec2 n, vec2 seedOffset) {
+  return valueNoise(n + seedOffset);
+}
+
+vec2 getPosition(int i, float t) {
+  float a = float(i) * .37;
+  float b = .6 + fract(float(i) / 3.) * .9;
+  float c = .8 + fract(float(i + 1) / 4.);
+
+  float x = sin(t * b + a);
+  float y = cos(t * c + a * 1.5);
+
+  return .5 + .5 * vec2(x, y);
+}
+
+void main() {
+  vec2 uv = v_objectUV;
+  uv += .5;
+  vec2 grainUV = uv * 1000.;
+
+  float grain = noise(grainUV, vec2(0.));
+  float mixerGrain = .4 * u_grainMixer * (grain - .5);
+
+  const float firstFrameOffset = 41.5;
+  float t = .5 * (u_time + firstFrameOffset);
+
+  float radius = smoothstep(0., 1., length(uv - .5));
+  float center = 1. - radius;
+  for (float i = 1.; i <= 2.; i++) {
+    uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., uv.y));
+    uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., uv.x));
+  }
+
+  vec2 uvRotated = uv;
+  uvRotated -= vec2(.5);
+  float angle = 3. * u_swirl * radius;
+  uvRotated = rotate(uvRotated, -angle);
+  uvRotated += vec2(.5);
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+  float totalWeight = 0.;
+
+  for (int i = 0; i < ${D.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+
+    vec2 pos = getPosition(i, t) + mixerGrain;
+    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;
+    float opacityFraction = u_colors[i].a;
+
+    float dist = length(uvRotated - pos);
+
+    dist = pow(dist, 3.5);
+    float weight = 1. / (dist + 1e-3);
+    color += colorFraction * weight;
+    opacity += opacityFraction * weight;
+    totalWeight += weight;
+  }
+
+  color /= max(1e-4, totalWeight);
+  opacity /= max(1e-4, totalWeight);
+
+  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
+  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
+  grainOverlay = pow(grainOverlay, 1.3);
+
+  float grainOverlayV = grainOverlay * 2. - 1.;
+  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
+  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
+  grainOverlayStrength = pow(grainOverlayStrength, .8);
+  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
+
+  opacity += .5 * grainOverlayStrength;
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`,k={maxColorCount:10,maxNoiseIterations:8},ue=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${k.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_thickness;
+uniform float u_radius;
+uniform float u_innerShape;
+uniform float u_noiseScale;
+uniform float u_noiseIterations;
+
+in vec2 v_objectUV;
+
+out vec4 fragColor;
+
+${c}
+${_}
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomR(i);
+  float b = randomR(i + vec2(1.0, 0.0));
+  float c = randomR(i + vec2(0.0, 1.0));
+  float d = randomR(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+vec2 fbm(vec2 n0, vec2 n1) {
+  vec2 total = vec2(0.0);
+  float amplitude = .4;
+  for (int i = 0; i < ${k.maxNoiseIterations}; i++) {
+    if (i >= int(u_noiseIterations)) break;
+    total.x += valueNoise(n0) * amplitude;
+    total.y += valueNoise(n1) * amplitude;
+    n0 *= 1.99;
+    n1 *= 1.99;
+    amplitude *= 0.65;
+  }
+  return total;
+}
+
+float getNoise(vec2 uv, vec2 pUv, float t) {
+  vec2 pUvLeft = pUv + .03 * t;
+  float period = max(abs(u_noiseScale * TWO_PI), 1e-6);
+  vec2 pUvRight = vec2(fract(pUv.x / period) * period, pUv.y) + .03 * t;
+  vec2 noise = fbm(pUvLeft, pUvRight);
+  return mix(noise.y, noise.x, smoothstep(-.25, .25, uv.x));
+}
+
+float getRingShape(vec2 uv) {
+  float radius = u_radius;
+  float thickness = u_thickness;
+
+  float distance = length(uv);
+  float ringValue = 1. - smoothstep(radius, radius + thickness, distance);
+  ringValue *= smoothstep(radius - pow(u_innerShape, 3.) * thickness, radius, distance);
+
+  return ringValue;
+}
+
+void main() {
+  vec2 shape_uv = v_objectUV;
+
+  float t = u_time;
+
+  float cycleDuration = 3.;
+  float period2 = 2.0 * cycleDuration;
+  float localTime1 = fract((0.1 * t + cycleDuration) / period2) * period2;
+  float localTime2 = fract((0.1 * t) / period2) * period2;
+  float timeBlend = .5 + .5 * sin(.1 * t * PI / cycleDuration - .5 * PI);
+
+  float atg = atan(shape_uv.y, shape_uv.x) + .001;
+  float l = length(shape_uv);
+  float radialOffset = .5 * l - inversesqrt(max(1e-4, l));
+  vec2 polar_uv1 = vec2(atg, localTime1 - radialOffset) * u_noiseScale;
+  vec2 polar_uv2 = vec2(atg, localTime2 - radialOffset) * u_noiseScale;
+  
+  float noise1 = getNoise(shape_uv, polar_uv1, t);
+  float noise2 = getNoise(shape_uv, polar_uv2, t);
+
+  float noise = mix(noise1, noise2, timeBlend);
+
+  shape_uv *= (.8 + 1.2 * noise);
+
+  float ringShape = getRingShape(shape_uv);
+
+  float mixer = ringShape * ringShape * (u_colorsCount - 1.);
+  int idxLast = int(u_colorsCount) - 1;
+  vec4 gradient = u_colors[idxLast];
+  gradient.rgb *= gradient.a;
+  for (int i = ${k.maxColorCount} - 2; i >= 0; i--) {
+    float localT = clamp(mixer - float(idxLast - i - 1), 0., 1.);
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, localT);
+  }
+
+  vec3 color = gradient.rgb * ringShape;
+  float opacity = gradient.a * ringShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
+
+  ${p}
+
+  fragColor = vec4(color, opacity);
+}
+`,fe=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorMid;
+uniform vec4 u_colorBack;
+uniform float u_brightness;
+uniform float u_contrast;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${f}
+
+float neuroShape(vec2 uv, float t) {
+  vec2 sine_acc = vec2(0.);
+  vec2 res = vec2(0.);
+  float scale = 8.;
+
+  for (int j = 0; j < 15; j++) {
+    uv = rotate(uv, 1.);
+    sine_acc = rotate(sine_acc, 1.);
+    vec2 layer = uv * scale + float(j) + sine_acc - t;
+    sine_acc += sin(layer);
+    res += (.5 + .5 * cos(layer)) / scale;
+    scale *= (1.2);
+  }
+  return res.x + res.y;
+}
+
+void main() {
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= .13;
+
+  float t = .5 * u_time;
+
+  float noise = neuroShape(shape_uv, t);
+
+  noise = (1. + u_brightness) * noise * noise;
+  noise = pow(noise, .7 + 6. * u_contrast);
+  noise = min(1.4, noise);
+
+  float blend = smoothstep(0.7, 1.4, noise);
+
+  vec4 frontC = u_colorFront;
+  frontC.rgb *= frontC.a;
+  vec4 midC = u_colorMid;
+  midC.rgb *= midC.a;
+  vec4 blendFront = mix(midC, frontC, blend);
+
+  float safeNoise = max(noise, 0.0);
+  vec3 color = blendFront.rgb * safeNoise;
+  float opacity = clamp(blendFront.a * safeNoise, 0., 1.);
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
+
+  ${p}
+
+  fragColor = vec4(color, opacity);
+}
+`,T={maxColorCount:10},me=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${T.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_stepsPerColor;
+uniform float u_size;
+uniform float u_sizeRange;
+uniform float u_spreading;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${c}
+${f}
+${_}
+${E}
+
+
+vec3 voronoiShape(vec2 uv, float time) {
+  vec2 i_uv = floor(uv);
+  vec2 f_uv = fract(uv);
+
+  float spreading = .25 * clamp(u_spreading, 0., 1.);
+
+  float minDist = 1.;
+  vec2 randomizer = vec2(0.);
+  for (int y = -1; y <= 1; y++) {
+    for (int x = -1; x <= 1; x++) {
+      vec2 tileOffset = vec2(float(x), float(y));
+      vec2 rand = randomGB(i_uv + tileOffset);
+      vec2 cellCenter = vec2(.5 + 1e-4);
+      cellCenter += spreading * cos(time + TWO_PI * rand);
+      cellCenter -= .5;
+      cellCenter = rotate(cellCenter, randomR(vec2(rand.x, rand.y)) + .1 * time);
+      cellCenter += .5;
+      float dist = length(tileOffset + cellCenter - f_uv);
+      if (dist < minDist) {
+        minDist = dist;
+        randomizer = rand;
+      }
+    }
+  }
+
+  return vec3(minDist, randomizer);
+}
+
+void main() {
+
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= 1.5;
+
+  const float firstFrameOffset = -10.;
+  float t = u_time + firstFrameOffset;
+
+  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;
+
+  float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];
+  float dist = voronoi[0];
+  float edgeWidth = fwidth(dist);
+  float dots = 1. - smoothstep(radius - edgeWidth, radius + edgeWidth, dist);
+
+  float shape = voronoi[1];
+
+  float mixer = shape * (u_colorsCount - 1.);
+  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
+  float steps = max(1., u_stepsPerColor);
+
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${T.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+    float localT = clamp(mixer - float(i - 1), 0.0, 1.0);
+    localT = round(localT * steps) / steps;
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, localT);
+  }
+
+  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
+    float localT = mixer + 1.;
+    if (mixer > (u_colorsCount - 1.)) {
+      localT = mixer - (u_colorsCount - 1.);
+    }
+    localT = round(localT * steps) / steps;
+    vec4 cFst = u_colors[0];
+    cFst.rgb *= cFst.a;
+    vec4 cLast = u_colors[int(u_colorsCount - 1.)];
+    cLast.rgb *= cLast.a;
+    gradient = mix(cLast, cFst, localT);
+  }
+
+  vec3 color = gradient.rgb * dots;
+  float opacity = gradient.a * dots;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`,pe=`#version 300 es
+precision mediump float;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorFill;
+uniform vec4 u_colorStroke;
+uniform float u_dotSize;
+uniform float u_gapX;
+uniform float u_gapY;
+uniform float u_strokeWidth;
+uniform float u_sizeRange;
+uniform float u_opacityRange;
+uniform float u_shape;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${c}
+${h}
+
+float polygon(vec2 p, float N, float rot) {
+  float a = atan(p.x, p.y) + rot;
+  float r = TWO_PI / float(N);
+
+  return cos(floor(.5 + a / r) * r - a) * length(p);
+}
+
+void main() {
+
+  // x100 is a default multiplier between vertex and fragmant shaders
+  // we use it to avoid UV presision issues
+  vec2 shape_uv = 100. * v_patternUV;
+
+  vec2 gap = max(abs(vec2(u_gapX, u_gapY)), vec2(1e-6));
+  vec2 grid = fract(shape_uv / gap) + 1e-4;
+  vec2 grid_idx = floor(shape_uv / gap);
+  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));
+  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));
+
+  vec2 center = vec2(0.5) - 1e-3;
+  vec2 p = (grid - center) * vec2(u_gapX, u_gapY);
+
+  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
+  float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);
+
+  float dist;
+  if (u_shape < 0.5) {
+    // Circle
+    dist = length(p);
+  } else if (u_shape < 1.5) {
+    // Diamond
+    strokeWidth *= 1.5;
+    dist = polygon(1.5 * p, 4., .25 * PI);
+  } else if (u_shape < 2.5) {
+    // Square
+    dist = polygon(1.03 * p, 4., 1e-3);
+  } else {
+    // Triangle
+    strokeWidth *= 1.5;
+    p = p * 2. - 1.;
+    p *= .9;
+    p.y = 1. - p.y;
+    p.y -= .75 * baseSize;
+    dist = polygon(p, 3., 1e-3);
+  }
+
+  float edgeWidth = fwidth(dist);
+  float shapeOuter = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist - strokeWidth);
+  float shapeInner = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist);
+  float stroke = shapeOuter - shapeInner;
+
+  float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);
+  stroke *= dotOpacity;
+  shapeInner *= dotOpacity;
+
+  stroke *= u_colorStroke.a;
+  shapeInner *= u_colorFill.a;
+
+  vec3 color = vec3(0.);
+  color += stroke * u_colorStroke.rgb;
+  color += shapeInner * u_colorFill.rgb;
+  color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;
+
+  float opacity = 0.;
+  opacity += stroke;
+  opacity += shapeInner;
+  opacity += (1. - opacity) * u_colorBack.a;
+
+  fragColor = vec4(color, opacity);
+}
+`;var G={maxColorCount:10},ve=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+uniform float u_scale;
+
+uniform vec4 u_colors[${G.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_stepsPerColor;
+uniform float u_softness;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${h}
+
+float getNoise(vec2 uv, float t) {
+  float noise = .5 * snoise(uv - vec2(0., .3 * t));
+  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));
+
+  return noise;
+}
+
+float steppedSmooth(float m, float steps, float softness) {
+  float stepT = floor(m * steps) / steps;
+  float f = m * steps - floor(m * steps);
+  float fw = steps * fwidth(m);
+  float smoothed = smoothstep(.5 - softness, min(1., .5 + softness + fw), f);
+  return stepT + smoothed / steps;
+}
+
+void main() {
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= .1;
+
+  float t = .2 * u_time;
+
+  float shape = .5 + .5 * getNoise(shape_uv, t);
+
+  bool u_extraSides = true;
+
+  float mixer = shape * (u_colorsCount - 1.);
+  if (u_extraSides == true) {
+    mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
+  }
+
+  float steps = max(1., u_stepsPerColor);
+
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${G.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+
+    float localM = clamp(mixer - float(i - 1), 0., 1.);
+    localM = steppedSmooth(localM, steps, .5 * u_softness);
+
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, localM);
+  }
+
+  if (u_extraSides == true) {
+    if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
+      float localM = mixer + 1.;
+      if (mixer > (u_colorsCount - 1.)) {
+        localM = mixer - (u_colorsCount - 1.);
+      }
+      localM = steppedSmooth(localM, steps, .5 * u_softness);
+      vec4 cFst = u_colors[0];
+      cFst.rgb *= cFst.a;
+      vec4 cLast = u_colors[int(u_colorsCount - 1.)];
+      cLast.rgb *= cLast.a;
+      gradient = mix(cLast, cFst, localM);
+    }
+  }
+
+  vec3 color = gradient.rgb;
+  float opacity = gradient.a;
+
+  ${p}
+
+  fragColor = vec4(color, opacity);
+}
+`,R={maxColorCount:8,maxBallsCount:20},de=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${R.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_size;
+uniform float u_sizeRange;
+uniform float u_count;
+
+in vec2 v_objectUV;
+
+out vec4 fragColor;
+
+${c}
+${_}
+float noise(float x) {
+  float i = floor(x);
+  float f = fract(x);
+  float u = f * f * (3.0 - 2.0 * f);
+  vec2 p0 = vec2(i, 0.0);
+  vec2 p1 = vec2(i + 1.0, 0.0);
+  return mix(randomR(p0), randomR(p1), u);
+}
+
+float getBallShape(vec2 uv, vec2 c, float p) {
+  float s = .5 * length(uv - c);
+  s = 1. - clamp(s, 0., 1.);
+  s = pow(s, p);
+  return s;
+}
+
+void main() {
+  vec2 shape_uv = v_objectUV;
+
+  shape_uv += .5;
+
+  const float firstFrameOffset = 2503.4;
+  float t = .2 * (u_time + firstFrameOffset);
+
+  vec3 totalColor = vec3(0.);
+  float totalShape = 0.;
+  float totalOpacity = 0.;
+
+  for (int i = 0; i < ${R.maxBallsCount}; i++) {
+    if (i >= int(ceil(u_count))) break;
+
+    float idxFract = float(i) / float(${R.maxBallsCount});
+    float angle = TWO_PI * idxFract;
+
+    float speed = 1. - .2 * idxFract;
+    float noiseX = noise(angle * 10. + float(i) + t * speed);
+    float noiseY = noise(angle * 20. + float(i) - t * speed);
+
+    vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);
+
+    int safeIndex = i % int(u_colorsCount + 0.5);
+    vec4 ballColor = u_colors[safeIndex];
+    ballColor.rgb *= ballColor.a;
+
+    float sizeFrac = 1.;
+    if (float(i) > floor(u_count - 1.)) {
+      sizeFrac *= fract(u_count);
+    }
+
+    float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);
+    shape *= pow(u_size, .2);
+    shape = smoothstep(0., 1., shape);
+
+    totalColor += ballColor.rgb * shape;
+    totalShape += shape;
+    totalOpacity += ballColor.a * shape;
+  }
+
+  totalColor /= max(totalShape, 1e-4);
+  totalOpacity /= max(totalShape, 1e-4);
+
+  float edge_width = fwidth(totalShape);
+  float finalShape = smoothstep(.4, .4 + edge_width, totalShape);
+
+  vec3 color = totalColor * finalShape;
+  float opacity = totalOpacity * finalShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
+
+  ${p}
+
+  fragColor = vec4(color, opacity);
+}
+`,ge=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform float u_proportion;
+uniform float u_softness;
+uniform float u_octaveCount;
+uniform float u_persistence;
+uniform float u_lacunarity;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${c}
+${w}
+${g}
+
+float hash31(vec3 p) {
+  p = fract(p * 0.3183099) + 0.1;
+  p += dot(p, p.yzx + 19.19);
+  return fract(p.x * (p.y + p.z));
+}
+
+vec3 gradientPredefined(float hash) {
+  int idx = int(hash * 12.0) % 12;
+
+  if (idx == 0) return vec3(1, 1, 0);
+  if (idx == 1) return vec3(-1, 1, 0);
+  if (idx == 2) return vec3(1, -1, 0);
+  if (idx == 3) return vec3(-1, -1, 0);
+  if (idx == 4) return vec3(1, 0, 1);
+  if (idx == 5) return vec3(-1, 0, 1);
+  if (idx == 6) return vec3(1, 0, -1);
+  if (idx == 7) return vec3(-1, 0, -1);
+  if (idx == 8) return vec3(0, 1, 1);
+  if (idx == 9) return vec3(0, -1, 1);
+  if (idx == 10) return vec3(0, 1, -1);
+  return vec3(0, -1, -1);// idx == 11
+}
+
+float interpolateSafe(float v000, float v001, float v010, float v011,
+float v100, float v101, float v110, float v111, vec3 t) {
+  t = clamp(t, 0.0, 1.0);
+
+  float v00 = mix(v000, v100, t.x);
+  float v01 = mix(v001, v101, t.x);
+  float v10 = mix(v010, v110, t.x);
+  float v11 = mix(v011, v111, t.x);
+
+  float v0 = mix(v00, v10, t.y);
+  float v1 = mix(v01, v11, t.y);
+
+  return mix(v0, v1, t.z);
+}
+
+vec3 fade(vec3 t) {
+  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
+}
+
+float perlinNoise(vec3 position, float seed) {
+  position += vec3(seed * 127.1, seed * 311.7, seed * 74.7);
+
+  vec3 i = floor(position);
+  vec3 f = fract(position);
+  float h000 = hash31(i);
+  float h001 = hash31(i + vec3(0, 0, 1));
+  float h010 = hash31(i + vec3(0, 1, 0));
+  float h011 = hash31(i + vec3(0, 1, 1));
+  float h100 = hash31(i + vec3(1, 0, 0));
+  float h101 = hash31(i + vec3(1, 0, 1));
+  float h110 = hash31(i + vec3(1, 1, 0));
+  float h111 = hash31(i + vec3(1, 1, 1));
+  vec3 g000 = gradientPredefined(h000);
+  vec3 g001 = gradientPredefined(h001);
+  vec3 g010 = gradientPredefined(h010);
+  vec3 g011 = gradientPredefined(h011);
+  vec3 g100 = gradientPredefined(h100);
+  vec3 g101 = gradientPredefined(h101);
+  vec3 g110 = gradientPredefined(h110);
+  vec3 g111 = gradientPredefined(h111);
+  float v000 = dot(g000, f - vec3(0, 0, 0));
+  float v001 = dot(g001, f - vec3(0, 0, 1));
+  float v010 = dot(g010, f - vec3(0, 1, 0));
+  float v011 = dot(g011, f - vec3(0, 1, 1));
+  float v100 = dot(g100, f - vec3(1, 0, 0));
+  float v101 = dot(g101, f - vec3(1, 0, 1));
+  float v110 = dot(g110, f - vec3(1, 1, 0));
+  float v111 = dot(g111, f - vec3(1, 1, 1));
+
+  vec3 u = fade(f);
+  return interpolateSafe(v000, v001, v010, v011, v100, v101, v110, v111, u);
+}
+
+float p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {
+  float value = 0.0;
+  float amplitude = 1.0;
+  float frequency = 10.0;
+  float maxValue = 0.0;
+  octaveCount = clamp(octaveCount, 1, 8);
+
+  for (int i = 0; i < octaveCount; i++) {
+    float seed = float(i) * 0.7319;
+    value += perlinNoise(position * frequency, seed) * amplitude;
+    maxValue += amplitude;
+    amplitude *= persistence;
+    frequency *= lacunarity;
+  }
+  return value;
+}
+
+float get_max_amp(float persistence, float octaveCount) {
+  persistence = clamp(persistence * 0.999, 0.0, 0.999);
+  octaveCount = clamp(octaveCount, 1.0, 8.0);
+
+  if (abs(persistence - 1.0) < 0.001) {
+    return octaveCount;
+  }
+
+  return (1.0 - pow(persistence, octaveCount)) / max(1e-4, (1.0 - persistence));
+}
+
+void main() {
+  vec2 uv = v_patternUV;
+  uv *= .5;
+
+  float t = .2 * u_time;
+
+  vec3 p = vec3(uv, t);
+
+  float octCount = floor(u_octaveCount);
+  float noise = p_noise(p, int(octCount), u_persistence, u_lacunarity);
+
+  float max_amp = get_max_amp(u_persistence, octCount);
+  float noise_normalized = clamp((noise + max_amp) / max(1e-4, (2. * max_amp)) + (u_proportion - .5), 0.0, 1.0);
+  float sharpness = clamp(u_softness, 0., 1.);
+  float smooth_w = 0.5 * max(fwidth(noise_normalized), 0.001);
+  float res = smoothstep(
+  .5 - .5 * sharpness - smooth_w,
+  .5 + .5 * sharpness + smooth_w,
+  noise_normalized
+  );
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+
+  ${p}
+
+  fragColor = vec4(color, opacity);
+}
+`,Q={maxColorCount:5},he=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform float u_scale;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colors[${Q.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_stepsPerColor;
+uniform vec4 u_colorGlow;
+uniform vec4 u_colorGap;
+uniform float u_distortion;
+uniform float u_gap;
+uniform float u_glow;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${c}
+${E}
+
+vec4 voronoi(vec2 x, float t) {
+  vec2 ip = floor(x);
+  vec2 fp = fract(x);
+
+  vec2 mg, mr;
+  float md = 8.;
+  float rand = 0.;
+
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 g = vec2(float(i), float(j));
+      vec2 o = randomGB(ip + g);
+      float raw_hash = o.x;
+      o = .5 + u_distortion * sin(t + TWO_PI * o);
+      vec2 r = g + o - fp;
+      float d = dot(r, r);
+
+      if (d < md) {
+        md = d;
+        mr = r;
+        mg = g;
+        rand = raw_hash;
+      }
+    }
+  }
+
+  md = 8.;
+  for (int j = -2; j <= 2; j++) {
+    for (int i = -2; i <= 2; i++) {
+      vec2 g = mg + vec2(float(i), float(j));
+      vec2 o = randomGB(ip + g);
+      o = .5 + u_distortion * sin(t + TWO_PI * o);
+      vec2 r = g + o - fp;
+      if (dot(mr - r, mr - r) > .00001) {
+        md = min(md, dot(.5 * (mr + r), normalize(r - mr)));
+      }
+    }
+  }
+
+  return vec4(md, mr, rand);
+}
+
+void main() {
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= 1.25;
+
+  float t = u_time;
+
+  vec4 voronoiRes = voronoi(shape_uv, t);
+
+  float shape = clamp(voronoiRes.w, 0., 1.);
+  float mixer = shape * (u_colorsCount - 1.);
+  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
+  float steps = max(1., u_stepsPerColor);
+
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${Q.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+    float localT = clamp(mixer - float(i - 1), 0.0, 1.0);
+    localT = round(localT * steps) / steps;
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, localT);
+  }
+
+  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
+    float localT = mixer + 1.;
+    if (mixer > (u_colorsCount - 1.)) {
+      localT = mixer - (u_colorsCount - 1.);
+    }
+    localT = round(localT * steps) / steps;
+    vec4 cFst = u_colors[0];
+    cFst.rgb *= cFst.a;
+    vec4 cLast = u_colors[int(u_colorsCount - 1.)];
+    cLast.rgb *= cLast.a;
+    gradient = mix(cLast, cFst, localT);
+  }
+
+  vec3 cellColor = gradient.rgb;
+  float cellOpacity = gradient.a;
+
+  float glows = length(voronoiRes.yz * u_glow);
+  glows = pow(glows, 1.5);
+
+  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);
+  float opacity = cellOpacity + u_colorGlow.a * glows;
+
+  float edge = voronoiRes.x;
+  float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);
+  edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);
+
+  color = mix(u_colorGap.rgb * u_colorGap.a, color, edge);
+  opacity = mix(u_colorGap.a, opacity, edge);
+
+  fragColor = vec4(color, opacity);
+}
+`,xe=`#version 300 es
+precision mediump float;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform float u_shape;
+uniform float u_frequency;
+uniform float u_amplitude;
+uniform float u_spacing;
+uniform float u_proportion;
+uniform float u_softness;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${c}
+
+void main() {
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= 4.;
+
+  float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);
+  float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);
+  float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI);
+  float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI));
+
+  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));
+  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));
+  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));
+  offset *= 2. * u_amplitude;
+
+  float spacing = (.001 + u_spacing);
+  float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);
+
+  float aa = .0001 + fwidth(shape);
+  float dc = 1. - clamp(u_proportion, 0., 1.);
+  float e0 = dc - u_softness - aa;
+  float e1 = dc + u_softness + aa;
+  float res = smoothstep(min(e0, e1), max(e0, e1), shape);
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`,N={maxColorCount:10},_e=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+uniform float u_scale;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colors[${N.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_proportion;
+uniform float u_softness;
+uniform float u_shape;
+uniform float u_shapeScale;
+uniform float u_distortion;
+uniform float u_swirl;
+uniform float u_swirlIterations;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${c}
+${f}
+float randomG(vec2 p) {
+  vec2 uv = floor(p) / 100. + .5;
+  return texture(u_noiseTexture, fract(uv)).g;
+}
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomG(i);
+  float b = randomG(i + vec2(1.0, 0.0));
+  float c = randomG(i + vec2(0.0, 1.0));
+  float d = randomG(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+
+void main() {
+  vec2 uv = v_patternUV;
+  uv *= .5;
+
+  const float firstFrameOffset = 118.;
+  float t = 0.0625 * (u_time + firstFrameOffset);
+
+  float n1 = valueNoise(uv * 1. + t);
+  float n2 = valueNoise(uv * 2. - t);
+  float angle = n1 * TWO_PI;
+  uv.x += 4. * u_distortion * n2 * cos(angle);
+  uv.y += 4. * u_distortion * n2 * sin(angle);
+
+  float swirl = u_swirl;
+  for (int i = 1; i <= 20; i++) {
+    if (i >= int(u_swirlIterations)) break;
+    float iFloat = float(i);
+    //    swirl *= (1. - smoothstep(.0, .25, length(fwidth(uv))));
+    uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);
+    uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x);
+  }
+
+  float proportion = clamp(u_proportion, 0., 1.);
+
+  float shape = 0.;
+  if (u_shape < .5) {
+    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);
+    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);
+    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
+  } else if (u_shape < 1.5) {
+    vec2 stripesShape_uv = uv * (2. * u_shapeScale);
+    float f = fract(stripesShape_uv.y);
+    shape = smoothstep(.0, .55, f) * (1.0 - smoothstep(.45, 1., f));
+    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
+  } else {
+    float shapeScaling = 5. * (1. - u_shapeScale);
+    float e0 = 0.45 - shapeScaling;
+    float e1 = 0.55 + shapeScaling;
+    shape = smoothstep(min(e0, e1), max(e0, e1), 1.0 - uv.y + 0.3 * (proportion - 0.5));
+  }
+
+  float mixer = shape * (u_colorsCount - 1.);
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  float aa = fwidth(shape);
+  for (int i = 1; i < ${N.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+    float m = clamp(mixer - float(i - 1), 0.0, 1.0);
+
+    float localMixerStart = floor(m);
+    float softness = .5 * u_softness + fwidth(m);
+    float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart);
+    float stepped = localMixerStart + smoothed;
+
+    m = mix(stepped, m, u_softness);
+
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, m);
+  }
+
+  vec3 color = gradient.rgb;
+  float opacity = gradient.a;
+
+  ${p}
+
+  fragColor = vec4(color, opacity);
+}
+`;var P={maxColorCount:5},ye=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorBloom;
+uniform vec4 u_colors[${P.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_density;
+uniform float u_spotty;
+uniform float u_midSize;
+uniform float u_midIntensity;
+uniform float u_intensity;
+uniform float u_bloom;
+
+in vec2 v_objectUV;
+
+out vec4 fragColor;
+
+${c}
+${f}
+${_}
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomR(i);
+  float b = randomR(i + vec2(1.0, 0.0));
+  float c = randomR(i + vec2(0.0, 1.0));
+  float d = randomR(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+${w}
+
+float raysShape(vec2 uv, float r, float freq, float intensity, float radius) {
+  float a = atan(uv.y, uv.x);
+  vec2 left = vec2(a * freq, r);
+  vec2 right = vec2(fract(a / TWO_PI) * TWO_PI * freq, r);
+  float n_left = pow(valueNoise(left), intensity);
+  float n_right = pow(valueNoise(right), intensity);
+  float shape = mix(n_right, n_left, smoothstep(-.15, .15, uv.x));
+  return shape;
+}
+
+void main() {
+  vec2 shape_uv = v_objectUV;
+
+  float t = .2 * u_time;
+
+  float radius = length(shape_uv);
+  float spots = 6.5 * abs(u_spotty);
+
+  float intensity = 4. - 3. * clamp(u_intensity, 0., 1.);
+
+  float delta = 1. - smoothstep(0., 1., radius);
+
+  float midSize = 10. * abs(u_midSize);
+  float ms_lo = 0.02 * midSize;
+  float ms_hi = max(midSize, 1e-6);
+  float middleShape = pow(u_midIntensity, 0.3) * (1. - smoothstep(ms_lo, ms_hi, 3.0 * radius));
+  middleShape = pow(middleShape, 5.0);
+
+  vec3 accumColor = vec3(0.0);
+  float accumAlpha = 0.0;
+
+  for (int i = 0; i < ${P.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+
+    vec2 rotatedUV = rotate(shape_uv, float(i) + 1.0);
+
+    float r1 = radius * (1.0 + 0.4 * float(i)) - 3.0 * t;
+    float r2 = 0.5 * radius * (1.0 + spots) - 2.0 * t;
+    float density = 6. * u_density + step(.5, u_density) * pow(4.5 * (u_density - .5), 4.);
+    float f = mix(1.0, 3.0 + 0.5 * float(i), hash11(float(i) * 15.)) * density;
+
+    float ray = raysShape(rotatedUV, r1, 5.0 * f, intensity, radius);
+    ray *= raysShape(rotatedUV, r2, 4.0 * f, intensity, radius);
+    ray += (1. + 4. * ray) * middleShape;
+    ray = clamp(ray, 0.0, 1.0);
+
+    float srcAlpha = u_colors[i].a * ray;
+    vec3 srcColor = u_colors[i].rgb * srcAlpha;
+
+    vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * srcColor;
+    float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * srcAlpha;
+
+    vec3 addBlendColor = accumColor + srcColor;
+    float addBlendAlpha = accumAlpha + srcAlpha;
+
+    accumColor = mix(alphaBlendColor, addBlendColor, u_bloom);
+    accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_bloom);
+  }
+
+  float overlayAlpha = u_colorBloom.a;
+  vec3 overlayColor = u_colorBloom.rgb * overlayAlpha;
+
+  vec3 colorWithOverlay = accumColor + accumAlpha * overlayColor;
+  accumColor = mix(accumColor, colorWithOverlay, u_bloom);
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+
+  vec3 color = accumColor + (1. - accumAlpha) * bgColor;
+  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;
+  color = clamp(color, 0., 1.);
+  opacity = clamp(opacity, 0., 1.);
+
+  ${p}
+
+  fragColor = vec4(color, opacity);
+}
+`,Ae=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorFront;
+uniform float u_density;
+uniform float u_distortion;
+uniform float u_strokeWidth;
+uniform float u_strokeCap;
+uniform float u_strokeTaper;
+uniform float u_noise;
+uniform float u_noiseFrequency;
+uniform float u_softness;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${c}
+${h}
+
+void main() {
+  vec2 uv = 2. * v_patternUV;
+
+  float t = u_time;
+  float l = length(uv);
+  float density = clamp(u_density, 0., 1.);
+  l = pow(max(l, 1e-6), density);
+  float angle = atan(uv.y, uv.x) - t;
+  float angleNormalised = angle / TWO_PI;
+
+  angleNormalised += .125 * u_noise * snoise(16. * pow(u_noiseFrequency, 3.) * uv);
+
+  float offset = l + angleNormalised;
+  offset -= u_distortion * (sin(4. * l - .5 * t) * cos(PI + l + .5 * t));
+  float stripe = fract(offset);
+
+  float shape = 2. * abs(stripe - .5);
+  float width = 1. - clamp(u_strokeWidth, .005 * u_strokeTaper, 1.);
+
+
+  float wCap = mix(width, (1. - stripe) * (1. - step(.5, stripe)), (1. - clamp(l, 0., 1.)));
+  width = mix(width, wCap, u_strokeCap);
+  width *= (1. - clamp(u_strokeTaper, 0., 1.) * l);
+
+  float fw = fwidth(offset);
+  float fwMult = 4. - 3. * (smoothstep(.05, .4, 2. * u_strokeWidth) * smoothstep(.05, .4, 2. * (1. - u_strokeWidth)));
+  float pixelSize = mix(fwMult * fw, fwidth(shape), clamp(fw, 0., 1.));
+  pixelSize = mix(pixelSize, .002, u_strokeCap * (1. - clamp(l, 0., 1.)));
+
+  float res = smoothstep(width - pixelSize - u_softness, width + pixelSize + u_softness, shape);
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+
+  ${p}
+
+  fragColor = vec4(color, opacity);
+}
+`,W={maxColorCount:10},be=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${W.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_bandCount;
+uniform float u_twist;
+uniform float u_center;
+uniform float u_proportion;
+uniform float u_softness;
+uniform float u_noise;
+uniform float u_noiseFrequency;
+
+in vec2 v_objectUV;
+
+out vec4 fragColor;
+
+${c}
+${h}
+${f}
+
+void main() {
+  vec2 shape_uv = v_objectUV;
+
+  float l = length(shape_uv);
+  l = max(1e-4, l);
+
+  float t = u_time;
+
+  float angle = ceil(u_bandCount) * atan(shape_uv.y, shape_uv.x) + t;
+  float angle_norm = angle / TWO_PI;
+
+  float twist = 3. * clamp(u_twist, 0., 1.);
+  float offset = pow(l, -twist) + angle_norm;
+
+  float shape = fract(offset);
+  shape = 1. - abs(2. * shape - 1.);
+  shape += u_noise * snoise(15. * pow(u_noiseFrequency, 2.) * shape_uv);
+
+  float mid = smoothstep(.2, .2 + .8 * u_center, pow(l, twist));
+  shape = mix(0., shape, mid);
+
+  float proportion = clamp(u_proportion, 0., 1.);
+  float exponent = mix(.25, 1., proportion * 2.);
+  exponent = mix(exponent, 10., max(0., proportion * 2. - 1.));
+  shape = pow(shape, exponent);
+
+  float mixer = shape * u_colorsCount;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+
+  float outerShape = 0.;
+  for (int i = 1; i < ${W.maxColorCount+1}; i++) {
+    if (i > int(u_colorsCount)) break;
+
+    float m = clamp(mixer - float(i - 1), 0., 1.);
+    float aa = fwidth(m);
+    m = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, m);
+
+    if (i == 1) {
+      outerShape = m;
+    }
+
+    vec4 c = u_colors[i - 1];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, m);
+  }
+
+  float midAA = .1 * fwidth(pow(l, -twist));
+  float outerMid = smoothstep(.2, .2 + midAA, pow(l, twist));
+  outerShape = mix(0., outerShape, outerMid);
+
+  vec3 color = gradient.rgb * outerShape;
+  float opacity = gradient.a * outerShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  ${p}
+
+  fragColor = vec4(color, opacity);
+}
+`,J=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+uniform float u_originX;
+uniform float u_originY;
+uniform float u_worldWidth;
+uniform float u_worldHeight;
+uniform float u_fit;
+uniform float u_scale;
+uniform float u_rotation;
+uniform float u_offsetX;
+uniform float u_offsetY;
+
+uniform float u_pxSize;
+uniform vec4 u_colorBack;
+uniform vec4 u_colorFront;
+uniform float u_shape;
+uniform float u_type;
+
+out vec4 fragColor;
+
+${h}
+${c}
+${w}
+${g}
+
+float getSimplexNoise(vec2 uv, float t) {
+  float noise = .5 * snoise(uv - vec2(0., .3 * t));
+  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));
+
+  return noise;
+}
+
+const int bayer2x2[4] = int[4](0, 2, 3, 1);
+const int bayer4x4[16] = int[16](
+0, 8, 2, 10,
+12, 4, 14, 6,
+3, 11, 1, 9,
+15, 7, 13, 5
+);
+
+const int bayer8x8[64] = int[64](
+0, 32, 8, 40, 2, 34, 10, 42,
+48, 16, 56, 24, 50, 18, 58, 26,
+12, 44, 4, 36, 14, 46, 6, 38,
+60, 28, 52, 20, 62, 30, 54, 22,
+3, 35, 11, 43, 1, 33, 9, 41,
+51, 19, 59, 27, 49, 17, 57, 25,
+15, 47, 7, 39, 13, 45, 5, 37,
+63, 31, 55, 23, 61, 29, 53, 21
+);
+
+float getBayerValue(vec2 uv, int size) {
+  ivec2 pos = ivec2(fract(uv / float(size)) * float(size));
+  int index = pos.y * size + pos.x;
+
+  if (size == 2) {
+    return float(bayer2x2[index]) / 4.0;
+  } else if (size == 4) {
+    return float(bayer4x4[index]) / 16.0;
+  } else if (size == 8) {
+    return float(bayer8x8[index]) / 64.0;
+  }
+  return 0.0;
+}
+
+
+void main() {
+  float t = .5 * u_time;
+
+  float pxSize = u_pxSize * u_pixelRatio;
+  vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution;
+  pxSizeUV /= pxSize;
+  vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;
+  vec2 normalizedUV = canvasPixelizedUV / u_resolution;
+
+  vec2 ditheringNoiseUV = canvasPixelizedUV;
+  vec2 shapeUV = normalizedUV;
+
+  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
+  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
+  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
+  float r = u_rotation * PI / 180.;
+  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
+  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
+  vec2 boxSize = vec2(
+  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  );
+  
+  if (u_shape > 3.5) {
+    vec2 objectBoxSize = vec2(0.);
+    // fit = none
+    objectBoxSize.x = min(boxSize.x, boxSize.y);
+    if (u_fit == 1.) { // fit = contain
+      objectBoxSize.x = min(u_resolution.x, u_resolution.y);
+    } else if (u_fit == 2.) { // fit = cover
+      objectBoxSize.x = max(u_resolution.x, u_resolution.y);
+    }
+    objectBoxSize.y = objectBoxSize.x;
+    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;
+
+    shapeUV *= objectWorldScale;
+    shapeUV += boxOrigin * (objectWorldScale - 1.);
+    shapeUV += vec2(-u_offsetX, u_offsetY);
+    shapeUV /= u_scale;
+    shapeUV = graphicRotation * shapeUV;
+  } else {
+    vec2 patternBoxSize = vec2(0.);
+    // fit = none
+    patternBoxSize.x = patternBoxRatio * min(boxSize.x / patternBoxRatio, boxSize.y);
+    float patternWorldNoFitBoxWidth = patternBoxSize.x;
+    if (u_fit == 1.) { // fit = contain
+      patternBoxSize.x = patternBoxRatio * min(u_resolution.x / patternBoxRatio, u_resolution.y);
+    } else if (u_fit == 2.) { // fit = cover
+      patternBoxSize.x = patternBoxRatio * max(u_resolution.x / patternBoxRatio, u_resolution.y);
+    }
+    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;
+    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;
+
+    shapeUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;
+    shapeUV += boxOrigin;
+    shapeUV -= boxOrigin / patternWorldScale;
+    shapeUV *= u_resolution.xy;
+    shapeUV /= u_pixelRatio;
+    if (u_fit > 0.) {
+      shapeUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);
+    }
+    shapeUV /= u_scale;
+    shapeUV = graphicRotation * shapeUV;
+    shapeUV += boxOrigin / patternWorldScale;
+    shapeUV -= boxOrigin;
+    shapeUV += .5;
+  }
+
+  float shape = 0.;
+  if (u_shape < 1.5) {
+    // Simplex noise
+    shapeUV *= .001;
+
+    shape = 0.5 + 0.5 * getSimplexNoise(shapeUV, t);
+    shape = smoothstep(0.3, 0.9, shape);
+
+  } else if (u_shape < 2.5) {
+    // Warp
+    shapeUV *= .003;
+
+    for (float i = 1.0; i < 6.0; i++) {
+      shapeUV.x += 0.6 / i * cos(i * 2.5 * shapeUV.y + t);
+      shapeUV.y += 0.6 / i * cos(i * 1.5 * shapeUV.x + t);
+    }
+
+    shape = .15 / max(0.001, abs(sin(t - shapeUV.y - shapeUV.x)));
+    shape = smoothstep(0.02, 1., shape);
+
+  } else if (u_shape < 3.5) {
+    // Dots
+    shapeUV *= .05;
+
+    float stripeIdx = floor(2. * shapeUV.x / TWO_PI);
+    float rand = hash11(stripeIdx * 10.);
+    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);
+    shape = sin(shapeUV.x) * cos(shapeUV.y - 5. * rand * t);
+    shape = pow(abs(shape), 6.);
+
+  } else if (u_shape < 4.5) {
+    // Sine wave
+    shapeUV *= 4.;
+
+    float wave = cos(.5 * shapeUV.x - 2. * t) * sin(1.5 * shapeUV.x + t) * (.75 + .25 * cos(3. * t));
+    shape = 1. - smoothstep(-1., 1., shapeUV.y + wave);
+
+  } else if (u_shape < 5.5) {
+    // Ripple
+
+    float dist = length(shapeUV);
+    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;
+    shape = waves;
+
+  } else if (u_shape < 6.5) {
+    // Swirl
+
+    float l = length(shapeUV);
+    float angle = 6. * atan(shapeUV.y, shapeUV.x) + 4. * t;
+    float twist = 1.2;
+    float offset = 1. / pow(max(l, 1e-6), twist) + angle / TWO_PI;
+    float mid = smoothstep(0., 1., pow(l, twist));
+    shape = mix(0., fract(offset), mid);
+
+  } else {
+    // Sphere
+    shapeUV *= 2.;
+
+    float d = 1. - pow(length(shapeUV), 2.);
+    vec3 pos = vec3(shapeUV, sqrt(max(0., d)));
+    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
+    shape = .5 + .5 * dot(lightPos, pos);
+    shape *= step(0., d);
+  }
+
+
+  int type = int(floor(u_type));
+  float dithering = 0.0;
+
+  switch (type) {
+    case 1: {
+      dithering = step(hash21(ditheringNoiseUV), shape);
+    } break;
+    case 2:
+    dithering = getBayerValue(pxSizeUV, 2);
+    break;
+    case 3:
+    dithering = getBayerValue(pxSizeUV, 4);
+    break;
+    default :
+    dithering = getBayerValue(pxSizeUV, 8);
+    break;
+  }
+
+  dithering -= .5;
+  float res = step(.5, shape + dithering);
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`,B={simplex:1,warp:2,dots:3,wave:4,ripple:5,swirl:6,sphere:7},S={random:1,"2x2":2,"4x4":3,"8x8":4},Y={maxColorCount:7},Ce=`#version 300 es
+precision lowp float;
+
+uniform mediump float u_time;
+uniform mediump vec2 u_resolution;
+uniform mediump float u_pixelRatio;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${Y.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_softness;
+uniform float u_intensity;
+uniform float u_noise;
+uniform float u_shape;
+
+uniform mediump float u_originX;
+uniform mediump float u_originY;
+uniform mediump float u_worldWidth;
+uniform mediump float u_worldHeight;
+uniform mediump float u_fit;
+
+uniform mediump float u_scale;
+uniform mediump float u_rotation;
+uniform mediump float u_offsetX;
+uniform mediump float u_offsetY;
+
+in vec2 v_objectUV;
+in vec2 v_patternUV;
+in vec2 v_objectBoxSize;
+in vec2 v_patternBoxSize;
+
+out vec4 fragColor;
+
+${c}
+${h}
+${f}
+${_}
+
+float valueNoiseR(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomR(i);
+  float b = randomR(i + vec2(1.0, 0.0));
+  float c = randomR(i + vec2(0.0, 1.0));
+  float d = randomR(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+vec4 fbmR(vec2 n0, vec2 n1, vec2 n2, vec2 n3) {
+  float amplitude = 0.2;
+  vec4 total = vec4(0.);
+  for (int i = 0; i < 3; i++) {
+    n0 = rotate(n0, 0.3);
+    n1 = rotate(n1, 0.3);
+    n2 = rotate(n2, 0.3);
+    n3 = rotate(n3, 0.3);
+    total.x += valueNoiseR(n0) * amplitude;
+    total.y += valueNoiseR(n1) * amplitude;
+    total.z += valueNoiseR(n2) * amplitude;
+    total.z += valueNoiseR(n3) * amplitude;
+    n0 *= 1.99;
+    n1 *= 1.99;
+    n2 *= 1.99;
+    n3 *= 1.99;
+    amplitude *= 0.6;
+  }
+  return total;
+}
+
+${w}
+
+vec2 truchet(vec2 uv, float idx){
+  idx = fract(((idx - .5) * 2.));
+  if (idx > 0.75) {
+    uv = vec2(1.0) - uv;
+  } else if (idx > 0.5) {
+    uv = vec2(1.0 - uv.x, uv.y);
+  } else if (idx > 0.25) {
+    uv = 1.0 - vec2(1.0 - uv.x, uv.y);
+  }
+  return uv;
+}
+
+void main() {
+
+  const float firstFrameOffset = 7.;
+  float t = .1 * (u_time + firstFrameOffset);
+
+  vec2 shape_uv = vec2(0.);
+  vec2 grain_uv = vec2(0.);
+
+  float r = u_rotation * PI / 180.;
+  float cr = cos(r);
+  float sr = sin(r);
+  mat2 graphicRotation = mat2(cr, sr, -sr, cr);
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
+  if (u_shape > 3.5) {
+    shape_uv = v_objectUV;
+    grain_uv = shape_uv;
+
+    // apply inverse transform to grain_uv so it respects the originXY
+    grain_uv = transpose(graphicRotation) * grain_uv;
+    grain_uv *= u_scale;
+    grain_uv -= graphicOffset;
+    grain_uv *= v_objectBoxSize;
+    grain_uv *= .7;
+  } else {
+    shape_uv = .5 * v_patternUV;
+    grain_uv = 100. * v_patternUV;
+
+    // apply inverse transform to grain_uv so it respects the originXY
+    grain_uv = transpose(graphicRotation) * grain_uv;
+    grain_uv *= u_scale;
+    if (u_fit > 0.) {
+      vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
+      givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
+      float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
+      vec2 patternBoxGivenSize = vec2(
+      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+      );
+      patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;
+      float patternBoxNoFitBoxWidth = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);
+      grain_uv /= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);
+    }
+    vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;
+    grain_uv -= graphicOffset / patternBoxScale;
+    grain_uv *= 1.6;
+  }
+
+
+  float shape = 0.;
+
+  if (u_shape < 1.5) {
+    // Sine wave
+
+    float wave = cos(.5 * shape_uv.x - 4. * t) * sin(1.5 * shape_uv.x + 2. * t) * (.75 + .25 * cos(6. * t));
+    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);
+
+  } else if (u_shape < 2.5) {
+    // Grid (dots)
+
+    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);
+    float rand = hash11(stripeIdx * 100.);
+    rand = sign(rand - .5) * pow(4. * abs(rand), .3);
+    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);
+    shape = pow(abs(shape), 4.);
+
+  } else if (u_shape < 3.5) {
+    // Truchet pattern
+
+    float n2 = valueNoiseR(shape_uv * .4 - 3.75 * t);
+    shape_uv.x += 10.;
+    shape_uv *= .6;
+
+    vec2 tile = truchet(fract(shape_uv), randomR(floor(shape_uv)));
+
+    float distance1 = length(tile);
+    float distance2 = length(tile - vec2(1.));
+
+    n2 -= .5;
+    n2 *= .1;
+    shape = smoothstep(.2, .55, distance1 + n2) * (1. - smoothstep(.45, .8, distance1 - n2));
+    shape += smoothstep(.2, .55, distance2 + n2) * (1. - smoothstep(.45, .8, distance2 - n2));
+
+    shape = pow(shape, 1.5);
+
+  } else if (u_shape < 4.5) {
+    // Corners
+
+    shape_uv *= .6;
+    vec2 outer = vec2(.5);
+
+    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * sin(5.25 * t)));
+    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);
+    shape = 1. - bl.x * bl.y * tr.x * tr.y;
+
+    shape_uv = -shape_uv;
+    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * cos(5.25 * t)));
+    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);
+    shape -= bl.x * bl.y * tr.x * tr.y;
+
+    shape = 1. - smoothstep(0., 1., shape);
+
+  } else if (u_shape < 5.5) {
+    // Ripple
+
+    shape_uv *= 2.;
+    float dist = length(.4 * shape_uv);
+    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;
+    shape = waves;
+
+  } else if (u_shape < 6.5) {
+    // Blob
+
+    t *= 2.;
+
+    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));
+    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));
+    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));
+    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));
+
+    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);
+    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);
+    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);
+    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);
+
+    shape = smoothstep(.0, .9, shape);
+    float edge = smoothstep(.25, .3, shape);
+    shape = mix(.0, shape, edge);
+
+  } else {
+    // Sphere
+
+    shape_uv *= 2.;
+    float d = 1. - pow(length(shape_uv), 2.);
+    vec3 pos = vec3(shape_uv, sqrt(max(d, 0.)));
+    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
+    shape = .5 + .5 * dot(lightPos, pos);
+    shape *= step(0., d);
+  }
+
+  float baseNoise = snoise(grain_uv * .5);
+  vec4 fbmVals = fbmR(
+  .002 * grain_uv + 10.,
+  .003 * grain_uv,
+  .001 * grain_uv,
+  rotate(.4 * grain_uv, 2.)
+  );
+  float grainDist = baseNoise * snoise(grain_uv * .2) - fbmVals.x - fbmVals.y;
+  float rawNoise = .75 * baseNoise - fbmVals.w - fbmVals.z;
+  float noise = clamp(rawNoise, 0., 1.);
+
+  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);
+  shape += u_noise * 10. / u_colorsCount * noise;
+
+  float aa = fwidth(shape);
+
+  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);
+  float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));
+  float mixer = shape * (u_colorsCount - 1.);
+
+  int cntStop = int(u_colorsCount) - 1;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${Y.maxColorCount}; i++) {
+    if (i > cntStop) break;
+
+    float localT = clamp(mixer - float(i - 1), 0., 1.);
+    localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);
+
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, localT);
+  }
+
+  vec3 color = gradient.rgb * totalShape;
+  float opacity = gradient.a * totalShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;var I={maxColorCount:5,maxSpots:4},we=`#version 300 es
+precision lowp float;
+
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${I.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_roundness;
+uniform float u_thickness;
+uniform float u_marginLeft;
+uniform float u_marginRight;
+uniform float u_marginTop;
+uniform float u_marginBottom;
+uniform float u_aspectRatio;
+uniform float u_softness;
+uniform float u_intensity;
+uniform float u_bloom;
+uniform float u_spotSize;
+uniform float u_spots;
+uniform float u_pulse;
+uniform float u_smoke;
+uniform float u_smokeSize;
+
+uniform sampler2D u_noiseTexture;
+
+in vec2 v_responsiveUV;
+in vec2 v_responsiveBoxGivenSize;
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${c}
+
+float beat(float time) {
+  float first = pow(abs(sin(time * TWO_PI)), 10.);
+  float second = pow(abs(sin((time - .15) * TWO_PI)), 10.);
+
+  return clamp(first + 0.6 * second, 0.0, 1.0);
+}
+
+float sst(float edge0, float edge1, float x) {
+  return smoothstep(edge0, edge1, x);
+}
+
+float roundedBox(vec2 uv, vec2 halfSize, float distance, float cornerDistance, float thickness, float softness) {
+  float borderDistance = abs(distance);
+  float aa = 2. * fwidth(distance);
+  float border = 1. - sst(min(mix(thickness, -thickness, softness), thickness + aa), max(mix(thickness, -thickness, softness), thickness + aa), borderDistance);
+  float cornerFadeCircles = 0.;
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv + halfSize) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(-halfSize.x, halfSize.y)) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(halfSize.x, -halfSize.y)) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - halfSize) / thickness)));
+  aa = fwidth(cornerDistance);
+  float cornerFade = sst(0., mix(aa, thickness, softness), cornerDistance);
+  cornerFade *= cornerFadeCircles;
+  border += cornerFade;
+  return border;
+}
+
+${E}
+
+float randomG(vec2 p) {
+  vec2 uv = floor(p) / 100. + .5;
+  return texture(u_noiseTexture, fract(uv)).g;
+}
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomG(i);
+  float b = randomG(i + vec2(1.0, 0.0));
+  float c = randomG(i + vec2(0.0, 1.0));
+  float d = randomG(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+void main() {
+  const float firstFrameOffset = 109.;
+  float t = 1.2 * (u_time + firstFrameOffset);
+
+  vec2 borderUV = v_responsiveUV;
+  float pulse = u_pulse * beat(.18 * u_time);
+
+  float canvasRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
+  vec2 halfSize = vec2(.5);
+  borderUV.x *= max(canvasRatio, 1.);
+  borderUV.y /= min(canvasRatio, 1.);
+  halfSize.x *= max(canvasRatio, 1.);
+  halfSize.y /= min(canvasRatio, 1.);
+
+  float mL = u_marginLeft;
+  float mR = u_marginRight;
+  float mT = u_marginTop;
+  float mB = u_marginBottom;
+  float mX = mL + mR;
+  float mY = mT + mB;
+
+  if (u_aspectRatio > 0.) {
+    float shapeRatio = canvasRatio * (1. - mX) / max(1. - mY, 1e-6);
+    float freeX = shapeRatio > 1. ? (1. - mX) * (1. - 1. / max(abs(shapeRatio), 1e-6)) : 0.;
+    float freeY = shapeRatio < 1. ? (1. - mY) * (1. - shapeRatio) : 0.;
+    mL += freeX * 0.5;
+    mR += freeX * 0.5;
+    mT += freeY * 0.5;
+    mB += freeY * 0.5;
+    mX = mL + mR;
+    mY = mT + mB;
+  }
+
+  float thickness = .5 * u_thickness * min(halfSize.x, halfSize.y);
+
+  halfSize.x *= (1. - mX);
+  halfSize.y *= (1. - mY);
+
+  vec2 centerShift = vec2(
+  (mL - mR) * max(canvasRatio, 1.) * 0.5,
+  (mB - mT) / min(canvasRatio, 1.) * 0.5
+  );
+
+  borderUV -= centerShift;
+  halfSize -= mix(thickness, 0., u_softness);
+
+  float radius = mix(0., min(halfSize.x, halfSize.y), u_roundness);
+  vec2 d = abs(borderUV) - halfSize + radius;
+  float outsideDistance = length(max(d, .0001)) - radius;
+  float insideDistance = min(max(d.x, d.y), .0001);
+  float cornerDistance = abs(min(max(d.x, d.y) - .45 * radius, .0));
+  float distance = outsideDistance + insideDistance;
+
+  float borderThickness = mix(thickness, 3. * thickness, u_softness);
+  float border = roundedBox(borderUV, halfSize, distance, cornerDistance, borderThickness, u_softness);
+  border = pow(border, 1. + u_softness);
+
+  vec2 smokeUV = .3 * u_smokeSize * v_patternUV;
+  float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);
+  smoke -= valueNoise(3.4 * smokeUV - .5 * t);
+  float smokeThickness = thickness + .2;
+  smokeThickness = min(.4, max(smokeThickness, .1));
+  smoke *= roundedBox(borderUV, halfSize, distance, cornerDistance, smokeThickness, 1.);
+  smoke = 30. * smoke * smoke;
+  smoke *= mix(0., .5, pow(u_smoke, 2.));
+  smoke *= mix(1., pulse, u_pulse);
+  smoke = clamp(smoke, 0., 1.);
+  border += smoke;
+
+  border = clamp(border, 0., 1.);
+
+  vec3 blendColor = vec3(0.);
+  float blendAlpha = 0.;
+  vec3 addColor = vec3(0.);
+  float addAlpha = 0.;
+
+  float bloom = 4. * u_bloom;
+  float intensity = 1. + (1. + 4. * u_softness) * u_intensity;
+
+  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;
+
+  for (int colorIdx = 0; colorIdx < ${I.maxColorCount}; colorIdx++) {
+    if (colorIdx >= int(u_colorsCount)) break;
+    float colorIdxF = float(colorIdx);
+
+    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;
+    float a = u_colors[colorIdx].a;
+
+    for (int spotIdx = 0; spotIdx < ${I.maxSpots}; spotIdx++) {
+      if (spotIdx >= int(u_spots)) break;
+      float spotIdxF = float(spotIdx);
+
+      vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));
+
+      float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;
+      time *= mix(1., -1., step(.5, randVal.y));
+
+      float mask = .5 + .5 * mix(
+      sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),
+      cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),
+      step(mod(colorIdxF, 2.), .5)
+      );
+
+      float p = clamp(2. * u_pulse - randVal.x, 0., 1.);
+      mask = mix(mask, pulse, p);
+
+      float atg1 = fract(angle + time);
+      float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;
+      spotSize = mix(spotSize, .1, p);
+      float sector = sst(.5 - spotSize, .5, atg1) * (1. - sst(.5, .5 + spotSize, atg1));
+
+      sector *= mask;
+      sector *= border;
+      sector *= intensity;
+      sector = clamp(sector, 0., 1.);
+
+      vec3 srcColor = c * sector;
+      float srcAlpha = a * sector;
+
+      blendColor += ((1. - blendAlpha) * srcColor);
+      blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;
+      addColor += srcColor;
+      addAlpha += srcAlpha;
+    }
+  }
+
+  vec3 accumColor = mix(blendColor, addColor, bloom);
+  float accumAlpha = mix(blendAlpha, addAlpha, bloom);
+  accumAlpha = clamp(accumAlpha, 0., 1.);
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  vec3 color = accumColor + (1. - accumAlpha) * bgColor;
+  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;
+
+  ${p}
+
+  fragColor = vec4(color, opacity);
+}`;var F={maxColorCount:7},Be=`#version 300 es
+precision lowp float;
+
+uniform float u_time;
+uniform mediump float u_scale;
+
+uniform vec4 u_colors[${F.maxColorCount}];
+uniform float u_colorsCount;
+uniform vec4 u_colorBack;
+uniform float u_density;
+uniform float u_angle1;
+uniform float u_angle2;
+uniform float u_length;
+uniform bool u_edges;
+uniform float u_blur;
+uniform float u_fadeIn;
+uniform float u_fadeOut;
+uniform float u_gradient;
+
+in vec2 v_objectUV;
+
+out vec4 fragColor;
+
+${c}
+
+const float zLimit = .5;
+
+vec2 getPanel(float angle, vec2 uv, float invLength, float aa) {
+  float sinA = sin(angle);
+  float cosA = cos(angle);
+
+  float denom = sinA - uv.y * cosA;
+  if (abs(denom) < .01) return vec2(0.);
+
+  float z = uv.y / denom;
+
+  if (z <= 0. || z > zLimit) return vec2(0.);
+
+  float zRatio = z / zLimit;
+  float panelMap = 1. - zRatio;
+  float x = uv.x * (cosA * z + 1.) * invLength;
+
+  float zOffset = zRatio - .5;
+  float left = -.5 + zOffset * u_angle1;
+  float right = .5 - zOffset * u_angle2;
+  float blurX = aa + 2. * panelMap * u_blur;
+
+  float leftEdge1 = left - blurX;
+  float leftEdge2 = left + .25 * blurX;
+  float rightEdge1 = right - .25 * blurX;
+  float rightEdge2 = right + blurX;
+
+  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));
+  panel *= mix(0., panel, smoothstep(0., .01 / max(u_scale, 1e-6), panelMap));
+
+  float midScreen = abs(sinA);
+  if (u_edges == true) {
+    panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));
+  } else if (midScreen < .07) {
+    panel *= (midScreen * 15.);
+  }
+
+  return vec2(panel, panelMap);
+}
+
+vec4 blendColor(vec4 colorA, float panelMask, float panelMap) {
+  float fade = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap);
+
+  fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);
+
+  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);
+  float blendedAlpha = mix(0., colorA.a, fade);
+
+  return vec4(blendedRGB, blendedAlpha) * panelMask;
+}
+
+void main() {
+  vec2 uv = v_objectUV;
+  uv *= 1.25;
+
+  float t = .02 * u_time;
+  t = fract(t);
+  bool reverseTime = (t < 0.5);
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+
+  float aa = .005 / u_scale;
+  int colorsCount = int(u_colorsCount);
+
+  vec4 premultipliedColors[${F.maxColorCount}];
+  for (int i = 0; i < ${F.maxColorCount}; i++) {
+    if (i >= colorsCount) break;
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    premultipliedColors[i] = c;
+  }
+
+  float invLength = 1.5 / max(u_length, .001);
+
+  float totalColorWeight = 0.;
+  int panelsNumber = 12;
+
+  float densityNormalizer = 1.;
+  if (colorsCount == 4) {
+    panelsNumber = 16;
+    densityNormalizer = 1.34;
+  } else if (colorsCount == 5) {
+    panelsNumber = 20;
+    densityNormalizer = 1.67;
+  } else if (colorsCount == 7) {
+    panelsNumber = 14;
+    densityNormalizer = 1.17;
+  }
+
+  float fPanelsNumber = float(panelsNumber);
+
+  float totalPanelsShape = 0.;
+  float panelGrad = 1. - clamp(u_gradient, 0., 1.);
+
+  for (int set = 0; set < 2; set++) {
+    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);
+    if (!isForward) continue;
+
+    for (int i = 0; i <= 20; i++) {
+      if (i >= panelsNumber) break;
+
+      int idx = panelsNumber - 1 - i;
+
+      float offset = float(idx) / fPanelsNumber;
+      if (set == 1) {
+        offset += .5;
+      }
+
+      float densityFract = densityNormalizer * fract(t + offset);
+      float angleNorm = densityFract / u_density;
+      if (densityFract >= .5 || angleNorm >= .3) continue;
+
+      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
+      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);
+      if (smoothDensity * smoothAngle < .001) continue;
+
+      if (angleNorm > .5) {
+        angleNorm = 0.5;
+      }
+      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);
+      if (panel[0] <= .001) continue;
+      float panelMask = panel[0] * smoothDensity * smoothAngle;
+      float panelMap = panel[1];
+
+      int colorIdx = idx % colorsCount;
+      int nextColorIdx = (idx + 1) % colorsCount;
+
+      vec4 colorA = premultipliedColors[colorIdx];
+      vec4 colorB = premultipliedColors[nextColorIdx];
+
+      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
+      vec4 blended = blendColor(colorA, panelMask, panelMap);
+      color = blended.rgb + color * (1. - blended.a);
+      opacity = blended.a + opacity * (1. - blended.a);
+    }
+
+
+    for (int i = 0; i <= 20; i++) {
+      if (i >= panelsNumber) break;
+
+      int idx = panelsNumber - 1 - i;
+
+      float offset = float(idx) / fPanelsNumber;
+      if (set == 0) {
+        offset += .5;
+      }
+
+      float densityFract = densityNormalizer * fract(-t + offset);
+      float angleNorm = -densityFract / u_density;
+      if (densityFract >= .5 || angleNorm < -.3) continue;
+
+      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
+      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);
+      if (smoothDensity * smoothAngle < .001) continue;
+
+      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);
+      float panelMask = panel[0] * smoothDensity * smoothAngle;
+      if (panelMask <= .001) continue;
+      float panelMap = panel[1];
+
+      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;
+      if (colorIdx < 0) colorIdx += colorsCount;
+      int nextColorIdx = (colorIdx + 1) % colorsCount;
+
+      vec4 colorA = premultipliedColors[colorIdx];
+      vec4 colorB = premultipliedColors[nextColorIdx];
+
+      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
+      vec4 blended = blendColor(colorA, panelMask, panelMap);
+      color = blended.rgb + color * (1. - blended.a);
+      opacity = blended.a + opacity * (1. - blended.a);
+    }
+  }
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  ${p}
+
+  fragColor = vec4(color, opacity);
+}
+`,L={maxColorCount:10},Se=`#version 300 es
+precision mediump float;
+
+uniform vec4 u_colors[${L.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_positions;
+uniform float u_waveX;
+uniform float u_waveXShift;
+uniform float u_waveY;
+uniform float u_waveYShift;
+uniform float u_mixing;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+
+in vec2 v_objectUV;
+out vec4 fragColor;
+
+${c}
+${f}
+${g}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float noise(vec2 n, vec2 seedOffset) {
+  return valueNoise(n + seedOffset);
+}
+
+vec2 getPosition(int i, float t) {
+  float a = float(i) * .37;
+  float b = .6 + mod(float(i), 3.) * .3;
+  float c = .8 + mod(float(i + 1), 4.) * 0.25;
+
+  float x = sin(t * b + a);
+  float y = cos(t * c + a * 1.5);
+
+  return .5 + .5 * vec2(x, y);
+}
+
+void main() {
+  vec2 uv = v_objectUV;
+  uv += .5;
+  vec2 grainUV = uv * 1000.;
+
+  float grain = noise(grainUV, vec2(0.));
+  float mixerGrain = .4 * u_grainMixer * (grain - .5);
+
+  float radius = smoothstep(0., 1., length(uv - .5));
+  float center = 1. - radius;
+  for (float i = 1.; i <= 2.; i++) {
+    uv.x += u_waveX * center / i * cos(TWO_PI * u_waveXShift + i * 2. * smoothstep(.0, 1., uv.y));
+    uv.y += u_waveY * center / i * cos(TWO_PI * u_waveYShift + i * 2. * smoothstep(.0, 1., uv.x));
+  }
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+  float totalWeight = 0.;
+  float positionSeed = 25. + .33 * u_positions;
+
+  for (int i = 0; i < ${L.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+
+    vec2 pos = getPosition(i, positionSeed) + mixerGrain;
+    float dist = length(uv - pos);
+    dist = length(uv - pos);
+
+    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;
+    float opacityFraction = u_colors[i].a;
+
+    float mixing = pow(u_mixing, .7);
+    float power = mix(2., 1., mixing);
+    dist = pow(dist, power);
+
+    float w = 1. / (dist + 1e-3);
+    float baseSharpness = mix(.0, 8., clamp(w, 0., 1.));
+    float sharpness = mix(baseSharpness, 1., mixing);
+    w = pow(w, sharpness);
+    color += colorFraction * w;
+    opacity += opacityFraction * w;
+    totalWeight += w;
+  }
+
+  color /= max(1e-4, totalWeight);
+  opacity /= max(1e-4, totalWeight);
+
+  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
+  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
+  grainOverlay = pow(grainOverlay, 1.3);
+
+  float grainOverlayV = grainOverlay * 2. - 1.;
+  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
+  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
+  grainOverlayStrength = pow(grainOverlayStrength, .8);
+  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
+
+  opacity += .5 * grainOverlayStrength;
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`,H={maxColorCount:10},Ue=`#version 300 es
+precision mediump float;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${H.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_radius;
+uniform float u_focalDistance;
+uniform float u_focalAngle;
+uniform float u_falloff;
+uniform float u_mixing;
+uniform float u_distortion;
+uniform float u_distortionShift;
+uniform float u_distortionFreq;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+
+in vec2 v_objectUV;
+out vec4 fragColor;
+
+${c}
+${f}
+${g}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float noise(vec2 n, vec2 seedOffset) {
+  return valueNoise(n + seedOffset);
+}
+
+vec2 getPosition(int i, float t) {
+  float a = float(i) * .37;
+  float b = .6 + mod(float(i), 3.) * .3;
+  float c = .8 + mod(float(i + 1), 4.) * 0.25;
+
+  float x = sin(t * b + a);
+  float y = cos(t * c + a * 1.5);
+
+  return .5 + .5 * vec2(x, y);
+}
+
+void main() {
+  vec2 uv = 2. * v_objectUV;
+  vec2 grainUV = uv * 1000.;
+
+  vec2 center = vec2(0.);
+  float angleRad = -radians(u_focalAngle + 90.);
+  vec2 focalPoint = vec2(cos(angleRad), sin(angleRad)) * u_focalDistance;
+  float radius = u_radius;
+
+  vec2 c_to_uv = uv - center;
+  vec2 f_to_uv = uv - focalPoint;
+  vec2 f_to_c = center - focalPoint;
+  float r = length(c_to_uv);
+
+  float fragAngle = atan(c_to_uv.y, c_to_uv.x);
+  float angleDiff = fract((fragAngle - angleRad + PI) / TWO_PI) * TWO_PI - PI;
+
+  float halfAngle = acos(clamp(radius / max(u_focalDistance, 1e-4), 0.0, 1.0));
+  float e0 = 0.6 * PI, e1 = halfAngle;
+  float lo = min(e0, e1), hi = max(e0, e1);
+  float s  = smoothstep(lo, hi, abs(angleDiff));
+  float isInSector = (e1 >= e0) ? (1.0 - s) : s;
+
+  float a = dot(f_to_uv, f_to_uv);
+  float b = -2.0 * dot(f_to_uv, f_to_c);
+  float c = dot(f_to_c, f_to_c) - radius * radius;
+
+  float discriminant = b * b - 4.0 * a * c;
+  float t = 1.0;
+
+  if (discriminant >= 0.0) {
+    float sqrtD = sqrt(discriminant);
+    float div = max(1e-4, 2.0 * a);
+    float t0 = (-b - sqrtD) / div;
+    float t1 = (-b + sqrtD) / div;
+    t = max(t0, t1);
+    if (t < 0.0) t = 0.0;
+  }
+
+  float dist = length(f_to_uv);
+  float normalized = dist / max(1e-4, length(f_to_uv * t));
+  float shape = clamp(normalized, 0.0, 1.0);
+
+  float falloffMapped = mix(.2 + .8 * max(0., u_falloff + 1.), mix(1., 15., u_falloff * u_falloff), step(.0, u_falloff));
+
+  float falloffExp = mix(falloffMapped, 1., shape);
+  shape = pow(shape, falloffExp);
+  shape = 1. - clamp(shape, 0., 1.);
+
+
+  float outerMask = .002;
+  float outer = 1.0 - smoothstep(radius - outerMask, radius + outerMask, r);
+  outer = mix(outer, 1., isInSector);
+
+  shape = mix(0., shape, outer);
+  shape *= 1. - smoothstep(radius - .01, radius, r);
+
+  float angle = atan(f_to_uv.y, f_to_uv.x);
+  shape -= pow(u_distortion, 2.) * shape * pow(abs(sin(PI * clamp(length(f_to_uv) - 0.2 + u_distortionShift, 0.0, 1.0))), 4.0) * (sin(u_distortionFreq * angle) + cos(floor(0.65 * u_distortionFreq) * angle));
+
+  float grain = noise(grainUV, vec2(0.));
+  float mixerGrain = .4 * u_grainMixer * (grain - .5);
+
+  float mixer = shape * u_colorsCount + mixerGrain;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+
+  float outerShape = 0.;
+  for (int i = 1; i < ${H.maxColorCount+1}; i++) {
+    if (i > int(u_colorsCount)) break;
+    float mLinear = clamp(mixer - float(i - 1), 0.0, 1.0);
+
+    float aa = fwidth(mLinear);
+    float width = min(u_mixing, 0.5);
+    float t = clamp((mLinear - (0.5 - width - aa)) / (2. * width + 2. * aa), 0., 1.);
+    float p = mix(2., 1., clamp((u_mixing - 0.5) * 2., 0., 1.));
+    float m = t < 0.5
+      ? 0.5 * pow(2. * t, p)
+      : 1. - 0.5 * pow(2. * (1. - t), p);
+
+    float quadBlend = clamp((u_mixing - 0.5) * 2., 0., 1.);
+    m = mix(m, m * m, 0.5 * quadBlend);
+    
+    if (i == 1) {
+      outerShape = m;
+    }
+
+    vec4 c = u_colors[i - 1];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, m);
+  }
+
+  vec3 color = gradient.rgb * outerShape;
+  float opacity = gradient.a * outerShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
+  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
+  grainOverlay = pow(grainOverlay, 1.3);
+
+  float grainOverlayV = grainOverlay * 2. - 1.;
+  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
+  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
+  grainOverlayStrength = pow(grainOverlayStrength, .8);
+  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
+
+  opacity += .5 * grainOverlayStrength;
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`,Ve=`#version 300 es
+precision mediump float;
+
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_contrast;
+uniform float u_roughness;
+uniform float u_fiber;
+uniform float u_fiberSize;
+uniform float u_crumples;
+uniform float u_crumpleSize;
+uniform float u_folds;
+uniform float u_foldCount;
+uniform float u_drops;
+uniform float u_seed;
+uniform float u_fade;
+
+uniform sampler2D u_noiseTexture;
+
+in vec2 v_imageUV;
+
+out vec4 fragColor;
+
+float getUvFrame(vec2 uv) {
+  float aax = 2. * fwidth(uv.x);
+  float aay = 2. * fwidth(uv.y);
+
+  float left   = smoothstep(0., aax, uv.x);
+  float right = 1. - smoothstep(1. - aax, 1., uv.x);
+  float bottom = smoothstep(0., aay, uv.y);
+  float top = 1. - smoothstep(1. - aay, 1., uv.y);
+
+  return left * right * bottom * top;
+}
+
+${c}
+${f}
+${_}
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomR(i);
+  float b = randomR(i + vec2(1.0, 0.0));
+  float c = randomR(i + vec2(0.0, 1.0));
+  float d = randomR(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+float fbm(vec2 n) {
+  float total = 0.0, amplitude = .4;
+  for (int i = 0; i < 3; i++) {
+    total += valueNoise(n) * amplitude;
+    n *= 1.99;
+    amplitude *= 0.65;
+  }
+  return total;
+}
+
+
+float randomG(vec2 p) {
+  vec2 uv = floor(p) / 50. + .5;
+  return texture(u_noiseTexture, fract(uv)).g;
+}
+float roughness(vec2 p) {
+  p *= .1;
+  float o = 0.;
+  for (float i = 0.; ++i < 4.; p *= 2.1) {
+    vec4 w = vec4(floor(p), ceil(p));
+    vec2 f = fract(p);
+    o += mix(
+    mix(randomG(w.xy), randomG(w.xw), f.y),
+    mix(randomG(w.zy), randomG(w.zw), f.y),
+    f.x);
+    o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y)));
+  }
+  return o / 3.;
+}
+
+${ae}
+
+vec2 randomGB(vec2 p) {
+  vec2 uv = floor(p) / 50. + .5;
+  return texture(u_noiseTexture, fract(uv)).gb;
+}
+float crumpledNoise(vec2 t, float pw) {
+  vec2 p = floor(t);
+  float wsum = 0.;
+  float cl = 0.;
+  for (int y = -1; y < 2; y += 1) {
+    for (int x = -1; x < 2; x += 1) {
+      vec2 b = vec2(float(x), float(y));
+      vec2 q = b + p;
+      vec2 q2 = q - floor(q / 8.) * 8.;
+      vec2 c = q + randomGB(q2);
+      vec2 r = c - t;
+      float w = pow(smoothstep(0., 1., 1. - abs(r.x)), pw) * pow(smoothstep(0., 1., 1. - abs(r.y)), pw);
+      cl += (.5 + .5 * sin((q2.x + q2.y * 5.) * 8.)) * w;
+      wsum += w;
+    }
+  }
+  return pow(wsum != 0.0 ? cl / wsum : 0.0, .5) * 2.;
+}
+float crumplesShape(vec2 uv) {
+  return crumpledNoise(uv * .25, 16.) * crumpledNoise(uv * .5, 2.);
+}
+
+
+vec2 folds(vec2 uv) {
+  vec3 pp = vec3(0.);
+  float l = 9.;
+  for (float i = 0.; i < 15.; i++) {
+    if (i >= u_foldCount) break;
+    vec2 rand = randomGB(vec2(i, i * u_seed));
+    float an = rand.x * TWO_PI;
+    vec2 p = vec2(cos(an), sin(an)) * rand.y;
+    float dist = distance(uv, p);
+    l = min(l, dist);
+
+    if (l == dist) {
+      pp.xy = (uv - p.xy);
+      pp.z = dist;
+    }
+  }
+  return mix(pp.xy, vec2(0.), pow(pp.z, .25));
+}
+
+float drops(vec2 uv) {
+  vec2 iDropsUV = floor(uv);
+  vec2 fDropsUV = fract(uv);
+  float dropsMinDist = 1.;
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 neighbor = vec2(float(i), float(j));
+      vec2 offset = randomGB(iDropsUV + neighbor);
+      offset = .5 + .5 * sin(10. * u_seed + TWO_PI * offset);
+      vec2 pos = neighbor + offset - fDropsUV;
+      float dist = length(pos);
+      dropsMinDist = min(dropsMinDist, dropsMinDist*dist);
+    }
+  }
+  return 1. - smoothstep(.05, .09, pow(dropsMinDist, .5));
+}
+
+float lst(float edge0, float edge1, float x) {
+  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+}
+
+void main() {
+
+  vec2 imageUV = v_imageUV;
+  vec2 patternUV = v_imageUV - .5;
+  patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.));
+
+  vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;
+  float roughness = roughness(roughnessUv + vec2(1., 0.)) - roughness(roughnessUv - vec2(1., 0.));
+
+  vec2 crumplesUV = fract(patternUV * .02 / u_crumpleSize - u_seed) * 32.;
+  float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV));
+
+  vec2 fiberUV = 2. / u_fiberSize * patternUV;
+  float fiber = fiberNoise(fiberUV, vec2(0.));
+  fiber = .5 * u_fiber * (fiber - 1.);
+
+  vec2 normal = vec2(0.);
+  vec2 normalImage = vec2(0.);
+
+  vec2 foldsUV = patternUV * .12;
+  foldsUV = rotate(foldsUV, 4. * u_seed);
+  vec2 w = folds(foldsUV);
+  foldsUV = rotate(foldsUV + .007 * cos(u_seed), .01 * sin(u_seed));
+  vec2 w2 = folds(foldsUV);
+
+  float drops = u_drops * drops(patternUV * 2.);
+
+  float fade = u_fade * fbm(.17 * patternUV + 10. * u_seed);
+  fade = clamp(8. * fade * fade * fade, 0., 1.);
+
+  w = mix(w, vec2(0.), fade);
+  w2 = mix(w2, vec2(0.), fade);
+  crumples = mix(crumples, 0., fade);
+  drops = mix(drops, 0., fade);
+  fiber *= mix(1., .5, fade);
+  roughness *= mix(1., .5, fade);
+
+  normal.xy += u_folds * min(5. * u_contrast, 1.) * 4. * max(vec2(0.), w + w2);
+  normalImage.xy += u_folds * 2. * w;
+
+  normal.xy += crumples;
+  normalImage.xy += 1.5 * crumples;
+
+  normal.xy += 3. * drops;
+  normalImage.xy += .2 * drops;
+
+  normal.xy += u_roughness * 1.5 * roughness;
+  normal.xy += fiber;
+
+  normalImage += u_roughness * .75 * roughness;
+  normalImage += .2 * fiber;
+
+  vec3 lightPos = vec3(1., 2., 1.);
+  float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  imageUV += .02 * normalImage;
+  float frame = getUvFrame(imageUV);
+  vec4 image = texture(u_image, imageUV);
+  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);
+
+  frame *= image.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+  opacity = mix(opacity, 1., frame);
+
+  color -= .007 * drops;
+
+  color.rgb = mix(color, image.rgb, frame);
+
+  fragColor = vec4(color, opacity);
+}
+`,ke=`#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorHighlight;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_size;
+uniform float u_highlights;
+uniform float u_layering;
+uniform float u_edges;
+uniform float u_caustic;
+uniform float u_waves;
+
+in vec2 v_imageUV;
+
+out vec4 fragColor;
+
+${c}
+${f}
+${h}
+
+float getUvFrame(vec2 uv) {
+  float aax = 2. * fwidth(uv.x);
+  float aay = 2. * fwidth(uv.y);
+
+  float left   = smoothstep(0., aax, uv.x);
+  float right = 1.0 - smoothstep(1. - aax, 1., uv.x);
+  float bottom = smoothstep(0., aay, uv.y);
+  float top = 1.0 - smoothstep(1. - aay, 1., uv.y);
+
+  return left * right * bottom * top;
+}
+
+mat2 rotate2D(float r) {
+  return mat2(cos(r), sin(r), -sin(r), cos(r));
+}
+
+float getCausticNoise(vec2 uv, float t, float scale) {
+  vec2 n = vec2(.1);
+  vec2 N = vec2(.1);
+  mat2 m = rotate2D(.5);
+  for (int j = 0; j < 6; j++) {
+    uv *= m;
+    n *= m;
+    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;
+    n += sin(q);
+    N += cos(q) / scale;
+    scale *= 1.1;
+  }
+  return (N.x + N.y + 1.);
+}
+
+void main() {
+  vec2 imageUV = v_imageUV;
+  vec2 patternUV = v_imageUV - .5;
+  patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));
+  patternUV /= (.01 + .09 * u_size);
+
+  float t = u_time;
+
+  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));
+
+  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);
+
+  causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);
+  causticNoise = causticNoise * causticNoise;
+
+  float edgesDistortion = smoothstep(0., .1, imageUV.x);
+  edgesDistortion *= smoothstep(0., .1, imageUV.y);
+  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + (1.0 - smoothstep(.8, .95, imageUV.x)));
+  edgesDistortion *= (1.0 - smoothstep(.9, 1., imageUV.y));
+  edgesDistortion = mix(edgesDistortion, 1., u_edges);
+
+  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;
+
+  float wavesDistortion = .1 * u_waves * wavesNoise;
+
+  imageUV += vec2(wavesDistortion, -wavesDistortion);
+  imageUV += (u_caustic * causticNoiseDistortion);
+
+  float frame = getUvFrame(imageUV);
+
+  vec4 image = texture(u_image, imageUV);
+  vec4 backColor = u_colorBack;
+  backColor.rgb *= backColor.a;
+
+  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);
+  float opacity = backColor.a + image.a * frame;
+
+  causticNoise = max(-.2, causticNoise);
+
+  float hightlight = .025 * u_highlights * causticNoise;
+  hightlight *= u_colorHighlight.a;
+  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise);
+  opacity += hightlight;
+
+  color += hightlight * (.5 + .5 * wavesNoise);
+  opacity += hightlight * (.5 + .5 * wavesNoise);
+
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`,Re=`#version 300 es
+precision mediump float;
+
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+uniform float u_rotation;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorShadow;
+uniform vec4 u_colorHighlight;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_size;
+uniform float u_shadows;
+uniform float u_angle;
+uniform float u_stretch;
+uniform float u_shape;
+uniform float u_distortion;
+uniform float u_highlights;
+uniform float u_distortionShape;
+uniform float u_shift;
+uniform float u_blur;
+uniform float u_edges;
+uniform float u_marginLeft;
+uniform float u_marginRight;
+uniform float u_marginTop;
+uniform float u_marginBottom;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+
+in vec2 v_imageUV;
+
+out vec4 fragColor;
+
+${c}
+${f}
+${g}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float getUvFrame(vec2 uv, float softness) {
+  float aax = 2. * fwidth(uv.x);
+  float aay = 2. * fwidth(uv.y);
+  float left   = smoothstep(0., aax + softness, uv.x);
+  float right  = 1. - smoothstep(1. - softness - aax, 1., uv.x);
+  float bottom = smoothstep(0., aay + softness, uv.y);
+  float top    = 1. - smoothstep(1. - softness - aay, 1., uv.y);
+  return left * right * bottom * top;
+}
+
+const int MAX_RADIUS = 50;
+vec4 samplePremultiplied(sampler2D tex, vec2 uv) {
+  vec4 c = texture(tex, uv);
+  c.rgb *= c.a;
+  return c;
+}
+vec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) {
+  if (sigma <= .5) return texture(tex, uv);
+  int radius = int(min(float(MAX_RADIUS), ceil(3.0 * sigma)));
+
+  float twoSigma2 = 2.0 * sigma * sigma;
+  float gaussianNorm = 1.0 / sqrt(TWO_PI * sigma * sigma);
+
+  vec4 sum = samplePremultiplied(tex, uv) * gaussianNorm;
+  float weightSum = gaussianNorm;
+
+  for (int i = 1; i <= MAX_RADIUS; i++) {
+    if (i > radius) break;
+
+    float x = float(i);
+    float w = exp(-(x * x) / twoSigma2) * gaussianNorm;
+
+    vec2 offset = dir * texelSize * x;
+    vec4 s1 = samplePremultiplied(tex, uv + offset);
+    vec4 s2 = samplePremultiplied(tex, uv - offset);
+
+    sum += (s1 + s2) * w;
+    weightSum += 2.0 * w;
+  }
+
+  vec4 result = sum / weightSum;
+  if (result.a > 0.) {
+    result.rgb /= result.a;
+  }
+
+  return result;
+}
+
+vec2 rotateAspect(vec2 p, float a, float aspect) {
+  p.x *= aspect;
+  p = rotate(p, a);
+  p.x /= aspect;
+  return p;
+}
+
+float smoothFract(float x) {
+  float f = fract(x);
+  float w = fwidth(x);
+
+  float edge = abs(f - 0.5) - 0.5;
+  float band = smoothstep(-w, w, edge);
+
+  return mix(f, 1.0 - f, band);
+}
+
+void main() {
+
+  float patternRotation = -u_angle * PI / 180.;
+  float patternSize = mix(200., 5., u_size);
+
+  vec2 uv = v_imageUV;
+
+  vec2 uvMask = gl_FragCoord.xy / u_resolution.xy;
+  vec2 sw = vec2(.005);
+  vec4 margins = vec4(u_marginLeft, u_marginTop, u_marginRight, u_marginBottom);
+  float mask =
+  smoothstep(margins[0], margins[0] + sw.x, uvMask.x + sw.x) *
+  smoothstep(margins[2], margins[2] + sw.x, 1.0 - uvMask.x + sw.x) *
+  smoothstep(margins[1], margins[1] + sw.y, uvMask.y + sw.y) *
+  smoothstep(margins[3], margins[3] + sw.y, 1.0 - uvMask.y + sw.y);
+  float maskOuter =
+  smoothstep(margins[0] - sw.x, margins[0], uvMask.x + sw.x) *
+  smoothstep(margins[2] - sw.x, margins[2], 1.0 - uvMask.x + sw.x) *
+  smoothstep(margins[1] - sw.y, margins[1], uvMask.y + sw.y) *
+  smoothstep(margins[3] - sw.y, margins[3], 1.0 - uvMask.y + sw.y);
+  float maskStroke = maskOuter - mask;
+  float maskInner =
+  smoothstep(margins[0] - 2. * sw.x, margins[0], uvMask.x) *
+  smoothstep(margins[2] - 2. * sw.x, margins[2], 1.0 - uvMask.x) *
+  smoothstep(margins[1] - 2. * sw.y, margins[1], uvMask.y) *
+  smoothstep(margins[3] - 2. * sw.y, margins[3], 1.0 - uvMask.y);
+  float maskStrokeInner = maskInner - mask;
+
+  uv -= .5;
+  uv *= patternSize;
+  uv = rotateAspect(uv, patternRotation, u_imageAspectRatio);
+
+  float curve = 0.;
+  float patternY = uv.y / u_imageAspectRatio;
+  if (u_shape > 4.5) {
+    // pattern
+    curve = .5 + .5 * sin(.5 * PI * uv.x) * cos(.5 * PI * patternY);
+  } else if (u_shape > 3.5) {
+    // zigzag
+    curve = 10. * abs(fract(.1 * patternY) - .5);
+  } else if (u_shape > 2.5) {
+    // wave
+    curve = 4. * sin(.23 * patternY);
+  } else if (u_shape > 1.5) {
+    // lines irregular
+    curve = .5 + .5 * sin(.5 * uv.x) * sin(1.7 * uv.x);
+  } else {
+    // lines
+  }
+
+  vec2 UvToFract = uv + curve;
+  vec2 fractOrigUV = fract(uv);
+  vec2 floorOrigUV = floor(uv);
+
+  float x = smoothFract(UvToFract.x);
+  float xNonSmooth = fract(UvToFract.x) + .0001;
+
+  float highlightsWidth = 2. * max(.001, fwidth(UvToFract.x));
+  highlightsWidth += 2. * maskStrokeInner;
+  float highlights = smoothstep(0., highlightsWidth, xNonSmooth);
+  highlights *= smoothstep(1., 1. - highlightsWidth, xNonSmooth);
+  highlights = 1. - highlights;
+  highlights *= u_highlights;
+  highlights = clamp(highlights, 0., 1.);
+  highlights *= mask;
+
+  float shadows = pow(x, 1.3);
+  float distortion = 0.;
+  float fadeX = 1.;
+  float frameFade = 0.;
+
+  float aa = fwidth(xNonSmooth);
+  aa = max(aa, fwidth(uv.x));
+  aa = max(aa, fwidth(UvToFract.x));
+  aa = max(aa, .0001);
+
+  if (u_distortionShape == 1.) {
+    distortion = -pow(1.5 * x, 3.);
+    distortion += (.5 - u_shift);
+
+    frameFade = pow(1.5 * x, 3.);
+    aa = max(.2, aa);
+    aa += mix(.2, 0., u_size);
+    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
+    distortion = mix(.5, distortion, fadeX);
+  } else if (u_distortionShape == 2.) {
+    distortion = 2. * pow(x, 2.);
+    distortion -= (.5 + u_shift);
+
+    frameFade = pow(abs(x - .5), 4.);
+    aa = max(.2, aa);
+    aa += mix(.2, 0., u_size);
+    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
+    distortion = mix(.5, distortion, fadeX);
+    frameFade = mix(1., frameFade, .5 * fadeX);
+  } else if (u_distortionShape == 3.) {
+    distortion = pow(2. * (xNonSmooth - .5), 6.);
+    distortion -= .25;
+    distortion -= u_shift;
+
+    frameFade = 1. - 2. * pow(abs(x - .4), 2.);
+    aa = .15;
+    aa += mix(.1, 0., u_size);
+    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
+    frameFade = mix(1., frameFade, fadeX);
+
+  } else if (u_distortionShape == 4.) {
+    x = xNonSmooth;
+    distortion = sin((x + .25) * TWO_PI);
+    shadows = .5 + .5 * asin(distortion) / (.5 * PI);
+    distortion *= .5;
+    distortion -= u_shift;
+    frameFade = .5 + .5 * sin(x * TWO_PI);
+  } else if (u_distortionShape == 5.) {
+    distortion -= pow(abs(x), .2) * x;
+    distortion += .33;
+    distortion -= 3. * u_shift;
+    distortion *= .33;
+
+    frameFade = .3 * (smoothstep(.0, 1., x));
+    shadows = pow(x, 2.5);
+
+    aa = max(.1, aa);
+    aa += mix(.1, 0., u_size);
+    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
+    distortion *= fadeX;
+  }
+
+  vec2 dudx = dFdx(v_imageUV);
+  vec2 dudy = dFdy(v_imageUV);
+  vec2 grainUV = v_imageUV - .5;
+  grainUV *= (.8 / vec2(length(dudx), length(dudy)));
+  grainUV += .5;
+  float grain = valueNoise(grainUV);
+  grain = smoothstep(.4, .7, grain);
+  grain *= u_grainMixer;
+  distortion = mix(distortion, 0., grain);
+
+  shadows = min(shadows, 1.);
+  shadows += maskStrokeInner;
+  shadows *= mask;
+  shadows = min(shadows, 1.);
+  shadows *= pow(u_shadows, 2.);
+  shadows = clamp(shadows, 0., 1.);
+
+  distortion *= 3. * u_distortion;
+  frameFade *= u_distortion;
+
+  fractOrigUV.x += distortion;
+  floorOrigUV = rotateAspect(floorOrigUV, -patternRotation, u_imageAspectRatio);
+  fractOrigUV = rotateAspect(fractOrigUV, -patternRotation, u_imageAspectRatio);
+
+  uv = (floorOrigUV + fractOrigUV) / patternSize;
+  uv += pow(maskStroke, 4.);
+
+  uv += vec2(.5);
+
+  uv = mix(v_imageUV, uv, smoothstep(0., .7, mask));
+  float blur = mix(0., 50., u_blur);
+  blur = mix(0., blur, smoothstep(.5, 1., mask));
+
+  float edgeDistortion = mix(.0, .04, u_edges);
+  edgeDistortion += .06 * frameFade * u_edges;
+  edgeDistortion *= mask;
+  float frame = getUvFrame(uv, edgeDistortion);
+
+  float stretch = 1. - smoothstep(0., .5, xNonSmooth) * smoothstep(1., 1. - .5, xNonSmooth);
+  stretch = pow(stretch, 2.);
+  stretch *= mask;
+  stretch *= getUvFrame(uv, .1 + .05 * mask * frameFade);
+  uv.y = mix(uv.y, .5, u_stretch * stretch);
+
+  vec4 image = getBlur(u_image, uv, 1. / u_resolution / u_pixelRatio, vec2(0., 1.), blur);
+  image.rgb *= image.a;
+  vec4 backColor = u_colorBack;
+  backColor.rgb *= backColor.a;
+  vec4 highlightColor = u_colorHighlight;
+  highlightColor.rgb *= highlightColor.a;
+  vec4 shadowColor = u_colorShadow;
+
+  vec3 color = highlightColor.rgb * highlights;
+  float opacity = highlightColor.a * highlights;
+
+  shadows = mix(shadows * shadowColor.a, 0., highlights);
+  color = mix(color, shadowColor.rgb * shadowColor.a, .5 * shadows);
+  color += .5 * pow(shadows, .5) * shadowColor.rgb;
+  opacity += shadows;
+  color = clamp(color, vec3(0.), vec3(1.));
+  opacity = clamp(opacity, 0., 1.);
+
+  color += image.rgb * (1. - opacity) * frame;
+  opacity += image.a * (1. - opacity) * frame;
+
+  color += backColor.rgb * (1. - opacity);
+  opacity += backColor.a * (1. - opacity);
+
+  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
+  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
+  grainOverlay = pow(grainOverlay, 1.3);
+
+  float grainOverlayV = grainOverlay * 2. - 1.;
+  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
+  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
+  grainOverlayStrength = pow(grainOverlayStrength, .8);
+  grainOverlayStrength *= mask;
+  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
+
+  opacity += .5 * grainOverlayStrength;
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`;var Ie=`#version 300 es
+precision mediump float;
+
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+uniform float u_originX;
+uniform float u_originY;
+uniform float u_worldWidth;
+uniform float u_worldHeight;
+uniform float u_fit;
+
+uniform float u_scale;
+uniform float u_rotation;
+uniform float u_offsetX;
+uniform float u_offsetY;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform vec4 u_colorHighlight;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_type;
+uniform float u_pxSize;
+uniform bool u_originalColors;
+uniform bool u_inverted;
+uniform float u_colorSteps;
+
+out vec4 fragColor;
+
+
+${g}
+${c}
+
+float getUvFrame(vec2 uv, vec2 pad) {
+  float aa = 0.0001;
+
+  float left   = smoothstep(-pad.x, -pad.x + aa, uv.x);
+  float right  = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x);
+  float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y);
+  float top    = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y);
+
+  return left * right * bottom * top;
+}
+
+vec2 getImageUV(vec2 uv) {
+  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
+  float r = u_rotation * PI / 180.;
+  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
+  vec2 imageBoxSize;
+  if (u_fit == 1.) { // contain
+    imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
+  } else if (u_fit == 2.) { // cover
+    imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
+  } else {
+    imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);
+  }
+  imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;
+  vec2 imageBoxScale = u_resolution.xy / imageBoxSize;
+
+  vec2 imageUV = uv;
+  imageUV *= imageBoxScale;
+  imageUV += boxOrigin * (imageBoxScale - 1.);
+  imageUV += graphicOffset;
+  imageUV /= u_scale;
+  imageUV.x *= u_imageAspectRatio;
+  imageUV = graphicRotation * imageUV;
+  imageUV.x /= u_imageAspectRatio;
+
+  imageUV += .5;
+  imageUV.y = 1. - imageUV.y;
+
+  return imageUV;
+}
+
+const int bayer2x2[4] = int[4](0, 2, 3, 1);
+const int bayer4x4[16] = int[16](
+0, 8, 2, 10,
+12, 4, 14, 6,
+3, 11, 1, 9,
+15, 7, 13, 5
+);
+
+const int bayer8x8[64] = int[64](
+0, 32, 8, 40, 2, 34, 10, 42,
+48, 16, 56, 24, 50, 18, 58, 26,
+12, 44, 4, 36, 14, 46, 6, 38,
+60, 28, 52, 20, 62, 30, 54, 22,
+3, 35, 11, 43, 1, 33, 9, 41,
+51, 19, 59, 27, 49, 17, 57, 25,
+15, 47, 7, 39, 13, 45, 5, 37,
+63, 31, 55, 23, 61, 29, 53, 21
+);
+
+float getBayerValue(vec2 uv, int size) {
+  ivec2 pos = ivec2(fract(uv / float(size)) * float(size));
+  int index = pos.y * size + pos.x;
+
+  if (size == 2) {
+    return float(bayer2x2[index]) / 4.0;
+  } else if (size == 4) {
+    return float(bayer4x4[index]) / 16.0;
+  } else if (size == 8) {
+    return float(bayer8x8[index]) / 64.0;
+  }
+  return 0.0;
+}
+
+
+void main() {
+
+  float pxSize = u_pxSize * u_pixelRatio;
+  vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution;
+  pxSizeUV /= pxSize;
+  vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;
+  vec2 normalizedUV = canvasPixelizedUV / u_resolution;
+
+  vec2 imageUV = getImageUV(normalizedUV);
+  vec2 ditheringNoiseUV = canvasPixelizedUV;
+  vec4 image = texture(u_image, imageUV);
+  float frame = getUvFrame(imageUV, pxSize / u_resolution);
+
+  int type = int(floor(u_type));
+  float dithering = 0.0;
+
+  float lum = dot(vec3(.2126, .7152, .0722), image.rgb);
+  lum = u_inverted ? (1. - lum) : lum;
+
+  switch (type) {
+    case 1: {
+      dithering = step(hash21(ditheringNoiseUV), lum);
+    } break;
+    case 2:
+    dithering = getBayerValue(pxSizeUV, 2);
+    break;
+    case 3:
+    dithering = getBayerValue(pxSizeUV, 4);
+    break;
+    default :
+    dithering = getBayerValue(pxSizeUV, 8);
+    break;
+  }
+
+  float colorSteps = max(floor(u_colorSteps), 1.);
+  vec3 color = vec3(0.0);
+  float opacity = 1.;
+
+  dithering -= .5;
+  float brightness = clamp(lum + dithering / colorSteps, 0.0, 1.0);
+  brightness = mix(0.0, brightness, frame);
+  brightness = mix(0.0, brightness, image.a);
+  float quantLum = floor(brightness * colorSteps + 0.5) / colorSteps;
+  quantLum = mix(0.0, quantLum, frame);
+
+  if (u_originalColors == true) {
+    vec3 normColor = image.rgb / max(lum, 0.001);
+    color = normColor * quantLum;
+
+    float quantAlpha = floor(image.a * colorSteps + 0.5) / colorSteps;
+    opacity = mix(quantLum, 1., quantAlpha);
+  } else {
+    vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+    float fgOpacity = u_colorFront.a;
+    vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+    float bgOpacity = u_colorBack.a;
+    vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a;
+    float hlOpacity = u_colorHighlight.a;
+
+    fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness));
+    fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness));
+
+    color = fgColor * quantLum;
+    opacity = fgOpacity * quantLum;
+    color += bgColor * (1.0 - opacity);
+    opacity += bgOpacity * (1.0 - opacity);
+  }
+
+  fragColor = vec4(color, opacity);
+}
+`,K={maxColorCount:10},Fe=`#version 300 es
+precision highp float;
+
+in mediump vec2 v_imageUV;
+in mediump vec2 v_objectUV;
+out vec4 fragColor;
+
+uniform sampler2D u_image;
+uniform float u_time;
+uniform mediump float u_imageAspectRatio;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${K.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_angle;
+uniform float u_noise;
+uniform float u_innerGlow;
+uniform float u_outerGlow;
+uniform float u_contour;
+
+#define TWO_PI 6.28318530718
+#define PI 3.14159265358979323846
+
+float getImgFrame(vec2 uv, float th) {
+  float frame = 1.;
+  frame *= smoothstep(0., th, uv.y);
+  frame *= 1. - smoothstep(1. - th, 1., uv.y);
+  frame *= smoothstep(0., th, uv.x);
+  frame *= 1. - smoothstep(1. - th, 1., uv.x);
+  return frame;
+}
+
+float circle(vec2 uv, vec2 c, vec2 r) {
+  return 1. - smoothstep(r[0], r[1], length(uv - c));
+}
+
+float lst(float edge0, float edge1, float x) {
+  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+}
+
+float sst(float edge0, float edge1, float x) {
+  return smoothstep(edge0, edge1, x);
+}
+
+float shadowShape(vec2 uv, float t, float contour) {
+  vec2 scaledUV = uv;
+
+  // base shape tranjectory
+  float posY = mix(-1., 2., t);
+
+  // scaleX when it's moving down
+  scaledUV.y -= .5;
+  float mainCircleScale = sst(0., .8, posY) * lst(1.4, .9, posY);
+  scaledUV *= vec2(1., 1. + 1.5 * mainCircleScale);
+  scaledUV.y += .5;
+
+  // base shape
+  float innerR = .4;
+  float outerR = 1. - .3 * (sst(.1, .2, t) * (1. - sst(.2, .5, t)));
+  float s = circle(scaledUV, vec2(.5, posY - .2), vec2(innerR, outerR));
+  float shapeSizing = sst(.2, .3, t) * sst(.6, .3, t);
+  s = pow(s, 1.4);
+  s *= 1.2;
+
+  // flat gradient to take over the shadow shape
+  float topFlattener = 0.;
+  {
+    float pos = posY - uv.y;
+    float edge = 1.2;
+    topFlattener = lst(-.4, 0., pos) * (1. - sst(.0, edge, pos));
+    topFlattener = pow(topFlattener, 3.);
+    float topFlattenerMixer = (1. - sst(.0, .3, pos));
+    s = mix(topFlattener, s, topFlattenerMixer);
+  }
+
+  // apple right circle
+  {
+    float visibility = sst(.6, .7, t) * (1. - sst(.8, .9, t));
+    float angle = -2. -t * TWO_PI;
+    float rightCircle = circle(uv, vec2(.95 - .2 * cos(angle), .4 - .1 * sin(angle)), vec2(.15, .3));
+    rightCircle *= visibility;
+    s = mix(s, 0., rightCircle);
+  }
+
+  // apple top circle
+  {
+    float topCircle = circle(uv, vec2(.5, .19), vec2(.05, .25));
+    topCircle += 2. * contour * circle(uv, vec2(.5, .19), vec2(.2, .5));
+    float visibility = .55 * sst(.2, .3, t) * (1. - sst(.3, .45, t));
+    topCircle *= visibility;
+    s = mix(s, 0., topCircle);
+  }
+
+  float leafMask = circle(uv, vec2(.53, .13), vec2(.08, .19));
+  leafMask = mix(leafMask, 0., 1. - sst(.4, .54, uv.x));
+  leafMask = mix(0., leafMask, sst(.0, .2, uv.y));
+  leafMask *= (sst(.5, 1.1, posY) * sst(1.5, 1.3, posY));
+  s += leafMask;
+
+  // apple bottom circle
+  {
+    float visibility = sst(.0, .4, t) * (1. - sst(.6, .8, t));
+    s = mix(s, 0., visibility * circle(uv, vec2(.52, .92), vec2(.09, .25)));
+  }
+
+  // random balls that are invisible if apple logo is selected
+  {
+    float pos = sst(.0, .6, t) * (1. - sst(.6, 1., t));
+    s = mix(s, .5, circle(uv, vec2(.0, 1.2 - .5 * pos), vec2(.1, .3)));
+    s = mix(s, .0, circle(uv, vec2(1., .5 + .5 * pos), vec2(.1, .3)));
+
+    s = mix(s, 1., circle(uv, vec2(.95, .2 + .2 * sst(.3, .4, t) * sst(.7, .5, t)), vec2(.07, .22)));
+    s = mix(s, 1., circle(uv, vec2(.95, .2 + .2 * sst(.3, .4, t) * (1. - sst(.5, .7, t))), vec2(.07, .22)));
+    s /= max(1e-4, sst(1., .85, uv.y));
+  }
+
+  s = clamp(0., 1., s);
+  return s;
+}
+
+float blurEdge3x3(sampler2D tex, vec2 uv, vec2 dudx, vec2 dudy, float radius, float centerSample) {
+  vec2 texel = 1.0 / vec2(textureSize(tex, 0));
+  vec2 r = radius * texel;
+
+  float w1 = 1.0, w2 = 2.0, w4 = 4.0;
+  float norm = 16.0;
+  float sum = w4 * centerSample;
+
+  sum += w2 * textureGrad(tex, uv + vec2(0.0, -r.y), dudx, dudy).g;
+  sum += w2 * textureGrad(tex, uv + vec2(0.0, r.y), dudx, dudy).g;
+  sum += w2 * textureGrad(tex, uv + vec2(-r.x, 0.0), dudx, dudy).g;
+  sum += w2 * textureGrad(tex, uv + vec2(r.x, 0.0), dudx, dudy).g;
+
+  sum += w1 * textureGrad(tex, uv + vec2(-r.x, -r.y), dudx, dudy).g;
+  sum += w1 * textureGrad(tex, uv + vec2(r.x, -r.y), dudx, dudy).g;
+  sum += w1 * textureGrad(tex, uv + vec2(-r.x, r.y), dudx, dudy).g;
+  sum += w1 * textureGrad(tex, uv + vec2(r.x, r.y), dudx, dudy).g;
+
+  return sum / norm;
+}
+
+void main() {
+  vec2 uv = v_objectUV + .5;
+  uv.y = 1. - uv.y;
+
+  vec2 imgUV = v_imageUV;
+  imgUV -= .5;
+  imgUV *= 0.5714285714285714;
+  imgUV += .5;
+  float imgSoftFrame = getImgFrame(imgUV, .03);
+
+  vec4 img = texture(u_image, imgUV);
+  vec2 dudx = dFdx(imgUV);
+  vec2 dudy = dFdy(imgUV);
+
+  if (img.a == 0.) {
+    fragColor = u_colorBack;
+    return;
+  }
+
+  float t = .1 * u_time;
+  t -= .3;
+
+  float tCopy = t + 1. / 3.;
+  float tCopy2 = t + 2. / 3.;
+
+  t = mod(t, 1.);
+  tCopy = mod(tCopy, 1.);
+  tCopy2 = mod(tCopy2, 1.);
+
+  vec2 animationUV = imgUV - vec2(.5);
+  float angle = -u_angle * PI / 180.;
+  float cosA = cos(angle);
+  float sinA = sin(angle);
+  animationUV = vec2(
+  animationUV.x * cosA - animationUV.y * sinA,
+  animationUV.x * sinA + animationUV.y * cosA
+  ) + vec2(.5);
+
+  float shape = img[0];
+
+  img[1] = blurEdge3x3(u_image, imgUV, dudx, dudy, 8., img[1]);
+
+  float outerBlur = 1. - mix(1., img[1], shape);
+  float innerBlur = mix(img[1], 0., shape);
+  float contour = mix(img[2], 0., shape);
+
+  outerBlur *= imgSoftFrame;
+
+  float shadow = shadowShape(animationUV, t, innerBlur);
+  float shadowCopy = shadowShape(animationUV, tCopy, innerBlur);
+  float shadowCopy2 = shadowShape(animationUV, tCopy2, innerBlur);
+
+  float inner = .8 + .8 * innerBlur;
+  inner = mix(inner, 0., shadow);
+  inner = mix(inner, 0., shadowCopy);
+  inner = mix(inner, 0., shadowCopy2);
+
+  inner *= mix(0., 2., u_innerGlow);
+
+  inner += (u_contour * 2.) * contour;
+  inner = min(1., inner);
+  inner *= (1. - shape);
+
+  float outer = 0.;
+  {
+    t *= 3.;
+    t = mod(t - .1, 1.);
+
+    outer = .9 * pow(outerBlur, .8);
+    float y = mod(animationUV.y - t, 1.);
+    float animatedMask = sst(.3, .65, y) * (1. - sst(.65, 1., y));
+    animatedMask = .5 + animatedMask;
+    outer *= animatedMask;
+    outer *= mix(0., 5., pow(u_outerGlow, 2.));
+    outer *= imgSoftFrame;
+  }
+
+  inner = pow(inner, 1.2);
+  float heat = clamp(inner + outer, 0., 1.);
+
+  heat += (.005 + .35 * u_noise) * (fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453123) - .5);
+
+  float mixer = heat * u_colorsCount;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  float outerShape = 0.;
+  for (int i = 1; i < ${K.maxColorCount+1}; i++) {
+    if (i > int(u_colorsCount)) break;
+    float m = clamp(mixer - float(i - 1), 0., 1.);
+    if (i == 1) {
+      outerShape = m;
+    }
+    vec4 c = u_colors[i - 1];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, m);
+  }
+
+  vec3 color = gradient.rgb * outerShape;
+  float opacity = gradient.a * outerShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  color += .02 * (fract(sin(dot(uv + 1., vec2(12.9898, 78.233))) * 43758.5453123) - .5);
+
+  fragColor = vec4(color, opacity);
+}
+`;var Me=`#version 300 es
+precision mediump float;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform vec2 u_resolution;
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorTint;
+
+uniform float u_softness;
+uniform float u_repetition;
+uniform float u_shiftRed;
+uniform float u_shiftBlue;
+uniform float u_distortion;
+uniform float u_contour;
+uniform float u_angle;
+
+uniform float u_shape;
+uniform bool u_isImage;
+
+in vec2 v_objectUV;
+in vec2 v_responsiveUV;
+in vec2 v_responsiveBoxGivenSize;
+in vec2 v_imageUV;
+
+out vec4 fragColor;
+
+${c}
+${f}
+${h}
+
+float getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) {
+
+  float ch = mix(c2, c1, smoothstep(.0, 2. * blur, stripe_p));
+
+  float border = w[0];
+  ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p));
+
+  if (u_isImage == true) {
+    bump = smoothstep(.2, .8, bump);
+  }
+  border = w[0] + .4 * (1. - bump) * w[1];
+  ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p));
+
+  border = w[0] + .5 * (1. - bump) * w[1];
+  ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p));
+
+  border = w[0] + w[1];
+  ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p));
+
+  float gradient_t = (stripe_p - w[0] - w[1]) / w[2];
+  float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));
+  ch = mix(ch, gradient, smoothstep(border, border + .5 * blur, stripe_p));
+
+  // Tint color is applied with color burn blending
+  ch = mix(ch, 1. - min(1., (1. - ch) / max(tint, 0.0001)), u_colorTint.a);
+  return ch;
+}
+
+float getImgFrame(vec2 uv, float th) {
+  float frame = 1.;
+  frame *= smoothstep(0., th, uv.y);
+  frame *= 1.0 - smoothstep(1. - th, 1., uv.y);
+  frame *= smoothstep(0., th, uv.x);
+  frame *= 1.0 - smoothstep(1. - th, 1., uv.x);
+  return frame;
+}
+
+float blurEdge3x3(sampler2D tex, vec2 uv, vec2 dudx, vec2 dudy, float radius, float centerSample) {
+  vec2 texel = 1.0 / vec2(textureSize(tex, 0));
+  vec2 r = radius * texel;
+
+  float w1 = 1.0, w2 = 2.0, w4 = 4.0;
+  float norm = 16.0;
+  float sum = w4 * centerSample;
+
+  sum += w2 * textureGrad(tex, uv + vec2(0.0, -r.y), dudx, dudy).r;
+  sum += w2 * textureGrad(tex, uv + vec2(0.0, r.y), dudx, dudy).r;
+  sum += w2 * textureGrad(tex, uv + vec2(-r.x, 0.0), dudx, dudy).r;
+  sum += w2 * textureGrad(tex, uv + vec2(r.x, 0.0), dudx, dudy).r;
+
+  sum += w1 * textureGrad(tex, uv + vec2(-r.x, -r.y), dudx, dudy).r;
+  sum += w1 * textureGrad(tex, uv + vec2(r.x, -r.y), dudx, dudy).r;
+  sum += w1 * textureGrad(tex, uv + vec2(-r.x, r.y), dudx, dudy).r;
+  sum += w1 * textureGrad(tex, uv + vec2(r.x, r.y), dudx, dudy).r;
+
+  return sum / norm;
+}
+
+float lst(float edge0, float edge1, float x) {
+  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+}
+
+void main() {
+
+  const float firstFrameOffset = 2.8;
+  float t = .3 * (u_time + firstFrameOffset);
+
+  vec2 uv = v_imageUV;
+  vec2 dudx = dFdx(v_imageUV);
+  vec2 dudy = dFdy(v_imageUV);
+  vec4 img = textureGrad(u_image, uv, dudx, dudy);
+
+  if (u_isImage == false) {
+    uv = v_objectUV + .5;
+    uv.y = 1. - uv.y;
+  }
+
+  float cycleWidth = u_repetition;
+  float edge = 0.;
+  float contOffset = 1.;
+
+  vec2 rotatedUV = uv - vec2(.5);
+  float angle = (-u_angle + 70.) * PI / 180.;
+  float cosA = cos(angle);
+  float sinA = sin(angle);
+  rotatedUV = vec2(
+  rotatedUV.x * cosA - rotatedUV.y * sinA,
+  rotatedUV.x * sinA + rotatedUV.y * cosA
+  ) + vec2(.5);
+
+  if (u_isImage == true) {
+    float edgeRaw = img.r;
+    edge = blurEdge3x3(u_image, uv, dudx, dudy, 6., edgeRaw);
+    edge = pow(edge, 1.6);
+    edge *= mix(0.0, 1.0, smoothstep(0.0, 0.4, u_contour));
+  } else {
+    if (u_shape < 1.) {
+      // full-fill on canvas
+      vec2 borderUV = v_responsiveUV + .5;
+      float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
+      vec2 mask = min(borderUV, 1. - borderUV);
+      vec2 pixel_thickness = 250. / v_responsiveBoxGivenSize;
+      float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);
+      float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);
+      maskX = pow(maskX, .25);
+      maskY = pow(maskY, .25);
+      edge = clamp(1. - maskX * maskY, 0., 1.);
+
+      uv = v_responsiveUV;
+      if (ratio > 1.) {
+        uv.y /= ratio;
+      } else {
+        uv.x *= ratio;
+      }
+      uv += .5;
+      uv.y = 1. - uv.y;
+
+      cycleWidth *= 2.;
+      contOffset = 1.5;
+
+    } else if (u_shape < 2.) {
+      // circle
+      vec2 shapeUV = uv - .5;
+      shapeUV *= .67;
+      edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);
+    } else if (u_shape < 3.) {
+      // daisy
+      vec2 shapeUV = uv - .5;
+      shapeUV *= 1.68;
+
+      float r = length(shapeUV) * 2.;
+      float a = atan(shapeUV.y, shapeUV.x) + .2;
+      r *= (1. + .05 * sin(3. * a + 2. * t));
+      float f = abs(cos(a * 3.));
+      edge = smoothstep(f, f + .7, r);
+      edge *= edge;
+
+      uv *= .8;
+      cycleWidth *= 1.6;
+
+    } else if (u_shape < 4.) {
+      // diamond
+      vec2 shapeUV = uv - .5;
+      shapeUV = rotate(shapeUV, .25 * PI);
+      shapeUV *= 1.42;
+      shapeUV += .5;
+      vec2 mask = min(shapeUV, 1. - shapeUV);
+      vec2 pixel_thickness = vec2(.15);
+      float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);
+      float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);
+      maskX = pow(maskX, .25);
+      maskY = pow(maskY, .25);
+      edge = clamp(1. - maskX * maskY, 0., 1.);
+    } else if (u_shape < 5.) {
+      // metaballs
+      vec2 shapeUV = uv - .5;
+      shapeUV *= 1.3;
+      edge = 0.;
+      for (int i = 0; i < 5; i++) {
+        float fi = float(i);
+        float speed = 1.5 + 2./3. * sin(fi * 12.345);
+        float angle = -fi * 1.5;
+        vec2 dir1 = vec2(cos(angle), sin(angle));
+        vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));
+        vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17));
+        float d = length(shapeUV + traj);
+        edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);
+      }
+      edge = 1. - smoothstep(.65, .9, edge);
+      edge = pow(edge, 4.);
+    }
+
+    edge = mix(smoothstep(.9 - 2. * fwidth(edge), .9, edge), edge, smoothstep(0.0, 0.4, u_contour));
+
+  }
+
+  float opacity = 0.;
+  if (u_isImage == true) {
+    opacity = img.g;
+    float frame = getImgFrame(v_imageUV, 0.);
+    opacity *= frame;
+  } else {
+    opacity = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge);
+    if (u_shape < 2.) {
+      edge = 1.2 * edge;
+    } else if (u_shape < 5.) {
+      edge = 1.8 * pow(edge, 1.5);
+    }
+  }
+
+  float diagBLtoTR = rotatedUV.x - rotatedUV.y;
+  float diagTLtoBR = rotatedUV.x + rotatedUV.y;
+
+  vec3 color = vec3(0.);
+  vec3 color1 = vec3(.98, 0.98, 1.);
+  vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));
+
+  vec2 grad_uv = uv - .5;
+
+  float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));
+  grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);
+  float direction = grad_uv.x;
+
+  float bump = pow(1.8 * dist, 1.2);
+  bump = 1. - bump;
+  bump *= pow(uv.y, .3);
+
+
+  float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump);
+  float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump);
+  float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);
+
+  float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;
+  float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;
+
+  float noise = snoise(uv - t);
+
+  edge += (1. - edge) * u_distortion * noise;
+
+  direction += diagBLtoTR;
+  float contour = 0.;
+  direction -= 2. * noise * diagBLtoTR * (smoothstep(0., 1., edge) * (1.0 - smoothstep(0., 1., edge)));
+  direction *= mix(1., 1. - edge, smoothstep(.5, 1., u_contour));
+  direction -= 1.7 * edge * smoothstep(.5, 1., u_contour);
+  direction += .2 * pow(u_contour, 4.) * (1.0 - smoothstep(0., 1., edge));
+
+  bump *= clamp(pow(uv.y, .1), .3, 1.);
+  direction *= (.1 + (1.1 - edge) * bump);
+
+  direction *= (.4 + .6 * (1.0 - smoothstep(.5, 1., edge)));
+  direction += .18 * (smoothstep(.1, .2, uv.y) * (1.0 - smoothstep(.2, .4, uv.y)));
+  direction += .03 * (smoothstep(.1, .2, 1. - uv.y) * (1.0 - smoothstep(.2, .4, 1. - uv.y)));
+
+  direction *= (.5 + .5 * pow(uv.y, 2.));
+  direction *= cycleWidth;
+  direction -= t;
+
+
+  float colorDispersion = (1. - bump);
+  colorDispersion = clamp(colorDispersion, 0., 1.);
+  float dispersionRed = colorDispersion;
+  dispersionRed += .03 * bump * noise;
+  dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * (1.0 - smoothstep(.1, .5, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, 1., bump)));
+  dispersionRed -= diagBLtoTR;
+
+  float dispersionBlue = colorDispersion;
+  dispersionBlue *= 1.3;
+  dispersionBlue += (smoothstep(0., .4, uv.y) * (1.0 - smoothstep(.1, .8, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, .8, bump)));
+  dispersionBlue -= .2 * edge;
+
+  dispersionRed *= (u_shiftRed / 20.);
+  dispersionBlue *= (u_shiftBlue / 20.);
+
+  float blur = 0.;
+  float rExtraBlur = 0.;
+  float gExtraBlur = 0.;
+  if (u_isImage == true) {
+    float softness = 0.05 * u_softness;
+    blur = softness + .5 * smoothstep(1., 10., u_repetition) * smoothstep(.0, 1., edge);
+    float smallCanvasT = 1.0 - smoothstep(100., 500., min(u_resolution.x, u_resolution.y));
+    blur += smallCanvasT * smoothstep(.0, 1., edge);
+    rExtraBlur = softness * (0.05 + .1 * (u_shiftRed / 20.) * bump);
+    gExtraBlur = softness * 0.05 / max(0.001, abs(1. - diagBLtoTR));
+  } else {
+    blur = u_softness / 15. + .3 * contour;
+  }
+
+  vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);
+  w[1] -= .02 * smoothstep(.0, 1., edge + bump);
+  float stripe_r = fract(direction + dispersionRed);
+  float r = getColorChanges(color1.r, color2.r, stripe_r, w, blur + fwidth(stripe_r) + rExtraBlur, bump, u_colorTint.r);
+  float stripe_g = fract(direction);
+  float g = getColorChanges(color1.g, color2.g, stripe_g, w, blur + fwidth(stripe_g) + gExtraBlur, bump, u_colorTint.g);
+  float stripe_b = fract(direction - dispersionBlue);
+  float b = getColorChanges(color1.b, color2.b, stripe_b, w, blur + fwidth(stripe_b), bump, u_colorTint.b);
+
+  color = vec3(r, g, b);
+  color *= opacity;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
+
+  ${p}
+
+  fragColor = vec4(color, opacity);
+}
+`;var Ee=`#version 300 es
+precision mediump float;
+
+uniform float u_rotation;
+
+uniform float u_time;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform float u_radius;
+uniform float u_contrast;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_size;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+uniform float u_grainSize;
+uniform float u_grid;
+uniform bool u_originalColors;
+uniform bool u_inverted;
+uniform float u_type;
+
+in vec2 v_imageUV;
+
+out vec4 fragColor;
+
+${c}
+${f}
+${g}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float lst(float edge0, float edge1, float x) {
+  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+}
+
+float sst(float edge0, float edge1, float x) {
+  return smoothstep(edge0, edge1, x);
+}
+
+float getCircle(vec2 uv, float r, float baseR) {
+  r = mix(.25 * baseR, 0., r);
+  float d = length(uv - .5);
+  float aa = fwidth(d);
+  return 1. - smoothstep(r - aa, r + aa, d);
+}
+
+float getCell(vec2 uv) {
+  float insideX = step(0.0, uv.x) * (1.0 - step(1.0, uv.x));
+  float insideY = step(0.0, uv.y) * (1.0 - step(1.0, uv.y));
+  return insideX * insideY;
+}
+
+float getCircleWithHole(vec2 uv, float r, float baseR) {
+  float cell = getCell(uv);
+
+  r = mix(.75 * baseR, 0., r);
+  float rMod = mod(r, .5);
+
+  float d = length(uv - .5);
+  float aa = fwidth(d);
+  float circle = 1. - smoothstep(rMod - aa, rMod + aa, d);
+  if (r < .5) {
+    return circle;
+  } else {
+    return cell - circle;
+  }
+}
+
+float getGooeyBall(vec2 uv, float r, float baseR) {
+  float d = length(uv - .5);
+  float sizeRadius = .3;
+  if (u_grid == 1.) {
+    sizeRadius = .42;
+  }
+  sizeRadius = mix(sizeRadius * baseR, 0., r);
+  d = 1. - sst(0., sizeRadius, d);
+
+  d = pow(d, 2. + baseR);
+  return d;
+}
+
+float getSoftBall(vec2 uv, float r, float baseR) {
+  float d = length(uv - .5);
+  float sizeRadius = clamp(baseR, 0., 1.);
+  sizeRadius = mix(.5 * sizeRadius, 0., r);
+  d = 1. - lst(0., sizeRadius, d);
+  float powRadius = 1. - lst(0., 2., baseR);
+  d = pow(d, 4. + 3. * powRadius);
+  return d;
+}
+
+float getUvFrame(vec2 uv, vec2 pad) {
+  float aa = 0.0001;
+
+  float left   = smoothstep(-pad.x, -pad.x + aa, uv.x);
+  float right  = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x);
+  float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y);
+  float top    = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y);
+
+  return left * right * bottom * top;
+}
+
+float sigmoid(float x, float k) {
+  return 1.0 / (1.0 + exp(-k * (x - 0.5)));
+}
+
+float getLumAtPx(vec2 uv, float contrast) {
+  vec4 tex = texture(u_image, uv);
+  vec3 color = vec3(
+  sigmoid(tex.r, contrast),
+  sigmoid(tex.g, contrast),
+  sigmoid(tex.b, contrast)
+  );
+  float lum = dot(vec3(0.2126, 0.7152, 0.0722), color);
+  lum = mix(1., lum, tex.a);
+  lum = u_inverted ? (1. - lum) : lum;
+  return lum;
+}
+
+float getLumBall(vec2 p, vec2 pad, vec2 inCellOffset, float contrast, float baseR, float stepSize, out vec4 ballColor) {
+  p += inCellOffset;
+  vec2 uv_i = floor(p);
+  vec2 uv_f = fract(p);
+  vec2 samplingUV = (uv_i + .5 - inCellOffset) * pad + vec2(.5);
+  float outOfFrame = getUvFrame(samplingUV, pad * stepSize);
+
+  float lum = getLumAtPx(samplingUV, contrast);
+  ballColor = texture(u_image, samplingUV);
+  ballColor.rgb *= ballColor.a;
+  ballColor *= outOfFrame;
+
+  float ball = 0.;
+  if (u_type == 0.) {
+    // classic
+    ball = getCircle(uv_f, lum, baseR);
+  } else if (u_type == 1.) {
+    // gooey
+    ball = getGooeyBall(uv_f, lum, baseR);
+  } else if (u_type == 2.) {
+    // holes
+    ball = getCircleWithHole(uv_f, lum, baseR);
+  } else if (u_type == 3.) {
+    // soft
+    ball = getSoftBall(uv_f, lum, baseR);
+  }
+
+  return ball * outOfFrame;
+}
+
+
+void main() {
+
+  float stepMultiplier = 1.;
+  if (u_type == 0.) {
+    // classic
+    stepMultiplier = 2.;
+  } else if (u_type == 1. || u_type == 3.) {
+    // gooey & soft
+    stepMultiplier = 6.;
+  }
+
+  float cellsPerSide = mix(300., 7., pow(u_size, .7));
+  cellsPerSide /= stepMultiplier;
+  float cellSizeY = 1. / cellsPerSide;
+  vec2 pad = cellSizeY * vec2(1. / u_imageAspectRatio, 1.);
+  if (u_type == 1. && u_grid == 1.) {
+    // gooey diagonal grid works differently
+    pad *= .7;
+  }
+
+  vec2 uv = v_imageUV;
+  uv -= vec2(.5);
+  uv /= pad;
+
+  float contrast = mix(0., 15., pow(u_contrast, 1.5));
+  float baseRadius = u_radius;
+  if (u_originalColors == true) {
+    contrast = mix(.1, 4., pow(u_contrast, 2.));
+    baseRadius = 2. * pow(.5 * u_radius, .3);
+  }
+
+  float totalShape = 0.;
+  vec3 totalColor = vec3(0.);
+  float totalOpacity = 0.;
+
+  vec4 ballColor;
+  float shape;
+  float stepSize = 1. / stepMultiplier;
+  for (float x = -0.5; x < 0.5; x += stepSize) {
+    for (float y = -0.5; y < 0.5; y += stepSize) {
+      vec2 offset = vec2(x, y);
+
+      if (u_grid == 1.) {
+        float rowIndex = floor((y + .5) / stepSize);
+        float colIndex = floor((x + .5) / stepSize);
+        if (stepSize == 1.) {
+          rowIndex = floor(uv.y + y + 1.);
+          if (u_type == 1.) {
+            colIndex = floor(uv.x + x + 1.);
+          }
+        }
+        if (u_type == 1.) {
+          if (mod(rowIndex + colIndex, 2.) == 1.) {
+            continue;
+          }
+        } else {
+          if (mod(rowIndex, 2.) == 1.) {
+            offset.x += .5 * stepSize;
+          }
+        }
+      }
+
+      shape = getLumBall(uv, pad, offset, contrast, baseRadius, stepSize, ballColor);
+      totalColor   += ballColor.rgb * shape;
+      totalShape   += shape;
+      totalOpacity += shape;
+    }
+  }
+
+  const float eps = 1e-4;
+
+  totalColor /= max(totalShape, eps);
+  totalOpacity /= max(totalShape, eps);
+
+  float finalShape = 0.;
+  if (u_type == 0.) {
+    finalShape = min(1., totalShape);
+  } else if (u_type == 1.) {
+    float aa = fwidth(totalShape);
+    float th = .5;
+    finalShape = smoothstep(th - aa, th + aa, totalShape);
+  } else if (u_type == 2.) {
+    finalShape = min(1., totalShape);
+  } else if (u_type == 3.) {
+    finalShape = totalShape;
+  }
+
+  vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);
+  vec2 grainUV = v_imageUV - .5;
+  grainUV *= grainSize;
+  grainUV += .5;
+  float grain = valueNoise(grainUV);
+  grain = smoothstep(.55, .7 + .2 * u_grainMixer, grain);
+  grain *= u_grainMixer;
+  finalShape = mix(finalShape, 0., grain);
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+
+  if (u_originalColors == true) {
+    color = totalColor * finalShape;
+    opacity = totalOpacity * finalShape;
+
+    vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+    color = color + bgColor * (1. - opacity);
+    opacity = opacity + u_colorBack.a * (1. - opacity);
+  } else {
+    vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+    float fgOpacity = u_colorFront.a;
+    vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+    float bgOpacity = u_colorBack.a;
+
+    color = fgColor * finalShape;
+    opacity = fgOpacity * finalShape;
+    color += bgColor * (1. - opacity);
+    opacity += bgOpacity * (1. - opacity);
+  }
+
+  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
+  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
+  grainOverlay = pow(grainOverlay, 1.3);
+
+  float grainOverlayV = grainOverlay * 2. - 1.;
+  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
+  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
+  grainOverlayStrength = pow(grainOverlayStrength, .8);
+  color = mix(color, grainOverlayColor, .5 * grainOverlayStrength);
+
+  opacity += .5 * grainOverlayStrength;
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`;var ze=`#version 300 es
+precision mediump float;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorC;
+uniform vec4 u_colorM;
+uniform vec4 u_colorY;
+uniform vec4 u_colorK;
+uniform float u_size;
+uniform float u_minDot;
+uniform float u_contrast;
+uniform float u_grainSize;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+uniform float u_gridNoise;
+uniform float u_softness;
+uniform float u_floodC;
+uniform float u_floodM;
+uniform float u_floodY;
+uniform float u_floodK;
+uniform float u_gainC;
+uniform float u_gainM;
+uniform float u_gainY;
+uniform float u_gainK;
+uniform float u_type;
+uniform sampler2D u_noiseTexture;
+
+in vec2 v_imageUV;
+out vec4 fragColor;
+
+const float shiftC = -.5;
+const float shiftM = -.25;
+const float shiftY = .2;
+const float shiftK = 0.;
+
+// Precomputed sin/cos for rotation angles (15\xB0, 75\xB0, 0\xB0, 45\xB0)
+const float cosC = 0.9659258;  const float sinC = 0.2588190;   // 15\xB0
+const float cosM = 0.2588190;  const float sinM = 0.9659258;   // 75\xB0
+const float cosY = 1.0;        const float sinY = 0.0;         // 0\xB0
+const float cosK = 0.7071068;  const float sinK = 0.7071068;   // 45\xB0
+
+${c}
+
+vec2 randomRG(vec2 p) {
+  vec2 uv = floor(p) / 100. + .5;
+  return texture(u_noiseTexture, fract(uv)).rg;
+}
+vec3 hash23(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * vec3(0.3183099, 0.3678794, 0.3141592)) + 0.1;
+  p3 += dot(p3, p3.yzx + 19.19);
+  return fract(vec3(p3.x * p3.y, p3.y * p3.z, p3.z * p3.x));
+}
+
+float sst(float edge0, float edge1, float x) {
+  return smoothstep(edge0, edge1, x);
+}
+
+vec3 valueNoise3(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  vec3 a = hash23(i);
+  vec3 b = hash23(i + vec2(1.0, 0.0));
+  vec3 c = hash23(i + vec2(0.0, 1.0));
+  vec3 d = hash23(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  vec3 x1 = mix(a, b, u.x);
+  vec3 x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float getUvFrame(vec2 uv, vec2 pad) {
+  float left   = smoothstep(-pad.x, 0., uv.x);
+  float right  = smoothstep(1. + pad.x, 1., uv.x);
+  float bottom = smoothstep(-pad.y, 0., uv.y);
+  float top    = smoothstep(1. + pad.y, 1., uv.y);
+
+  return left * right * bottom * top;
+}
+
+vec4 RGBAtoCMYK(vec4 rgba) {
+  float k = 1. - max(max(rgba.r, rgba.g), rgba.b);
+  float denom = 1. - k;
+  vec3 cmy = vec3(0.);
+  if (denom > 1e-5) {
+    cmy = (1. - rgba.rgb - vec3(k)) / denom;
+  }
+  return vec4(cmy, k) * rgba.a;
+}
+
+vec3 applyContrast(vec3 rgb) {
+  return clamp((rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
+}
+
+// Single-component CMYK extractors with contrast built-in, alpha-aware
+float getCyan(vec4 rgba) {
+  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
+  float maxRGB = max(max(c.r, c.g), c.b);
+  return (maxRGB > 1e-5 ? (maxRGB - c.r) / maxRGB : 0.) * rgba.a;
+}
+float getMagenta(vec4 rgba) {
+  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
+  float maxRGB = max(max(c.r, c.g), c.b);
+  return (maxRGB > 1e-5 ? (maxRGB - c.g) / maxRGB : 0.) * rgba.a;
+}
+float getYellow(vec4 rgba) {
+  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
+  float maxRGB = max(max(c.r, c.g), c.b);
+  return (maxRGB > 1e-5 ? (maxRGB - c.b) / maxRGB : 0.) * rgba.a;
+}
+float getBlack(vec4 rgba) {
+  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
+  return (1. - max(max(c.r, c.g), c.b)) * rgba.a;
+}
+
+vec2 cellCenterPos(vec2 uv, vec2 cellOffset, float channelIdx) {
+  vec2 cellCenter = floor(uv) + .5 + cellOffset;
+  return cellCenter + (randomRG(cellCenter + channelIdx * 50.) - .5) * u_gridNoise;
+}
+
+vec2 gridToImageUV(vec2 cellCenter, float cosA, float sinA, float shift, vec2 pad) {
+  vec2 uvGrid = mat2(cosA, -sinA, sinA, cosA) * (cellCenter - shift);
+  return uvGrid * pad + 0.5;
+}
+
+void colorMask(vec2 pos, vec2 cellCenter, float rad, float transparency, float grain, float channelAddon, float channelgain, float generalComp, bool isJoined, inout float outMask) {
+  float dist = length(pos - cellCenter);
+
+  float radius = rad;
+  radius *= (1. + generalComp);
+  radius += (.15 + channelgain * radius);
+  radius = max(0., radius);
+  radius = mix(0., radius, transparency);
+  radius += channelAddon;
+  radius *= (1. - grain);
+
+  float mask = 1. - sst(0., radius, dist);
+  if (isJoined) {
+    // ink or sharp (joined)
+    mask = pow(mask, 1.2);
+  } else {
+    // dots (separate)
+    mask = sst(.5 - .5 * u_softness, .51 + .49 * u_softness, mask);
+  }
+
+  mask *= mix(1., mix(.5, 1., 1.5 * radius), u_softness);
+  outMask += mask;
+}
+
+vec3 applyInk(vec3 paper, vec3 inkColor, float cov) {
+  vec3 inkEffect = mix(vec3(1.0), inkColor, clamp(cov, 0.0, 1.0));
+  return paper * inkEffect;
+}
+
+void main() {
+  vec2 uv = v_imageUV;
+
+  float cellsPerSide = mix(400.0, 7.0, pow(u_size, 0.7));
+  float cellSizeY = 1.0 / cellsPerSide;
+  vec2 pad = cellSizeY * vec2(1.0 / u_imageAspectRatio, 1.0);
+  vec2 uvGrid = (uv - .5) / pad;
+  float insideImageBox = getUvFrame(uv, pad);
+
+  float generalComp = .1 * u_softness + .1 * u_gridNoise + .1 * (1. - step(0.5, u_type)) * (1.5 - u_softness);
+
+  vec2 uvC = mat2(cosC, sinC, -sinC, cosC) * uvGrid + shiftC;
+  vec2 uvM = mat2(cosM, sinM, -sinM, cosM) * uvGrid + shiftM;
+  vec2 uvY = mat2(cosY, sinY, -sinY, cosY) * uvGrid + shiftY;
+  vec2 uvK = mat2(cosK, sinK, -sinK, cosK) * uvGrid + shiftK;
+
+  vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);
+  vec2 grainUV = (v_imageUV - .5) * grainSize + .5;
+  vec3 noiseValues = valueNoise3(grainUV);
+  float grain = sst(.55, 1., noiseValues.r);
+  grain *= u_grainMixer;
+
+  vec4 outMask = vec4(0.);
+  bool isJoined = u_type > 0.5;
+
+  if (u_type < 1.5) {
+    // dots or ink: per-cell color sampling
+    for (int dy = -1; dy <= 1; dy++) {
+      for (int dx = -1; dx <= 1; dx++) {
+        vec2 cellOffset = vec2(float(dx), float(dy));
+
+        vec2 cellCenterC = cellCenterPos(uvC, cellOffset, 0.);
+        vec4 texC = texture(u_image, gridToImageUV(cellCenterC, cosC, sinC, shiftC, pad));
+        colorMask(uvC, cellCenterC, getCyan(texC), insideImageBox * texC.a, grain, u_floodC, u_gainC, generalComp, isJoined, outMask[0]);
+
+        vec2 cellCenterM = cellCenterPos(uvM, cellOffset, 1.);
+        vec4 texM = texture(u_image, gridToImageUV(cellCenterM, cosM, sinM, shiftM, pad));
+        colorMask(uvM, cellCenterM, getMagenta(texM), insideImageBox * texM.a, grain, u_floodM, u_gainM, generalComp, isJoined, outMask[1]);
+
+        vec2 cellCenterY = cellCenterPos(uvY, cellOffset, 2.);
+        vec4 texY = texture(u_image, gridToImageUV(cellCenterY, cosY, sinY, shiftY, pad));
+        colorMask(uvY, cellCenterY, getYellow(texY), insideImageBox * texY.a, grain, u_floodY, u_gainY, generalComp, isJoined, outMask[2]);
+
+        vec2 cellCenterK = cellCenterPos(uvK, cellOffset, 3.);
+        vec4 texK = texture(u_image, gridToImageUV(cellCenterK, cosK, sinK, shiftK, pad));
+        colorMask(uvK, cellCenterK, getBlack(texK), insideImageBox * texK.a, grain, u_floodK, u_gainK, generalComp, isJoined, outMask[3]);
+      }
+    }
+  } else {
+    // sharp: direct px color sampling
+    vec4 tex = texture(u_image, uv);
+    tex.rgb = applyContrast(tex.rgb);
+    insideImageBox *= tex.a;
+    vec4 cmykOriginal = RGBAtoCMYK(tex);
+    for (int dy = -1; dy <= 1; dy++) {
+      for (int dx = -1; dx <= 1; dx++) {
+        vec2 cellOffset = vec2(float(dx), float(dy));
+
+        colorMask(uvC, cellCenterPos(uvC, cellOffset, 0.), cmykOriginal.x, insideImageBox, grain, u_floodC, u_gainC, generalComp, isJoined, outMask[0]);
+        colorMask(uvM, cellCenterPos(uvM, cellOffset, 1.), cmykOriginal.y, insideImageBox, grain, u_floodM, u_gainM, generalComp, isJoined, outMask[1]);
+        colorMask(uvY, cellCenterPos(uvY, cellOffset, 2.), cmykOriginal.z, insideImageBox, grain, u_floodY, u_gainY, generalComp, isJoined, outMask[2]);
+        colorMask(uvK, cellCenterPos(uvK, cellOffset, 3.), cmykOriginal.w, insideImageBox, grain, u_floodK, u_gainK, generalComp, isJoined, outMask[3]);
+      }
+    }
+  }
+
+  float shape;
+
+  float C = outMask[0];
+  float M = outMask[1];
+  float Y = outMask[2];
+  float K = outMask[3];
+
+  if (isJoined) {
+    // ink or sharp: apply threshold for joined dots
+    float th = .5;
+    float sLeft = th * u_softness;
+    float sRight = (1. - th) * u_softness + .01;
+    C = smoothstep(th - sLeft - fwidth(C), th + sRight, C);
+    M = smoothstep(th - sLeft - fwidth(M), th + sRight, M);
+    Y = smoothstep(th - sLeft - fwidth(Y), th + sRight, Y);
+    K = smoothstep(th - sLeft - fwidth(K), th + sRight, K);
+  }
+
+  C *= u_colorC.a;
+  M *= u_colorM.a;
+  Y *= u_colorY.a;
+  K *= u_colorK.a;
+
+  vec3 ink = vec3(1.);
+  ink = applyInk(ink, u_colorK.rgb, K);
+  ink = applyInk(ink, u_colorC.rgb, C);
+  ink = applyInk(ink, u_colorM.rgb, M);
+  ink = applyInk(ink, u_colorY.rgb, Y);
+
+  shape = clamp(max(max(C, M), max(Y, K)), 0., 1.);
+
+  vec3 color = u_colorBack.rgb * u_colorBack.a;
+
+  float opacity = u_colorBack.a;
+  color = mix(color, ink, shape);
+  opacity += shape;
+  opacity = clamp(opacity, 0., 1.);
+
+  float grainOverlay = mix(noiseValues.g, noiseValues.b, .5);
+  grainOverlay = pow(grainOverlay, 1.3);
+
+  float grainOverlayV = grainOverlay * 2. - 1.;
+  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
+  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
+  grainOverlayStrength = pow(grainOverlayStrength, .8);
+  color = mix(color, grainOverlayColor, .5 * grainOverlayStrength);
+
+  opacity += .5 * grainOverlayStrength;
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`;function A(e){if(Array.isArray(e))return e.length===4?e:e.length===3?[...e,1]:M;if(typeof e!="string")return M;let o,t,i,n=1;if(e.startsWith("#"))[o,t,i,n]=ie(e);else if(e.startsWith("rgb"))[o,t,i,n]=re(e);else if(e.startsWith("hsl"))[o,t,i,n]=le(se(e));else return console.error("Unsupported color format",e),M;return[C(o,0,1),C(t,0,1),C(i,0,1),C(n,0,1)]}function ie(e){e=e.replace(/^#/,""),e.length===3&&(e=e.split("").map(s=>s+s).join("")),e.length===6&&(e=e+"ff");let o=parseInt(e.slice(0,2),16)/255,t=parseInt(e.slice(2,4),16)/255,i=parseInt(e.slice(4,6),16)/255,n=parseInt(e.slice(6,8),16)/255;return[o,t,i,n]}function re(e){let o=e.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);return o?[parseInt(o[1]??"0")/255,parseInt(o[2]??"0")/255,parseInt(o[3]??"0")/255,o[4]===void 0?1:parseFloat(o[4])]:[0,0,0,1]}function se(e){let o=e.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);return o?[parseInt(o[1]??"0"),parseInt(o[2]??"0"),parseInt(o[3]??"0"),o[4]===void 0?1:parseFloat(o[4])]:[0,0,0,1]}function le(e){let[o,t,i,n]=e,s=o/360,r=t/100,l=i/100,m,u,d;if(t===0)m=u=d=l;else{let x=(y,V,v)=>(v<0&&(v+=1),v>1&&(v-=1),v<.16666666666666666?y+(V-y)*6*v:v<.5?V:v<.6666666666666666?y+(V-y)*(.6666666666666666-v)*6:y),b=l<.5?l*(1+r):l+r-l*r,U=2*l-b;m=x(U,b,s+1/3),u=x(U,b,s),d=x(U,b,s-1/3)}return[m,u,d,n]}var C=(e,o,t)=>Math.min(Math.max(e,o),t),M=[0,0,0,1];function Qe(e,o){let t=B[o.shape]??B.warp,i=S[o.type]??S["2x2"],n={u_colorFront:A(o.colorFront),u_colorBack:A(o.colorBack),u_shape:t,u_type:i,u_pxSize:o.size,u_scale:o.scale,u_rotation:parseFloat(o.rotation)||180,u_originX:.5,u_originY:.5,u_worldWidth:0,u_worldHeight:0,u_fit:0,u_offsetX:0,u_offsetY:0},s=new X(e,J,n,{alpha:!0,premultipliedAlpha:!1},o.speed,0,2);return{updateParams(r){let l={};r.colorFront!==void 0&&(l.u_colorFront=A(r.colorFront)),r.colorBack!==void 0&&(l.u_colorBack=A(r.colorBack)),r.shape!==void 0&&(l.u_shape=B[r.shape]??t),r.type!==void 0&&(l.u_type=S[r.type]??i),r.size!==void 0&&(l.u_pxSize=r.size),r.scale!==void 0&&(l.u_scale=r.scale),r.rotation!==void 0&&(l.u_rotation=parseFloat(r.rotation)||180),r.speed!==void 0&&s.setSpeed(r.speed),Object.keys(l).length>0&&s.setUniforms(l)},destroy(){s.dispose()}}}export{Qe as createDitheringRenderer};