@paper-design/shaders 0.0.28 → 0.0.30

package/dist/shaders/dithering.js

@@ -10,7 +10,7 @@ import {
 } from "../shader-sizing";
 import { declareSimplexNoise, declarePI, declareRandom } from "../shader-utils";
 const ditheringFragmentShader = `#version 300 es
-precision highp float;
+precision mediump float;
 
 uniform float u_time;
 uniform vec2 u_resolution;
@@ -23,7 +23,6 @@ uniform vec4 u_color2;
 uniform float u_shape;
 uniform float u_type;
 uniform float u_pxSize;
-uniform bool u_pxRounded;
 
 out vec4 fragColor;
 
@@ -40,9 +39,9 @@ float getSimplexNoise(vec2 uv, float t) {
 
 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, 
+  0,  8,  2, 10,
+ 12,  4, 14,  6,
+  3, 11,  1,  9,
  15,  7, 13,  5
 );
 
@@ -72,109 +71,109 @@ float getBayerValue(vec2 uv, int size) {
 }
 
 
-void main() {  
-  float t = .5 * u_time;  
+void main() {
+  float t = .5 * u_time;
 
   #define USE_PATTERN_SIZING
   #define USE_OBJECT_SIZING
   #define USE_PIXELIZATION
   // #define ADD_HELPERS
-  
+
   ${sizingUV}
-  
+
   vec2 dithering_uv = pxSizeUv;
-  vec2 ditheringNoise_uv = roundedUv;
+  vec2 ditheringNoise_uv = uv;
   vec2 shape_uv = objectUV;
   if (u_shape < 3.5) {
     shape_uv = patternUV;
   }
 
-  float shape = 0.;    
+  float shape = 0.;
   if (u_shape < 1.5) {
     // Simplex noise
     shape_uv *= .001;
 
     shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);
     shape = smoothstep(0.3, 0.9, shape);
-      
-  } else if (u_shape < 2.5) {  
+
+  } else if (u_shape < 2.5) {
     // Warp
     shape_uv *= .003;
 
-    for (float i = 1.0; i < 6.0; i++) {  
-      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);  
-      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);  
-    }  
-    
-    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));  
+    for (float i = 1.0; i < 6.0; i++) {
+      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);
+      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);
+    }
+
+    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));
     shape = smoothstep(0.02, 1., shape);
-  
-  } else if (u_shape < 3.5) {  
-    // Dots  
+
+  } else if (u_shape < 3.5) {
+    // Dots
     shape_uv *= .05;
 
     float stripeIdx = floor(2. * shape_uv.x / TWO_PI);
     float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);
 
     float speed = sign(rand - .5) * ceil(2. + rand);
-    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);  
+    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);
     shape = pow(shape, 6.);
 
-  } else if (u_shape < 4.5) {  
+  } else if (u_shape < 4.5) {
     // Sine wave
     shape_uv *= 4.;
 
     float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));
     shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);
-    
-  } else if (u_shape < 5.5) {  
+
+  } else if (u_shape < 5.5) {
     // Ripple
 
     float dist = length(shape_uv);
     float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;
     shape = waves;
-    
-  } else if (u_shape < 6.5) {  
-    // Swirl  
+
+  } else if (u_shape < 6.5) {
+    // Swirl
 
     float l = length(shape_uv);
     float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;
     float twist = 1.2;
-    float offset = pow(l, -twist) + angle / TWO_PI;  
+    float offset = pow(l, -twist) + angle / TWO_PI;
     float mid = smoothstep(0., 1., pow(l, twist));
     shape = mix(0., fract(offset), mid);
-    
+
   } else {
     // Sphere
     shape_uv *= 2.;
-    
+
     vec3 pos = vec3(shape_uv, sqrt(1. - pow(length(shape_uv), 2.)));
     vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
     shape = .5 + .5 * dot(lightPos, pos);
-  }  
-  
-  
-  int type = int(floor(u_type));  
-  float dithering = 0.0;  
-  
-  switch (type) {  
+  }
+
+
+  int type = int(floor(u_type));
+  float dithering = 0.0;
+
+  switch (type) {
     case 1: {
-      dithering = step(random(ditheringNoise_uv), shape);  
-    } break;  
-    case 2:  
-      dithering = getBayerValue(dithering_uv, 2);  
-      break;  
-    case 3:  
-      dithering = getBayerValue(dithering_uv, 4);  
-      break;  
-    default:  
-      dithering = getBayerValue(dithering_uv, 8);  
-      break;  
-  }  
-  
-  dithering -= .5;  
-  float res = step(.5, shape + dithering);  
-  
+      dithering = step(random(ditheringNoise_uv), shape);
+    } break;
+    case 2:
+      dithering = getBayerValue(dithering_uv, 2);
+      break;
+    case 3:
+      dithering = getBayerValue(dithering_uv, 4);
+      break;
+    default:
+      dithering = getBayerValue(dithering_uv, 8);
+      break;
+  }
+
+  dithering -= .5;
+  float res = step(.5, shape + dithering);
+
   vec3 color = mix(u_color1.rgb, u_color2.rgb, res);
   float opacity = mix(u_color1.a, u_color2.a, res);
 
@@ -191,7 +190,24 @@ void main() {
   fragColor = vec4(color, opacity);
 }
 `;
+const DitheringShapes = {
+  simplex: 1,
+  warp: 2,
+  dots: 3,
+  wave: 4,
+  ripple: 5,
+  swirl: 6,
+  sphere: 7
+};
+const DitheringTypes = {
+  random: 1,
+  "2x2": 2,
+  "4x4": 3,
+  "8x8": 4
+};
 export {
+  DitheringShapes,
+  DitheringTypes,
   ditheringFragmentShader
 };
 //# sourceMappingURL=dithering.js.map

