@paper-design/shaders 0.0.26 → 0.0.27

package/dist/shaders/grain-gradient.js

@@ -0,0 +1,219 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing";
+import { declareSimplexNoise, declarePI, declareRandom, colorBandingFix } from "../shader-utils";
+const grainGradientMeta = {
+  maxColorCount: 7
+};
+const grainGradientFragmentShader = `#version 300 es
+precision highp float;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+
+uniform vec4 u_colors[${grainGradientMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_softness;
+uniform float u_intensity;
+uniform float u_noise;
+uniform float u_shape;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareSimplexNoise}
+${declareRandom}
+
+
+float noisenoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = random(i);
+  float b = random(i + vec2(1.0, 0.0));
+  float c = random(i + vec2(0.0, 1.0));
+  float d = random(i + vec2(1.0, 1.0));
+
+  // Smoothstep for interpolation
+  vec2 u = f * f * (3.0 - 2.0 * f);
+
+  // Do the interpolation as two nested mix operations
+  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float rand(vec2 n) {
+  return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+}
+float noise(vec2 n) {
+  const vec2 d = vec2(0.0, 1.0);
+  vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
+  return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
+}
+float fbm_4(vec2 n) {
+  float total = 0.0, amplitude = .2;
+  for (int i = 0; i < 4; i++) {
+    total += noise(n) * amplitude;
+    n += n;
+    amplitude *= 0.6;
+  }
+  return total;
+}
+
+
+vec2 truchet(vec2 uv, float idx){
+    idx = fract(((idx - .5) * 2.));
+    if (idx > 0.75) {
+        uv = vec2(1.0) - uv;
+    } else if (idx > 0.5) {
+        uv = vec2(1.0 - uv.x, uv.y);
+    } else if (idx > 0.25) {
+        uv = 1.0 - vec2(1.0 - uv.x, uv.y);
+    }
+    return uv;
+}
+
+void main() {
+  
+  float t = .1 * u_time;
+  
+  vec2 grain_uv = (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;
+  vec2 shape_uv = v_objectUV;
+  if (u_shape < 3.5) {
+    shape_uv = v_patternUV * .005;
+  }
+  
+  
+  float shape = 0.;
+  
+  if (u_shape < 1.5) {
+    // Sine wave
+    
+    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 < 2.5) {
+    // Grid (dots)
+
+    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 = pow(shape, 4.);
+  
+  } else if (u_shape < 3.5) {
+    // Truchet pattern
+    
+    float n2 = noisenoise(shape_uv * .4 - 2.5 * t);
+    shape_uv.x += 10.;
+    shape_uv *= .6;
+
+    vec2 tile = truchet(fract(shape_uv), random(floor(shape_uv)));
+
+    float distance1 = length(tile);
+    float distance2 = length(tile - vec2(1.));
+
+    n2 -= .5;
+    n2 *= .1;
+    shape = smoothstep(.2, .55, distance1 + n2) * smoothstep(.8, .45, distance1 - n2);
+    shape += smoothstep(.2, .55, distance2 + n2) * smoothstep(.8, .45, distance2 - n2);
+    
+    shape = pow(shape, 1.5);
+      
+  } else if (u_shape < 4.5) {  
+    // Corners
+
+    shape_uv *= .6;
+    vec2 outer = vec2(.5);
+    
+    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * sin(3. * t)));
+    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);
+    shape = 1. - bl.x * bl.y * tr.x * tr.y;
+    
+    shape_uv = -shape_uv;
+    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * cos(3. * t)));
+    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);
+    shape -= bl.x * bl.y * tr.x * tr.y; 
+    
+    shape = 1. - smoothstep(0., 1., shape);
+    
+  } else if (u_shape < 5.5) {  
+    // Ripple
+  
+    shape_uv *= 2.;
+    float dist = length(.4 * shape_uv);
+    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;
+    shape = waves;
+
+  } else if (u_shape < 6.5) {
+    // Blob
+
+    t *= 2.;
+       
+    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));
+    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));
+    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));
+    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));
+    
+    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);
+    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);
+    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);
+    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);
+    
+    shape = smoothstep(.0, .9, shape);
+    float edge = smoothstep(.25, .3, shape);
+    shape = mix(.0, shape, edge);
+    
+  } else {
+    // Sphere
+
+    shape_uv *= 2.;
+    float d = length(shape_uv);
+    float z = sqrt(1.0 - clamp(pow(d, 2.0), 0.0, 1.0));
+    vec3 pos = vec3(shape_uv, z);
+    vec3 lightPos = normalize(vec3(cos(3. * t), 0.8, sin(2.5 * t)));
+    float lighting = dot(lightPos, pos);
+    float edge = smoothstep(1., .97, d);
+    shape = mix(.1, .5 + .5 * lighting, edge);
+  }
+  
+  float snoise05 = snoise(grain_uv * .5);
+  float grainDist = snoise(grain_uv * .2) * snoise05 - fbm_4(.002 * grain_uv + 10.) - fbm_4(.003 * grain_uv);
+  float noise = clamp(.6 * snoise05 - fbm_4(.4 * grain_uv) - fbm_4(.001 * grain_uv), 0., 1.);
+
+  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);
+  shape += u_noise * 10. / u_colorsCount * noise;  
+
+  float edge_w = fwidth(shape);
+      
+  float mixer = shape;
+  vec3 gradient = u_colors[0].rgb;
+  for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {
+      if (i >= int(u_colorsCount)) break;
+
+      vec2 borders = vec2(float(i) - u_softness, float(i) + u_softness + edge_w) / u_colorsCount;
+      float localT = smoothstep(borders[0], borders[1], mixer);
+      gradient = mix(gradient, u_colors[i].rgb, localT);
+  }
+
+  vec3 color = gradient;
+  float opacity = 1.;
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  grainGradientFragmentShader,
+  grainGradientMeta
+};
+//# sourceMappingURL=grain-gradient.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

package/dist/shaders/liquid-metal.d.ts

@@ -0,0 +1,19 @@
+import type { ShaderMotionParams } from '../shader-mount';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+/**
+ */
+export declare const liquidMetalFragmentShader: string;
+export interface LiquidMetalUniforms extends ShaderSizingUniforms {
+    u_patternBlur: number;
+    u_patternScale: number;
+    u_dispersion: number;
+    u_liquid: number;
+    u_shape: number;
+}
+export interface LiquidMetalParams extends ShaderSizingParams, ShaderMotionParams {
+    patternBlur?: number;
+    patternScale?: number;
+    dispersion?: number;
+    liquid?: number;
+    shape?: number;
+}

package/dist/shaders/liquid-metal.js

@@ -0,0 +1,224 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing";
+import { declarePI, declareRotate, declareSimplexNoise, colorBandingFix } from "../shader-utils";
+const liquidMetalFragmentShader = `#version 300 es
+precision highp float;
+
+uniform float u_time;
+
+uniform float u_patternBlur;
+uniform float u_patternScale;
+uniform float u_dispersion;
+uniform float u_liquid;
+uniform float u_shape;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareRotate}
+${declareSimplexNoise}
+
+float get_color_channel(float c1, float c2, float stripe_p, vec3 w, float extra_blur, float bump) {
+
+  float ch = c2;
+  float border = 0.;
+  float blur = u_patternBlur + extra_blur;
+  
+  if (u_shape < 1.) {
+    blur += .1 * smoothstep(-.4, -.6, v_responsiveUV.y);
+  }
+
+  ch = mix(ch, c1, smoothstep(.0, blur, stripe_p));
+
+  border = w[0];
+  ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));
+
+  bump = smoothstep(.2, .8, bump);
+  border = w[0] + .4 * (1. - bump) * w[1];
+  ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));
+
+  border = w[0] + .5 * (1. - bump) * w[1];
+  ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));
+
+  border = w[0] + w[1];
+  ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));
+
+  float gradient_t = (stripe_p - w[0] - w[1]) / w[2];
+  float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));
+  ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));
+
+  return ch;
+}
+
+void main() {
+  
+  float t = .1 * u_time;
+
+  vec2 uv = v_objectUV;
+  uv += .5;
+  uv.y = 1. - uv.y;
+
+  float cycleWidth = .5 * u_patternScale; 
+  
+  float mask = 1.;
+  if (u_shape < 1.) {
+  
+    vec2 borderUV = v_responsiveUV + .5;
+    float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
+    vec2 edge = min(borderUV, 1. - borderUV);
+    vec2 pixel_thickness = 250. / v_responsiveBoxGivenSize;
+    float maskX = smoothstep(0.0, pixel_thickness.x, edge.x);
+    float maskY = smoothstep(0.0, pixel_thickness.y, edge.y);
+    maskX = pow(maskX, .25);
+    maskY = pow(maskY, .25);
+    mask = clamp(1. - maskX * maskY, 0., 1.);
+    
+    uv = v_responsiveUV;
+    if (ratio > 1.) {
+      uv.y /= ratio;
+    } else {
+      uv.x *= ratio;
+    }
+    uv += .5;
+    uv.y = 1. - uv.y;
+    
+    cycleWidth *= 2.;
+
+  } else if (u_shape < 2.) {  
+    vec2 shapeUV = uv - .5;
+    shapeUV *= .67;
+    mask = pow(clamp(3. * length(shapeUV), 0., 1.), 8.);
+    
+    uv *= 1.3;
+  } else if (u_shape < 3.) {
+    vec2 shapeUV = uv - .5;
+    shapeUV *= 1.68;
+    
+    float r = length(shapeUV) * 2.;
+    float a = atan(shapeUV.y, shapeUV.x) + .2;
+    r *= (1. + .05 * sin(3. * a + 2. * t));
+    float f = abs(cos(a * 3.));
+    mask = smoothstep(f, f + .7, r);
+    
+    uv *= .8;
+    cycleWidth *= 1.6;
+
+  } else if (u_shape < 4.) {
+    vec2 shapeUV = uv - .5;
+    shapeUV *= 1.3;
+    mask = 0.;
+    for (int i = 0; i < 5; i++) {
+      float fi = float(i);
+      float speed = 4.5 + 2. * sin(fi * 12.345);
+      float angle = -fi * 1.5;
+      vec2 dir1 = vec2(cos(angle), sin(angle));
+      vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));
+      vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17));
+      float d = length(shapeUV + traj);
+      mask += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);
+    }
+    mask = 1. - smoothstep(.85, 1., mask);
+    
+    uv *= 1.3;
+    uv.y += .2;
+  }
+
+  float contour = smoothstep(0., 1., mask) * smoothstep(1., 0., mask);
+
+
+  float diagBLtoTR = uv.x - uv.y;    
+  float diagTLtoBR = uv.x + uv.y;
+
+  vec3 color = vec3(0.);
+  float opacity = 1.;
+
+  vec3 color1 = vec3(.98, 0.98, 1.);
+  vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));
+
+  vec2 grad_uv = uv - .5;
+  
+  float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));
+  grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);
+  float direction = grad_uv.x;
+
+  float bump = pow(1.8 * dist, 1.2);
+  bump = 1. - bump;
+  bump *= pow(uv.y, .3);
+
+
+  float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump);
+  float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump);
+  float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);
+
+  float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;
+  float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;
+
+  opacity = 1. - smoothstep(.9, .92, mask);
+
+  float noise = snoise(uv - t);
+
+  mask += (1. - mask) * u_liquid * noise;
+
+  float colorDispersion = 0.;
+  colorDispersion += (1. - bump);
+  colorDispersion = clamp(colorDispersion, 0., 1.);
+
+  direction += diagBLtoTR;
+
+  direction -= 2. * noise * contour;
+
+  bump *= clamp(pow(uv.y, .1), .3, 1.);
+  direction *= (.1 + (1.1 - mask) * bump);
+  direction *= smoothstep(1., .7, mask);
+
+  float ridge = .2 * (smoothstep(.0, .15, uv.y) * smoothstep(.4, .15, uv.y));
+  ridge += .03 * (smoothstep(.1, .2, 1. - uv.y) * smoothstep(.4, .2, 1. - uv.y));
+  direction += ridge;
+
+  direction *= (.5 + .5 * pow(uv.y, 2.));
+
+  direction *= cycleWidth;
+
+  direction -= t;
+
+  float dispersionRed = colorDispersion;
+  dispersionRed += .03 * bump * noise;
+  float dispersionBlue = 1.3 * colorDispersion;
+
+  dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * smoothstep(.5, .1, uv.y)) * (smoothstep(.4, .6, bump) * smoothstep(1., .4, bump));
+  dispersionRed -= diagBLtoTR;
+
+  dispersionBlue += (smoothstep(0., .4, uv.y) * smoothstep(.8, .1, uv.y)) * (smoothstep(.4, .6, bump) * smoothstep(.8, .4, bump));
+  dispersionBlue -= .2 * mask;
+
+  dispersionRed *= u_dispersion;
+  dispersionBlue *= u_dispersion;
+
+  vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);
+  w[1] -= .02 * smoothstep(.0, 1., mask + bump);
+  float extraBlur = bump;
+  float stripe_r = mod(direction + dispersionRed, 1.);
+  float r = get_color_channel(color1.r, color2.r, stripe_r, w, 0.02 + .03 * u_dispersion * bump, extraBlur);
+  float stripe_g = mod(direction, 1.);
+  float g = get_color_channel(color1.g, color2.g, stripe_g, w, 0.01 / (1. - 0. * diagBLtoTR), extraBlur);
+  float stripe_b = mod(direction - dispersionBlue, 1.);
+  float b = get_color_channel(color1.b, color2.b, stripe_b, w, .01, extraBlur);
+
+  color = vec3(r, g, b);
+  color *= opacity;
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  liquidMetalFragmentShader
+};
+//# sourceMappingURL=liquid-metal.js.map

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

