@paper-design/shaders 0.0.80 → 0.0.82

package/dist/shaders/static-radial-gradient.js

@@ -122,8 +122,10 @@ void main() {
   float angle = atan(f_to_uv.y, f_to_uv.x);
   shape -= pow(u_distortion, 2.) * shape * pow(abs(sin(PI * clamp(length(f_to_uv) - 0.2 + u_distortionShift, 0.0, 1.0))), 4.0) * (sin(u_distortionFreq * angle) + cos(floor(0.65 * u_distortionFreq) * angle));
 
-  float grain = noise(grainUV, vec2(0.));
-  float mixerGrain = .4 * u_grainMixer * (grain - .5);
+  float mixerGrain = 0.;
+  if (u_grainMixer > 0.) {
+    mixerGrain = .4 * u_grainMixer * (noise(grainUV, vec2(0.)) - .5);
+  }
 
   float mixer = shape * u_colorsCount + mixerGrain;
   vec4 gradient = u_colors[0];
@@ -161,17 +163,19 @@ void main() {
   color = color + bgColor * (1.0 - opacity);
   opacity = opacity + u_colorBack.a * (1.0 - opacity);
 
-  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
-  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
-  grainOverlay = pow(grainOverlay, 1.3);
+  if (u_grainOverlay > 0.) {
+    float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
+    grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
+    grainOverlay = pow(grainOverlay, 1.3);
 
-  float grainOverlayV = grainOverlay * 2. - 1.;
-  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
-  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
-  grainOverlayStrength = pow(grainOverlayStrength, .8);
-  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
+    float grainOverlayV = grainOverlay * 2. - 1.;
+    vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
+    float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
+    grainOverlayStrength = pow(grainOverlayStrength, .8);
+    color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
 
-  opacity += .5 * grainOverlayStrength;
+    opacity += .5 * grainOverlayStrength;
+  }
   opacity = clamp(opacity, 0., 1.);
 
   fragColor = vec4(color, opacity);

package/dist/shaders/static-radial-gradient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/static-radial-gradient.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from '../shader-sizing.js';\nimport { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';\n\nexport const staticRadialGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Radial gradient with up to 10 blended colors, featuring advanced mixing modes, focal point controls,\n * shape distortion, and grain effects.\n *\n * Fragment shader uniforms:\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_radius (float): Size of the shape (0 to 3)\n * - u_focalDistance (float): Distance of the focal point from center (0 to 3)\n * - u_focalAngle (float): Angle of the focal point in degrees, effective with focalDistance > 0 (0 to 360)\n * - u_falloff (float): Gradient decay, 0 = linear gradient (-1 to 1)\n * - u_mixing (float): Blending behavior, 0 = hard stripes, 1 = smooth gradient (0 to 1)\n * - u_distortion (float): Strength of radial distortion (0 to 1)\n * - u_distortionShift (float): Radial distortion offset, effective with distortion > 0 (-1 to 1)\n * - u_distortionFreq (float): Radial distortion frequency, effective with distortion > 0 (0 to 20)\n * - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)\n * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const staticRadialGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${ staticRadialGradientMeta.maxColorCount }];\nuniform float u_colorsCount;\n\nuniform float u_radius;\nuniform float u_focalDistance;\nuniform float u_focalAngle;\nuniform float u_falloff;\nuniform float u_mixing;\nuniform float u_distortion;\nuniform float u_distortionShift;\nuniform float u_distortionFreq;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\n\nin vec2 v_objectUV;\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ proceduralHash21 }\n\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\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 noise(vec2 n, vec2 seedOffset) {\n  return valueNoise(n + seedOffset);\n}\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 uv = 2. * v_objectUV;\n  vec2 grainUV = uv * 1000.;\n\n  vec2 center = vec2(0.);\n  float angleRad = -radians(u_focalAngle + 90.);\n  vec2 focalPoint = vec2(cos(angleRad), sin(angleRad)) * u_focalDistance;\n  float radius = u_radius;\n\n  vec2 c_to_uv = uv - center;\n  vec2 f_to_uv = uv - focalPoint;\n  vec2 f_to_c = center - focalPoint;\n  float r = length(c_to_uv);\n\n  float fragAngle = atan(c_to_uv.y, c_to_uv.x);\n  float angleDiff = fract((fragAngle - angleRad + PI) / TWO_PI) * TWO_PI - PI;\n\n  float halfAngle = acos(clamp(radius / max(u_focalDistance, 1e-4), 0.0, 1.0));\n  float e0 = 0.6 * PI, e1 = halfAngle;\n  float lo = min(e0, e1), hi = max(e0, e1);\n  float s  = smoothstep(lo, hi, abs(angleDiff));\n  float isInSector = (e1 >= e0) ? (1.0 - s) : s;\n\n  float a = dot(f_to_uv, f_to_uv);\n  float b = -2.0 * dot(f_to_uv, f_to_c);\n  float c = dot(f_to_c, f_to_c) - radius * radius;\n\n  float discriminant = b * b - 4.0 * a * c;\n  float t = 1.0;\n\n  if (discriminant >= 0.0) {\n    float sqrtD = sqrt(discriminant);\n    float div = max(1e-4, 2.0 * a);\n    float t0 = (-b - sqrtD) / div;\n    float t1 = (-b + sqrtD) / div;\n    t = max(t0, t1);\n    if (t < 0.0) t = 0.0;\n  }\n\n  float dist = length(f_to_uv);\n  float normalized = dist / max(1e-4, length(f_to_uv * t));\n  float shape = clamp(normalized, 0.0, 1.0);\n\n  float falloffMapped = mix(.2 + .8 * max(0., u_falloff + 1.), mix(1., 15., u_falloff * u_falloff), step(.0, u_falloff));\n\n  float falloffExp = mix(falloffMapped, 1., shape);\n  shape = pow(shape, falloffExp);\n  shape = 1. - clamp(shape, 0., 1.);\n\n\n  float outerMask = .002;\n  float outer = 1.0 - smoothstep(radius - outerMask, radius + outerMask, r);\n  outer = mix(outer, 1., isInSector);\n\n  shape = mix(0., shape, outer);\n  shape *= 1. - smoothstep(radius - .01, radius, r);\n\n  float angle = atan(f_to_uv.y, f_to_uv.x);\n  shape -= pow(u_distortion, 2.) * shape * pow(abs(sin(PI * clamp(length(f_to_uv) - 0.2 + u_distortionShift, 0.0, 1.0))), 4.0) * (sin(u_distortionFreq * angle) + cos(floor(0.65 * u_distortionFreq) * angle));\n\n  float grain = noise(grainUV, vec2(0.));\n  float mixerGrain = .4 * u_grainMixer * (grain - .5);\n\n  float mixer = shape * u_colorsCount + mixerGrain;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n\n  float outerShape = 0.;\n  for (int i = 1; i < ${ staticRadialGradientMeta.maxColorCount + 1 }; i++) {\n    if (i > int(u_colorsCount)) break;\n    float mLinear = clamp(mixer - float(i - 1), 0.0, 1.0);\n\n    float aa = fwidth(mLinear);\n    float width = min(u_mixing, 0.5);\n    float t = clamp((mLinear - (0.5 - width - aa)) / (2. * width + 2. * aa), 0., 1.);\n    float p = mix(2., 1., clamp((u_mixing - 0.5) * 2., 0., 1.));\n    float m = t < 0.5\n      ? 0.5 * pow(2. * t, p)\n      : 1. - 0.5 * pow(2. * (1. - t), p);\n\n    float quadBlend = clamp((u_mixing - 0.5) * 2., 0., 1.);\n    m = mix(m, m * m, 0.5 * quadBlend);\n    \n    if (i == 1) {\n      outerShape = m;\n    }\n\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  vec3 color = gradient.rgb * outerShape;\n  float opacity = gradient.a * outerShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));\n  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);\n  grainOverlay = pow(grainOverlay, 1.3);\n\n  float grainOverlayV = grainOverlay * 2. - 1.;\n  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));\n  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);\n  grainOverlayStrength = pow(grainOverlayStrength, .8);\n  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);\n\n  opacity += .5 * grainOverlayStrength;\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface StaticRadialGradientUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_radius: number;\n  u_focalDistance: number;\n  u_focalAngle: number;\n  u_falloff: number;\n  u_mixing: number;\n  u_distortion: number;\n  u_distortionShift: number;\n  u_distortionFreq: number;\n  u_grainMixer: number;\n  u_grainOverlay: number;\n}\n\nexport interface StaticRadialGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  radius?: number;\n  focalDistance?: number;\n  focalAngle?: number;\n  falloff?: number;\n  mixing?: number;\n  distortion?: number;\n  distortionShift?: number;\n  distortionFreq?: number;\n  grainMixer?: number;\n  grainOverlay?: number;\n}\n"],
-  "mappings": ";;;;;AAEA;AAAA,OAGO;AACP,SAAS,WAAW,WAAW,wBAAwB;AAEhD,MAAM,2BAA2B;AAAA,EACtC,eAAe;AACjB;AAwCO,MAAM,qCAA6C;AAAA;AAAA;AAAA;AAAA,wBAIjC,yBAAyB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB7D,SAAU;AAAA,EACV,SAAU;AAAA,EACV,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAkGK,yBAAyB,gBAAgB,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from '../shader-sizing.js';\nimport { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';\n\nexport const staticRadialGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Radial gradient with up to 10 blended colors, featuring advanced mixing modes, focal point controls,\n * shape distortion, and grain effects.\n *\n * Fragment shader uniforms:\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_radius (float): Size of the shape (0 to 3)\n * - u_focalDistance (float): Distance of the focal point from center (0 to 3)\n * - u_focalAngle (float): Angle of the focal point in degrees, needs focalDistance > 0 (0 to 360)\n * - u_falloff (float): Gradient decay, 0 = equal color distribution (-1 to 1)\n * - u_mixing (float): Blending behavior, 0 = hard stripes, 1 = smooth gradient (0 to 1)\n * - u_distortion (float): Strength of radial distortion (0 to 1)\n * - u_distortionShift (float): Radial distortion offset, needs distortion > 0 (-1 to 1)\n * - u_distortionFreq (float): Radial distortion frequency, needs distortion > 0 (0 to 20)\n * - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)\n * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const staticRadialGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${ staticRadialGradientMeta.maxColorCount }];\nuniform float u_colorsCount;\n\nuniform float u_radius;\nuniform float u_focalDistance;\nuniform float u_focalAngle;\nuniform float u_falloff;\nuniform float u_mixing;\nuniform float u_distortion;\nuniform float u_distortionShift;\nuniform float u_distortionFreq;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\n\nin vec2 v_objectUV;\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ proceduralHash21 }\n\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\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 noise(vec2 n, vec2 seedOffset) {\n  return valueNoise(n + seedOffset);\n}\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 uv = 2. * v_objectUV;\n  vec2 grainUV = uv * 1000.;\n\n  vec2 center = vec2(0.);\n  float angleRad = -radians(u_focalAngle + 90.);\n  vec2 focalPoint = vec2(cos(angleRad), sin(angleRad)) * u_focalDistance;\n  float radius = u_radius;\n\n  vec2 c_to_uv = uv - center;\n  vec2 f_to_uv = uv - focalPoint;\n  vec2 f_to_c = center - focalPoint;\n  float r = length(c_to_uv);\n\n  float fragAngle = atan(c_to_uv.y, c_to_uv.x);\n  float angleDiff = fract((fragAngle - angleRad + PI) / TWO_PI) * TWO_PI - PI;\n\n  float halfAngle = acos(clamp(radius / max(u_focalDistance, 1e-4), 0.0, 1.0));\n  float e0 = 0.6 * PI, e1 = halfAngle;\n  float lo = min(e0, e1), hi = max(e0, e1);\n  float s  = smoothstep(lo, hi, abs(angleDiff));\n  float isInSector = (e1 >= e0) ? (1.0 - s) : s;\n\n  float a = dot(f_to_uv, f_to_uv);\n  float b = -2.0 * dot(f_to_uv, f_to_c);\n  float c = dot(f_to_c, f_to_c) - radius * radius;\n\n  float discriminant = b * b - 4.0 * a * c;\n  float t = 1.0;\n\n  if (discriminant >= 0.0) {\n    float sqrtD = sqrt(discriminant);\n    float div = max(1e-4, 2.0 * a);\n    float t0 = (-b - sqrtD) / div;\n    float t1 = (-b + sqrtD) / div;\n    t = max(t0, t1);\n    if (t < 0.0) t = 0.0;\n  }\n\n  float dist = length(f_to_uv);\n  float normalized = dist / max(1e-4, length(f_to_uv * t));\n  float shape = clamp(normalized, 0.0, 1.0);\n\n  float falloffMapped = mix(.2 + .8 * max(0., u_falloff + 1.), mix(1., 15., u_falloff * u_falloff), step(.0, u_falloff));\n\n  float falloffExp = mix(falloffMapped, 1., shape);\n  shape = pow(shape, falloffExp);\n  shape = 1. - clamp(shape, 0., 1.);\n\n\n  float outerMask = .002;\n  float outer = 1.0 - smoothstep(radius - outerMask, radius + outerMask, r);\n  outer = mix(outer, 1., isInSector);\n\n  shape = mix(0., shape, outer);\n  shape *= 1. - smoothstep(radius - .01, radius, r);\n\n  float angle = atan(f_to_uv.y, f_to_uv.x);\n  shape -= pow(u_distortion, 2.) * shape * pow(abs(sin(PI * clamp(length(f_to_uv) - 0.2 + u_distortionShift, 0.0, 1.0))), 4.0) * (sin(u_distortionFreq * angle) + cos(floor(0.65 * u_distortionFreq) * angle));\n\n  float mixerGrain = 0.;\n  if (u_grainMixer > 0.) {\n    mixerGrain = .4 * u_grainMixer * (noise(grainUV, vec2(0.)) - .5);\n  }\n\n  float mixer = shape * u_colorsCount + mixerGrain;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n\n  float outerShape = 0.;\n  for (int i = 1; i < ${ staticRadialGradientMeta.maxColorCount + 1 }; i++) {\n    if (i > int(u_colorsCount)) break;\n    float mLinear = clamp(mixer - float(i - 1), 0.0, 1.0);\n\n    float aa = fwidth(mLinear);\n    float width = min(u_mixing, 0.5);\n    float t = clamp((mLinear - (0.5 - width - aa)) / (2. * width + 2. * aa), 0., 1.);\n    float p = mix(2., 1., clamp((u_mixing - 0.5) * 2., 0., 1.));\n    float m = t < 0.5\n      ? 0.5 * pow(2. * t, p)\n      : 1. - 0.5 * pow(2. * (1. - t), p);\n\n    float quadBlend = clamp((u_mixing - 0.5) * 2., 0., 1.);\n    m = mix(m, m * m, 0.5 * quadBlend);\n    \n    if (i == 1) {\n      outerShape = m;\n    }\n\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  vec3 color = gradient.rgb * outerShape;\n  float opacity = gradient.a * outerShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  if (u_grainOverlay > 0.) {\n    float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));\n    grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);\n    grainOverlay = pow(grainOverlay, 1.3);\n\n    float grainOverlayV = grainOverlay * 2. - 1.;\n    vec3 grainOverlayColor = vec3(step(0., grainOverlayV));\n    float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);\n    grainOverlayStrength = pow(grainOverlayStrength, .8);\n    color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);\n\n    opacity += .5 * grainOverlayStrength;\n  }\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface StaticRadialGradientUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_radius: number;\n  u_focalDistance: number;\n  u_focalAngle: number;\n  u_falloff: number;\n  u_mixing: number;\n  u_distortion: number;\n  u_distortionShift: number;\n  u_distortionFreq: number;\n  u_grainMixer: number;\n  u_grainOverlay: number;\n}\n\nexport interface StaticRadialGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  radius?: number;\n  focalDistance?: number;\n  focalAngle?: number;\n  falloff?: number;\n  mixing?: number;\n  distortion?: number;\n  distortionShift?: number;\n  distortionFreq?: number;\n  grainMixer?: number;\n  grainOverlay?: number;\n}\n"],
+  "mappings": ";;;;;AAEA;AAAA,OAGO;AACP,SAAS,WAAW,WAAW,wBAAwB;AAEhD,MAAM,2BAA2B;AAAA,EACtC,eAAe;AACjB;AAwCO,MAAM,qCAA6C;AAAA;AAAA;AAAA;AAAA,wBAIjC,yBAAyB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB7D,SAAU;AAAA,EACV,SAAU;AAAA,EACV,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoGK,yBAAyB,gBAAgB,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/swirl.d.ts

@@ -14,11 +14,11 @@ export declare const swirlMeta: {
  * - u_colorsCount (float): Number of active colors
  * - u_bandCount (float): Number of color bands, 0 = concentric ripples (0 to 15)
  * - u_twist (float): Vortex power, 0 = straight sectoral shapes (0 to 1)
- * - u_center (float): How far from the center the swirl colors begin to appear (0 to 1)
+ * - u_center (float): How far from the center the swirl colors begin to appear, needs twist > 0 (0 to 1)
  * - u_proportion (float): Blend point between colors, 0.5 = equal distribution (0 to 1)
  * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
- * - u_noise (float): Strength of noise distortion, no effect with noiseFrequency = 0 (0 to 1)
- * - u_noiseFrequency (float): Noise frequency, no effect with noise = 0 (0 to 1)
+ * - u_noise (float): Strength of noise distortion, needs noiseFrequency > 0 (0 to 1)
+ * - u_noiseFrequency (float): Noise frequency, needs noise > 0 (0 to 1)
  *
  * Vertex shader outputs (used in fragment shader):
  * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied

package/dist/shaders/swirl.js

@@ -48,7 +48,9 @@ void main() {
 
   float shape = fract(offset);
   shape = 1. - abs(2. * shape - 1.);
-  shape += u_noise * snoise(15. * pow(u_noiseFrequency, 2.) * shape_uv);
+  if (u_noise > 0.) {
+    shape += u_noise * snoise(15. * pow(u_noiseFrequency, 2.) * shape_uv);
+  }
 
   float mid = smoothstep(.2, .2 + .8 * u_center, pow(l, twist));
   shape = mix(0., shape, mid);

package/dist/shaders/swirl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/swirl.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { simplexNoise, declarePI, rotation2, colorBandingFix } from '../shader-utils.js';\n\nexport const swirlMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 10 stripe colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_bandCount (float): Number of color bands, 0 = concentric ripples (0 to 15)\n * - u_twist (float): Vortex power, 0 = straight sectoral shapes (0 to 1)\n * - u_center (float): How far from the center the swirl colors begin to appear (0 to 1)\n * - u_proportion (float): Blend point between colors, 0.5 = equal distribution (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_noise (float): Strength of noise distortion, no effect with noiseFrequency = 0 (0 to 1)\n * - u_noiseFrequency (float): Noise frequency, no effect with noise = 0 (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const swirlFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${ swirlMeta.maxColorCount }];\nuniform float u_colorsCount;\nuniform float u_bandCount;\nuniform float u_twist;\nuniform float u_center;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_noise;\nuniform float u_noiseFrequency;\n\nin vec2 v_objectUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ simplexNoise }\n${ rotation2 }\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  float l = length(shape_uv);\n  l = max(1e-4, l);\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_noise * snoise(15. * pow(u_noiseFrequency, 2.) * shape_uv);\n\n  float mid = smoothstep(.2, .2 + .8 * u_center, pow(l, twist));\n  shape = mix(0., shape, mid);\n\n  float proportion = clamp(u_proportion, 0., 1.);\n  float exponent = mix(.25, 1., proportion * 2.);\n  exponent = mix(exponent, 10., max(0., proportion * 2. - 1.));\n  shape = pow(shape, exponent);\n\n  float mixer = shape * u_colorsCount;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n\n  float outerShape = 0.;\n  for (int i = 1; i < ${ swirlMeta.maxColorCount + 1 }; i++) {\n    if (i > int(u_colorsCount)) break;\n\n    float m = clamp(mixer - float(i - 1), 0., 1.);\n    float aa = fwidth(m);\n    m = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, m);\n\n    if (i == 1) {\n      outerShape = m;\n    }\n\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  float midAA = .1 * fwidth(pow(l, -twist));\n  float outerMid = smoothstep(.2, .2 + midAA, pow(l, twist));\n  outerShape = mix(0., outerShape, outerMid);\n\n  vec3 color = gradient.rgb * outerShape;\n  float opacity = gradient.a * outerShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SwirlUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_bandCount: number;\n  u_twist: number;\n  u_center: number;\n  u_proportion: number;\n  u_softness: number;\n  u_noiseFrequency: number;\n  u_noise: number;\n}\n\nexport interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  bandCount?: number;\n  twist?: number;\n  center?: number;\n  proportion?: number;\n  softness?: number;\n  noiseFrequency?: number;\n  noise?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,cAAc,WAAW,WAAW,uBAAuB;AAE7D,MAAM,YAAY;AAAA,EACvB,eAAe;AACjB;AAqCO,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMlB,UAAU,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc9C,SAAU;AAAA,EACV,YAAa;AAAA,EACb,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAiCY,UAAU,gBAAgB,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2BhD,eAAgB;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { simplexNoise, declarePI, rotation2, colorBandingFix } from '../shader-utils.js';\n\nexport const swirlMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 10 stripe colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_bandCount (float): Number of color bands, 0 = concentric ripples (0 to 15)\n * - u_twist (float): Vortex power, 0 = straight sectoral shapes (0 to 1)\n * - u_center (float): How far from the center the swirl colors begin to appear, needs twist > 0 (0 to 1)\n * - u_proportion (float): Blend point between colors, 0.5 = equal distribution (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_noise (float): Strength of noise distortion, needs noiseFrequency > 0 (0 to 1)\n * - u_noiseFrequency (float): Noise frequency, needs noise > 0 (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const swirlFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${ swirlMeta.maxColorCount }];\nuniform float u_colorsCount;\nuniform float u_bandCount;\nuniform float u_twist;\nuniform float u_center;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_noise;\nuniform float u_noiseFrequency;\n\nin vec2 v_objectUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ simplexNoise }\n${ rotation2 }\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  float l = length(shape_uv);\n  l = max(1e-4, l);\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  if (u_noise > 0.) {\n    shape += u_noise * snoise(15. * pow(u_noiseFrequency, 2.) * shape_uv);\n  }\n\n  float mid = smoothstep(.2, .2 + .8 * u_center, pow(l, twist));\n  shape = mix(0., shape, mid);\n\n  float proportion = clamp(u_proportion, 0., 1.);\n  float exponent = mix(.25, 1., proportion * 2.);\n  exponent = mix(exponent, 10., max(0., proportion * 2. - 1.));\n  shape = pow(shape, exponent);\n\n  float mixer = shape * u_colorsCount;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n\n  float outerShape = 0.;\n  for (int i = 1; i < ${ swirlMeta.maxColorCount + 1 }; i++) {\n    if (i > int(u_colorsCount)) break;\n\n    float m = clamp(mixer - float(i - 1), 0., 1.);\n    float aa = fwidth(m);\n    m = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, m);\n\n    if (i == 1) {\n      outerShape = m;\n    }\n\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  float midAA = .1 * fwidth(pow(l, -twist));\n  float outerMid = smoothstep(.2, .2 + midAA, pow(l, twist));\n  outerShape = mix(0., outerShape, outerMid);\n\n  vec3 color = gradient.rgb * outerShape;\n  float opacity = gradient.a * outerShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SwirlUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_bandCount: number;\n  u_twist: number;\n  u_center: number;\n  u_proportion: number;\n  u_softness: number;\n  u_noiseFrequency: number;\n  u_noise: number;\n}\n\nexport interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  bandCount?: number;\n  twist?: number;\n  center?: number;\n  proportion?: number;\n  softness?: number;\n  noiseFrequency?: number;\n  noise?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,cAAc,WAAW,WAAW,uBAAuB;AAE7D,MAAM,YAAY;AAAA,EACvB,eAAe;AACjB;AAqCO,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMlB,UAAU,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc9C,SAAU;AAAA,EACV,YAAa;AAAA,EACb,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAmCY,UAAU,gBAAgB,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2BhD,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/voronoi.d.ts

@@ -17,12 +17,12 @@ export declare const voronoiMeta: {
  * - u_scale (float): Overall zoom level, used for anti-aliasing calculations
  * - u_colors (vec4[]): Up to 5 base cell colors in RGBA
  * - u_colorsCount (float): Number of active colors
- * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2×N, etc. (1 to 3)
- * - u_colorGlow (vec4): Color tint for radial inner shadow inside cells in RGBA, effective with glow > 0
+ * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2×N, etc., needs 2+ colors (1 to 3)
+ * - u_colorGlow (vec4): Color tint for radial inner shadow inside cells in RGBA, needs glow > 0
  * - u_colorGap (vec4): Color used for cell borders/gaps in RGBA
  * - u_distortion (float): Strength of noise-driven displacement of cell centers (0 to 0.5)
  * - u_gap (float): Width of the border/gap between cells (0 to 0.1)
- * - u_glow (float): Strength of the radial inner shadow inside cells (0 to 1)
+ * - u_glow (float): Strength of the radial inner shadow inside cells, needs colorGlow alpha > 0 (0 to 1)
  * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
  *
  * Vertex shader outputs (used in fragment shader):

package/dist/shaders/voronoi.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/voronoi.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, textureRandomizerGB } from '../shader-utils.js';\n\nexport const voronoiMeta = {\n  maxColorCount: 5,\n} as const;\n\n/**\n * Anti-aliased animated Voronoi pattern with smooth and customizable edges.\n *\n * Double-pass Voronoi pattern cell edges.\n * Original algorithm: https://www.shadertoy.com/view/ldl3W8\n *\n * Note: gaps can't be removed completely due to natural artifacts of Voronoi cells borders\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_scale (float): Overall zoom level, used for anti-aliasing calculations\n * - u_colors (vec4[]): Up to 5 base cell colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2\u00D7N, etc. (1 to 3)\n * - u_colorGlow (vec4): Color tint for radial inner shadow inside cells in RGBA, effective with glow > 0\n * - u_colorGap (vec4): Color used for cell borders/gaps in RGBA\n * - u_distortion (float): Strength of noise-driven displacement of cell centers (0 to 0.5)\n * - u_gap (float): Width of the border/gap between cells (0 to 0.1)\n * - u_glow (float): Strength of the radial inner shadow inside cells (0 to 1)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const voronoiFragmentShader: string = `#version 300 es\nprecision mediump 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_colorGap;\nuniform float u_distortion;\nuniform float u_gap;\nuniform float u_glow;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ textureRandomizerGB }\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 o = randomGB(ip + g);\n      float raw_hash = o.x;\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;\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 = randomGB(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 *= 1.25;\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 glows = length(voronoiRes.yz * u_glow);\n  glows = pow(glows, 1.5);\n\n  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);\n  float opacity = cellOpacity + u_colorGlow.a * glows;\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_colorGap.rgb * u_colorGap.a, color, edge);\n  opacity = mix(u_colorGap.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_colorGap: [number, number, number, number];\n  u_colorGlow: [number, number, number, number];\n  u_distortion: number;\n  u_gap: number;\n  u_glow: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  stepsPerColor?: number;\n  colorGap?: string;\n  colorGlow?: string;\n  distortion?: number;\n  gap?: number;\n  glow?: number;\n}\n"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, textureRandomizerGB } from '../shader-utils.js';\n\nexport const voronoiMeta = {\n  maxColorCount: 5,\n} as const;\n\n/**\n * Anti-aliased animated Voronoi pattern with smooth and customizable edges.\n *\n * Double-pass Voronoi pattern cell edges.\n * Original algorithm: https://www.shadertoy.com/view/ldl3W8\n *\n * Note: gaps can't be removed completely due to natural artifacts of Voronoi cells borders\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_scale (float): Overall zoom level, used for anti-aliasing calculations\n * - u_colors (vec4[]): Up to 5 base cell colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2\u00D7N, etc., needs 2+ colors (1 to 3)\n * - u_colorGlow (vec4): Color tint for radial inner shadow inside cells in RGBA, needs glow > 0\n * - u_colorGap (vec4): Color used for cell borders/gaps in RGBA\n * - u_distortion (float): Strength of noise-driven displacement of cell centers (0 to 0.5)\n * - u_gap (float): Width of the border/gap between cells (0 to 0.1)\n * - u_glow (float): Strength of the radial inner shadow inside cells, needs colorGlow alpha > 0 (0 to 1)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const voronoiFragmentShader: string = `#version 300 es\nprecision mediump 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_colorGap;\nuniform float u_distortion;\nuniform float u_gap;\nuniform float u_glow;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ textureRandomizerGB }\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 o = randomGB(ip + g);\n      float raw_hash = o.x;\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;\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 = randomGB(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 *= 1.25;\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 glows = length(voronoiRes.yz * u_glow);\n  glows = pow(glows, 1.5);\n\n  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);\n  float opacity = cellOpacity + u_colorGlow.a * glows;\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_colorGap.rgb * u_colorGap.a, color, edge);\n  opacity = mix(u_colorGap.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_colorGap: [number, number, number, number];\n  u_colorGlow: [number, number, number, number];\n  u_distortion: number;\n  u_gap: number;\n  u_glow: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  stepsPerColor?: number;\n  colorGap?: string;\n  colorGlow?: string;\n  distortion?: number;\n  gap?: number;\n  glow?: number;\n}\n"],
   "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,2BAA2B;AAExC,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AA0CO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASpB,YAAY,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAchD,SAAU;AAAA,EACV,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA2DE,YAAY,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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

@@ -11,7 +11,6 @@ export declare const warpMeta: {
  *
  * Fragment shader uniforms:
  * - u_time (float): Animation time
- * - u_scale (float): Overall zoom level, used for anti-aliasing calculations
  * - u_colors (vec4[]): Up to 10 gradient colors in RGBA
  * - u_colorsCount (float): Number of active colors
  * - u_proportion (float): Blend point between colors, 0.5 = equal distribution (0 to 1)
@@ -19,8 +18,8 @@ export declare const warpMeta: {
  * - u_shape (float): Base pattern type (0 = checks, 1 = stripes, 2 = edge)
  * - u_shapeScale (float): Zoom level of the base pattern (0 to 1)
  * - u_distortion (float): Strength of noise-based distortion (0 to 1)
- * - u_swirl (float): Strength of the swirl distortion (0 to 1)
- * - u_swirlIterations (float): Number of layered swirl passes, effective with swirl > 0 (0 to 20)
+ * - u_swirl (float): Strength of the swirl distortion, needs swirlIterations > 1 (0 to 1)
+ * - u_swirlIterations (float): Number of layered swirl passes as an integer, needs swirl > 0 (2 to 20)
  * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
  *
  * Vertex shader outputs (used in fragment shader):
@@ -55,7 +54,6 @@ export interface WarpUniforms extends ShaderSizingUniforms {
 }
 export interface WarpParams extends ShaderSizingParams, ShaderMotionParams {
     colors?: string[];
-    rotation?: number;
     proportion?: number;
     softness?: number;
     shape?: WarpPattern;

package/dist/shaders/warp.js

@@ -12,7 +12,6 @@ const warpFragmentShader = `#version 300 es
 precision mediump float;
 
 uniform float u_time;
-uniform float u_scale;
 
 uniform sampler2D u_noiseTexture;
 
@@ -67,7 +66,6 @@ void main() {
   for (int i = 1; i <= 20; i++) {
     if (i >= int(u_swirlIterations)) break;
     float iFloat = float(i);
-    //    swirl *= (1. - smoothstep(.0, .25, length(fwidth(uv))));
     uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);
     uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x);
   }

package/dist/shaders/warp.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/warp.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, colorBandingFix } from '../shader-utils.js';\n\nexport const warpMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Animated color fields warped by noise and swirls, applied over base patterns\n * (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution,\n * softness, distortion, and swirl. Great for fluid, smoky, or marbled effects.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_scale (float): Overall zoom level, used for anti-aliasing calculations\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_proportion (float): Blend point between colors, 0.5 = equal distribution (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_shape (float): Base pattern type (0 = checks, 1 = stripes, 2 = edge)\n * - u_shapeScale (float): Zoom level of the base pattern (0 to 1)\n * - u_distortion (float): Strength of noise-based distortion (0 to 1)\n * - u_swirl (float): Strength of the swirl distortion (0 to 1)\n * - u_swirlIterations (float): Number of layered swirl passes, effective with swirl > 0 (0 to 20)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const warpFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${ warpMeta.maxColorCount }];\nuniform float u_colorsCount;\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\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomG(i);\n  float b = randomG(i + vec2(1.0, 0.0));\n  float c = randomG(i + vec2(0.0, 1.0));\n  float d = randomG(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\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\nvoid main() {\n  vec2 uv = v_patternUV;\n  uv *= .5;\n\n  const float firstFrameOffset = 118.;\n  float t = 0.0625 * (u_time + firstFrameOffset);\n\n  float n1 = valueNoise(uv * 1. + t);\n  float n2 = valueNoise(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 swirl = u_swirl;\n  for (int i = 1; i <= 20; i++) {\n    if (i >= int(u_swirlIterations)) break;\n    float iFloat = float(i);\n    //    swirl *= (1. - smoothstep(.0, .25, length(fwidth(uv))));\n    uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);\n    uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x);\n  }\n\n  float proportion = clamp(u_proportion, 0., 1.);\n\n  float shape = 0.;\n  if (u_shape < .5) {\n    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);\n    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else if (u_shape < 1.5) {\n    vec2 stripesShape_uv = uv * (2. * u_shapeScale);\n    float f = fract(stripesShape_uv.y);\n    shape = smoothstep(.0, .55, f) * (1.0 - smoothstep(.45, 1., f));\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else {\n    float shapeScaling = 5. * (1. - u_shapeScale);\n    float e0 = 0.45 - shapeScaling;\n    float e1 = 0.55 + shapeScaling;\n    shape = smoothstep(min(e0, e1), max(e0, e1), 1.0 - uv.y + 0.3 * (proportion - 0.5));\n  }\n\n  float mixer = shape * (u_colorsCount - 1.);\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  float aa = fwidth(shape);\n  for (int i = 1; i < ${ warpMeta.maxColorCount }; i++) {\n    if (i >= int(u_colorsCount)) break;\n    float m = clamp(mixer - float(i - 1), 0.0, 1.0);\n\n    float localMixerStart = floor(m);\n    float softness = .5 * u_softness + fwidth(m);\n    float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart);\n    float stepped = localMixerStart + smoothed;\n\n    m = mix(stepped, m, u_softness);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\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 WarpUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_proportion: number;\n  u_softness: number;\n  u_shape: (typeof WarpPatterns)[WarpPattern];\n  u_shapeScale: number;\n  u_distortion: number;\n  u_swirl: number;\n  u_swirlIterations: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface WarpParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  rotation?: number;\n  proportion?: number;\n  softness?: number;\n  shape?: WarpPattern;\n  shapeScale?: number;\n  distortion?: number;\n  swirl?: number;\n  swirlIterations?: number;\n}\n\nexport const WarpPatterns = {\n  checks: 0,\n  stripes: 1,\n  edge: 2,\n} as const;\n\nexport type WarpPattern = keyof typeof WarpPatterns;\n"],
-  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,WAAW,uBAAuB;AAE/C,MAAM,WAAW;AAAA,EACtB,eAAe;AACjB;AAwCO,MAAM,qBAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQjB,SAAS,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc7C,SAAU;AAAA,EACV,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAgEY,SAAS,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmB3C,eAAgB;AAAA;AAAA;AAAA;AAAA;AA+Bd,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, colorBandingFix } from '../shader-utils.js';\n\nexport const warpMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Animated color fields warped by noise and swirls, applied over base patterns\n * (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution,\n * softness, distortion, and swirl. Great for fluid, smoky, or marbled effects.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_proportion (float): Blend point between colors, 0.5 = equal distribution (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_shape (float): Base pattern type (0 = checks, 1 = stripes, 2 = edge)\n * - u_shapeScale (float): Zoom level of the base pattern (0 to 1)\n * - u_distortion (float): Strength of noise-based distortion (0 to 1)\n * - u_swirl (float): Strength of the swirl distortion, needs swirlIterations > 1 (0 to 1)\n * - u_swirlIterations (float): Number of layered swirl passes as an integer, needs swirl > 0 (2 to 20)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const warpFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${ warpMeta.maxColorCount }];\nuniform float u_colorsCount;\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\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomG(i);\n  float b = randomG(i + vec2(1.0, 0.0));\n  float c = randomG(i + vec2(0.0, 1.0));\n  float d = randomG(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\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\nvoid main() {\n  vec2 uv = v_patternUV;\n  uv *= .5;\n\n  const float firstFrameOffset = 118.;\n  float t = 0.0625 * (u_time + firstFrameOffset);\n\n  float n1 = valueNoise(uv * 1. + t);\n  float n2 = valueNoise(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 swirl = u_swirl;\n  for (int i = 1; i <= 20; i++) {\n    if (i >= int(u_swirlIterations)) break;\n    float iFloat = float(i);\n    uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);\n    uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x);\n  }\n\n  float proportion = clamp(u_proportion, 0., 1.);\n\n  float shape = 0.;\n  if (u_shape < .5) {\n    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);\n    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else if (u_shape < 1.5) {\n    vec2 stripesShape_uv = uv * (2. * u_shapeScale);\n    float f = fract(stripesShape_uv.y);\n    shape = smoothstep(.0, .55, f) * (1.0 - smoothstep(.45, 1., f));\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else {\n    float shapeScaling = 5. * (1. - u_shapeScale);\n    float e0 = 0.45 - shapeScaling;\n    float e1 = 0.55 + shapeScaling;\n    shape = smoothstep(min(e0, e1), max(e0, e1), 1.0 - uv.y + 0.3 * (proportion - 0.5));\n  }\n\n  float mixer = shape * (u_colorsCount - 1.);\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  float aa = fwidth(shape);\n  for (int i = 1; i < ${ warpMeta.maxColorCount }; i++) {\n    if (i >= int(u_colorsCount)) break;\n    float m = clamp(mixer - float(i - 1), 0.0, 1.0);\n\n    float localMixerStart = floor(m);\n    float softness = .5 * u_softness + fwidth(m);\n    float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart);\n    float stepped = localMixerStart + smoothed;\n\n    m = mix(stepped, m, u_softness);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\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 WarpUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_proportion: number;\n  u_softness: number;\n  u_shape: (typeof WarpPatterns)[WarpPattern];\n  u_shapeScale: number;\n  u_distortion: number;\n  u_swirl: number;\n  u_swirlIterations: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface WarpParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  proportion?: number;\n  softness?: number;\n  shape?: WarpPattern;\n  shapeScale?: number;\n  distortion?: number;\n  swirl?: number;\n  swirlIterations?: number;\n}\n\nexport const WarpPatterns = {\n  checks: 0,\n  stripes: 1,\n  edge: 2,\n} as const;\n\nexport type WarpPattern = keyof typeof WarpPatterns;\n"],
+  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,WAAW,uBAAuB;AAE/C,MAAM,WAAW;AAAA,EACtB,eAAe;AACjB;AAuCO,MAAM,qBAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOjB,SAAS,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc7C,SAAU;AAAA,EACV,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA+DY,SAAS,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmB3C,eAAgB;AAAA;AAAA;AAAA;AAAA;AA8Bd,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;",
   "names": []
 }

package/dist/shaders/water.d.ts

@@ -8,12 +8,12 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * - u_image (sampler2D): Optional source image texture
  * - u_imageAspectRatio (float): Aspect ratio of the source image
  * - u_colorBack (vec4): Background color in RGBA
- * - u_colorHighlight (vec4): Highlight color in RGBA
- * - u_highlights (float): Coloring added over image/background following caustic shape (0 to 1)
- * - u_layering (float): Power of 2nd layer of caustic distortion (0 to 1)
- * - u_edges (float): Caustic distortion power on the image edges (0 to 1)
+ * - u_colorHighlight (vec4): Highlight color in RGBA, needs highlights > 0
+ * - u_highlights (float): Coloring added over image/background following caustic shape, needs colorHighlight alpha > 0 (0 to 1)
+ * - u_layering (float): Power of 2nd layer of caustic distortion, needs caustic or highlights > 0 (0 to 1)
+ * - u_edges (float): Caustic distortion power on the image edges, needs image and caustic > 0 (0 to 1)
  * - u_waves (float): Additional distortion based on simplex noise, independent from caustic (0 to 1)
- * - u_caustic (float): Power of caustic distortion (0 to 1)
+ * - u_caustic (float): Power of caustic distortion, needs image (0 to 1)
  * - u_size (float): Pattern scale relative to the image (0.01 to 7)
  *
  * Vertex shader outputs (used in fragment shader):
@@ -27,7 +27,7 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
  * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
  * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
- * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
  * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
  * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
  * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)

package/dist/shaders/water.js

@@ -74,7 +74,9 @@ void main() {
 
   float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);
 
-  causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);
+  if (u_layering > 0.) {
+    causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);
+  }
   causticNoise = causticNoise * causticNoise;
 
   float edgesDistortion = smoothstep(0., .1, imageUV.x);
@@ -103,7 +105,7 @@ void main() {
 
   float hightlight = .025 * u_highlights * causticNoise;
   hightlight *= u_colorHighlight.a;
-  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise);
+  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise * u_colorHighlight.a);
   opacity += hightlight;
 
   color += hightlight * (.5 + .5 * wavesNoise);

package/dist/shaders/water.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/water.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, simplexNoise } from '../shader-utils.js';\n\n/**\n * Water-like surface distortion with natural caustic realism. Works as an image filter or standalone animated texture.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_image (sampler2D): Optional source image texture\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorHighlight (vec4): Highlight color in RGBA\n * - u_highlights (float): Coloring added over image/background following caustic shape (0 to 1)\n * - u_layering (float): Power of 2nd layer of caustic distortion (0 to 1)\n * - u_edges (float): Caustic distortion power on the image edges (0 to 1)\n * - u_waves (float): Additional distortion based on simplex noise, independent from caustic (0 to 1)\n * - u_caustic (float): Power of caustic distortion (0 to 1)\n * - u_size (float): Pattern scale relative to the image (0.01 to 7)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n *\n */\n\n// language=GLSL\nexport const waterFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_size;\nuniform float u_highlights;\nuniform float u_layering;\nuniform float u_edges;\nuniform float u_caustic;\nuniform float u_waves;\n\nin vec2 v_imageUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ simplexNoise }\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n\n  float left   = smoothstep(0., aax, uv.x);\n  float right = 1.0 - smoothstep(1. - aax, 1., uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top = 1.0 - smoothstep(1. - aay, 1., uv.y);\n\n  return left * right * bottom * top;\n}\n\nmat2 rotate2D(float r) {\n  return mat2(cos(r), sin(r), -sin(r), cos(r));\n}\n\nfloat getCausticNoise(vec2 uv, float t, float scale) {\n  vec2 n = vec2(.1);\n  vec2 N = vec2(.1);\n  mat2 m = rotate2D(.5);\n  for (int j = 0; j < 6; j++) {\n    uv *= m;\n    n *= m;\n    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;\n    n += sin(q);\n    N += cos(q) / scale;\n    scale *= 1.1;\n  }\n  return (N.x + N.y + 1.);\n}\n\nvoid main() {\n  vec2 imageUV = v_imageUV;\n  vec2 patternUV = v_imageUV - .5;\n  patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));\n  patternUV /= (.01 + .09 * u_size);\n\n  float t = u_time;\n\n  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));\n\n  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);\n\n  causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);\n  causticNoise = causticNoise * causticNoise;\n\n  float edgesDistortion = smoothstep(0., .1, imageUV.x);\n  edgesDistortion *= smoothstep(0., .1, imageUV.y);\n  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + (1.0 - smoothstep(.8, .95, imageUV.x)));\n  edgesDistortion *= (1.0 - smoothstep(.9, 1., imageUV.y));\n  edgesDistortion = mix(edgesDistortion, 1., u_edges);\n\n  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;\n\n  float wavesDistortion = .1 * u_waves * wavesNoise;\n\n  imageUV += vec2(wavesDistortion, -wavesDistortion);\n  imageUV += (u_caustic * causticNoiseDistortion);\n\n  float frame = getUvFrame(imageUV);\n\n  vec4 image = texture(u_image, imageUV);\n  vec4 backColor = u_colorBack;\n  backColor.rgb *= backColor.a;\n\n  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);\n  float opacity = backColor.a + image.a * frame;\n\n  causticNoise = max(-.2, causticNoise);\n\n  float hightlight = .025 * u_highlights * causticNoise;\n  hightlight *= u_colorHighlight.a;\n  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise);\n  opacity += hightlight;\n\n  color += hightlight * (.5 + .5 * wavesNoise);\n  opacity += hightlight * (.5 + .5 * wavesNoise);\n\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WaterUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_colorBack: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_highlights: number;\n  u_layering: number;\n  u_edges: number;\n  u_caustic: number;\n  u_waves: number;\n  u_size: number;\n}\n\nexport interface WaterParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string;\n  colorBack?: string;\n  colorHighlight?: string;\n  highlights?: number;\n  layering?: number;\n  edges?: number;\n  caustic?: number;\n  waves?: number;\n  size?: number;\n}\n"],
-  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,WAAW,WAAW,oBAAoB;AAsC5C,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBxC,SAAU;AAAA,EACV,SAAU;AAAA,EACV,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, simplexNoise } from '../shader-utils.js';\n\n/**\n * Water-like surface distortion with natural caustic realism. Works as an image filter or standalone animated texture.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_image (sampler2D): Optional source image texture\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorHighlight (vec4): Highlight color in RGBA, needs highlights > 0\n * - u_highlights (float): Coloring added over image/background following caustic shape, needs colorHighlight alpha > 0 (0 to 1)\n * - u_layering (float): Power of 2nd layer of caustic distortion, needs caustic or highlights > 0 (0 to 1)\n * - u_edges (float): Caustic distortion power on the image edges, needs image and caustic > 0 (0 to 1)\n * - u_waves (float): Additional distortion based on simplex noise, independent from caustic (0 to 1)\n * - u_caustic (float): Power of caustic distortion, needs image (0 to 1)\n * - u_size (float): Pattern scale relative to the image (0.01 to 7)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.1 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n *\n */\n\n// language=GLSL\nexport const waterFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_size;\nuniform float u_highlights;\nuniform float u_layering;\nuniform float u_edges;\nuniform float u_caustic;\nuniform float u_waves;\n\nin vec2 v_imageUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ simplexNoise }\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n\n  float left   = smoothstep(0., aax, uv.x);\n  float right = 1.0 - smoothstep(1. - aax, 1., uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top = 1.0 - smoothstep(1. - aay, 1., uv.y);\n\n  return left * right * bottom * top;\n}\n\nmat2 rotate2D(float r) {\n  return mat2(cos(r), sin(r), -sin(r), cos(r));\n}\n\nfloat getCausticNoise(vec2 uv, float t, float scale) {\n  vec2 n = vec2(.1);\n  vec2 N = vec2(.1);\n  mat2 m = rotate2D(.5);\n  for (int j = 0; j < 6; j++) {\n    uv *= m;\n    n *= m;\n    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;\n    n += sin(q);\n    N += cos(q) / scale;\n    scale *= 1.1;\n  }\n  return (N.x + N.y + 1.);\n}\n\nvoid main() {\n  vec2 imageUV = v_imageUV;\n  vec2 patternUV = v_imageUV - .5;\n  patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));\n  patternUV /= (.01 + .09 * u_size);\n\n  float t = u_time;\n\n  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));\n\n  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);\n\n  if (u_layering > 0.) {\n    causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);\n  }\n  causticNoise = causticNoise * causticNoise;\n\n  float edgesDistortion = smoothstep(0., .1, imageUV.x);\n  edgesDistortion *= smoothstep(0., .1, imageUV.y);\n  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + (1.0 - smoothstep(.8, .95, imageUV.x)));\n  edgesDistortion *= (1.0 - smoothstep(.9, 1., imageUV.y));\n  edgesDistortion = mix(edgesDistortion, 1., u_edges);\n\n  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;\n\n  float wavesDistortion = .1 * u_waves * wavesNoise;\n\n  imageUV += vec2(wavesDistortion, -wavesDistortion);\n  imageUV += (u_caustic * causticNoiseDistortion);\n\n  float frame = getUvFrame(imageUV);\n\n  vec4 image = texture(u_image, imageUV);\n  vec4 backColor = u_colorBack;\n  backColor.rgb *= backColor.a;\n\n  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);\n  float opacity = backColor.a + image.a * frame;\n\n  causticNoise = max(-.2, causticNoise);\n\n  float hightlight = .025 * u_highlights * causticNoise;\n  hightlight *= u_colorHighlight.a;\n  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise * u_colorHighlight.a);\n  opacity += hightlight;\n\n  color += hightlight * (.5 + .5 * wavesNoise);\n  opacity += hightlight * (.5 + .5 * wavesNoise);\n\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WaterUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_colorBack: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_highlights: number;\n  u_layering: number;\n  u_edges: number;\n  u_caustic: number;\n  u_waves: number;\n  u_size: number;\n}\n\nexport interface WaterParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string;\n  colorBack?: string;\n  colorHighlight?: string;\n  highlights?: number;\n  layering?: number;\n  edges?: number;\n  caustic?: number;\n  waves?: number;\n  size?: number;\n}\n"],
+  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,WAAW,WAAW,oBAAoB;AAsC5C,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBxC,SAAU;AAAA,EACV,SAAU;AAAA,EACV,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/waves.d.ts

@@ -5,9 +5,9 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * Fragment shader uniforms:
  * - u_colorFront (vec4): Foreground color in RGBA
  * - u_colorBack (vec4): Background color in RGBA
- * - u_shape (float): Line shape, 0 = zigzag, 1 = sine, 2-3 = irregular waves, fractional values morph between shapes (0 to 3)
- * - u_amplitude (float): Wave amplitude (0 to 1)
- * - u_frequency (float): Wave frequency (0 to 2)
+ * - u_shape (float): Line shape, 0 = zigzag, 1 = sine, 2-3 = irregular waves, fractional values morph between shapes, needs amplitude > 0, frequency > 0 (0 to 3)
+ * - u_amplitude (float): Wave amplitude, at frequency = 0 it only shifts the lines (0 to 1)
+ * - u_frequency (float): Wave frequency, needs amplitude > 0 (0 to 2)
  * - u_spacing (float): Space between every two wavy lines (0 to 2)
  * - u_proportion (float): Blend point between front and back colors, 0.5 = equal distribution (0 to 1)
  * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)