package/dist/shaders/dithering.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dithering.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport {\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingUV,\n  drawSizingHelpers,\n} from '../shader-sizing';\nimport { declareSimplexNoise, declarePI, declareRandom } from '../shader-utils';\n\n/**\n * Dithering Fragment Shader by Ksenia Kondrashova\n * Applies dithering (4 dithering types available) over the\n * abstract shapes animation (7 animated shapes available)\n *\n * Uniforms include:\n * - u_color1: background color, RGBA\n * - u_color2: pixels color, RGBA\n *\n * - u_shape (float, used as int, 1 to 7):\n *  --- shape = 1: Simplex noise pattern\n *  --- shape = 2: Warp noise pattern\n *  --- shape = 3: Columns if dots moving vertically\n *  --- shape = 4: Sine wave\n *  --- shape = 5: Ripple effect\n *  --- shape = 6: Swirl animation\n *  --- shape = 7: Rotating sphere\n *\n *  - u_type (float, used as int, 1 to 4):\n *  --- type = 1: Random dithering\n *  --- type = 2: 2x2 Bayer matrix\n *  --- type = 3: 4x4 Bayer matrix\n *  --- type = 4: 8x8 Bayer matrix\n *\n * - pxSize (float), relative to canvas resolution\n * - u_pxRounded (bool)\n *\n */\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\n${sizingUniformsDeclaration}\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_shape;\nuniform float u_type;\nuniform float u_pxSize;\nuniform bool u_pxRounded;\n\nout vec4 fragColor;\n\n${declareSimplexNoise}\n${declarePI}\n${declareRandom}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10, \n 12,  4, 14,  6, \n  3, 11,  1,  9, \n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {  \n  float t = .5 * u_time;  \n\n  #define USE_PATTERN_SIZING\n  #define USE_OBJECT_SIZING\n  #define USE_PIXELIZATION\n  // #define ADD_HELPERS\n  \n  ${sizingUV}\n  \n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = roundedUv;\n  vec2 shape_uv = objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = patternUV;\n  }\n\n  float shape = 0.;    \n  if (u_shape < 1.5) {\n    // Simplex noise\n    shape_uv *= .001;\n\n    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);\n    shape = smoothstep(0.3, 0.9, shape);\n      \n  } else if (u_shape < 2.5) {  \n    // Warp\n    shape_uv *= .003;\n\n    for (float i = 1.0; i < 6.0; i++) {  \n      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);  \n      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);  \n    }  \n    \n    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));  \n    shape = smoothstep(0.02, 1., shape);\n  \n  } else if (u_shape < 3.5) {  \n    // Dots  \n    shape_uv *= .05;\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);\n\n    float speed = sign(rand - .5) * ceil(2. + rand);\n    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);  \n    shape = pow(shape, 6.);\n\n  } else if (u_shape < 4.5) {  \n    // Sine wave\n    shape_uv *= 4.;\n\n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n    \n  } else if (u_shape < 5.5) {  \n    // Ripple\n\n    float dist = length(shape_uv);\n    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n    shape = waves;\n    \n  } else if (u_shape < 6.5) {  \n    // Swirl  \n\n    float l = length(shape_uv);\n    float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;\n    float twist = 1.2;\n    float offset = pow(l, -twist) + angle / TWO_PI;  \n    float mid = smoothstep(0., 1., pow(l, twist));\n    shape = mix(0., fract(offset), mid);\n    \n  } else {\n    // Sphere\n    shape_uv *= 2.;\n    \n    vec3 pos = vec3(shape_uv, sqrt(1. - pow(length(shape_uv), 2.)));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n  }  \n  \n  \n  int type = int(floor(u_type));  \n  float dithering = 0.0;  \n  \n  switch (type) {  \n    case 1: {\n      dithering = step(random(ditheringNoise_uv), shape);  \n    } break;  \n    case 2:  \n      dithering = getBayerValue(dithering_uv, 2);  \n      break;  \n    case 3:  \n      dithering = getBayerValue(dithering_uv, 4);  \n      break;  \n    default:  \n      dithering = getBayerValue(dithering_uv, 8);  \n      break;  \n  }  \n  \n  dithering -= .5;  \n  float res = step(.5, shape + dithering);  \n  \n  vec3 color = mix(u_color1.rgb, u_color2.rgb, res);\n  float opacity = mix(u_color1.a, u_color2.a, res);\n\n  #ifdef ADD_HELPERS\n    vec2 helperBox = objectHelperBox;\n    vec2 boxSize = objectBoxSize;\n    if (u_shape < 3.5) {\n      helperBox = patternHelperBox;\n      boxSize = patternBoxSize;\n    }\n    ${drawSizingHelpers}\n  #endif\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DitheringUniforms extends ShaderSizingUniforms {\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_shape: number;\n  u_type: number;\n  u_pxSize: number;\n  u_pxRounded: boolean;\n}\n\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  color1?: string;\n  color2?: string;\n  shape?: number;\n  type?: number;\n  pxSize?: number;\n  pxRounded?: boolean;\n}\n"],
-  "mappings": ";;;;;AACA;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,WAAW,qBAAqB;AA8BvD,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO7C,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWzB,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmDX,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyGN,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport {\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingUV,\n  drawSizingHelpers,\n} from '../shader-sizing';\nimport { declareSimplexNoise, declarePI, declareRandom } from '../shader-utils';\n\n/**\n * Dithering Fragment Shader by Ksenia Kondrashova\n * Applies dithering (4 dithering types available) over the\n * abstract shapes animation (7 animated shapes available)\n *\n * Uniforms include:\n * - u_color1: background color, RGBA\n * - u_color2: pixels color, RGBA\n *\n * - u_shape (float, used as int, 1 to 7):\n *  --- shape = 1: Simplex noise pattern\n *  --- shape = 2: Warp noise pattern\n *  --- shape = 3: Columns if dots moving vertically\n *  --- shape = 4: Sine wave\n *  --- shape = 5: Ripple effect\n *  --- shape = 6: Swirl animation\n *  --- shape = 7: Rotating sphere\n *\n *  - u_type (float, used as int, 1 to 4):\n *  --- type = 1: Random dithering\n *  --- type = 2: 2x2 Bayer matrix\n *  --- type = 3: 4x4 Bayer matrix\n *  --- type = 4: 8x8 Bayer matrix\n *\n * - pxSize (float), relative to canvas resolution\n *\n */\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\n${sizingUniformsDeclaration}\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_shape;\nuniform float u_type;\nuniform float u_pxSize;\n\nout vec4 fragColor;\n\n${declareSimplexNoise}\n${declarePI}\n${declareRandom}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n  float t = .5 * u_time;\n\n  #define USE_PATTERN_SIZING\n  #define USE_OBJECT_SIZING\n  #define USE_PIXELIZATION\n  // #define ADD_HELPERS\n\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = uv;\n  vec2 shape_uv = objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = patternUV;\n  }\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // Simplex noise\n    shape_uv *= .001;\n\n    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);\n    shape = smoothstep(0.3, 0.9, shape);\n\n  } else if (u_shape < 2.5) {\n    // Warp\n    shape_uv *= .003;\n\n    for (float i = 1.0; i < 6.0; i++) {\n      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);\n      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);\n    }\n\n    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));\n    shape = smoothstep(0.02, 1., shape);\n\n  } else if (u_shape < 3.5) {\n    // Dots\n    shape_uv *= .05;\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);\n\n    float speed = sign(rand - .5) * ceil(2. + rand);\n    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);\n    shape = pow(shape, 6.);\n\n  } else if (u_shape < 4.5) {\n    // Sine wave\n    shape_uv *= 4.;\n\n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    float dist = length(shape_uv);\n    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Swirl\n\n    float l = length(shape_uv);\n    float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;\n    float twist = 1.2;\n    float offset = pow(l, -twist) + angle / TWO_PI;\n    float mid = smoothstep(0., 1., pow(l, twist));\n    shape = mix(0., fract(offset), mid);\n\n  } else {\n    // Sphere\n    shape_uv *= 2.;\n\n    vec3 pos = vec3(shape_uv, sqrt(1. - pow(length(shape_uv), 2.)));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n  }\n\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  switch (type) {\n    case 1: {\n      dithering = step(random(ditheringNoise_uv), shape);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n  dithering -= .5;\n  float res = step(.5, shape + dithering);\n\n  vec3 color = mix(u_color1.rgb, u_color2.rgb, res);\n  float opacity = mix(u_color1.a, u_color2.a, res);\n\n  #ifdef ADD_HELPERS\n    vec2 helperBox = objectHelperBox;\n    vec2 boxSize = objectBoxSize;\n    if (u_shape < 3.5) {\n      helperBox = patternHelperBox;\n      boxSize = patternBoxSize;\n    }\n    ${drawSizingHelpers}\n  #endif\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DitheringUniforms extends ShaderSizingUniforms {\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_shape: (typeof DitheringShapes)[DitheringShape];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n}\n\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  color1?: string;\n  color2?: string;\n  shape?: DitheringShape;\n  type?: DitheringType;\n  pxSize?: number;\n}\n\nexport const DitheringShapes = {\n  simplex: 1,\n  warp: 2,\n  dots: 3,\n  wave: 4,\n  ripple: 5,\n  swirl: 6,\n  sphere: 7,\n} as const;\n\nexport type DitheringShape = keyof typeof DitheringShapes;\n\nexport const DitheringTypes = {\n  random: 1,\n  '2x2': 2,\n  '4x4': 3,\n  '8x8': 4,\n} as const;\n\nexport type DitheringType = keyof typeof DitheringTypes;\n"],
+  "mappings": ";;;;;AACA;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,WAAW,qBAAqB;AA6BvD,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO7C,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzB,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmDX,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyGN,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBhB,MAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAIO,MAAM,iBAAiB;AAAA,EAC5B,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;",
   "names": []
 }

package/dist/shaders/dot-grid.js

@@ -6,7 +6,7 @@
 import { sizingVariablesDeclaration } from "../shader-sizing";
 import { declarePI, declareSimplexNoise } from "../shader-utils";
 const dotGridFragmentShader = `#version 300 es
-precision highp float;
+precision mediump float;
 
 uniform vec4 u_colorBack;
 uniform vec4 u_colorFill;
@@ -70,20 +70,27 @@ void main() {
   }
 
   float edgeWidth = fwidth(dist);
-  float shapeOuter = smoothstep(baseSize + edgeWidth + strokeWidth, baseSize - edgeWidth + strokeWidth, dist);
+  float shapeOuter = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist - strokeWidth);
   float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);
-  float stroke = clamp(shapeOuter - shapeInner, 0., 1.);
+  float stroke = shapeOuter - shapeInner;
 
-  float dot_opacity = max(0., 1. - opacity_randomizer * u_opacityRange);
+  float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);
+  stroke *= dotOpacity;
+  shapeInner *= dotOpacity;
 
-  vec3 color = u_colorBack.rgb * u_colorBack.a;
-  color = mix(color, u_colorFill.rgb, u_colorFill.a * dot_opacity * shapeInner);
-  color = mix(color, u_colorStroke.rgb, u_colorStroke.a * dot_opacity * stroke);
+  stroke *= u_colorStroke.a;
+  shapeInner *= u_colorFill.a;
 
-  float opacity = u_colorBack.a;
-  opacity += u_colorFill.a * shapeInner * dot_opacity;
-  opacity += u_colorStroke.a * stroke * dot_opacity;
+  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);
 }
 `;