@@ -0,0 +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"],
+  "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.d.ts

@@ -1,18 +1,28 @@
-export type MeshGradientUniforms = {
-    u_color1: [number, number, number, number];
-    u_color2: [number, number, number, number];
-    u_color3: [number, number, number, number];
-    u_color4: [number, number, number, number];
+import type { vec4 } from '../types';
+import type { ShaderMotionParams } from '../shader-mount';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+export declare const meshGradientMeta: {
+    readonly maxColorCount: 10;
 };
 /**
- * Mesh Gradient, based on https://www.shadertoy.com/view/wdyczG
- * Renders a mesh gradient with a rotating noise pattern
- * and several layers of fractal noise
+ * Mesh Gradient Ksenia Kondrashova
+ * Smooth, animated mesh gradient using a dynamic list of colors
  *
  * Uniforms include:
- * u_color1: The first color of the mesh gradient
- * u_color2: The second color of the mesh gradient
- * u_color3: The third color of the mesh gradient
- * u_color4: The fourth color of the mesh gradient
+ * - u_colors (vec4[]): Input RGBA colors
+ * - u_colorsCount (float): Number of active colors (`u_colors` length)
+ * - u_distortion (float): Amount of animated wavy distortion applied to UV coordinates
+ * - u_swirl (float): Amount of radial swirl distortion applied to UV coordinates
  */
-export declare const meshGradientFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\n\nout vec4 fragColor;\n\n#define S(a,b,t) smoothstep(a,b,t)\n\nmat2 Rot(float a) {\n    float s = sin(a);\n    float c = cos(a);\n    return mat2(c, -s, s, c);\n}\n\nvec2 hash(vec2 p) {\n    vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));\n    p3 += dot(p3, p3.yzx + 33.33);\n    return fract((p3.xx+p3.yz)*p3.zy);\n}\n\nfloat noise( in vec2 p ) {\n    vec2 i = floor( p );\n    vec2 f = fract( p );\n    vec2 u = f*f*(3.0-2.0*f);\n\n    float n = mix( mix( dot( -1.0+2.0*hash( i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),\n                        dot( -1.0+2.0*hash( i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),\n                   mix( dot( -1.0+2.0*hash( i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),\n                        dot( -1.0+2.0*hash( i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);\n    return 0.5 + 0.5*n;\n}\n\n\nvoid main() {\n    vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n    float ratio = u_resolution.x / u_resolution.y;\n    \n    uv /= u_pixelRatio;\n    \n    vec2 tuv = uv;\n    tuv -= .5;\n\n    // rotate with Noise\n    float degree = noise(vec2(u_time, tuv.x * tuv.y));\n\n    tuv.y *= 1./ratio;\n    tuv *= Rot(radians((degree-.5)*720.+180.));\n    tuv.y *= ratio;\n\n\n    // Wave warp with sin\n    float frequency = 5.;\n    float amplitude = 30.;\n    float speed = u_time * 2.;\n    tuv.x += sin(tuv.y*frequency+speed)/amplitude;\n    tuv.y += sin(tuv.x*frequency*1.5+speed)/(amplitude*.5);\n\n\n    float proportion_1 = S(-.3, .2, (tuv*Rot(radians(-5.))).x);\n    vec3 layer1_color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, proportion_1);\n    float layer1_opacity = mix(u_color1.a, u_color2.a, proportion_1);\n    vec3 layer2_color = mix(u_color3.rgb * u_color3.a, u_color4.rgb * u_color4.a, proportion_1);\n    float layer2_opacity = mix(u_color3.a, u_color4.a, proportion_1);\n\n    float proportion_2 = S(.5, -.3, tuv.y);\n    vec3 color = mix(layer1_color, layer2_color, proportion_2);\n    float opacity = mix(layer1_opacity, layer2_opacity, proportion_2);\n    \n    fragColor = vec4(color, opacity);\n}\n";
+export declare const meshGradientFragmentShader: string;
+export interface MeshGradientUniforms extends ShaderSizingUniforms {
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_distortion: number;
+    u_swirl: number;
+}
+export interface MeshGradientParams extends ShaderSizingParams, ShaderMotionParams {
+    colors?: string[];
+    distortion?: number;
+    swirl?: number;
+}

package/dist/shaders/mesh-gradient.js

@@ -0,0 +1,97 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing";
+import { declarePI, declareRotate, colorBandingFix } from "../shader-utils";
+const meshGradientMeta = {
+  maxColorCount: 10
+};
+const meshGradientFragmentShader = `#version 300 es
+precision highp float;
+
+uniform float u_time;
+
+uniform vec4 u_colors[${meshGradientMeta.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_distortion;
+uniform float u_swirl;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareRotate}
+
+vec2 getPosition(int i, float t) {
+  float a = float(i) * .37;
+  float b = .6 + mod(float(i), 3.) * .3;
+  float c = .8 + mod(float(i + 1), 4.) * 0.25;
+
+  float x = sin(t * b + a);
+  float y = cos(t * c + a * 1.5);
+
+  return .5 + .5 * vec2(x, y);
+}
+
+void main() {
+  vec2 shape_uv = v_objectUV;
+
+  shape_uv += .5;
+
+  float t = .5 * u_time;
+
+  float radius = smoothstep(0., 1., length(shape_uv - .5));
+  float center = 1. - radius;
+  for (float i = 1.; i <= 2.; i++) {
+    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));
+    shape_uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., shape_uv.x));
+  }
+
+  vec2 uvRotated = shape_uv;
+  uvRotated -= vec2(.5);
+  float angle = 3. * u_swirl * radius;
+  uvRotated = rotate(uvRotated, -angle);
+  uvRotated += vec2(.5);
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+  float totalWeight = 0.;
+  
+  for (int i = 0; i < ${meshGradientMeta.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+    
+    vec2 pos = getPosition(i, t);
+    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;
+    float opacityFraction = u_colors[i].a;
+      
+    float dist = 0.;
+    if (mod(float(i), 2.) > 1.) {
+      dist = length(shape_uv - pos);
+    } else {
+      dist = length(uvRotated - pos);
+    }
+
+    dist = pow(dist, 3.5);
+    float weight = 1. / (dist + 1e-3);
+    color += colorFraction * weight;
+    opacity += opacityFraction * weight;
+    totalWeight += weight;
+  }
+
+  color /= totalWeight;
+  opacity /= totalWeight;
+  
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  meshGradientFragmentShader,
+  meshGradientMeta
+};
+//# sourceMappingURL=mesh-gradient.js.map

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

@@ -0,0 +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"],
+  "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": []
+}