@paper-design/shaders 0.0.26 → 0.0.27

package/dist/shaders/spiral.js

@@ -0,0 +1,75 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing";
+import { declareSimplexNoise, declarePI, colorBandingFix } from "../shader-utils";
+const spiralFragmentShader = `#version 300 es
+precision highp float;
+
+uniform float u_time;
+
+uniform vec4 u_color1;
+uniform vec4 u_color2;
+uniform float u_spiralDensity;
+uniform float u_spiralDistortion;
+uniform float u_strokeWidth;
+uniform float u_strokeCap;
+uniform float u_strokeTaper;
+
+uniform float u_noiseFreq;
+uniform float u_noisePower;
+uniform float u_softness;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareSimplexNoise}
+
+void main() {
+  vec2 shape_uv = v_patternUV * .02;
+
+  float t = u_time;
+
+  float l = length(shape_uv);
+  float angle = atan(shape_uv.y, shape_uv.x) - 2. * t;
+  float angle_norm = angle / TWO_PI;
+
+  angle_norm += .125 * u_noisePower * snoise(.5 * u_noiseFreq * shape_uv);
+
+  float offset = pow(l, 1. - clamp(u_spiralDensity, 0., 1.)) + angle_norm;
+
+  float stripe_map = fract(offset);
+  stripe_map -= .5 * u_strokeTaper * l;
+
+  stripe_map += .25 * u_noisePower * snoise(u_noiseFreq * shape_uv);
+
+  float shape = 2. * abs(stripe_map - .5);
+
+  shape *= (1. + u_spiralDistortion * sin(4. * l - t) * cos(PI + l + t));
+
+  float stroke_width = clamp(u_strokeWidth, fwidth(l), 1. - fwidth(l));
+
+  float edge_width = min(fwidth(l), fwidth(offset));
+
+  float mid = 1. - smoothstep(.0, .9, l);
+  mid = pow(mid, 2.);
+  shape -= .5 * u_strokeCap * mid;
+
+  shape = smoothstep(stroke_width - edge_width - u_softness, stroke_width + edge_width + u_softness, shape);
+
+  vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, shape);
+  float opacity = mix(u_color1.a, u_color2.a, shape);
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  spiralFragmentShader
+};
+//# sourceMappingURL=spiral.js.map

package/dist/shaders/spiral.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/spiral.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declareSimplexNoise, declarePI, colorBandingFix } from '../shader-utils';\n\n/**\n * Spiral shape by Ksenia Kondrashova\n * Generates a dynamic spiral shape with configurable parameters\n *\n * Uniforms include:\n *\n * u_scale - controls the overall scale of the spiral (u_scale = 1 makes it fit the viewport height)\n * u_offsetX - left / right pan\n * u_offsetY - up / down pan\n * u_color1 - the first color used in the spiral (stroke)\n * u_color2 - the second color used in the spiral (back)\n * u_spiralDensity (0 .. 1) - the spacing of the spiral arms\n * u_spiralDistortion (0 .. 1) - adds a wavy distortion effect to the spiral arms\n * u_strokeWidth (0 .. 1) - defines the thickness of the spiral lines.\n * u_strokeCap (0 .. 1) - adjusts the fading of the spiral edges.\n * u_strokeTaper (0 .. 1) - controls the tapering effect along the spiral arms.\n * u_noiseFreq - frequency of the noise applied to the spiral.\n * u_noisePower (0 .. 1) - strength of the noise effect.\n * u_softness - softens the edges of the spiral for a smoother appearance.\n */\nexport const spiralFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_spiralDensity;\nuniform float u_spiralDistortion;\nuniform float u_strokeWidth;\nuniform float u_strokeCap;\nuniform float u_strokeTaper;\n\nuniform float u_noiseFreq;\nuniform float u_noisePower;\nuniform float u_softness;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV * .02;\n\n  float t = u_time;\n\n  float l = length(shape_uv);\n  float angle = atan(shape_uv.y, shape_uv.x) - 2. * t;\n  float angle_norm = angle / TWO_PI;\n\n  angle_norm += .125 * u_noisePower * snoise(.5 * u_noiseFreq * shape_uv);\n\n  float offset = pow(l, 1. - clamp(u_spiralDensity, 0., 1.)) + angle_norm;\n\n  float stripe_map = fract(offset);\n  stripe_map -= .5 * u_strokeTaper * l;\n\n  stripe_map += .25 * u_noisePower * snoise(u_noiseFreq * shape_uv);\n\n  float shape = 2. * abs(stripe_map - .5);\n\n  shape *= (1. + u_spiralDistortion * sin(4. * l - t) * cos(PI + l + t));\n\n  float stroke_width = clamp(u_strokeWidth, fwidth(l), 1. - fwidth(l));\n\n  float edge_width = min(fwidth(l), fwidth(offset));\n\n  float mid = 1. - smoothstep(.0, .9, l);\n  mid = pow(mid, 2.);\n  shape -= .5 * u_strokeCap * mid;\n\n  shape = smoothstep(stroke_width - edge_width - u_softness, stroke_width + edge_width + u_softness, shape);\n\n  vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, shape);\n  float opacity = mix(u_color1.a, u_color2.a, shape);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SpiralUniforms extends ShaderSizingUniforms {\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_spiralDensity: number;\n  u_spiralDistortion: number;\n  u_strokeWidth: number;\n  u_strokeTaper: number;\n  u_strokeCap: number;\n  u_noiseFreq: number;\n  u_noisePower: number;\n  u_softness: number;\n}\n\nexport interface SpiralParams extends ShaderSizingParams, ShaderMotionParams {\n  color1?: string;\n  color2?: string;\n  spiralDensity?: number;\n  spiralDistortion?: number;\n  strokeWidth?: number;\n  strokeTaper?: number;\n  strokeCap?: number;\n  noiseFreq?: number;\n  noisePower?: number;\n  softness?: number;\n}\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,uBAAuB;AAsBzD,MAAM,uBAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB1C,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,IAqCjB,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/swirl.d.ts

@@ -0,0 +1,26 @@
+import type { vec4 } from '../types';
+import type { ShaderMotionParams } from '../shader-mount';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+export declare const swirlMeta: {
+    readonly maxColorCount: 10;
+};
+/**
+ */
+export declare const swirlFragmentShader: string;
+export interface SwirlUniforms extends ShaderSizingUniforms {
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_bandCount: number;
+    u_twist: number;
+    u_softness: number;
+    u_noiseFreq: number;
+    u_noisePower: number;
+}
+export interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {
+    colors?: string[];
+    bandCount?: number;
+    twist?: number;
+    softness?: number;
+    noiseFreq?: number;
+    noisePower?: number;
+}

package/dist/shaders/swirl.js

@@ -0,0 +1,80 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing";
+import { declareSimplexNoise, declarePI, declareRotate, colorBandingFix } from "../shader-utils";
+const swirlMeta = {
+  maxColorCount: 10
+};
+const swirlFragmentShader = `#version 300 es
+precision highp float;
+
+uniform float u_time;
+
+uniform vec4 u_colors[${swirlMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_bandCount;
+uniform float u_twist;
+uniform float u_softness;
+uniform float u_noisePower;
+uniform float u_noiseFreq;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareSimplexNoise}
+${declareRotate}
+
+void main() {
+  vec2 shape_uv = v_objectUV;
+    
+  float l = length(shape_uv);
+
+  float t = u_time;
+
+  float angle = ceil(u_bandCount) * atan(shape_uv.y, shape_uv.x) + t;
+  float angle_norm = angle / TWO_PI;  
+    
+  float twist = 3. * clamp(u_twist, 0., 1.);
+  float offset = pow(l, -twist) + angle_norm;
+  
+  float shape = fract(offset);
+  shape = 1. - abs(2. * shape - 1.);
+  shape += u_noisePower * snoise(pow(u_noiseFreq, 2.) * shape_uv);
+
+  float mid = smoothstep(.2, .4, pow(l, twist));
+  shape = mix(0., shape, mid);
+    
+  float mixer = shape * (u_colorsCount - 1.);
+  float softness = u_softness + (.1 + .012 * u_colorsCount) * smoothstep(.6, .2, pow(l, twist));
+
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${swirlMeta.maxColorCount}; i++) {
+      if (i >= int(u_colorsCount)) break;
+      
+      float localT = clamp(mixer - float(i - 1), 0., 1.);      
+      localT = smoothstep(.5 - .5 * u_softness, .5 + .5 * u_softness, localT);
+
+      vec4 c = u_colors[i];
+      c.rgb *= c.a;
+      gradient = mix(gradient, c, localT);
+  }
+ 
+  vec3 color = gradient.rgb;
+  float opacity = gradient.a;
+  
+  ${colorBandingFix}
+  
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  swirlFragmentShader,
+  swirlMeta
+};
+//# sourceMappingURL=swirl.js.map