package/dist/shaders/dot-grid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dot-grid.ts"],
-  "sourcesContent": ["import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareSimplexNoise } from '../shader-utils';\n\n/**\n * Dot Grid Pattern\n * (the size parameters are set in pixels)\n *\n * Uniforms include:\n * u_colorBack - the background color\n * u_colorFill - the fill color\n * u_colorStroke - the stroke color\n * u_dotSize (px) - the base dot radius\n * u_strokeWidth (px) - the stroke (to be subtracted from u_dotSize)\n * u_gapX (px) - horizontal grid spacing\n * u_gapY (px) - vertical grid spacing\n * u_sizeRange (0 .. 1) - variety of dot size\n * u_opacityRange(0 .. 1) - variety of dot opacity to be applied equally to fill and stroke\n * u_shape - shape code (0 - circle, 1 - diamond, 2 - square, 3 - triangle)\n */\nexport const dotGridFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gapX;\nuniform float u_gapY;\nuniform float u_strokeWidth;\nuniform float u_sizeRange;\nuniform float u_opacityRange;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n\nfloat polygon(vec2 p, float N, float rot) {\n  float a = atan(p.x, p.y) + rot;\n  float r = TWO_PI / float(N);\n\n  return cos(floor(.5 + a / r) * r - a) * length(p);\n}\n\nvoid main() {\n  \n  vec2 shape_uv = v_patternUV;\n  shape_uv += .5;\n\n  vec2 grid = fract(shape_uv / vec2(u_gapX, u_gapY)) + 1e-4;\n  vec2 grid_idx = floor(shape_uv / vec2(u_gapX, u_gapY));\n  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\n  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\n\n  vec2 center = vec2(0.5) - 1e-3;\n  vec2 p = (grid - center) * vec2(u_gapX, u_gapY);\n\n  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);\n  float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);\n\n  float dist;\n  if (u_shape < 0.5) {\n    // Circle\n    dist = length(p);\n  } else if (u_shape < 1.5) {\n    // Diamond\n    strokeWidth *= 1.5;\n    dist = polygon(1.5 * p, 4., .25 * PI);\n  } else if (u_shape < 2.5) {\n    // Square\n    dist = polygon(1.03 * p, 4., 1e-3);\n  } else {\n    // Triangle\n    strokeWidth *= 1.5;\n    p = p * 2. - 1.;\n    p *= .9;\n    p.y -= .75 * baseSize;\n    dist = polygon(p, 3., 1e-3);\n  }\n\n  float edgeWidth = fwidth(dist);\n  float shapeOuter = smoothstep(baseSize + edgeWidth + strokeWidth, baseSize - edgeWidth + strokeWidth, dist);\n  float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);\n  float stroke = clamp(shapeOuter - shapeInner, 0., 1.);\n\n  float dot_opacity = max(0., 1. - opacity_randomizer * u_opacityRange);\n\n  vec3 color = u_colorBack.rgb * u_colorBack.a;\n  color = mix(color, u_colorFill.rgb, u_colorFill.a * dot_opacity * shapeInner);\n  color = mix(color, u_colorStroke.rgb, u_colorStroke.a * dot_opacity * stroke);\n\n  float opacity = u_colorBack.a;\n  opacity += u_colorFill.a * shapeInner * dot_opacity;\n  opacity += u_colorStroke.a * stroke * dot_opacity;\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotGridUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFill: [number, number, number, number];\n  u_colorStroke: [number, number, number, number];\n  u_dotSize: number;\n  u_gapX: number;\n  u_gapY: number;\n  u_strokeWidth: number;\n  u_sizeRange: number;\n  u_opacityRange: number;\n  u_shape: (typeof DotGridShapes)[DotGridShape];\n}\n\nexport interface DotGridParams extends ShaderSizingParams {\n  colorBack?: string;\n  colorFill?: string;\n  colorStroke?: string;\n  size?: number;\n  gapX?: number;\n  gapY?: number;\n  strokeWidth?: number;\n  sizeRange?: number;\n  opacityRange?: number;\n  shape?: DotGridShape;\n}\n\nexport const DotGridShapes = {\n  circle: 0,\n  diamond: 1,\n  square: 2,\n  triangle: 3,\n} as const;\n\nexport type DotGridShape = keyof typeof DotGridShapes;\n"],
-  "mappings": ";;;;;AAAA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,2BAA2B;AAkBxC,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc3C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Fd,MAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;",
+  "sourcesContent": ["import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareSimplexNoise } from '../shader-utils';\n\n/**\n * Dot Grid Pattern\n * (the size parameters are set in pixels)\n *\n * Uniforms include:\n * u_colorBack - the background color\n * u_colorFill - the fill color\n * u_colorStroke - the stroke color\n * u_dotSize (px) - the base dot radius\n * u_strokeWidth (px) - the stroke (to be subtracted from u_dotSize)\n * u_gapX (px) - horizontal grid spacing\n * u_gapY (px) - vertical grid spacing\n * u_sizeRange (0 .. 1) - variety of dot size\n * u_opacityRange(0 .. 1) - variety of dot opacity to be applied equally to fill and stroke\n * u_shape - shape code (0 - circle, 1 - diamond, 2 - square, 3 - triangle)\n */\nexport const dotGridFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gapX;\nuniform float u_gapY;\nuniform float u_strokeWidth;\nuniform float u_sizeRange;\nuniform float u_opacityRange;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n\nfloat polygon(vec2 p, float N, float rot) {\n  float a = atan(p.x, p.y) + rot;\n  float r = TWO_PI / float(N);\n\n  return cos(floor(.5 + a / r) * r - a) * length(p);\n}\n\nvoid main() {\n  \n  vec2 shape_uv = v_patternUV;\n  shape_uv += .5;\n\n  vec2 grid = fract(shape_uv / vec2(u_gapX, u_gapY)) + 1e-4;\n  vec2 grid_idx = floor(shape_uv / vec2(u_gapX, u_gapY));\n  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\n  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\n\n  vec2 center = vec2(0.5) - 1e-3;\n  vec2 p = (grid - center) * vec2(u_gapX, u_gapY);\n\n  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);\n  float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);\n\n  float dist;\n  if (u_shape < 0.5) {\n    // Circle\n    dist = length(p);\n  } else if (u_shape < 1.5) {\n    // Diamond\n    strokeWidth *= 1.5;\n    dist = polygon(1.5 * p, 4., .25 * PI);\n  } else if (u_shape < 2.5) {\n    // Square\n    dist = polygon(1.03 * p, 4., 1e-3);\n  } else {\n    // Triangle\n    strokeWidth *= 1.5;\n    p = p * 2. - 1.;\n    p *= .9;\n    p.y -= .75 * baseSize;\n    dist = polygon(p, 3., 1e-3);\n  }\n\n  float edgeWidth = fwidth(dist);\n  float shapeOuter = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist - strokeWidth);\n  float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);\n  float stroke = shapeOuter - shapeInner;\n\n  float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);\n  stroke *= dotOpacity;\n  shapeInner *= dotOpacity;\n\n  stroke *= u_colorStroke.a;\n  shapeInner *= u_colorFill.a;\n\n  vec3 color = vec3(0.);\n  color += stroke * u_colorStroke.rgb;\n  color += shapeInner * u_colorFill.rgb;\n  color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;\n\n  float opacity = 0.;\n  opacity += stroke;\n  opacity += shapeInner;\n  opacity += (1. - opacity) * u_colorBack.a;\n  \n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotGridUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFill: [number, number, number, number];\n  u_colorStroke: [number, number, number, number];\n  u_dotSize: number;\n  u_gapX: number;\n  u_gapY: number;\n  u_strokeWidth: number;\n  u_sizeRange: number;\n  u_opacityRange: number;\n  u_shape: (typeof DotGridShapes)[DotGridShape];\n}\n\nexport interface DotGridParams extends ShaderSizingParams {\n  colorBack?: string;\n  colorFill?: string;\n  colorStroke?: string;\n  size?: number;\n  gapX?: number;\n  gapY?: number;\n  strokeWidth?: number;\n  sizeRange?: number;\n  opacityRange?: number;\n  shape?: DotGridShape;\n}\n\nexport const DotGridShapes = {\n  circle: 0,\n  diamond: 1,\n  square: 2,\n  triangle: 3,\n} as const;\n\nexport type DotGridShape = keyof typeof DotGridShapes;\n"],
+  "mappings": ";;;;;AAAA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,2BAA2B;AAkBxC,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc3C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiGd,MAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;",
   "names": []
 }

package/dist/shaders/dot-orbit.js