package/dist/shaders/waves.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/waves.ts"],
-  "sourcesContent": ["import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI } from '../shader-utils.js';\n\n/**\n * Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves.\n *\n * Fragment shader uniforms:\n * - u_colorFront (vec4): Foreground color in RGBA\n * - u_colorBack (vec4): Background color in RGBA\n * - u_shape (float): Line shape, 0 = zigzag, 1 = sine, 2-3 = irregular waves, fractional values morph between shapes (0 to 3)\n * - u_amplitude (float): Wave amplitude (0 to 1)\n * - u_frequency (float): Wave frequency (0 to 2)\n * - u_spacing (float): Space between every two wavy lines (0 to 2)\n * - u_proportion (float): Blend point between front and back colors, 0.5 = equal distribution (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const wavesFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_shape;\nuniform float u_frequency;\nuniform float u_amplitude;\nuniform float u_spacing;\nuniform float u_proportion;\nuniform float u_softness;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= 4.;\n\n  float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);\n  float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);\n  float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI);\n  float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI));\n\n  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));\n  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));\n  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));\n  offset *= 2. * u_amplitude;\n\n  float spacing = (.001 + u_spacing);\n  float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);\n\n  float aa = .0001 + fwidth(shape);\n  float dc = 1. - clamp(u_proportion, 0., 1.);\n  float e0 = dc - u_softness - aa;\n  float e1 = dc + u_softness + aa;\n  float res = smoothstep(min(e0, e1), max(e0, e1), shape);\n\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n  float fgOpacity = u_colorFront.a;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  float bgOpacity = u_colorBack.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WavesUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_shape: number;\n  u_frequency: number;\n  u_amplitude: number;\n  u_spacing: number;\n  u_proportion: number;\n  u_softness: number;\n}\n\nexport interface WavesParams extends ShaderSizingParams {\n  colorFront?: string;\n  colorBack?: string;\n  rotation?: number;\n  shape?: number;\n  frequency?: number;\n  amplitude?: number;\n  spacing?: number;\n  proportion?: number;\n  softness?: number;\n}\n"],
+  "sourcesContent": ["import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI } from '../shader-utils.js';\n\n/**\n * Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves.\n *\n * Fragment shader uniforms:\n * - u_colorFront (vec4): Foreground color in RGBA\n * - u_colorBack (vec4): Background color in RGBA\n * - u_shape (float): Line shape, 0 = zigzag, 1 = sine, 2-3 = irregular waves, fractional values morph between shapes, needs amplitude > 0, frequency > 0 (0 to 3)\n * - u_amplitude (float): Wave amplitude, at frequency = 0 it only shifts the lines (0 to 1)\n * - u_frequency (float): Wave frequency, needs amplitude > 0 (0 to 2)\n * - u_spacing (float): Space between every two wavy lines (0 to 2)\n * - u_proportion (float): Blend point between front and back colors, 0.5 = equal distribution (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const wavesFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_shape;\nuniform float u_frequency;\nuniform float u_amplitude;\nuniform float u_spacing;\nuniform float u_proportion;\nuniform float u_softness;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= 4.;\n\n  float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);\n  float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);\n  float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI);\n  float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI));\n\n  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));\n  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));\n  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));\n  offset *= 2. * u_amplitude;\n\n  float spacing = (.001 + u_spacing);\n  float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);\n\n  float aa = .0001 + fwidth(shape);\n  float dc = 1. - clamp(u_proportion, 0., 1.);\n  float e0 = dc - u_softness - aa;\n  float e1 = dc + u_softness + aa;\n  float res = smoothstep(min(e0, e1), max(e0, e1), shape);\n\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n  float fgOpacity = u_colorFront.a;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  float bgOpacity = u_colorBack.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WavesUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_shape: number;\n  u_frequency: number;\n  u_amplitude: number;\n  u_spacing: number;\n  u_proportion: number;\n  u_softness: number;\n}\n\nexport interface WavesParams extends ShaderSizingParams {\n  colorFront?: string;\n  colorBack?: string;\n  rotation?: number;\n  shape?: number;\n  frequency?: number;\n  amplitude?: number;\n  spacing?: number;\n  proportion?: number;\n  softness?: number;\n}\n"],
   "mappings": ";;;;;AAAA,eAAmE;AACnE,SAAS,iBAAiB;AAkCnB,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBxC,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "license": "Apache-2.0",
   "type": "module",
   "sideEffects": false,