package/dist/shaders/swirl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/swirl.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, declareRotate, colorBandingFix } from '../shader-utils';\n\nexport const swirlMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n */\nexport const swirlFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${swirlMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_bandCount;\nuniform float u_twist;\nuniform float u_softness;\nuniform float u_noisePower;\nuniform float u_noiseFreq;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n${declareRotate}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n    \n  float l = length(shape_uv);\n\n  float t = u_time;\n\n  float angle = ceil(u_bandCount) * atan(shape_uv.y, shape_uv.x) + t;\n  float angle_norm = angle / TWO_PI;  \n    \n  float twist = 3. * clamp(u_twist, 0., 1.);\n  float offset = pow(l, -twist) + angle_norm;\n  \n  float shape = fract(offset);\n  shape = 1. - abs(2. * shape - 1.);\n  shape += u_noisePower * snoise(pow(u_noiseFreq, 2.) * shape_uv);\n\n  float mid = smoothstep(.2, .4, pow(l, twist));\n  shape = mix(0., shape, mid);\n    \n  float mixer = shape * (u_colorsCount - 1.);\n  float softness = u_softness + (.1 + .012 * u_colorsCount) * smoothstep(.6, .2, pow(l, twist));\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${swirlMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n      \n      float localT = clamp(mixer - float(i - 1), 0., 1.);      \n      localT = smoothstep(.5 - .5 * u_softness, .5 + .5 * u_softness, localT);\n\n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localT);\n  }\n \n  vec3 color = gradient.rgb;\n  float opacity = gradient.a;\n  \n  ${colorBandingFix}\n  \n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SwirlUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_bandCount: number;\n  u_twist: number;\n  u_softness: number;\n  u_noiseFreq: number;\n  u_noisePower: number;\n}\n\nexport interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  bandCount?: number;\n  twist?: number;\n  softness?: number;\n  noiseFreq?: number;\n  noisePower?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,eAAe,uBAAuB;AAExE,MAAM,YAAY;AAAA,EACvB,eAAe;AACjB;AAIO,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKnB,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ7C,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,wBA2BS,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAc3C,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/voronoi.d.ts