@@ -9,7 +9,7 @@ const dotOrbitMeta = {
   maxColorCount: 10
 };
 const dotOrbitFragmentShader = `#version 300 es
-precision highp float;
+precision mediump float;
 
 uniform float u_time;
 

package/dist/shaders/dot-orbit.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dot-orbit.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareRandom, declareRotate } from '../shader-utils';\n\nexport const dotOrbitMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Dot Pattern with dot moving around their grid position\n * The artwork by Ksenia Kondrashova\n * Renders a dot pattern with dot placed in the center of each cell of animated Voronoi diagram\n *\n * Uniforms include:\n * - u_colors (vec4[]): Input RGBA colors\n * - u_colorsCount (float): Number of active colors (`u_colors` length)\n * - u_stepsPerColor (float): Discretization of the color transition\n * - u_size (float, 0 .. 1): Base dot radius (relative to cell size)\n * - u_sizeRange (float, 0 .. 1): Dot radius to vary between the cells\n * - u_spreading (float, 0 .. 1): the distance each dot can move around the regular grid\n */\nexport const dotOrbitFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${dotOrbitMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_spreading;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRandom}\n${declareRotate}\n\nvec2 random2(vec2 p) {\n  return vec2(random(p), random(200. * p));\n}\n\nvec3 voronoiShape(vec2 uv, float time) {\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n  \n  float spreading = .25 * clamp(u_spreading, 0., 1.);\n\n  float minDist = 1.;\n  vec2 randomizer = vec2(0.);\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tileOffset = vec2(float(x), float(y));\n      vec2 rand = random2(i_uv + tileOffset);\n      vec2 cellCenter = vec2(.5 + 1e-4);\n      cellCenter += spreading * cos(time + TWO_PI * rand);\n      cellCenter -= .5;\n      cellCenter = rotate(cellCenter, random(vec2(rand.x, rand.y)) + .1 * time);\n      cellCenter += .5;\n      float dist = length(tileOffset + cellCenter - f_uv);\n      if (dist < minDist) {\n        minDist = dist;\n        randomizer = rand;\n      }\n      minDist = min(minDist, dist);\n    }\n  }\n\n  return vec3(minDist, randomizer);\n}\n\nvoid main() {\n  \n  vec2 shape_uv = v_patternUV;\n  shape_uv += .5;\n  shape_uv *= .015;\n  \n  float t = u_time;\n\n  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;\n\n  float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];\n  float dist = voronoi[0];\n  float edgeWidth = fwidth(dist);\n  float dots = smoothstep(radius + edgeWidth, radius - edgeWidth, dist);\n\n  float shape = voronoi[1];\n  \n  float mixer = shape * (u_colorsCount - 1.);\n  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n  float steps = max(1., u_stepsPerColor);\n  \n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${dotOrbitMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n      float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n      localT = round(localT * steps) / steps;\n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localT);\n  }\n\n  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n    float localT = mixer + 1.;\n    if (mixer > (u_colorsCount - 1.)) {\n      localT = mixer - (u_colorsCount - 1.);\n    }\n    localT = round(localT * steps) / steps;\n    vec4 cFst = u_colors[0];\n    cFst.rgb *= cFst.a;\n    vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n    cLast.rgb *= cLast.a;\n    gradient = mix(cLast, cFst, localT);\n  }\n\n  gradient *= dots;\n  vec3 color = gradient.rgb;\n  float opacity = gradient.a;\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotOrbitUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_size: number;\n  u_sizeRange: number;\n  u_spreading: number;\n  u_stepsPerColor: number;\n}\n\nexport interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  size?: number;\n  sizeRange?: number;\n  spreading?: number;\n  stepsPerColor?: number;\n}\n"],
+  "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareRandom, declareRotate } from '../shader-utils';\n\nexport const dotOrbitMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Dot Pattern with dot moving around their grid position\n * The artwork by Ksenia Kondrashova\n * Renders a dot pattern with dot placed in the center of each cell of animated Voronoi diagram\n *\n * Uniforms include:\n * - u_colors (vec4[]): Input RGBA colors\n * - u_colorsCount (float): Number of active colors (`u_colors` length)\n * - u_stepsPerColor (float): Discretization of the color transition\n * - u_size (float, 0 .. 1): Base dot radius (relative to cell size)\n * - u_sizeRange (float, 0 .. 1): Dot radius to vary between the cells\n * - u_spreading (float, 0 .. 1): the distance each dot can move around the regular grid\n */\nexport const dotOrbitFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${dotOrbitMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_spreading;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRandom}\n${declareRotate}\n\nvec2 random2(vec2 p) {\n  return vec2(random(p), random(200. * p));\n}\n\nvec3 voronoiShape(vec2 uv, float time) {\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n  \n  float spreading = .25 * clamp(u_spreading, 0., 1.);\n\n  float minDist = 1.;\n  vec2 randomizer = vec2(0.);\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tileOffset = vec2(float(x), float(y));\n      vec2 rand = random2(i_uv + tileOffset);\n      vec2 cellCenter = vec2(.5 + 1e-4);\n      cellCenter += spreading * cos(time + TWO_PI * rand);\n      cellCenter -= .5;\n      cellCenter = rotate(cellCenter, random(vec2(rand.x, rand.y)) + .1 * time);\n      cellCenter += .5;\n      float dist = length(tileOffset + cellCenter - f_uv);\n      if (dist < minDist) {\n        minDist = dist;\n        randomizer = rand;\n      }\n      minDist = min(minDist, dist);\n    }\n  }\n\n  return vec3(minDist, randomizer);\n}\n\nvoid main() {\n  \n  vec2 shape_uv = v_patternUV;\n  shape_uv += .5;\n  shape_uv *= .015;\n  \n  float t = u_time;\n\n  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;\n\n  float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];\n  float dist = voronoi[0];\n  float edgeWidth = fwidth(dist);\n  float dots = smoothstep(radius + edgeWidth, radius - edgeWidth, dist);\n\n  float shape = voronoi[1];\n  \n  float mixer = shape * (u_colorsCount - 1.);\n  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n  float steps = max(1., u_stepsPerColor);\n  \n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${dotOrbitMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n      float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n      localT = round(localT * steps) / steps;\n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localT);\n  }\n\n  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n    float localT = mixer + 1.;\n    if (mixer > (u_colorsCount - 1.)) {\n      localT = mixer - (u_colorsCount - 1.);\n    }\n    localT = round(localT * steps) / steps;\n    vec4 cFst = u_colors[0];\n    cFst.rgb *= cFst.a;\n    vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n    cLast.rgb *= cLast.a;\n    gradient = mix(cLast, cFst, localT);\n  }\n\n  gradient *= dots;\n  vec3 color = gradient.rgb;\n  float opacity = gradient.a;\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotOrbitUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_size: number;\n  u_sizeRange: number;\n  u_spreading: number;\n  u_stepsPerColor: number;\n}\n\nexport interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  size?: number;\n  sizeRange?: number;\n  spreading?: number;\n  stepsPerColor?: number;\n}\n"],
   "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,qBAAqB;AAEjD,MAAM,eAAe;AAAA,EAC1B,eAAe;AACjB;AAeO,MAAM,yBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKtB,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOhD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA,EACb,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA0DS,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -14,12 +14,22 @@ export interface GrainGradientUniforms extends ShaderSizingUniforms {
     u_softness: number;
     u_intensity: number;
     u_noise: number;
-    u_shape: number;
+    u_shape: (typeof GrainGradientShapes)[GrainGradientShape];
 }
 export interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {
     colors?: string[];
     softness?: number;
     intensity?: number;
     noise?: number;
-    shape?: number;
+    shape?: GrainGradientShape;
 }
+export declare const GrainGradientShapes: {
+    wave: number;
+    dots: number;
+    truchet: number;
+    corners: number;
+    ripple: number;
+    blob: number;
+    sphere: number;
+};
+export type GrainGradientShape = keyof typeof GrainGradientShapes;

package/dist/shaders/grain-gradient.js

@@ -9,7 +9,7 @@ const grainGradientMeta = {
   maxColorCount: 7
 };
 const grainGradientFragmentShader = `#version 300 es
-precision highp float;
+precision mediump float;
 
 uniform float u_time;
 uniform vec2 u_resolution;
@@ -212,7 +212,17 @@ void main() {
   fragColor = vec4(color, opacity);
 }
 `;
+const GrainGradientShapes = {
+  wave: 1,
+  dots: 2,
+  truchet: 3,
+  corners: 4,
+  ripple: 5,
+  blob: 6,
+  sphere: 7
+};
 export {
+  GrainGradientShapes,
   grainGradientFragmentShader,
   grainGradientMeta
 };

package/dist/shaders/grain-gradient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/grain-gradient.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declareSimplexNoise, declarePI, declareRandom, colorBandingFix } from '../shader-utils';\n\nexport const grainGradientMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Grainy Gradient Ksenia Kondrashova\n */\nexport const grainGradientFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colors[${grainGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n${declareRandom}\n\n\nfloat noisenoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  // Smoothstep for interpolation\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  // Do the interpolation as two nested mix operations\n  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat rand(vec2 n) {\n  return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\n}\nfloat noise(vec2 n) {\n  const vec2 d = vec2(0.0, 1.0);\n  vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\n  return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\n}\nfloat fbm_4(vec2 n) {\n  float total = 0.0, amplitude = .2;\n  for (int i = 0; i < 4; i++) {\n    total += noise(n) * amplitude;\n    n += n;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\n\nvec2 truchet(vec2 uv, float idx){\n    idx = fract(((idx - .5) * 2.));\n    if (idx > 0.75) {\n        uv = vec2(1.0) - uv;\n    } else if (idx > 0.5) {\n        uv = vec2(1.0 - uv.x, uv.y);\n    } else if (idx > 0.25) {\n        uv = 1.0 - vec2(1.0 - uv.x, uv.y);\n    }\n    return uv;\n}\n\nvoid main() {\n  \n  float t = .1 * u_time;\n  \n  vec2 grain_uv = (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;\n  vec2 shape_uv = v_objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = v_patternUV * .005;\n  }\n  \n  \n  float shape = 0.;\n  \n  if (u_shape < 1.5) {\n    // Sine wave\n    \n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n      \n  } else if (u_shape < 2.5) {\n    // Grid (dots)\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);\n\n    float speed = sign(rand - .5) * ceil(2. + rand);\n    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);  \n    shape = pow(shape, 4.);\n  \n  } else if (u_shape < 3.5) {\n    // Truchet pattern\n    \n    float n2 = noisenoise(shape_uv * .4 - 2.5 * t);\n    shape_uv.x += 10.;\n    shape_uv *= .6;\n\n    vec2 tile = truchet(fract(shape_uv), random(floor(shape_uv)));\n\n    float distance1 = length(tile);\n    float distance2 = length(tile - vec2(1.));\n\n    n2 -= .5;\n    n2 *= .1;\n    shape = smoothstep(.2, .55, distance1 + n2) * smoothstep(.8, .45, distance1 - n2);\n    shape += smoothstep(.2, .55, distance2 + n2) * smoothstep(.8, .45, distance2 - n2);\n    \n    shape = pow(shape, 1.5);\n      \n  } else if (u_shape < 4.5) {  \n    // Corners\n\n    shape_uv *= .6;\n    vec2 outer = vec2(.5);\n    \n    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * sin(3. * t)));\n    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape = 1. - bl.x * bl.y * tr.x * tr.y;\n    \n    shape_uv = -shape_uv;\n    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * cos(3. * t)));\n    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape -= bl.x * bl.y * tr.x * tr.y; \n    \n    shape = 1. - smoothstep(0., 1., shape);\n    \n  } else if (u_shape < 5.5) {  \n    // Ripple\n  \n    shape_uv *= 2.;\n    float dist = length(.4 * shape_uv);\n    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Blob\n\n    t *= 2.;\n       \n    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));\n    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));\n    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));\n    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));\n    \n    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);\n    \n    shape = smoothstep(.0, .9, shape);\n    float edge = smoothstep(.25, .3, shape);\n    shape = mix(.0, shape, edge);\n    \n  } else {\n    // Sphere\n\n    shape_uv *= 2.;\n    float d = length(shape_uv);\n    float z = sqrt(1.0 - clamp(pow(d, 2.0), 0.0, 1.0));\n    vec3 pos = vec3(shape_uv, z);\n    vec3 lightPos = normalize(vec3(cos(3. * t), 0.8, sin(2.5 * t)));\n    float lighting = dot(lightPos, pos);\n    float edge = smoothstep(1., .97, d);\n    shape = mix(.1, .5 + .5 * lighting, edge);\n  }\n  \n  float snoise05 = snoise(grain_uv * .5);\n  float grainDist = snoise(grain_uv * .2) * snoise05 - fbm_4(.002 * grain_uv + 10.) - fbm_4(.003 * grain_uv);\n  float noise = clamp(.6 * snoise05 - fbm_4(.4 * grain_uv) - fbm_4(.001 * grain_uv), 0., 1.);\n\n  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n  shape += u_noise * 10. / u_colorsCount * noise;  \n\n  float edge_w = fwidth(shape);\n      \n  float mixer = shape;\n  vec3 gradient = u_colors[0].rgb;\n  for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n\n      vec2 borders = vec2(float(i) - u_softness, float(i) + u_softness + edge_w) / u_colorsCount;\n      float localT = smoothstep(borders[0], borders[1], mixer);\n      gradient = mix(gradient, u_colors[i].rgb, localT);\n  }\n\n  vec3 color = gradient;\n  float opacity = 1.;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GrainGradientUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_softness: number;\n  u_intensity: number;\n  u_noise: number;\n  u_shape: number;\n}\n\nexport interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  softness?: number;\n  intensity?: number;\n  noise?: number;\n  shape?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,eAAe,uBAAuB;AAExE,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AACjB;AAKO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAO3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOrD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAwKS,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWnD,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declareSimplexNoise, declarePI, declareRandom, colorBandingFix } from '../shader-utils';\n\nexport const grainGradientMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Grainy Gradient Ksenia Kondrashova\n */\nexport const grainGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colors[${grainGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n${declareRandom}\n\n\nfloat noisenoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  // Smoothstep for interpolation\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  // Do the interpolation as two nested mix operations\n  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat rand(vec2 n) {\n  return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\n}\nfloat noise(vec2 n) {\n  const vec2 d = vec2(0.0, 1.0);\n  vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\n  return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\n}\nfloat fbm_4(vec2 n) {\n  float total = 0.0, amplitude = .2;\n  for (int i = 0; i < 4; i++) {\n    total += noise(n) * amplitude;\n    n += n;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\n\nvec2 truchet(vec2 uv, float idx){\n    idx = fract(((idx - .5) * 2.));\n    if (idx > 0.75) {\n        uv = vec2(1.0) - uv;\n    } else if (idx > 0.5) {\n        uv = vec2(1.0 - uv.x, uv.y);\n    } else if (idx > 0.25) {\n        uv = 1.0 - vec2(1.0 - uv.x, uv.y);\n    }\n    return uv;\n}\n\nvoid main() {\n  \n  float t = .1 * u_time;\n  \n  vec2 grain_uv = (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;\n  vec2 shape_uv = v_objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = v_patternUV * .005;\n  }\n  \n  \n  float shape = 0.;\n  \n  if (u_shape < 1.5) {\n    // Sine wave\n    \n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n      \n  } else if (u_shape < 2.5) {\n    // Grid (dots)\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);\n\n    float speed = sign(rand - .5) * ceil(2. + rand);\n    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);  \n    shape = pow(shape, 4.);\n  \n  } else if (u_shape < 3.5) {\n    // Truchet pattern\n    \n    float n2 = noisenoise(shape_uv * .4 - 2.5 * t);\n    shape_uv.x += 10.;\n    shape_uv *= .6;\n\n    vec2 tile = truchet(fract(shape_uv), random(floor(shape_uv)));\n\n    float distance1 = length(tile);\n    float distance2 = length(tile - vec2(1.));\n\n    n2 -= .5;\n    n2 *= .1;\n    shape = smoothstep(.2, .55, distance1 + n2) * smoothstep(.8, .45, distance1 - n2);\n    shape += smoothstep(.2, .55, distance2 + n2) * smoothstep(.8, .45, distance2 - n2);\n    \n    shape = pow(shape, 1.5);\n      \n  } else if (u_shape < 4.5) {  \n    // Corners\n\n    shape_uv *= .6;\n    vec2 outer = vec2(.5);\n    \n    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * sin(3. * t)));\n    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape = 1. - bl.x * bl.y * tr.x * tr.y;\n    \n    shape_uv = -shape_uv;\n    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * cos(3. * t)));\n    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape -= bl.x * bl.y * tr.x * tr.y; \n    \n    shape = 1. - smoothstep(0., 1., shape);\n    \n  } else if (u_shape < 5.5) {  \n    // Ripple\n  \n    shape_uv *= 2.;\n    float dist = length(.4 * shape_uv);\n    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Blob\n\n    t *= 2.;\n       \n    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));\n    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));\n    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));\n    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));\n    \n    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);\n    \n    shape = smoothstep(.0, .9, shape);\n    float edge = smoothstep(.25, .3, shape);\n    shape = mix(.0, shape, edge);\n    \n  } else {\n    // Sphere\n\n    shape_uv *= 2.;\n    float d = length(shape_uv);\n    float z = sqrt(1.0 - clamp(pow(d, 2.0), 0.0, 1.0));\n    vec3 pos = vec3(shape_uv, z);\n    vec3 lightPos = normalize(vec3(cos(3. * t), 0.8, sin(2.5 * t)));\n    float lighting = dot(lightPos, pos);\n    float edge = smoothstep(1., .97, d);\n    shape = mix(.1, .5 + .5 * lighting, edge);\n  }\n  \n  float snoise05 = snoise(grain_uv * .5);\n  float grainDist = snoise(grain_uv * .2) * snoise05 - fbm_4(.002 * grain_uv + 10.) - fbm_4(.003 * grain_uv);\n  float noise = clamp(.6 * snoise05 - fbm_4(.4 * grain_uv) - fbm_4(.001 * grain_uv), 0., 1.);\n\n  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n  shape += u_noise * 10. / u_colorsCount * noise;  \n\n  float edge_w = fwidth(shape);\n      \n  float mixer = shape;\n  vec3 gradient = u_colors[0].rgb;\n  for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n\n      vec2 borders = vec2(float(i) - u_softness, float(i) + u_softness + edge_w) / u_colorsCount;\n      float localT = smoothstep(borders[0], borders[1], mixer);\n      gradient = mix(gradient, u_colors[i].rgb, localT);\n  }\n\n  vec3 color = gradient;\n  float opacity = 1.;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GrainGradientUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_softness: number;\n  u_intensity: number;\n  u_noise: number;\n  u_shape: (typeof GrainGradientShapes)[GrainGradientShape];\n}\n\nexport interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  softness?: number;\n  intensity?: number;\n  noise?: number;\n  shape?: GrainGradientShape;\n}\n\nexport const GrainGradientShapes = {\n  wave: 1,\n  dots: 2,\n  truchet: 3,\n  corners: 4,\n  ripple: 5,\n  blob: 6,\n  sphere: 7,\n};\n\nexport type GrainGradientShape = keyof typeof GrainGradientShapes;\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,eAAe,uBAAuB;AAExE,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AACjB;AAKO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAO3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOrD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAwKS,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWnD,eAAe;AAAA;AAAA;AAAA;AAAA;AAuBZ,MAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/shaders/liquid-metal.js

@@ -6,7 +6,7 @@
 import { sizingVariablesDeclaration } from "../shader-sizing";
 import { declarePI, declareRotate, declareSimplexNoise, colorBandingFix } from "../shader-utils";
 const liquidMetalFragmentShader = `#version 300 es
-precision highp float;
+precision mediump float;
 
 uniform float u_time;
 