@@ -1,34 +1,44 @@
-export type VoronoiUniforms = {
-    u_scale: number;
-    u_colorCell1: [number, number, number, number];
-    u_colorCell2: [number, number, number, number];
-    u_colorCell3: [number, number, number, number];
-    u_colorMid: [number, number, number, number];
-    u_colorGradient: number;
-    u_distance: number;
-    u_edgesSize: number;
-    u_edgesSoftness: number;
-    u_middleSize: number;
-    u_middleSoftness: number;
+import type { vec4 } from '../types';
+import type { ShaderMotionParams } from '../shader-mount';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+export declare const voronoiMeta: {
+    readonly maxColorCount: 5;
 };
 /**
- * Voronoi pattern
- * The artwork by Ksenia Kondrashova
- * Renders a number of circular shapes with gooey effect applied
+ * Voronoi pattern by Ksenia Kondrashova
+ * The variation of Voronoi pattern with cell edges. Big thanks to Inigo Quilez
+ * https://www.shadertoy.com/view/ldl3W8
  *
  * Uniforms include:
- * u_scale - the scale applied to user space
- * u_colorCell1 - color #1 of mix used to fill the cell shape
- * u_colorCell2 - color #2 of mix used to fill the cell shape
- * u_colorCell3 - color #3 of mix used to fill the cell shape
- * u_colorMid - color used to fill the radial shape in the center of each cell
- * u_colorGradient (0 .. 1) - if the cell color is a gradient of palette colors or one color selection
- * u_distance (0 ... 0.5) - how far the cell center can move from regular square grid
- * u_edgesSize (0 .. 1) - the size of borders
- *   (can be set to zero but the edge may get glitchy due to nature of Voronoi diagram)
- * u_edgesSoftness (0 .. 1) - the blur/sharp for cell border
- * u_middleSize (0 .. 1) - the size of shape in the center of each cell
- * u_middleSoftness (0 .. 1) - the smoothness of shape in the center of each cell
- *   (vary from cell color gradient to sharp dot in the middle)
+ *
+ * - `u_colors` (`vec4[]`): Array of RGBA colors used for cell filling
+ * - `u_colorsCount` (`float`): Number of active colors in `u_colors`
+ * - `u_colorBack` (`vec4`): RGBA color for the gaps between cells
+ * - `u_colorGlow` (`vec4`): RGBA color for the radial shape on the cell edges
+ * - `u_distortion` (`float`, 0 – 0.5): Controls how far cell centers can be displaced from the regular grid
+ * - `u_gap` (`float`): Width of the gaps between cells (gaps can't be removed completely due to artifacts of Voronoi cells)
+ * - `u_innerGlow` (`float`): Controls the size of the radial glow inside each cell
+ * - `u_stepsPerColor` (`float`): Discretization of the color transition
+ * - `u_noiseTexture` (`sampler2D`): Replacement of standard hash function, added for better performance
  */
-export declare const voronoiFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\n\nuniform vec4 u_colorCell1;\nuniform vec4 u_colorCell2;\nuniform vec4 u_colorCell3;\nuniform vec4 u_colorMid;\n\nuniform float u_colorGradient;\nuniform float u_distance;\nuniform float u_edgesSize;\nuniform float u_edgesSoftness;\nuniform float u_middleSize;\nuniform float u_middleSoftness;\n\n#define TWO_PI 6.28318530718\n\nout vec4 fragColor;\n\nvec2 hash(vec2 p) {\n  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\n  return fract(sin(p) * 18.5453);\n}\n\nfloat smin(float angle, float b, float k) {\n  float h = clamp(.5 + .5 * (b - angle) / k, 0., 1.);\n  return mix(b, angle, h) - k * h * (1. - h);\n}\n\nvec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, vec2 randomizer) {\n    vec3 color1 = c1.rgb * c1.a;\n    vec3 color2 = c2.rgb * c2.a;\n    vec3 color3 = c3.rgb * c3.a;\n\n    float mixer = clamp(u_colorGradient, 0., 1.);\n    float r1 = smoothstep(.5 - .5 * mixer, .5 + .5 * mixer, randomizer[0]);\n    float r2 = smoothstep(.6 - .6 * mixer, .6 + .4 * mixer, randomizer[1]);\n    vec3 blended_color_2 = mix(color1, color2, r1);\n    float blended_opacity_2 = mix(c1.a, c2.a, r1);\n    vec3 c = mix(blended_color_2, color3, r2);\n    float o = mix(blended_opacity_2, c3.a, r2);\n    \n    return vec4(c, o);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float t = u_time;\n  uv -= .5;\n  uv *= (.01 * u_scale * u_resolution);\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n\n  vec2 randomizer = vec2(0.);\n  vec3 distance = vec3(1.);\n\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tile_offset = vec2(float(x), float(y));\n      vec2 o = hash(i_uv + tile_offset);\n      tile_offset += (.5 + clamp(u_distance, 0., .5) * sin(t + TWO_PI * o)) - f_uv;\n\n      float dist = dot(tile_offset, tile_offset);\n      float old_min_dist = distance.x;\n\n      distance.z = max(distance.x, max(distance.y, min(distance.z, dist)));\n      distance.y = max(distance.x, min(distance.y, dist));\n      distance.x = min(distance.x, dist);\n\n      if (old_min_dist > distance.x) {\n        randomizer = o;\n      }\n    }\n  }\n\n  distance = sqrt(distance);\n\n  distance = sqrt(distance);\n  float cell_shape = min(smin(distance.z, distance.y, .1) - distance.x, 1.);\n\n  float dot_shape = pow(distance.x, 2.) / (2. * clamp(u_middleSize, 0., 1.) + 1e-4);\n  float dot_edge_width = fwidth(dot_shape);\n  float dotSharp = clamp(1. - u_middleSoftness, 0., 1.);\n  dot_shape = 1. - smoothstep(.5 * dotSharp - dot_edge_width, 1. - .5 * dotSharp, dot_shape);\n\n  float cell_edge_width = fwidth(distance.x);\n  float w = .7 * (clamp(u_edgesSize, 0., 1.) - .1);\n  float edgeSharp = clamp(u_edgesSoftness, 0., 1.);\n  cell_shape = smoothstep(w - cell_edge_width, w + edgeSharp, cell_shape);\n\n  dot_shape *= cell_shape;\n\n  vec4 cell_mix = blend_colors(u_colorCell1, u_colorCell2, u_colorCell3, randomizer);\n  \n  vec3 color = cell_mix.rgb * cell_shape;\n  float opacity = cell_mix.a * cell_shape;\n\n  color = mix(color, u_colorMid.rgb * u_colorMid.a, dot_shape);\n  opacity = mix(opacity, u_colorMid.a, dot_shape);\n\n  fragColor = vec4(color, opacity);\n}\n";
+export declare const voronoiFragmentShader: string;
+export interface VoronoiUniforms extends ShaderSizingUniforms {
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_stepsPerColor: number;
+    u_colorBack: [number, number, number, number];
+    u_colorGlow: [number, number, number, number];
+    u_distortion: number;
+    u_gap: number;
+    u_innerGlow: number;
+    u_noiseTexture?: HTMLImageElement;
+}
+export interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {
+    colors?: string[];
+    stepsPerColor?: number;
+    colorBack?: string;
+    colorGlow?: string;
+    distortion?: number;
+    gap?: number;
+    innerGlow?: number;
+}

package/dist/shaders/voronoi.js

@@ -0,0 +1,143 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing";
+import { declarePI } from "../shader-utils";
+const voronoiMeta = {
+  maxColorCount: 5
+};
+const voronoiFragmentShader = `#version 300 es
+precision highp float;
+
+uniform float u_time;
+
+uniform float u_scale;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colors[${voronoiMeta.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_stepsPerColor;
+uniform vec4 u_colorGlow;
+uniform vec4 u_colorBack;
+uniform float u_distortion;
+uniform float u_gap;
+uniform float u_innerGlow;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+
+vec2 hash(vec2 p) {
+  vec2 uv = floor(p) / 100. + .5;
+  return texture(u_noiseTexture, uv).gb;
+}
+
+vec4 voronoi(vec2 x, float t) {
+  vec2 ip = floor(x);
+  vec2 fp = fract(x);
+
+  vec2 mg, mr;
+  float md = 8.;
+  float rand = 0.;
+
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 g = vec2(float(i), float(j));
+      vec2 raw_hash = hash(ip + g);
+      vec2 o = hash(ip + g);
+      o = .5 + u_distortion * sin(t + TWO_PI * o);
+      vec2 r = g + o - fp;
+      float d = dot(r, r);
+
+      if (d < md) {
+        md = d;
+        mr = r;
+        mg = g;
+        rand = raw_hash.x;
+      }
+    }
+  }
+
+  md = 8.;
+  for (int j = -2; j <= 2; j++) {
+    for (int i = -2; i <= 2; i++) {
+      vec2 g = mg + vec2(float(i), float(j));
+      vec2 o = hash(ip + g);
+      o = .5 + u_distortion * sin(t + TWO_PI * o);
+      vec2 r = g + o - fp;
+      if (dot(mr - r, mr - r) > .00001) {
+        md = min(md, dot(.5 * (mr + r), normalize(r - mr)));
+      }
+    }
+  }
+
+  return vec4(md, mr, rand);
+}
+
+void main() {
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= .0125;
+
+  float t = u_time;
+
+  vec4 voronoiRes = voronoi(shape_uv, t);
+
+  float shape = clamp(voronoiRes.w, 0., 1.);
+  float mixer = shape * (u_colorsCount - 1.);
+  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
+  float steps = max(1., u_stepsPerColor);
+
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${voronoiMeta.maxColorCount}; i++) {
+      if (i >= int(u_colorsCount)) break;
+      float localT = clamp(mixer - float(i - 1), 0.0, 1.0);
+      localT = round(localT * steps) / steps;
+      vec4 c = u_colors[i];
+      c.rgb *= c.a;
+      gradient = mix(gradient, c, localT);
+  }
+
+  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
+    float localT = mixer + 1.;
+    if (mixer > (u_colorsCount - 1.)) {
+      localT = mixer - (u_colorsCount - 1.);
+    }
+    localT = round(localT * steps) / steps;
+    vec4 cFst = u_colors[0];
+    cFst.rgb *= cFst.a;
+    vec4 cLast = u_colors[int(u_colorsCount - 1.)];
+    cLast.rgb *= cLast.a;
+    gradient = mix(cLast, cFst, localT);
+  }
+
+  vec3 cellColor = gradient.rgb;
+  float cellOpacity = gradient.a;
+
+  float innerGlows = length(voronoiRes.yz * u_innerGlow + .1);
+  innerGlows = pow(innerGlows, 1.5);
+
+  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * innerGlows);
+  float opacity = cellOpacity + u_colorGlow.a * innerGlows;
+
+  float edge = voronoiRes.x;
+  float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);
+  edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);
+
+  color = mix(u_colorBack.rgb * u_colorBack.a, color, edge);
+  opacity = mix(u_colorBack.a, opacity, edge);
+
+  fragColor = vec4(color, opacity);  
+}
+`;
+export {
+  voronoiFragmentShader,
+  voronoiMeta
+};
+//# sourceMappingURL=voronoi.js.map

package/dist/shaders/voronoi.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/voronoi.ts"],
+  "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI } from '../shader-utils';\n\nexport const voronoiMeta = {\n  maxColorCount: 5,\n} as const;\n\n/**\n * Voronoi pattern by Ksenia Kondrashova\n * The variation of Voronoi pattern with cell edges. Big thanks to Inigo Quilez\n * https://www.shadertoy.com/view/ldl3W8\n *\n * Uniforms include:\n *\n * - `u_colors` (`vec4[]`): Array of RGBA colors used for cell filling\n * - `u_colorsCount` (`float`): Number of active colors in `u_colors`\n * - `u_colorBack` (`vec4`): RGBA color for the gaps between cells\n * - `u_colorGlow` (`vec4`): RGBA color for the radial shape on the cell edges\n * - `u_distortion` (`float`, 0 \u2013 0.5): Controls how far cell centers can be displaced from the regular grid\n * - `u_gap` (`float`): Width of the gaps between cells (gaps can't be removed completely due to artifacts of Voronoi cells)\n * - `u_innerGlow` (`float`): Controls the size of the radial glow inside each cell\n * - `u_stepsPerColor` (`float`): Discretization of the color transition\n * - `u_noiseTexture` (`sampler2D`): Replacement of standard hash function, added for better performance\n */\nexport const voronoiFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${voronoiMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_stepsPerColor;\nuniform vec4 u_colorGlow;\nuniform vec4 u_colorBack;\nuniform float u_distortion;\nuniform float u_gap;\nuniform float u_innerGlow;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nvec2 hash(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, uv).gb;\n}\n\nvec4 voronoi(vec2 x, float t) {\n  vec2 ip = floor(x);\n  vec2 fp = fract(x);\n\n  vec2 mg, mr;\n  float md = 8.;\n  float rand = 0.;\n\n  for (int j = -1; j <= 1; j++) {\n    for (int i = -1; i <= 1; i++) {\n      vec2 g = vec2(float(i), float(j));\n      vec2 raw_hash = hash(ip + g);\n      vec2 o = hash(ip + g);\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\n      vec2 r = g + o - fp;\n      float d = dot(r, r);\n\n      if (d < md) {\n        md = d;\n        mr = r;\n        mg = g;\n        rand = raw_hash.x;\n      }\n    }\n  }\n\n  md = 8.;\n  for (int j = -2; j <= 2; j++) {\n    for (int i = -2; i <= 2; i++) {\n      vec2 g = mg + vec2(float(i), float(j));\n      vec2 o = hash(ip + g);\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\n      vec2 r = g + o - fp;\n      if (dot(mr - r, mr - r) > .00001) {\n        md = min(md, dot(.5 * (mr + r), normalize(r - mr)));\n      }\n    }\n  }\n\n  return vec4(md, mr, rand);\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= .0125;\n\n  float t = u_time;\n\n  vec4 voronoiRes = voronoi(shape_uv, t);\n\n  float shape = clamp(voronoiRes.w, 0., 1.);\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 < ${voronoiMeta.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  vec3 cellColor = gradient.rgb;\n  float cellOpacity = gradient.a;\n\n  float innerGlows = length(voronoiRes.yz * u_innerGlow + .1);\n  innerGlows = pow(innerGlows, 1.5);\n\n  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * innerGlows);\n  float opacity = cellOpacity + u_colorGlow.a * innerGlows;\n\n  float edge = voronoiRes.x;\n  float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);\n  edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);\n\n  color = mix(u_colorBack.rgb * u_colorBack.a, color, edge);\n  opacity = mix(u_colorBack.a, opacity, edge);\n\n  fragColor = vec4(color, opacity);  \n}\n`;\n\nexport interface VoronoiUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_stepsPerColor: number;\n  u_colorBack: [number, number, number, number];\n  u_colorGlow: [number, number, number, number];\n  u_distortion: number;\n  u_gap: number;\n  u_innerGlow: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  stepsPerColor?: number;\n  colorBack?: string;\n  colorGlow?: string;\n  distortion?: number;\n  gap?: number;\n  innerGlow?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,iBAAiB;AAEnB,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAmBO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASrB,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU/C,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAgEa,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/warp.d.ts

@@ -1,42 +1,53 @@
-export declare const PatternShapes: {
-    readonly Checks: 0;
-    readonly Stripes: 1;
-    readonly Edge: 2;
-};
-export type PatternShape = (typeof PatternShapes)[keyof typeof PatternShapes];
-export type WarpUniforms = {
-    u_scale: number;
-    u_rotation: number;
-    u_color1: [number, number, number, number];
-    u_color2: [number, number, number, number];
-    u_color3: [number, number, number, number];
-    u_proportion: number;
-    u_softness: number;
-    u_shape: PatternShape;
-    u_shapeScale: number;
-    u_distortion: number;
-    u_swirl: number;
-    u_swirlIterations: number;
+import type { vec4 } from '../types';
+import type { ShaderMotionParams } from '../shader-mount';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+export declare const warpMeta: {
+    readonly maxColorCount: 10;
 };
 /**
  * 3d Perlin noise with exposed parameters
  *
  * Uniforms include:
- * u_scale - the scale applied to user space
- * u_rotation - the rotation applied to user space
- * u_color1 - the first pattern color
- * u_color2 - the second pattern color
- * u_color3 - the third pattern color
- * u_proportion (0 .. 1) - the proportion between colors (on 0.5 colors are equally distributed)
- * u_softness (0 .. 1) - the color blur (0 for pronounced edges, 1 for gradient)
- * u_shape (0 ... 2) - the color pattern to be distorted with noise & swirl
+ * - u_colors (vec4[]): Input RGBA colors
+ * - u_colorsCount (float): Number of active colors (`u_colors` length)
+ * - u_proportion (0 .. 1): the proportion between colors (on 0.5 colors are equally distributed)
+ * - u_softness (0 .. 1): the color blur (0 for pronounced edges, 1 for gradient)
+ * - u_shape (0 ... 2): the color pattern to be distorted with noise & swirl
  *    - u_shape = 0 is checks
  *    - u_shape = 1 is stripes
  *    - u_shape = 2 is 2 halves of canvas (mapping the canvas height regardless of resolution)
- * u_shapeScale - the scale of color pattern (appies over the global scaling)
- * u_distortion - the noisy distortion over the UV coordinate (applied before the overlapping swirl)
- * u_swirl - the power of swirly distortion
- * u_swirlIterations - the number of swirl iterations (layering curves effect)
+ * - u_shapeScale: the scale of color pattern (appies over the global scaling)
+ * - u_distortion: the noisy distortion over the UV coordinate (applied before the overlapping swirl)
+ * - u_swirl: the power of swirly distortion
+ * - u_swirlIterations: the number of swirl iterations (layering curves effect)
  *
  */
-export declare const warpFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_shape;\nuniform float u_shapeScale;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_swirlIterations;\n\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nfloat random(vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\nfloat noise(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}\n\nvec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, float mixer, float edgesWidth, float edge_blur) {\n    vec3 color1 = c1.rgb * c1.a;\n    vec3 color2 = c2.rgb * c2.a;\n    vec3 color3 = c3.rgb * c3.a;\n\n    float r1 = smoothstep(.0 + .35 * edgesWidth, .7 - .35 * edgesWidth + .5 * edge_blur, mixer);\n    float r2 = smoothstep(.3 + .35 * edgesWidth, 1. - .35 * edgesWidth + edge_blur, mixer);\n\n    vec3 blended_color_2 = mix(color1, color2, r1);\n    float blended_opacity_2 = mix(c1.a, c2.a, r1);\n\n    vec3 c = mix(blended_color_2, color3, r2);\n    float o = mix(blended_opacity_2, c3.a, r2);\n    return vec4(c, o);\n}\n\nvoid main() {\n    vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n    vec2 uv_original = uv;\n\n    float t = .5 * u_time;\n\n    float noise_scale = .0005 + .006 * u_scale;\n\n    uv -= .5;\n    uv *= (noise_scale * u_resolution);\n    uv = rotate(uv, u_rotation * .5 * PI);\n    uv /= u_pixelRatio;\n    uv += .5;\n\n    float n1 = noise(uv * 1. + t);\n    float n2 = noise(uv * 2. - t);\n    float angle = n1 * TWO_PI;\n    uv.x += 4. * u_distortion * n2 * cos(angle);\n    uv.y += 4. * u_distortion * n2 * sin(angle);\n\n    float iterations_number = ceil(clamp(u_swirlIterations, 1., 30.));\n    for (float i = 1.; i <= iterations_number; i++) {\n        uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * uv.y);\n        uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * uv.x);\n    }\n\n    float proportion = clamp(u_proportion, 0., 1.);\n\n    float shape = 0.;\n    float mixer = 0.;\n    if (u_shape < .5) {\n      vec2 checks_shape_uv = uv * (.5 + 3.5 * u_shapeScale);\n      shape = .5 + .5 * sin(checks_shape_uv.x) * cos(checks_shape_uv.y);\n      mixer = shape + .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n    } else if (u_shape < 1.5) {\n      vec2 stripes_shape_uv = uv * (.25 + 3. * u_shapeScale);\n      float f = fract(stripes_shape_uv.y);\n      shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);\n      mixer = shape + .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n    } else {\n      float sh = 1. - uv.y;\n      sh -= .5;\n      sh /= (noise_scale * u_resolution.y);\n      sh += .5;\n      float shape_scaling = .2 * (1. - u_shapeScale);\n      shape = smoothstep(.45 - shape_scaling, .55 + shape_scaling, sh + .3 * (proportion - .5));\n      mixer = shape;\n    }\n\n    vec4 color_mix = blend_colors(u_color1, u_color2, u_color3, mixer, 1. - clamp(u_softness, 0., 1.), .01 + .01 * u_scale);\n\n    fragColor = vec4(color_mix.rgb, color_mix.a);\n}\n";
+export declare const warpFragmentShader: string;
+export interface WarpUniforms extends ShaderSizingUniforms {
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_proportion: number;
+    u_softness: number;
+    u_shape: (typeof WarpPatterns)[WarpPattern];
+    u_shapeScale: number;
+    u_distortion: number;
+    u_swirl: number;
+    u_swirlIterations: number;
+}
+export interface WarpParams extends ShaderSizingParams, ShaderMotionParams {
+    colors?: string[];
+    rotation?: number;
+    proportion?: number;
+    softness?: number;
+    shape?: WarpPattern;
+    shapeScale?: number;
+    distortion?: number;
+    swirl?: number;
+    swirlIterations?: number;
+}
+export declare const WarpPatterns: {
+    readonly checks: 0;
+    readonly stripes: 1;
+    readonly edge: 2;
+};
+export type WarpPattern = keyof typeof WarpPatterns;