package/dist/shaders/liquid-metal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/liquid-metal.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareRotate, declareSimplexNoise, colorBandingFix } from '../shader-utils';\n\n/**\n */\n\nexport const liquidMetalFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform float u_patternBlur;\nuniform float u_patternScale;\nuniform float u_dispersion;\nuniform float u_liquid;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n${declareSimplexNoise}\n\nfloat get_color_channel(float c1, float c2, float stripe_p, vec3 w, float extra_blur, float bump) {\n\n  float ch = c2;\n  float border = 0.;\n  float blur = u_patternBlur + extra_blur;\n  \n  if (u_shape < 1.) {\n    blur += .1 * smoothstep(-.4, -.6, v_responsiveUV.y);\n  }\n\n  ch = mix(ch, c1, smoothstep(.0, blur, stripe_p));\n\n  border = w[0];\n  ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n\n  bump = smoothstep(.2, .8, bump);\n  border = w[0] + .4 * (1. - bump) * w[1];\n  ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n\n  border = w[0] + .5 * (1. - bump) * w[1];\n  ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n\n  border = w[0] + w[1];\n  ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n\n  float gradient_t = (stripe_p - w[0] - w[1]) / w[2];\n  float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));\n  ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));\n\n  return ch;\n}\n\nvoid main() {\n  \n  float t = .1 * u_time;\n\n  vec2 uv = v_objectUV;\n  uv += .5;\n  uv.y = 1. - uv.y;\n\n  float cycleWidth = .5 * u_patternScale; \n  \n  float mask = 1.;\n  if (u_shape < 1.) {\n  \n    vec2 borderUV = v_responsiveUV + .5;\n    float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n    vec2 edge = min(borderUV, 1. - borderUV);\n    vec2 pixel_thickness = 250. / v_responsiveBoxGivenSize;\n    float maskX = smoothstep(0.0, pixel_thickness.x, edge.x);\n    float maskY = smoothstep(0.0, pixel_thickness.y, edge.y);\n    maskX = pow(maskX, .25);\n    maskY = pow(maskY, .25);\n    mask = clamp(1. - maskX * maskY, 0., 1.);\n    \n    uv = v_responsiveUV;\n    if (ratio > 1.) {\n      uv.y /= ratio;\n    } else {\n      uv.x *= ratio;\n    }\n    uv += .5;\n    uv.y = 1. - uv.y;\n    \n    cycleWidth *= 2.;\n\n  } else if (u_shape < 2.) {  \n    vec2 shapeUV = uv - .5;\n    shapeUV *= .67;\n    mask = pow(clamp(3. * length(shapeUV), 0., 1.), 8.);\n    \n    uv *= 1.3;\n  } else if (u_shape < 3.) {\n    vec2 shapeUV = uv - .5;\n    shapeUV *= 1.68;\n    \n    float r = length(shapeUV) * 2.;\n    float a = atan(shapeUV.y, shapeUV.x) + .2;\n    r *= (1. + .05 * sin(3. * a + 2. * t));\n    float f = abs(cos(a * 3.));\n    mask = smoothstep(f, f + .7, r);\n    \n    uv *= .8;\n    cycleWidth *= 1.6;\n\n  } else if (u_shape < 4.) {\n    vec2 shapeUV = uv - .5;\n    shapeUV *= 1.3;\n    mask = 0.;\n    for (int i = 0; i < 5; i++) {\n      float fi = float(i);\n      float speed = 4.5 + 2. * sin(fi * 12.345);\n      float angle = -fi * 1.5;\n      vec2 dir1 = vec2(cos(angle), sin(angle));\n      vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));\n      vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17));\n      float d = length(shapeUV + traj);\n      mask += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);\n    }\n    mask = 1. - smoothstep(.85, 1., mask);\n    \n    uv *= 1.3;\n    uv.y += .2;\n  }\n\n  float contour = smoothstep(0., 1., mask) * smoothstep(1., 0., mask);\n\n\n  float diagBLtoTR = uv.x - uv.y;    \n  float diagTLtoBR = uv.x + uv.y;\n\n  vec3 color = vec3(0.);\n  float opacity = 1.;\n\n  vec3 color1 = vec3(.98, 0.98, 1.);\n  vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));\n\n  vec2 grad_uv = uv - .5;\n  \n  float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));\n  grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);\n  float direction = grad_uv.x;\n\n  float bump = pow(1.8 * dist, 1.2);\n  bump = 1. - bump;\n  bump *= pow(uv.y, .3);\n\n\n  float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump);\n  float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump);\n  float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);\n\n  float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;\n  float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;\n\n  opacity = 1. - smoothstep(.9, .92, mask);\n\n  float noise = snoise(uv - t);\n\n  mask += (1. - mask) * u_liquid * noise;\n\n  float colorDispersion = 0.;\n  colorDispersion += (1. - bump);\n  colorDispersion = clamp(colorDispersion, 0., 1.);\n\n  direction += diagBLtoTR;\n\n  direction -= 2. * noise * contour;\n\n  bump *= clamp(pow(uv.y, .1), .3, 1.);\n  direction *= (.1 + (1.1 - mask) * bump);\n  direction *= smoothstep(1., .7, mask);\n\n  float ridge = .2 * (smoothstep(.0, .15, uv.y) * smoothstep(.4, .15, uv.y));\n  ridge += .03 * (smoothstep(.1, .2, 1. - uv.y) * smoothstep(.4, .2, 1. - uv.y));\n  direction += ridge;\n\n  direction *= (.5 + .5 * pow(uv.y, 2.));\n\n  direction *= cycleWidth;\n\n  direction -= t;\n\n  float dispersionRed = colorDispersion;\n  dispersionRed += .03 * bump * noise;\n  float dispersionBlue = 1.3 * colorDispersion;\n\n  dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * smoothstep(.5, .1, uv.y)) * (smoothstep(.4, .6, bump) * smoothstep(1., .4, bump));\n  dispersionRed -= diagBLtoTR;\n\n  dispersionBlue += (smoothstep(0., .4, uv.y) * smoothstep(.8, .1, uv.y)) * (smoothstep(.4, .6, bump) * smoothstep(.8, .4, bump));\n  dispersionBlue -= .2 * mask;\n\n  dispersionRed *= u_dispersion;\n  dispersionBlue *= u_dispersion;\n\n  vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);\n  w[1] -= .02 * smoothstep(.0, 1., mask + bump);\n  float extraBlur = bump;\n  float stripe_r = mod(direction + dispersionRed, 1.);\n  float r = get_color_channel(color1.r, color2.r, stripe_r, w, 0.02 + .03 * u_dispersion * bump, extraBlur);\n  float stripe_g = mod(direction, 1.);\n  float g = get_color_channel(color1.g, color2.g, stripe_g, w, 0.01 / (1. - 0. * diagBLtoTR), extraBlur);\n  float stripe_b = mod(direction - dispersionBlue, 1.);\n  float b = get_color_channel(color1.b, color2.b, stripe_b, w, .01, extraBlur);\n\n  color = vec3(r, g, b);\n  color *= opacity;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface LiquidMetalUniforms extends ShaderSizingUniforms {\n  u_patternBlur: number;\n  u_patternScale: number;\n  u_dispersion: number;\n  u_liquid: number;\n  u_shape: number;\n}\n\nexport interface LiquidMetalParams extends ShaderSizingParams, ShaderMotionParams {\n  patternBlur?: number;\n  patternScale?: number;\n  dispersion?: number;\n  liquid?: number;\n  shape?: number;\n}\n"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareRotate, declareSimplexNoise, colorBandingFix } from '../shader-utils';\n\n/**\n */\n\nexport const liquidMetalFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform float u_patternBlur;\nuniform float u_patternScale;\nuniform float u_dispersion;\nuniform float u_liquid;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n${declareSimplexNoise}\n\nfloat get_color_channel(float c1, float c2, float stripe_p, vec3 w, float extra_blur, float bump) {\n\n  float ch = c2;\n  float border = 0.;\n  float blur = u_patternBlur + extra_blur;\n  \n  if (u_shape < 1.) {\n    blur += .1 * smoothstep(-.4, -.6, v_responsiveUV.y);\n  }\n\n  ch = mix(ch, c1, smoothstep(.0, blur, stripe_p));\n\n  border = w[0];\n  ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n\n  bump = smoothstep(.2, .8, bump);\n  border = w[0] + .4 * (1. - bump) * w[1];\n  ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n\n  border = w[0] + .5 * (1. - bump) * w[1];\n  ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n\n  border = w[0] + w[1];\n  ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n\n  float gradient_t = (stripe_p - w[0] - w[1]) / w[2];\n  float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));\n  ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));\n\n  return ch;\n}\n\nvoid main() {\n  \n  float t = .1 * u_time;\n\n  vec2 uv = v_objectUV;\n  uv += .5;\n  uv.y = 1. - uv.y;\n\n  float cycleWidth = .5 * u_patternScale; \n  \n  float mask = 1.;\n  if (u_shape < 1.) {\n  \n    vec2 borderUV = v_responsiveUV + .5;\n    float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n    vec2 edge = min(borderUV, 1. - borderUV);\n    vec2 pixel_thickness = 250. / v_responsiveBoxGivenSize;\n    float maskX = smoothstep(0.0, pixel_thickness.x, edge.x);\n    float maskY = smoothstep(0.0, pixel_thickness.y, edge.y);\n    maskX = pow(maskX, .25);\n    maskY = pow(maskY, .25);\n    mask = clamp(1. - maskX * maskY, 0., 1.);\n    \n    uv = v_responsiveUV;\n    if (ratio > 1.) {\n      uv.y /= ratio;\n    } else {\n      uv.x *= ratio;\n    }\n    uv += .5;\n    uv.y = 1. - uv.y;\n    \n    cycleWidth *= 2.;\n\n  } else if (u_shape < 2.) {  \n    vec2 shapeUV = uv - .5;\n    shapeUV *= .67;\n    mask = pow(clamp(3. * length(shapeUV), 0., 1.), 8.);\n    \n    uv *= 1.3;\n  } else if (u_shape < 3.) {\n    vec2 shapeUV = uv - .5;\n    shapeUV *= 1.68;\n    \n    float r = length(shapeUV) * 2.;\n    float a = atan(shapeUV.y, shapeUV.x) + .2;\n    r *= (1. + .05 * sin(3. * a + 2. * t));\n    float f = abs(cos(a * 3.));\n    mask = smoothstep(f, f + .7, r);\n    \n    uv *= .8;\n    cycleWidth *= 1.6;\n\n  } else if (u_shape < 4.) {\n    vec2 shapeUV = uv - .5;\n    shapeUV *= 1.3;\n    mask = 0.;\n    for (int i = 0; i < 5; i++) {\n      float fi = float(i);\n      float speed = 4.5 + 2. * sin(fi * 12.345);\n      float angle = -fi * 1.5;\n      vec2 dir1 = vec2(cos(angle), sin(angle));\n      vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));\n      vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17));\n      float d = length(shapeUV + traj);\n      mask += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);\n    }\n    mask = 1. - smoothstep(.85, 1., mask);\n    \n    uv *= 1.3;\n    uv.y += .2;\n  }\n\n  float contour = smoothstep(0., 1., mask) * smoothstep(1., 0., mask);\n\n\n  float diagBLtoTR = uv.x - uv.y;    \n  float diagTLtoBR = uv.x + uv.y;\n\n  vec3 color = vec3(0.);\n  float opacity = 1.;\n\n  vec3 color1 = vec3(.98, 0.98, 1.);\n  vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));\n\n  vec2 grad_uv = uv - .5;\n  \n  float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));\n  grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);\n  float direction = grad_uv.x;\n\n  float bump = pow(1.8 * dist, 1.2);\n  bump = 1. - bump;\n  bump *= pow(uv.y, .3);\n\n\n  float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump);\n  float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump);\n  float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);\n\n  float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;\n  float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;\n\n  opacity = 1. - smoothstep(.9, .92, mask);\n\n  float noise = snoise(uv - t);\n\n  mask += (1. - mask) * u_liquid * noise;\n\n  float colorDispersion = 0.;\n  colorDispersion += (1. - bump);\n  colorDispersion = clamp(colorDispersion, 0., 1.);\n\n  direction += diagBLtoTR;\n\n  direction -= 2. * noise * contour;\n\n  bump *= clamp(pow(uv.y, .1), .3, 1.);\n  direction *= (.1 + (1.1 - mask) * bump);\n  direction *= smoothstep(1., .7, mask);\n\n  float ridge = .2 * (smoothstep(.0, .15, uv.y) * smoothstep(.4, .15, uv.y));\n  ridge += .03 * (smoothstep(.1, .2, 1. - uv.y) * smoothstep(.4, .2, 1. - uv.y));\n  direction += ridge;\n\n  direction *= (.5 + .5 * pow(uv.y, 2.));\n\n  direction *= cycleWidth;\n\n  direction -= t;\n\n  float dispersionRed = colorDispersion;\n  dispersionRed += .03 * bump * noise;\n  float dispersionBlue = 1.3 * colorDispersion;\n\n  dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * smoothstep(.5, .1, uv.y)) * (smoothstep(.4, .6, bump) * smoothstep(1., .4, bump));\n  dispersionRed -= diagBLtoTR;\n\n  dispersionBlue += (smoothstep(0., .4, uv.y) * smoothstep(.8, .1, uv.y)) * (smoothstep(.4, .6, bump) * smoothstep(.8, .4, bump));\n  dispersionBlue -= .2 * mask;\n\n  dispersionRed *= u_dispersion;\n  dispersionBlue *= u_dispersion;\n\n  vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);\n  w[1] -= .02 * smoothstep(.0, 1., mask + bump);\n  float extraBlur = bump;\n  float stripe_r = mod(direction + dispersionRed, 1.);\n  float r = get_color_channel(color1.r, color2.r, stripe_r, w, 0.02 + .03 * u_dispersion * bump, extraBlur);\n  float stripe_g = mod(direction, 1.);\n  float g = get_color_channel(color1.g, color2.g, stripe_g, w, 0.01 / (1. - 0. * diagBLtoTR), extraBlur);\n  float stripe_b = mod(direction - dispersionBlue, 1.);\n  float b = get_color_channel(color1.b, color2.b, stripe_b, w, .01, extraBlur);\n\n  color = vec3(r, g, b);\n  color *= opacity;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface LiquidMetalUniforms extends ShaderSizingUniforms {\n  u_patternBlur: number;\n  u_patternScale: number;\n  u_dispersion: number;\n  u_liquid: number;\n  u_shape: number;\n}\n\nexport interface LiquidMetalParams extends ShaderSizingParams, ShaderMotionParams {\n  patternBlur?: number;\n  patternScale?: number;\n  dispersion?: number;\n  liquid?: number;\n  shape?: number;\n}\n"],
   "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,qBAAqB,uBAAuB;AAKxE,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAW/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA,EACb,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA+LjB,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/mesh-gradient.js

@@ -9,7 +9,7 @@ const meshGradientMeta = {
   maxColorCount: 10
 };
 const meshGradientFragmentShader = `#version 300 es
-precision highp float;
+precision mediump float;
 
 uniform float u_time;
 

package/dist/shaders/mesh-gradient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/mesh-gradient.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareRotate, colorBandingFix } from '../shader-utils';\n\nexport const meshGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Mesh Gradient Ksenia Kondrashova\n * Smooth, animated mesh gradient using a dynamic list of colors\n *\n * Uniforms include:\n * - u_colors (vec4[]): Input RGBA colors\n * - u_colorsCount (float): Number of active colors (`u_colors` length)\n * - u_distortion (float): Amount of animated wavy distortion applied to UV coordinates\n * - u_swirl (float): Amount of radial swirl distortion applied to UV coordinates\n */\nexport const meshGradientFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${meshGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_distortion;\nuniform float u_swirl;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n\nvec2 getPosition(int i, float t) {\n  float a = float(i) * .37;\n  float b = .6 + mod(float(i), 3.) * .3;\n  float c = .8 + mod(float(i + 1), 4.) * 0.25;\n\n  float x = sin(t * b + a);\n  float y = cos(t * c + a * 1.5);\n\n  return .5 + .5 * vec2(x, y);\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  shape_uv += .5;\n\n  float t = .5 * u_time;\n\n  float radius = smoothstep(0., 1., length(shape_uv - .5));\n  float center = 1. - radius;\n  for (float i = 1.; i <= 2.; i++) {\n    shape_uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., shape_uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., shape_uv.y));\n    shape_uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., shape_uv.x));\n  }\n\n  vec2 uvRotated = shape_uv;\n  uvRotated -= vec2(.5);\n  float angle = 3. * u_swirl * radius;\n  uvRotated = rotate(uvRotated, -angle);\n  uvRotated += vec2(.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n  float totalWeight = 0.;\n  \n  for (int i = 0; i < ${meshGradientMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n    \n    vec2 pos = getPosition(i, t);\n    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;\n    float opacityFraction = u_colors[i].a;\n      \n    float dist = 0.;\n    if (mod(float(i), 2.) > 1.) {\n      dist = length(shape_uv - pos);\n    } else {\n      dist = length(uvRotated - pos);\n    }\n\n    dist = pow(dist, 3.5);\n    float weight = 1. / (dist + 1e-3);\n    color += colorFraction * weight;\n    opacity += opacityFraction * weight;\n    totalWeight += weight;\n  }\n\n  color /= totalWeight;\n  opacity /= totalWeight;\n  \n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface MeshGradientUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_distortion: number;\n  u_swirl: number;\n}\n\nexport interface MeshGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  distortion?: number;\n  swirl?: number;\n}\n"],
+  "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareRotate, colorBandingFix } from '../shader-utils';\n\nexport const meshGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Mesh Gradient Ksenia Kondrashova\n * Smooth, animated mesh gradient using a dynamic list of colors\n *\n * Uniforms include:\n * - u_colors (vec4[]): Input RGBA colors\n * - u_colorsCount (float): Number of active colors (`u_colors` length)\n * - u_distortion (float): Amount of animated wavy distortion applied to UV coordinates\n * - u_swirl (float): Amount of radial swirl distortion applied to UV coordinates\n */\nexport const meshGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${meshGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_distortion;\nuniform float u_swirl;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n\nvec2 getPosition(int i, float t) {\n  float a = float(i) * .37;\n  float b = .6 + mod(float(i), 3.) * .3;\n  float c = .8 + mod(float(i + 1), 4.) * 0.25;\n\n  float x = sin(t * b + a);\n  float y = cos(t * c + a * 1.5);\n\n  return .5 + .5 * vec2(x, y);\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  shape_uv += .5;\n\n  float t = .5 * u_time;\n\n  float radius = smoothstep(0., 1., length(shape_uv - .5));\n  float center = 1. - radius;\n  for (float i = 1.; i <= 2.; i++) {\n    shape_uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., shape_uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., shape_uv.y));\n    shape_uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., shape_uv.x));\n  }\n\n  vec2 uvRotated = shape_uv;\n  uvRotated -= vec2(.5);\n  float angle = 3. * u_swirl * radius;\n  uvRotated = rotate(uvRotated, -angle);\n  uvRotated += vec2(.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n  float totalWeight = 0.;\n  \n  for (int i = 0; i < ${meshGradientMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n    \n    vec2 pos = getPosition(i, t);\n    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;\n    float opacityFraction = u_colors[i].a;\n      \n    float dist = 0.;\n    if (mod(float(i), 2.) > 1.) {\n      dist = length(shape_uv - pos);\n    } else {\n      dist = length(uvRotated - pos);\n    }\n\n    dist = pow(dist, 3.5);\n    float weight = 1. / (dist + 1e-3);\n    color += colorFraction * weight;\n    opacity += opacityFraction * weight;\n    totalWeight += weight;\n  }\n\n  color /= totalWeight;\n  opacity /= totalWeight;\n  \n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface MeshGradientUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_distortion: number;\n  u_swirl: number;\n}\n\nexport interface MeshGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  distortion?: number;\n  swirl?: number;\n}\n"],
   "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,uBAAuB;AAEnD,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AACjB;AAYO,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAK1B,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAqCS,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwBlD,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/metaballs.js

@@ -10,7 +10,7 @@ const metaballsMeta = {
   maxBallsCount: 20
 };
 const metaballsFragmentShader = `#version 300 es
-precision highp float;
+precision mediump float;
 
 uniform float u_time;
 

package/dist/shaders/metaballs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/metaballs.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, colorBandingFix } from '../shader-utils';\n\nexport const metaballsMeta = {\n  maxColorCount: 8,\n  maxBallsCount: 20,\n} as const;\n\n/**\n * Metaballs (circular shapes with gooey effect applied)\n * The artwork by Ksenia Kondrashova\n *\n * Uniforms include:\n * - uColors (vec4[]): Input RGBA colors\n * - uColorsCount (float): Number of active colors (`uColors` length)\n * - u_count (float)\n * - u_size (float)\n */\nexport const metaballsFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${metaballsMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_count;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat hash(float x) {\n  return fract(sin(x) * 43758.5453123);\n}\nfloat noise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f);\n  return mix(hash(i), hash(i + 1.0), u);\n}\n\nfloat getBallShape(vec2 uv, vec2 c, float p) {\n  float s = .5 * length(uv - c);\n  s = 1. - clamp(s, 0., 1.);\n  s = pow(s, p);\n  return s;\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  shape_uv += .5;\n\n  float t = .2 * u_time + 1.;\n\n  vec3 totalColor = vec3(0.);\n  float totalShape = 0.;\n  float totalOpacity = 0.;\n  \n  for (int i = 0; i < ${metaballsMeta.maxBallsCount}; i++) {\n    if (i >= int(ceil(u_count))) break;\n  \n    float idxFract = float(i) / float(${metaballsMeta.maxBallsCount});\n    float angle = TWO_PI * idxFract;\n  \n    float speed = 1. - .2 * idxFract;\n    float noiseX = noise(angle * 10. + float(i) + t * speed);\n    float noiseY = noise(angle * 20. + float(i) - t * speed);\n  \n    vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);\n  \n    int safeIndex = i % int(u_colorsCount + 0.5);\n    vec4 ballColor = u_colors[safeIndex];\n    ballColor.rgb *= ballColor.a;\n\n    float sizeFrac = 1.;\n    if (float(i) > floor(u_count - 1.)) {\n      sizeFrac *= fract(u_count);\n    }\n\n    float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);\n    shape *= pow(u_size, .2);\n    shape = smoothstep(0., 1., shape);\n\n    totalColor += ballColor.rgb * shape;\n    totalShape += shape;\n    totalOpacity += ballColor.a * shape;\n  }\n\n  totalColor /= max(totalShape, 1e-4);\n  totalOpacity /= max(totalShape, 1e-4);\n\n  float edge_width = fwidth(totalShape);\n  float finalShape = smoothstep(.4, .4 + edge_width, totalShape);\n\n  vec3 color = totalColor * finalShape;\n  float opacity = totalOpacity * finalShape;\n\n  if (opacity < .005) {\n    discard;\n  }\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface MetaballsUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_count: number;\n  u_size: number;\n}\n\nexport interface MetaballsParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  count?: number;\n  size?: number;\n}\n"],
+  "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, colorBandingFix } from '../shader-utils';\n\nexport const metaballsMeta = {\n  maxColorCount: 8,\n  maxBallsCount: 20,\n} as const;\n\n/**\n * Metaballs (circular shapes with gooey effect applied)\n * The artwork by Ksenia Kondrashova\n *\n * Uniforms include:\n * - uColors (vec4[]): Input RGBA colors\n * - uColorsCount (float): Number of active colors (`uColors` length)\n * - u_count (float)\n * - u_size (float)\n */\nexport const metaballsFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${metaballsMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_count;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat hash(float x) {\n  return fract(sin(x) * 43758.5453123);\n}\nfloat noise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f);\n  return mix(hash(i), hash(i + 1.0), u);\n}\n\nfloat getBallShape(vec2 uv, vec2 c, float p) {\n  float s = .5 * length(uv - c);\n  s = 1. - clamp(s, 0., 1.);\n  s = pow(s, p);\n  return s;\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  shape_uv += .5;\n\n  float t = .2 * u_time + 1.;\n\n  vec3 totalColor = vec3(0.);\n  float totalShape = 0.;\n  float totalOpacity = 0.;\n  \n  for (int i = 0; i < ${metaballsMeta.maxBallsCount}; i++) {\n    if (i >= int(ceil(u_count))) break;\n  \n    float idxFract = float(i) / float(${metaballsMeta.maxBallsCount});\n    float angle = TWO_PI * idxFract;\n  \n    float speed = 1. - .2 * idxFract;\n    float noiseX = noise(angle * 10. + float(i) + t * speed);\n    float noiseY = noise(angle * 20. + float(i) - t * speed);\n  \n    vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);\n  \n    int safeIndex = i % int(u_colorsCount + 0.5);\n    vec4 ballColor = u_colors[safeIndex];\n    ballColor.rgb *= ballColor.a;\n\n    float sizeFrac = 1.;\n    if (float(i) > floor(u_count - 1.)) {\n      sizeFrac *= fract(u_count);\n    }\n\n    float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);\n    shape *= pow(u_size, .2);\n    shape = smoothstep(0., 1., shape);\n\n    totalColor += ballColor.rgb * shape;\n    totalShape += shape;\n    totalOpacity += ballColor.a * shape;\n  }\n\n  totalColor /= max(totalShape, 1e-4);\n  totalOpacity /= max(totalShape, 1e-4);\n\n  float edge_width = fwidth(totalShape);\n  float finalShape = smoothstep(.4, .4 + edge_width, totalShape);\n\n  vec3 color = totalColor * finalShape;\n  float opacity = totalOpacity * finalShape;\n\n  if (opacity < .005) {\n    discard;\n  }\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface MetaballsUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_count: number;\n  u_size: number;\n}\n\nexport interface MetaballsParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  count?: number;\n  size?: number;\n}\n"],
   "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAEpC,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,eAAe;AACjB;AAYO,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKvB,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA8Ba,cAAc,aAAa;AAAA;AAAA;AAAA,wCAGX,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwC/D,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/neuro-noise.js

@@ -6,7 +6,7 @@
 import { sizingVariablesDeclaration } from "../shader-sizing";
 import { declareRotate, colorBandingFix } from "../shader-utils";
 const neuroNoiseFragmentShader = `#version 300 es
-precision highp float;
+precision mediump float;
 
 uniform float u_time;
 uniform vec2 u_resolution;

package/dist/shaders/neuro-noise.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/neuro-noise.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declareRotate, colorBandingFix } from '../shader-utils';\n\n/**\n * Neuro Noise Pattern\n * The original artwork: https://codepen.io/ksenia-k/full/vYwgrWv by Ksenia Kondrashova\n * Renders a fractal-like structure made of several layers of since-arches\n *\n * Uniforms include:\n * u_colorFront - the front color of pattern\n * u_colorBack - the back color of pattern\n * u_brightness - the power (brightness) of pattern lines\n */\nexport const neuroNoiseFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_brightness;\n\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declareRotate}\n\nfloat neuro_shape(vec2 uv, float t) {\n  vec2 sine_acc = vec2(0.);\n  vec2 res = vec2(0.);\n  float scale = 8.;\n\n  for (int j = 0; j < 15; j++) {\n    uv = rotate(uv, 1.);\n    sine_acc = rotate(sine_acc, 1.);\n    vec2 layer = uv * scale + float(j) + sine_acc - t;\n    sine_acc += sin(layer);\n    res += (.5 + .5 * cos(layer)) / scale;\n    scale *= (1.2);\n  }\n  return res.x + res.y;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n\n  shape_uv *= .002;\n\n  float t = .5 * u_time;\n\n  float noise = neuro_shape(shape_uv, t);\n\n  noise = u_brightness * pow(noise, 3.);\n  noise += pow(noise, 12.);\n  noise = max(.0, noise - .5);\n\n  vec3 color = mix(u_colorBack.rgb * u_colorBack.a, u_colorFront.rgb * u_colorFront.a, noise);\n  float opacity = mix(u_colorBack.a, u_colorFront.a, noise);\n  \n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface NeuroNoiseUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_brightness: number;\n}\n\nexport interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colorFront?: string;\n  colorBack?: string;\n  brightness?: number;\n}\n"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declareRotate, colorBandingFix } from '../shader-utils';\n\n/**\n * Neuro Noise Pattern\n * The original artwork: https://codepen.io/ksenia-k/full/vYwgrWv by Ksenia Kondrashova\n * Renders a fractal-like structure made of several layers of since-arches\n *\n * Uniforms include:\n * u_colorFront - the front color of pattern\n * u_colorBack - the back color of pattern\n * u_brightness - the power (brightness) of pattern lines\n */\nexport const neuroNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_brightness;\n\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declareRotate}\n\nfloat neuro_shape(vec2 uv, float t) {\n  vec2 sine_acc = vec2(0.);\n  vec2 res = vec2(0.);\n  float scale = 8.;\n\n  for (int j = 0; j < 15; j++) {\n    uv = rotate(uv, 1.);\n    sine_acc = rotate(sine_acc, 1.);\n    vec2 layer = uv * scale + float(j) + sine_acc - t;\n    sine_acc += sin(layer);\n    res += (.5 + .5 * cos(layer)) / scale;\n    scale *= (1.2);\n  }\n  return res.x + res.y;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n\n  shape_uv *= .002;\n\n  float t = .5 * u_time;\n\n  float noise = neuro_shape(shape_uv, t);\n\n  noise = u_brightness * pow(noise, 3.);\n  noise += pow(noise, 12.);\n  noise = max(.0, noise - .5);\n\n  vec3 color = mix(u_colorBack.rgb * u_colorBack.a, u_colorFront.rgb * u_colorFront.a, noise);\n  float opacity = mix(u_colorBack.a, u_colorFront.a, noise);\n  \n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface NeuroNoiseUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_brightness: number;\n}\n\nexport interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colorFront?: string;\n  colorBack?: string;\n  brightness?: number;\n}\n"],
   "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,eAAe,uBAAuB;AAYxC,MAAM,2BAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY9C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkCX,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }