@paper-design/shaders 0.0.80 → 0.0.81

package/dist/shaders/paper-texture.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/paper-texture.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, declarePI, fiberNoise, textureRandomizerR } from '../shader-utils.js';\n\n/**\n * A static texture built from multiple noise layers, usable for realistic paper and cardboard surfaces.\n * Can be used as an image filter or as a standalone texture.\n *\n * Fragment shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_image (sampler2D): Optional source image texture\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n * - u_colorFront (vec4): Foreground color in RGBA\n * - u_colorBack (vec4): Background color in RGBA\n * - u_contrast (float): Blending behavior, sharper vs smoother color transitions (0 to 1)\n * - u_roughness (float): Pixel noise, related to canvas and not scalable (0 to 1)\n * - u_fiber (float): Curly-shaped noise intensity (0 to 1)\n * - u_fiberSize (float): Curly-shaped noise scale (0 to 1)\n * - u_crumples (float): Cell-based crumple pattern intensity (0 to 1)\n * - u_crumpleSize (float): Cell-based crumple pattern scale (0 to 1)\n * - u_folds (float): Depth of the folds (0 to 1)\n * - u_foldCount (float): Number of folds (1 to 15)\n * - u_fade (float): Big-scale noise mask applied to the pattern (0 to 1)\n * - u_drops (float): Visibility of speckle pattern (0 to 1)\n * - u_seed (float): Seed applied to folds, crumples and dots (0 to 1000)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\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 paperTextureFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_contrast;\nuniform float u_roughness;\nuniform float u_fiber;\nuniform float u_fiberSize;\nuniform float u_crumples;\nuniform float u_crumpleSize;\nuniform float u_folds;\nuniform float u_foldCount;\nuniform float u_drops;\nuniform float u_seed;\nuniform float u_fade;\n\nuniform sampler2D u_noiseTexture;\n\nin vec2 v_imageUV;\n\nout vec4 fragColor;\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. - smoothstep(1. - aax, 1., uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top = 1. - smoothstep(1. - aay, 1., uv.y);\n\n  return left * right * bottom * top;\n}\n\n${ declarePI }\n${ rotation2 }\n${ textureRandomizerR }\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(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}\nfloat fbm(vec2 n) {\n  float total = 0.0, amplitude = .4;\n  for (int i = 0; i < 3; i++) {\n    total += valueNoise(n) * amplitude;\n    n *= 1.99;\n    amplitude *= 0.65;\n  }\n  return total;\n}\n\n\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 50. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat roughness(vec2 p) {\n  p *= .1;\n  float o = 0.;\n  for (float i = 0.; ++i < 4.; p *= 2.1) {\n    vec4 w = vec4(floor(p), ceil(p));\n    vec2 f = fract(p);\n    o += mix(\n    mix(randomG(w.xy), randomG(w.xw), f.y),\n    mix(randomG(w.zy), randomG(w.zw), f.y),\n    f.x);\n    o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y)));\n  }\n  return o / 3.;\n}\n\n${ fiberNoise }\n\nvec2 randomGB(vec2 p) {\n  vec2 uv = floor(p) / 50. + .5;\n  return texture(u_noiseTexture, fract(uv)).gb;\n}\nfloat crumpledNoise(vec2 t, float pw) {\n  vec2 p = floor(t);\n  float wsum = 0.;\n  float cl = 0.;\n  for (int y = -1; y < 2; y += 1) {\n    for (int x = -1; x < 2; x += 1) {\n      vec2 b = vec2(float(x), float(y));\n      vec2 q = b + p;\n      vec2 q2 = q - floor(q / 8.) * 8.;\n      vec2 c = q + randomGB(q2);\n      vec2 r = c - t;\n      float w = pow(smoothstep(0., 1., 1. - abs(r.x)), pw) * pow(smoothstep(0., 1., 1. - abs(r.y)), pw);\n      cl += (.5 + .5 * sin((q2.x + q2.y * 5.) * 8.)) * w;\n      wsum += w;\n    }\n  }\n  return pow(wsum != 0.0 ? cl / wsum : 0.0, .5) * 2.;\n}\nfloat crumplesShape(vec2 uv) {\n  return crumpledNoise(uv * .25, 16.) * crumpledNoise(uv * .5, 2.);\n}\n\n\nvec2 folds(vec2 uv) {\n  vec3 pp = vec3(0.);\n  float l = 9.;\n  for (float i = 0.; i < 15.; i++) {\n    if (i >= u_foldCount) break;\n    vec2 rand = randomGB(vec2(i, i * u_seed));\n    float an = rand.x * TWO_PI;\n    vec2 p = vec2(cos(an), sin(an)) * rand.y;\n    float dist = distance(uv, p);\n    l = min(l, dist);\n\n    if (l == dist) {\n      pp.xy = (uv - p.xy);\n      pp.z = dist;\n    }\n  }\n  return mix(pp.xy, vec2(0.), pow(pp.z, .25));\n}\n\nfloat drops(vec2 uv) {\n  vec2 iDropsUV = floor(uv);\n  vec2 fDropsUV = fract(uv);\n  float dropsMinDist = 1.;\n  for (int j = -1; j <= 1; j++) {\n    for (int i = -1; i <= 1; i++) {\n      vec2 neighbor = vec2(float(i), float(j));\n      vec2 offset = randomGB(iDropsUV + neighbor);\n      offset = .5 + .5 * sin(10. * u_seed + TWO_PI * offset);\n      vec2 pos = neighbor + offset - fDropsUV;\n      float dist = length(pos);\n      dropsMinDist = min(dropsMinDist, dropsMinDist*dist);\n    }\n  }\n  return 1. - smoothstep(.05, .09, pow(dropsMinDist, .5));\n}\n\nfloat lst(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nvoid main() {\n\n  vec2 imageUV = v_imageUV;\n  vec2 patternUV = v_imageUV - .5;\n  patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.));\n\n  vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;\n  float roughness = roughness(roughnessUv + vec2(1., 0.)) - roughness(roughnessUv - vec2(1., 0.));\n\n  vec2 crumplesUV = fract(patternUV * .02 / u_crumpleSize - u_seed) * 32.;\n  float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV));\n\n  vec2 fiberUV = 2. / u_fiberSize * patternUV;\n  float fiber = fiberNoise(fiberUV, vec2(0.));\n  fiber = .5 * u_fiber * (fiber - 1.);\n\n  vec2 normal = vec2(0.);\n  vec2 normalImage = vec2(0.);\n\n  vec2 foldsUV = patternUV * .12;\n  foldsUV = rotate(foldsUV, 4. * u_seed);\n  vec2 w = folds(foldsUV);\n  foldsUV = rotate(foldsUV + .007 * cos(u_seed), .01 * sin(u_seed));\n  vec2 w2 = folds(foldsUV);\n\n  float drops = u_drops * drops(patternUV * 2.);\n\n  float fade = u_fade * fbm(.17 * patternUV + 10. * u_seed);\n  fade = clamp(8. * fade * fade * fade, 0., 1.);\n\n  w = mix(w, vec2(0.), fade);\n  w2 = mix(w2, vec2(0.), fade);\n  crumples = mix(crumples, 0., fade);\n  drops = mix(drops, 0., fade);\n  fiber *= mix(1., .5, fade);\n  roughness *= mix(1., .5, fade);\n\n  normal.xy += u_folds * min(5. * u_contrast, 1.) * 4. * max(vec2(0.), w + w2);\n  normalImage.xy += u_folds * 2. * w;\n\n  normal.xy += crumples;\n  normalImage.xy += 1.5 * crumples;\n\n  normal.xy += 3. * drops;\n  normalImage.xy += .2 * drops;\n\n  normal.xy += u_roughness * 1.5 * roughness;\n  normal.xy += fiber;\n\n  normalImage += u_roughness * .75 * roughness;\n  normalImage += .2 * fiber;\n\n  vec3 lightPos = vec3(1., 2., 1.);\n  float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));\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  imageUV += .02 * normalImage;\n  float frame = getUvFrame(imageUV);\n  vec4 image = texture(u_image, imageUV);\n  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);\n\n  frame *= image.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n  opacity = mix(opacity, 1., frame);\n\n  color -= .007 * drops;\n\n  color.rgb = mix(color, image.rgb, frame);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PaperTextureUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_noiseTexture?: HTMLImageElement;\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_contrast: number;\n  u_roughness: number;\n  u_fiber: number;\n  u_fiberSize: number;\n  u_crumples: number;\n  u_foldCount: number;\n  u_folds: number;\n  u_fade: number;\n  u_crumpleSize: number;\n  u_drops: number;\n  u_seed: number;\n}\n\nexport interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string;\n  colorFront?: string;\n  colorBack?: string;\n  contrast?: number;\n  roughness?: number;\n  fiber?: number;\n  fiberSize?: number;\n  crumples?: number;\n  foldCount?: number;\n  folds?: number;\n  fade?: number;\n  crumpleSize?: number;\n  drops?: number;\n  seed?: number;\n}\n"],
-  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,WAAW,WAAW,YAAY,0BAA0B;AA8C9D,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0C/C,SAAU;AAAA,EACV,SAAU;AAAA,EACV,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2CnB,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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, proceduralHash21, proceduralHash22 } from '../shader-utils.js';\n\nexport const paperTextureMeta = {\n  maxCrumpleCount: 15,\n} as const;\n\n/**\n * Static paper-like texture built from a combination of grain, noise and multiple fold patterns.\n * Works as an image filter or as a standalone texture.\n *\n * Fragment shader uniforms:\n * - u_image (sampler2D): Optional source image texture\n * - u_isImage (bool): Whether a source image was provided\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n * - u_colorBack (vec4): Color behind the paper sheet in RGBA\n * - u_colorPaper (vec4): Color of the paper sheet in RGBA\n * - u_colorShadow (vec4): Color of the patterns over the paper sheet in RGBA\n * - u_blending (float): Amount of image-to-paper blending, needs image (0 to 1)\n * - u_distortion (float): How much the image bends with the paper surface, needs image (-1 to 1)\n * - u_clip (bool): Cuts the paper sheet to the image frame, needs image\n * - u_angle (float): Direction the surface is lit from in degrees, also the roughness rows direction, needs crumples, wrinkles, folds, roughnessRows or drops > 0 (0 to 360)\n * - u_seed (float): Seed applied to every pattern (0 to 1000)\n * - u_roughness (float): Fine grain covering the surface evenly (0 to 1)\n * - u_roughnessSize (float): Scale of the roughness grain, needs roughness > 0 (0 to 1)\n * - u_roughnessRows (float): Lines the roughness up into stripes, 0 = even scatter, 1 = laid-paper rows, needs roughness > 0 (0 to 1)\n * - u_fiber (float): Curly thread-like noise covering the surface evenly (0 to 1)\n * - u_fiberSize (float): Scale of the fiber noise, needs fiber > 0 (0 to 1)\n * - u_folds (float): Straight vertical and horizontal fold lines producing ridges and valleys (0 to 1)\n * - u_foldSizeX (float): Size of the vertical folds, needs folds > 0 (0 to 1)\n * - u_foldSizeY (float): Size of the horizontal folds, needs folds > 0 (0 to 1)\n * - u_foldOffsetX (float): Shifts the vertical folds across the surface, needs folds > 0 (0 to 1)\n * - u_foldOffsetY (float): Shifts the horizontal folds across the surface, needs folds > 0 (0 to 1)\n * - u_wrinkles (float): Crumple-like facets repeating across the surface (0 to 1)\n * - u_wrinkleSize (float): Scale of the wrinkle facets, needs wrinkles > 0 (0 to 1)\n * - u_crumples (float): A set of irregular folding lines (0 to 1)\n * - u_crumpleCount (float): Number of facets in the crumple field, needs crumples > 0 (2 to 15)\n * - u_drops (float): Visibility of the speckle pattern, darkens the image instead of coloring it (0 to 1)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\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_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 paperTextureFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform sampler2D u_image;\nuniform bool u_isImage;\nuniform float u_imageAspectRatio;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorPaper;\nuniform vec4 u_colorShadow;\n\nuniform float u_blending;\nuniform float u_distortion;\nuniform bool u_clip;\nuniform float u_angle;\nuniform float u_seed;\n\nuniform float u_roughness;\nuniform float u_roughnessSize;\nuniform float u_roughnessRows;\nuniform float u_fiber;\nuniform float u_fiberSize;\nuniform float u_folds;\nuniform float u_foldSizeX;\nuniform float u_foldSizeY;\nuniform float u_foldOffsetX;\nuniform float u_foldOffsetY;\nuniform float u_wrinkles;\nuniform float u_wrinkleSize;\nuniform float u_crumples;\nuniform float u_crumpleCount;\nuniform float u_drops;\n\nuniform sampler2D u_noiseTexture;\n\nin vec2 v_imageUV;\nout vec4 fragColor;\n\nfloat getUvFrame(vec2 uv) {\n  vec2 invAA = .5 / clamp(fwidth(uv), 1e-5, .02);\n  vec2 lo = clamp(uv * invAA + .5, 0., 1.);\n  vec2 hi = clamp((1. - uv) * invAA + .5, 0., 1.);\n  return lo.x * hi.x * lo.y * hi.y;\n}\n\nfloat lst(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\n${declarePI}\n${proceduralHash21}\n${proceduralHash22}\n\nfloat getRoughness(vec2 p, vec2 lightDir, vec2 seedShift, float basePixel) {\n  vec2 u = p / vec2(2, 4);\n  float w = 100. * basePixel;\n  float eps = 4. * w;\n\n  float size = mix(3.2, .8, u_roughnessSize);\n  float logLac = log2(2.1);\n  float level = -log2(w + 1e-8) / logLac;\n  float baseLevel = floor(level) - 2.;\n  float fade = fract(level);\n\n  vec2 px = (u.x + vec2(eps, -eps)) * .1;\n  float py = u.y * .1;\n\n  vec2 sum = vec2(0.);\n  float norm = 0., amp = .5;\n  float freq = exp2(baseLevel * logLac);\n  for (int i = 0; i < 4; i++) {\n    float absIdx = baseLevel + float(i);\n    vec2 qx = size * px * freq;\n    float qy = size * py * freq;\n\n    float wi = 1.;\n    if (i == 0) wi = 1. - fade;\n    if (i == 3) wi = fade;\n\n    vec2 fx = fract(qx);\n    float fy = fract(qy);\n    vec2 shift = .5 + absIdx * .3 + seedShift;\n    float uvY = floor(qy) / 50. + shift.y;\n    vec2 s0a = textureLod(u_noiseTexture, fract(vec2(floor(qx.x) / 50. + shift.x, uvY)), 0.).rg;\n    vec2 s1a = textureLod(u_noiseTexture, fract(vec2( ceil(qx.x) / 50. + shift.x, uvY)), 0.).rg;\n    vec2 s0b = textureLod(u_noiseTexture, fract(vec2(floor(qx.y) / 50. + shift.x, uvY)), 0.).rg;\n    vec2 s1b = textureLod(u_noiseTexture, fract(vec2( ceil(qx.y) / 50. + shift.x, uvY)), 0.).rg;\n    vec2 ny0 = mix(vec2(s0a.r, s0b.r), vec2(s0a.g, s0b.g), fy);\n    vec2 ny1 = mix(vec2(s1a.r, s1b.r), vec2(s1a.g, s1b.g), fy);\n    vec2 n = mix(ny0, ny1, fx);\n\n    sum += amp * wi * n;\n    norm += amp * wi;\n    amp *= .8;\n    freq *= 2.1;\n  }\n\n  vec2 r = sum / norm;\n  float dx = .5 + r.x - r.y;\n  float grain = 3. * dx * dx - .7;\n\n  float rowBand = fract(dot(p, lightDir) * .05 * size);\n  return grain + .6 * u_roughnessRows * (rowBand - .5);\n}\n\nfloat getFiber(vec2 p, vec2 seedShift, float basePixel) {\n  float size = mix(4., 1., u_fiberSize);\n  float w = 50. * basePixel;\n  float level = -log2(w + 1e-8);\n  float baseLevel = floor(level) - 3.;\n  float fade = fract(level);\n\n  vec2 grad = vec2(0.);\n  float scale = 1.;\n  float amp = 1.;\n  float freq = pow(1.7, baseLevel);\n  for (int i = 0; i < 5; i++) {\n    float absIdx = baseLevel + float(i);\n    vec2 q = size * p * freq;\n\n    float an = absIdx * .8;\n    float rc = cos(an), rs = sin(an);\n    q = vec2(rc * q.x - rs * q.y, rs * q.x + rc * q.y);\n\n    float wi = 1.;\n    if (i == 0) wi = 1. - fade;\n    if (i == 4) wi = fade;\n\n    vec2 iq = floor(q);\n    vec2 fq = fract(q);\n    float shift = absIdx * .3;\n    vec4 uv = fract(vec4(iq, iq + 1.) / 50. + .5 + shift + seedShift.xyxy);\n    float aF = textureLod(u_noiseTexture, uv.xy, 0.).b;\n    float bF = textureLod(u_noiseTexture, uv.zy, 0.).b;\n    float cF = textureLod(u_noiseTexture, uv.xw, 0.).b;\n    float dF = textureLod(u_noiseTexture, uv.zw, 0.).b;\n    vec2 u = fq * fq * (3. - 2. * fq);\n    vec2 du = 8. * fq * (1. - fq);\n    float dx = du.x * mix(bF - aF, dF - cF, u.y);\n    float dy = du.y * mix(cF - aF, dF - bF, u.x);\n    grad += wi * amp * scale * vec2(rc * dx + rs * dy, -rs * dx + rc * dy);\n    scale *= 1.7;\n    amp *= .5;\n    freq *= 1.7;\n  }\n\n  return clamp(.333 * length(grad), 0., 1.);\n}\n\nvec2 smoothNoise(vec2 p) {\n  vec2 t = p * 50. - .5;\n  vec2 i = floor(t);\n  vec2 f = fract(t);\n  f = f * f * (3. - 2. * f);\n  return textureLod(u_noiseTexture, fract((i + f + .5) / vec2(50.)), 0.).rg;\n}\n\nfloat getDrops(vec2 uv, vec2 seedShift) {\n  vec2 iDropsUV = floor(uv);\n  vec2 fDropsUV = fract(uv);\n  float dropsMinDist = 1.;\n  for (int y = -1; y < 2; y += 1) {\n    for (int x = -1; x < 2; x += 1) {\n      vec2 neighbor = vec2(float(y), float(x));\n      vec2 offset = hash22(iDropsUV + neighbor + 50. * seedShift);\n      vec2 pos = neighbor + offset - fDropsUV;\n      dropsMinDist *= min(1., dot(pos, pos));\n    }\n  }\n  return .5 * lst(.09, .08, sqrt(sqrt(dropsMinDist)));\n}\n\nvec2 getCellTilt(float idx, float radius) {\n  vec2 rand = hash22(vec2(idx + 31., idx * u_seed + 17.));\n  float an = rand.x * TWO_PI;\n  return vec2(cos(an), sin(an)) * mix(.3, 1.7, rand.y * rand.y) * mix(.7, 1., radius);\n}\n\nvec2 getCrumpleDetail(vec2 uv, float freq, float shift, float basePixel, out float depth) {\n  depth = 0.;\n  vec2 v = uv * freq;\n  float pixel = .9 * freq * basePixel;\n  vec2 base = floor(v);\n  float n1 = 9., n2 = 9.;\n  vec2 s1 = vec2(0.), s2 = vec2(0.), q1 = vec2(0.), q2 = vec2(0.);\n\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 cell = base + vec2(float(x), float(y));\n      vec2 q = hash22(vec2(cell.y * 1.9 + 3.1 + shift, cell.x * 1.3 + .11 * u_seed));\n      float keep = .8;\n      if (q.y > keep) continue;\n\n      vec2 r = hash22(vec2(cell.x + .37 * u_seed + shift + 11.1, cell.y - .21 * u_seed + 5.7));\n      vec2 s = cell + .06 + .88 * r;\n\n      vec2 d = v - s;\n      float dsq = dot(d, d);\n      if (dsq < n1) {\n        n2 = n1;\n        s2 = s1;\n        q2 = q1;\n        n1 = dsq;\n        s1 = s;\n        q1 = q;\n      } else if (dsq < n2) {\n        n2 = dsq;\n        s2 = s;\n        q2 = q;\n      }\n    }\n  }\n\n  if (n1 > 8.) return vec2(0.);\n\n  float an1 = q1.x * TWO_PI, mag1 = q1.y / .8;\n  vec2 t1 = vec2(cos(an1), sin(an1)) * mix(.3, 1.7, mag1 * mag1);\n  float an2 = q2.x * TWO_PI, mag2 = q2.y / .8;\n  vec2 t2 = vec2(cos(an2), sin(an2)) * mix(.3, 1.7, mag2 * mag2);\n\n  vec2 span = s1 - s2;\n  float spanLen = max(length(span), 1e-4);\n  float toEdge = (n2 - n1) / (2. * spanLen);\n\n  float pair = hash21(s1 + s2 + 1.7 * abs(s1 - s2));\n  float pairSoft = .05 + .1 * step(pair, .4);\n  float b = clamp(toEdge / max(1.5 * pixel, .5 * pairSoft), 0., 1.);\n  b = b * b * (3. - 2. * b);\n  float d1 = max(sqrt(n1), 1e-4);\n  depth = .2 * d1;\n  float shoulderAmt = max(0., 1. - toEdge / .42) * b;\n  vec2 shoulder = vec2(0.);\n  if (shoulderAmt > 0.) {\n    float d2 = max(sqrt(n2), 1e-4);\n    shoulder = shoulderAmt * ((v - s2) / d2 - (v - s1) / d1);\n  }\n\n  vec2 mid = .5 * (t1 + t2);\n  return mid + (t1 - mid) * b + .9 * shoulder;\n}\n\nvec4 getCrumples(vec2 uv) {\n  float crumpleN = max(2., floor(u_crumpleCount + .5));\n  float near = 60000., nearB = 60000.;\n  float idx = 0., rad = 0.;\n  vec2 nearP = vec2(0.), nearPb = vec2(0.);\n  vec4 seeds[${paperTextureMeta.maxCrumpleCount}];\n  for (int i = 0; i < ${paperTextureMeta.maxCrumpleCount}; i++) {\n    if (float(i) >= crumpleN) break;\n    vec2 rand = hash22(vec2(float(i), float(i) * u_seed));\n    float an = rand.x * TWO_PI;\n    vec2 p = vec2(cos(an), sin(an)) * rand.y;\n    seeds[i] = vec4(p, rand);\n\n    vec2 d = uv - p;\n    float dsq = dot(d, d);\n    if (dsq < near) {\n      nearB = near;\n      nearPb = nearP;\n      near = dsq;\n      idx = float(i);\n      rad = rand.y;\n      nearP = p;\n    } else if (dsq < nearB) {\n      nearB = dsq;\n      nearPb = p;\n    }\n  }\n  float l = sqrt(near), lb = sqrt(nearB);\n  vec2 dir = (uv - nearP) / max(l, 1e-4);\n  float edge = lst(0., .5, lb - l);\n\n  float shoulderLimit = l + .5;\n\n  vec2 tilt = getCellTilt(idx, rad);\n  float tiltSum = 1.;\n  vec2 wide = vec2(0.);\n  float wideSum = 0.;\n  float toEdge = 9., edgeSoft = 0.;\n\n  for (int i = 0; i < ${paperTextureMeta.maxCrumpleCount}; i++) {\n    if (float(i) >= crumpleN) break;\n    if (float(i) == idx) continue;\n    vec4 seed = seeds[i];\n    vec2 p = seed.xy;\n    vec2 rand = seed.zw;\n\n    vec2 d = uv - p;\n    float dsq = dot(d, d);\n\n    if (dsq < shoulderLimit * shoulderLimit) {\n      float di = sqrt(dsq);\n      float shoulder = lst(.5, 0., di - l);\n      wide += shoulder * (d / max(di, 1e-4) - dir);\n      wideSum += shoulder;\n    }\n\n    float pairSoft = .01 + .05 * step(.2, rand.x) + .3 * rand.y;\n    float toBisector = (dsq - near) / (.2 * max(length(p - nearP), 1e-4));\n    if (toBisector < toEdge) {\n      toEdge = toBisector;\n      edgeSoft = pairSoft;\n    }\n\n    float w = 1. - toBisector / pairSoft;\n    if (w > 0.) {\n      w *= w;\n      tilt += w * getCellTilt(float(i), rand.y);\n      tiltSum += w;\n    }\n  }\n\n  float blend = clamp(toEdge / edgeSoft, 0., 1.);\n  vec2 sharp = (1. - edge) * ((uv - nearPb) / max(lb, 1e-4) - dir);\n  vec2 rounding = mix(sharp, wide / max(wideSum, 1.), min(2. * edgeSoft, 1.));\n  float radial = l / max(l + toEdge, 1e-4);\n\n  return vec4(tilt / tiltSum + rounding * blend * radial, .2 * l, edge);\n}\n\nvoid getFolds(vec2 coord, vec2 offset, vec2 count, vec2 noise, vec2 baseFwidth, out vec2 slope, out vec2 dark, out vec2 lift) {\n  vec2 g = coord * count + .5 * offset + noise;\n  vec2 dx = fract(g) - .5;\n  vec2 adx = abs(dx);\n  float foldRadius = .3;\n  vec2 t = clamp(adx / foldRadius, 0., 1.);\n  dark = t * t * (3. - 2. * t);\n  lift = 1. - t;\n  lift *= lift;\n\n  vec2 crease = clamp(dx / max(count * baseFwidth, 1e-5), -1., 1.);\n  slope = crease * (1. - dark);\n\n  vec2 lineWidth = .02 * count * mix(vec2(2.5), vec2(.8), dark.yx) + .1 * noise;\n  slope -= 1. - smoothstep(vec2(0.), lineWidth, adx);\n}\n\nvoid main() {\n\n  vec2 patternUV = (v_imageUV - .5) * vec2(u_imageAspectRatio, 1.);\n  float basePixel = max(length(dFdx(patternUV)), length(dFdy(patternUV)));\n  vec2 baseFwidth = fwidth(patternUV);\n\n  float pattern = 0.;\n\n  float crumpleDepth = 0.;\n  float wrinkleDepth = 0.;\n  float foldDepth = 0.;\n  float roughness = 0.;\n  float fiber = 0.;\n  float drops = 0.;\n\n  float grazing = 0.7;\n  float lightRad = radians(u_angle);\n  vec2 lightDir = vec2(sin(lightRad), -cos(lightRad));\n  float foldAngleInSector = mod(u_angle, 90.);\n  float foldLightRad = radians(u_angle - foldAngleInSector + mix(12., 78., foldAngleInSector / 90.));\n  vec2 foldLightDir = vec2(sin(foldLightRad), -cos(foldLightRad));\n  vec2 relief = vec2(0.);\n  vec2 foldSlope = vec2(0.);\n  float reliefAmount = 0.;\n  float foldInk = 1.;\n  vec2 crumpleFlow = vec2(0.);\n\n  vec2 warpNoise = vec2(0.);\n  if (u_crumples > 0. || u_folds > 0. || u_wrinkles > 0.) {\n    warpNoise = smoothNoise(patternUV * .1 + .2 + .6 * fract(.017 * u_seed)) - .5;\n  }\n  vec2 crumplesUV = (patternUV * .9) + .012 * warpNoise;\n\n  if (u_crumples > 0.) {\n    vec4 crumples = getCrumples(crumplesUV);\n\n    vec2 crumpleTilt = .5 * u_crumples * crumples.xy;\n    crumpleTilt -= .1 * max(dot(crumpleTilt, lightDir), 0.) * lightDir;\n    relief += crumpleTilt;\n    reliefAmount += .6 * u_crumples;\n    crumpleFlow = crumples.w * crumpleTilt;\n\n    crumpleDepth = clamp(5. * crumples.z, 0., 1.);\n  }\n\n  if (u_wrinkles > 0.) {\n    float detailFreq = mix(10., 1., u_wrinkleSize);\n    float detailAmp = .2;\n    vec2 detailGrad = vec2(0.);\n    float detailDepth = 0., depthSum = 0.;\n    for (int i = 0; i < 3; i++) {\n      float layerDepth;\n      detailGrad += detailAmp * getCrumpleDetail(crumplesUV, detailFreq, 31. * float(i), basePixel, layerDepth);\n      detailDepth += detailAmp * layerDepth;\n      depthSum += detailAmp;\n      detailAmp *= (.5 + .2 * detailGrad.x);\n      detailFreq *= 2.1;\n    }\n\n    vec2 detailTilt = 1.5 * u_wrinkles * detailGrad;\n    detailTilt -= .65 * max(dot(detailTilt, lightDir), 0.) * lightDir;\n    relief += detailTilt;\n    reliefAmount += .6 * u_wrinkles;\n\n    wrinkleDepth = clamp(5. * detailDepth / max(depthSum, 1e-4), 0., 1.);\n  }\n\n  if (u_folds > 0.) {\n    vec2 foldOffset = vec2(1. - 2. * u_foldOffsetX, 1. - 2. * u_foldOffsetY);\n    vec2 foldCount = vec2(mix(3., .5, u_foldSizeX), mix(3., .5, u_foldSizeY));\n    vec2 foldNoise = .005 * warpNoise * foldCount;\n    vec2 uv = patternUV + .03 * crumpleFlow;\n\n    vec2 slope, dark, lift;\n    getFolds(uv, foldOffset, foldCount, foldNoise, baseFwidth, slope, dark, lift);\n\n    foldSlope = u_folds * slope;\n    reliefAmount += 1. * u_folds;\n    vec2 ink = mix(vec2(.96), vec2(1.), dark);\n    float flatness = dark.x * dark.y;\n    foldInk *= mix(1., ink.x * ink.y * mix(.5, .3, flatness), u_folds);\n\n    foldDepth = u_folds * (lift.y * foldLightDir.y - lift.x * foldLightDir.x);\n  }\n\n  float unlit = cos(grazing);\n  float lit = unlit;\n\n  if (reliefAmount > 0.) {\n    float lightFalloff = clamp(.5 + dot(v_imageUV - .5, lightDir), 0., 1.);\n    float lightPower = mix(.5, 1., lightFalloff);\n    float slope = clamp(dot(relief, lightDir) + dot(foldSlope, foldLightDir), -1.2, 1.2);\n    lit = max(cos(slope + grazing), 0.);\n\n    pattern += (clamp(reliefAmount, 0., 1.) * unlit + (lit - unlit)) * foldInk * lightPower;\n  }\n\n  patternUV += .04 * crumpleFlow;\n\n  vec2 seedShift = floor(fract(u_seed * vec2(.7548776662, .5698402909)) * 50.) / 50.;\n\n  if (u_roughness > 0.) {\n    roughness = u_roughness * getRoughness(1000. * patternUV, lightDir, seedShift, basePixel);\n    pattern += roughness;\n  }\n\n  if (u_fiber > 0.) {\n    fiber = u_fiber * getFiber(50. * patternUV, seedShift, basePixel);\n    pattern += fiber;\n  }\n\n  if (u_drops > 0.) {\n    drops = u_drops * getDrops(patternUV * 10., seedShift);\n  }\n\n  pattern = clamp(pattern, 0., 1.);\n\n  vec3 backColor = u_colorBack.rgb * u_colorBack.a;\n  float backOpacity = u_colorBack.a;\n  vec3 baseColor = u_colorPaper.rgb * u_colorPaper.a;\n  float baseOpacity = u_colorPaper.a;\n  vec3 shadowColor = u_colorShadow.rgb * u_colorShadow.a;\n  float shadowOpacity = u_colorShadow.a;\n\n  float notClipped = u_clip ? .1 : 1.;\n  vec2 imageCenteredUV = v_imageUV - .5;\n  float edgeDist = 2. * max(abs(imageCenteredUV.x), abs(imageCenteredUV.y));\n  float wrinkleDistortion = mix(.38, .0175, smoothstep(0., 1., edgeDist));\n  float scaleDistortion = .15 * u_crumples * (crumpleDepth - .5) + wrinkleDistortion * u_wrinkles * (wrinkleDepth - .5) + .05 * foldDepth;\n  vec2 linearDistortion = notClipped * .002 * lightDir * drops;\n  float radialDistortion = notClipped * .02 * (roughness + fiber);\n  vec2 centeredUV = imageCenteredUV * (1. - u_distortion * scaleDistortion);\n  centeredUV -= u_distortion * linearDistortion;\n  vec2 imageUV = .5 + centeredUV * (1. - abs(u_distortion) * radialDistortion * dot(centeredUV, centeredUV));\n\n  vec3 color = shadowColor * pattern;\n  float opacity = shadowOpacity * pattern;\n  color += baseColor * (1. - opacity);\n  opacity += baseOpacity * (1. - opacity);\n\n  if (u_isImage) {\n    float frame = getUvFrame(imageUV);\n    vec4 image = texture(u_image, imageUV);\n    frame *= image.a;\n\n    float maxC = max(max(image.r, image.g), image.b);\n    float minC = min(min(image.r, image.g), image.b);\n    float sat = maxC > 0. ? (maxC - minC) / maxC : 0.;\n    float midC = image.r + image.g + image.b - maxC - minC;\n    float secondaryness = maxC > minC ? (midC - minC) / (maxC - minC) : 0.;\n    float satDampen = sat * (1. - .5 * secondaryness);\n    float darkDampen = 1. - dot(vec3(.2126, .7152, .0722), image.rgb);\n    float dampen = mix(0., .7, u_blending) * max(satDampen, darkDampen);\n\n    vec3 paper = vec3(1.) - opacity + color;\n    vec3 pic = image.rgb * paper * u_blending + image.rgb * (1. - u_blending);\n    pic = mix(pic, vec3(1.), .6 * pow(dampen, 2. + 3. * pattern));\n\n    color = mix(color, pic, frame);\n    opacity = frame + opacity * (1. - frame);\n\n    if (u_clip) {\n      color *= frame;\n      opacity *= frame;\n    }\n  }\n\n  color *= mix(vec3(1.), .5 * u_colorShadow.rgb, drops * shadowOpacity);\n\n  color += backColor * (1. - opacity);\n  opacity += backOpacity * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PaperTextureUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_isImage: boolean;\n  u_colorBack: [number, number, number, number];\n  u_colorPaper: [number, number, number, number];\n  u_colorShadow: [number, number, number, number];\n  u_blending: number;\n  u_distortion: number;\n  u_clip: boolean;\n  u_angle: number;\n  u_seed: number;\n  u_roughness: number;\n  u_roughnessSize: number;\n  u_roughnessRows: number;\n  u_fiber: number;\n  u_fiberSize: number;\n  u_folds: number;\n  u_foldSizeX: number;\n  u_foldSizeY: number;\n  u_foldOffsetX: number;\n  u_foldOffsetY: number;\n  u_wrinkles: number;\n  u_wrinkleSize: number;\n  u_crumples: number;\n  u_crumpleCount: number;\n  u_drops: number;\n  u_noiseTexture?: HTMLImageElement;\n}\nexport interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string;\n  colorBack?: string;\n  colorPaper?: string;\n  colorShadow?: string;\n  blending?: number;\n  distortion?: number;\n  clip?: boolean;\n  angle?: number;\n  seed?: number;\n  roughness?: number;\n  roughnessSize?: number;\n  roughnessRows?: number;\n  fiber?: number;\n  fiberSize?: number;\n  folds?: number;\n  foldSizeX?: number;\n  foldSizeY?: number;\n  foldOffsetX?: number;\n  foldOffsetY?: number;\n  wrinkles?: number;\n  wrinkleSize?: number;\n  crumples?: number;\n  crumpleCount?: number;\n  drops?: number;\n}\n"],
+  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,WAAW,kBAAkB,wBAAwB;AAEvD,MAAM,mBAAmB;AAAA,EAC9B,iBAAiB;AACnB;AAqDO,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiDhD,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAmMH,iBAAiB,eAAe;AAAA,wBACvB,iBAAiB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAiChC,iBAAiB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/perlin-noise.d.ts

@@ -8,11 +8,11 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * - u_time (float): Animation time
  * - u_colorFront (vec4): Foreground color in RGBA
  * - u_colorBack (vec4): Background color in RGBA
- * - u_proportion (float): Blend point between 2 colors, 0.5 = equal distribution (0 to 1)
+ * - u_proportion (float): Blend point between two colors, 0.5 = equal distribution (0 to 1)
  * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
  * - u_octaveCount (float): Perlin noise octaves number, more octaves for more detailed patterns (1 to 8)
- * - u_persistence (float): Roughness, falloff between octaves (0.3 to 1)
- * - u_lacunarity (float): Frequency step, defines how compressed the pattern is (1.5 to 10)
+ * - u_persistence (float): Roughness, falloff between octaves, needs octaveCount > 1 (0.3 to 1)
+ * - u_lacunarity (float): Frequency step, defines how compressed the pattern is, needs octaveCount > 1 (1.5 to 10)
  *
  * Vertex shader outputs (used in fragment shader):
  * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied

package/dist/shaders/perlin-noise.js

@@ -106,13 +106,11 @@ float p_noise(vec3 position, int octaveCount, float persistence, float lacunarit
   float value = 0.0;
   float amplitude = 1.0;
   float frequency = 10.0;
-  float maxValue = 0.0;
   octaveCount = clamp(octaveCount, 1, 8);
 
   for (int i = 0; i < octaveCount; i++) {
     float seed = float(i) * 0.7319;
     value += perlinNoise(position * frequency, seed) * amplitude;
-    maxValue += amplitude;
     amplitude *= persistence;
     frequency *= lacunarity;
   }
@@ -123,10 +121,6 @@ float get_max_amp(float persistence, float octaveCount) {
   persistence = clamp(persistence * 0.999, 0.0, 0.999);
   octaveCount = clamp(octaveCount, 1.0, 8.0);
 
-  if (abs(persistence - 1.0) < 0.001) {
-    return octaveCount;
-  }
-
   return (1.0 - pow(persistence, octaveCount)) / max(1e-4, (1.0 - persistence));
 }
 

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/perlin-noise.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, colorBandingFix, proceduralHash11, proceduralHash21 } from '../shader-utils.js';\n\n/**\n * Classic animated 3D Perlin noise with exposed controls.\n * Original algorithm: https://www.shadertoy.com/view/NlSGDz\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorFront (vec4): Foreground color in RGBA\n * - u_colorBack (vec4): Background color in RGBA\n * - u_proportion (float): Blend point between 2 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_octaveCount (float): Perlin noise octaves number, more octaves for more detailed patterns (1 to 8)\n * - u_persistence (float): Roughness, falloff between octaves (0.3 to 1)\n * - u_lacunarity (float): Frequency step, defines how compressed the pattern is (1.5 to 10)\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 perlinNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_octaveCount;\nuniform float u_persistence;\nuniform float u_lacunarity;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ proceduralHash11 }\n${ proceduralHash21 }\n\nfloat hash31(vec3 p) {\n  p = fract(p * 0.3183099) + 0.1;\n  p += dot(p, p.yzx + 19.19);\n  return fract(p.x * (p.y + p.z));\n}\n\nvec3 gradientPredefined(float hash) {\n  int idx = int(hash * 12.0) % 12;\n\n  if (idx == 0) return vec3(1, 1, 0);\n  if (idx == 1) return vec3(-1, 1, 0);\n  if (idx == 2) return vec3(1, -1, 0);\n  if (idx == 3) return vec3(-1, -1, 0);\n  if (idx == 4) return vec3(1, 0, 1);\n  if (idx == 5) return vec3(-1, 0, 1);\n  if (idx == 6) return vec3(1, 0, -1);\n  if (idx == 7) return vec3(-1, 0, -1);\n  if (idx == 8) return vec3(0, 1, 1);\n  if (idx == 9) return vec3(0, -1, 1);\n  if (idx == 10) return vec3(0, 1, -1);\n  return vec3(0, -1, -1);// idx == 11\n}\n\nfloat interpolateSafe(float v000, float v001, float v010, float v011,\nfloat v100, float v101, float v110, float v111, vec3 t) {\n  t = clamp(t, 0.0, 1.0);\n\n  float v00 = mix(v000, v100, t.x);\n  float v01 = mix(v001, v101, t.x);\n  float v10 = mix(v010, v110, t.x);\n  float v11 = mix(v011, v111, t.x);\n\n  float v0 = mix(v00, v10, t.y);\n  float v1 = mix(v01, v11, t.y);\n\n  return mix(v0, v1, t.z);\n}\n\nvec3 fade(vec3 t) {\n  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);\n}\n\nfloat perlinNoise(vec3 position, float seed) {\n  position += vec3(seed * 127.1, seed * 311.7, seed * 74.7);\n\n  vec3 i = floor(position);\n  vec3 f = fract(position);\n  float h000 = hash31(i);\n  float h001 = hash31(i + vec3(0, 0, 1));\n  float h010 = hash31(i + vec3(0, 1, 0));\n  float h011 = hash31(i + vec3(0, 1, 1));\n  float h100 = hash31(i + vec3(1, 0, 0));\n  float h101 = hash31(i + vec3(1, 0, 1));\n  float h110 = hash31(i + vec3(1, 1, 0));\n  float h111 = hash31(i + vec3(1, 1, 1));\n  vec3 g000 = gradientPredefined(h000);\n  vec3 g001 = gradientPredefined(h001);\n  vec3 g010 = gradientPredefined(h010);\n  vec3 g011 = gradientPredefined(h011);\n  vec3 g100 = gradientPredefined(h100);\n  vec3 g101 = gradientPredefined(h101);\n  vec3 g110 = gradientPredefined(h110);\n  vec3 g111 = gradientPredefined(h111);\n  float v000 = dot(g000, f - vec3(0, 0, 0));\n  float v001 = dot(g001, f - vec3(0, 0, 1));\n  float v010 = dot(g010, f - vec3(0, 1, 0));\n  float v011 = dot(g011, f - vec3(0, 1, 1));\n  float v100 = dot(g100, f - vec3(1, 0, 0));\n  float v101 = dot(g101, f - vec3(1, 0, 1));\n  float v110 = dot(g110, f - vec3(1, 1, 0));\n  float v111 = dot(g111, f - vec3(1, 1, 1));\n\n  vec3 u = fade(f);\n  return interpolateSafe(v000, v001, v010, v011, v100, v101, v110, v111, u);\n}\n\nfloat p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {\n  float value = 0.0;\n  float amplitude = 1.0;\n  float frequency = 10.0;\n  float maxValue = 0.0;\n  octaveCount = clamp(octaveCount, 1, 8);\n\n  for (int i = 0; i < octaveCount; i++) {\n    float seed = float(i) * 0.7319;\n    value += perlinNoise(position * frequency, seed) * amplitude;\n    maxValue += amplitude;\n    amplitude *= persistence;\n    frequency *= lacunarity;\n  }\n  return value;\n}\n\nfloat get_max_amp(float persistence, float octaveCount) {\n  persistence = clamp(persistence * 0.999, 0.0, 0.999);\n  octaveCount = clamp(octaveCount, 1.0, 8.0);\n\n  if (abs(persistence - 1.0) < 0.001) {\n    return octaveCount;\n  }\n\n  return (1.0 - pow(persistence, octaveCount)) / max(1e-4, (1.0 - persistence));\n}\n\nvoid main() {\n  vec2 uv = v_patternUV;\n  uv *= .5;\n\n  float t = .2 * u_time;\n\n  vec3 p = vec3(uv, t);\n\n  float octCount = floor(u_octaveCount);\n  float noise = p_noise(p, int(octCount), u_persistence, u_lacunarity);\n\n  float max_amp = get_max_amp(u_persistence, octCount);\n  float noise_normalized = clamp((noise + max_amp) / max(1e-4, (2. * max_amp)) + (u_proportion - .5), 0.0, 1.0);\n  float sharpness = clamp(u_softness, 0., 1.);\n  float smooth_w = 0.5 * max(fwidth(noise_normalized), 0.001);\n  float res = smoothstep(\n  .5 - .5 * sharpness - smooth_w,\n  .5 + .5 * sharpness + smooth_w,\n  noise_normalized\n  );\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  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PerlinNoiseUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_proportion: number;\n  u_softness: number;\n  u_octaveCount: number;\n  u_persistence: number;\n  u_lacunarity: number;\n}\n\nexport interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colorFront?: string;\n  colorBack?: string;\n  proportion?: number;\n  softness?: number;\n  octaveCount?: number;\n  persistence?: number;\n  lacunarity?: number;\n}\n"],
-  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,WAAW,iBAAiB,kBAAkB,wBAAwB;AAmCxE,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB9C,SAAU;AAAA,EACV,gBAAiB;AAAA,EACjB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA0If,eAAgB;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, colorBandingFix, proceduralHash11, proceduralHash21 } from '../shader-utils.js';\n\n/**\n * Classic animated 3D Perlin noise with exposed controls.\n * Original algorithm: https://www.shadertoy.com/view/NlSGDz\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorFront (vec4): Foreground color in RGBA\n * - u_colorBack (vec4): Background color in RGBA\n * - u_proportion (float): Blend point between two 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_octaveCount (float): Perlin noise octaves number, more octaves for more detailed patterns (1 to 8)\n * - u_persistence (float): Roughness, falloff between octaves, needs octaveCount > 1 (0.3 to 1)\n * - u_lacunarity (float): Frequency step, defines how compressed the pattern is, needs octaveCount > 1 (1.5 to 10)\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 perlinNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_octaveCount;\nuniform float u_persistence;\nuniform float u_lacunarity;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ proceduralHash11 }\n${ proceduralHash21 }\n\nfloat hash31(vec3 p) {\n  p = fract(p * 0.3183099) + 0.1;\n  p += dot(p, p.yzx + 19.19);\n  return fract(p.x * (p.y + p.z));\n}\n\nvec3 gradientPredefined(float hash) {\n  int idx = int(hash * 12.0) % 12;\n\n  if (idx == 0) return vec3(1, 1, 0);\n  if (idx == 1) return vec3(-1, 1, 0);\n  if (idx == 2) return vec3(1, -1, 0);\n  if (idx == 3) return vec3(-1, -1, 0);\n  if (idx == 4) return vec3(1, 0, 1);\n  if (idx == 5) return vec3(-1, 0, 1);\n  if (idx == 6) return vec3(1, 0, -1);\n  if (idx == 7) return vec3(-1, 0, -1);\n  if (idx == 8) return vec3(0, 1, 1);\n  if (idx == 9) return vec3(0, -1, 1);\n  if (idx == 10) return vec3(0, 1, -1);\n  return vec3(0, -1, -1);// idx == 11\n}\n\nfloat interpolateSafe(float v000, float v001, float v010, float v011,\nfloat v100, float v101, float v110, float v111, vec3 t) {\n  t = clamp(t, 0.0, 1.0);\n\n  float v00 = mix(v000, v100, t.x);\n  float v01 = mix(v001, v101, t.x);\n  float v10 = mix(v010, v110, t.x);\n  float v11 = mix(v011, v111, t.x);\n\n  float v0 = mix(v00, v10, t.y);\n  float v1 = mix(v01, v11, t.y);\n\n  return mix(v0, v1, t.z);\n}\n\nvec3 fade(vec3 t) {\n  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);\n}\n\nfloat perlinNoise(vec3 position, float seed) {\n  position += vec3(seed * 127.1, seed * 311.7, seed * 74.7);\n\n  vec3 i = floor(position);\n  vec3 f = fract(position);\n  float h000 = hash31(i);\n  float h001 = hash31(i + vec3(0, 0, 1));\n  float h010 = hash31(i + vec3(0, 1, 0));\n  float h011 = hash31(i + vec3(0, 1, 1));\n  float h100 = hash31(i + vec3(1, 0, 0));\n  float h101 = hash31(i + vec3(1, 0, 1));\n  float h110 = hash31(i + vec3(1, 1, 0));\n  float h111 = hash31(i + vec3(1, 1, 1));\n  vec3 g000 = gradientPredefined(h000);\n  vec3 g001 = gradientPredefined(h001);\n  vec3 g010 = gradientPredefined(h010);\n  vec3 g011 = gradientPredefined(h011);\n  vec3 g100 = gradientPredefined(h100);\n  vec3 g101 = gradientPredefined(h101);\n  vec3 g110 = gradientPredefined(h110);\n  vec3 g111 = gradientPredefined(h111);\n  float v000 = dot(g000, f - vec3(0, 0, 0));\n  float v001 = dot(g001, f - vec3(0, 0, 1));\n  float v010 = dot(g010, f - vec3(0, 1, 0));\n  float v011 = dot(g011, f - vec3(0, 1, 1));\n  float v100 = dot(g100, f - vec3(1, 0, 0));\n  float v101 = dot(g101, f - vec3(1, 0, 1));\n  float v110 = dot(g110, f - vec3(1, 1, 0));\n  float v111 = dot(g111, f - vec3(1, 1, 1));\n\n  vec3 u = fade(f);\n  return interpolateSafe(v000, v001, v010, v011, v100, v101, v110, v111, u);\n}\n\nfloat p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {\n  float value = 0.0;\n  float amplitude = 1.0;\n  float frequency = 10.0;\n  octaveCount = clamp(octaveCount, 1, 8);\n\n  for (int i = 0; i < octaveCount; i++) {\n    float seed = float(i) * 0.7319;\n    value += perlinNoise(position * frequency, seed) * amplitude;\n    amplitude *= persistence;\n    frequency *= lacunarity;\n  }\n  return value;\n}\n\nfloat get_max_amp(float persistence, float octaveCount) {\n  persistence = clamp(persistence * 0.999, 0.0, 0.999);\n  octaveCount = clamp(octaveCount, 1.0, 8.0);\n\n  return (1.0 - pow(persistence, octaveCount)) / max(1e-4, (1.0 - persistence));\n}\n\nvoid main() {\n  vec2 uv = v_patternUV;\n  uv *= .5;\n\n  float t = .2 * u_time;\n\n  vec3 p = vec3(uv, t);\n\n  float octCount = floor(u_octaveCount);\n  float noise = p_noise(p, int(octCount), u_persistence, u_lacunarity);\n\n  float max_amp = get_max_amp(u_persistence, octCount);\n  float noise_normalized = clamp((noise + max_amp) / max(1e-4, (2. * max_amp)) + (u_proportion - .5), 0.0, 1.0);\n  float sharpness = clamp(u_softness, 0., 1.);\n  float smooth_w = 0.5 * max(fwidth(noise_normalized), 0.001);\n  float res = smoothstep(\n  .5 - .5 * sharpness - smooth_w,\n  .5 + .5 * sharpness + smooth_w,\n  noise_normalized\n  );\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  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PerlinNoiseUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_proportion: number;\n  u_softness: number;\n  u_octaveCount: number;\n  u_persistence: number;\n  u_lacunarity: number;\n}\n\nexport interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colorFront?: string;\n  colorBack?: string;\n  proportion?: number;\n  softness?: number;\n  octaveCount?: number;\n  persistence?: number;\n  lacunarity?: number;\n}\n"],
+  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,WAAW,iBAAiB,kBAAkB,wBAAwB;AAmCxE,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB9C,SAAU;AAAA,EACV,gBAAiB;AAAA,EACjB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoIf,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/pulsing-border.d.ts

@@ -23,11 +23,11 @@ export declare const pulsingBorderMeta: {
  * - u_aspectRatio (float): Aspect ratio mode (0 = auto, 1 = square)
  * - u_intensity (float): Thickness of individual color spots (0 to 1)
  * - u_bloom (float): Power of glow, 0 = normal blending, 1 = additive blending (0 to 1)
- * - u_spots (float): Number of spots added for each color (1 to 20)
+ * - u_spots (float): Number of spots added for each color (1 to 4)
  * - u_spotSize (float): Angular size of spots (0 to 1)
  * - u_pulse (float): Optional pulsing animation intensity (0 to 1)
  * - u_smoke (float): Optional noisy shape extending the border (0 to 1)
- * - u_smokeSize (float): Size of the smoke effect (0 to 1)
+ * - u_smokeSize (float): Size of the smoke effect, needs smoke > 0 (0 to 1)
  * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
  *
  * Vertex shader outputs (used in fragment shader):

package/dist/shaders/pulsing-border.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/pulsing-border.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, colorBandingFix } from '../shader-utils.js';\n\nexport const pulsingBorderMeta = {\n  maxColorCount: 5,\n  maxSpots: 4,\n} as const;\n\n/**\n * Luminous trails of color merging into a glowing gradient contour.\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 5 spot colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_roundness (float): Border radius (0 to 1)\n * - u_thickness (float): Border base width (0 to 1)\n * - u_softness (float): Border edge sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_marginLeft (float): Distance from the left edge to the effect (0 to 1)\n * - u_marginRight (float): Distance from the right edge to the effect (0 to 1)\n * - u_marginTop (float): Distance from the top edge to the effect (0 to 1)\n * - u_marginBottom (float): Distance from the bottom edge to the effect (0 to 1)\n * - u_aspectRatio (float): Aspect ratio mode (0 = auto, 1 = square)\n * - u_intensity (float): Thickness of individual color spots (0 to 1)\n * - u_bloom (float): Power of glow, 0 = normal blending, 1 = additive blending (0 to 1)\n * - u_spots (float): Number of spots added for each color (1 to 20)\n * - u_spotSize (float): Angular size of spots (0 to 1)\n * - u_pulse (float): Optional pulsing animation intensity (0 to 1)\n * - u_smoke (float): Optional noisy shape extending the border (0 to 1)\n * - u_smokeSize (float): Size of the smoke effect (0 to 1)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_responsiveUV (vec2): Responsive UV coordinates that adapt to canvas aspect ratio\n * - v_responsiveBoxGivenSize (vec2): Given size of the responsive bounding box\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied (used for smoke calculation)\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 pulsingBorderFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${ pulsingBorderMeta.maxColorCount }];\nuniform float u_colorsCount;\nuniform float u_roundness;\nuniform float u_thickness;\nuniform float u_marginLeft;\nuniform float u_marginRight;\nuniform float u_marginTop;\nuniform float u_marginBottom;\nuniform float u_aspectRatio;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_bloom;\nuniform float u_spotSize;\nuniform float u_spots;\nuniform float u_pulse;\nuniform float u_smoke;\nuniform float u_smokeSize;\n\nuniform sampler2D u_noiseTexture;\n\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n\nfloat beat(float time) {\n  float first = pow(abs(sin(time * TWO_PI)), 10.);\n  float second = pow(abs(sin((time - .15) * TWO_PI)), 10.);\n\n  return clamp(first + 0.6 * second, 0.0, 1.0);\n}\n\nfloat sst(float edge0, float edge1, float x) {\n  return smoothstep(edge0, edge1, x);\n}\n\nfloat roundedBox(vec2 uv, vec2 halfSize, float distance, float cornerDistance, float thickness, float softness) {\n  float borderDistance = abs(distance);\n  float aa = 2. * fwidth(distance);\n  float border = 1. - sst(min(mix(thickness, -thickness, softness), thickness + aa), max(mix(thickness, -thickness, softness), thickness + aa), borderDistance);\n  float cornerFadeCircles = 0.;\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv + halfSize) / thickness)));\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(-halfSize.x, halfSize.y)) / thickness)));\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(halfSize.x, -halfSize.y)) / thickness)));\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - halfSize) / thickness)));\n  aa = fwidth(cornerDistance);\n  float cornerFade = sst(0., mix(aa, thickness, softness), cornerDistance);\n  cornerFade *= cornerFadeCircles;\n  border += cornerFade;\n  return border;\n}\n\n${ textureRandomizerGB }\n\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\nvoid main() {\n  const float firstFrameOffset = 109.;\n  float t = 1.2 * (u_time + firstFrameOffset);\n\n  vec2 borderUV = v_responsiveUV;\n  float pulse = u_pulse * beat(.18 * u_time);\n\n  float canvasRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  vec2 halfSize = vec2(.5);\n  borderUV.x *= max(canvasRatio, 1.);\n  borderUV.y /= min(canvasRatio, 1.);\n  halfSize.x *= max(canvasRatio, 1.);\n  halfSize.y /= min(canvasRatio, 1.);\n\n  float mL = u_marginLeft;\n  float mR = u_marginRight;\n  float mT = u_marginTop;\n  float mB = u_marginBottom;\n  float mX = mL + mR;\n  float mY = mT + mB;\n\n  if (u_aspectRatio > 0.) {\n    float shapeRatio = canvasRatio * (1. - mX) / max(1. - mY, 1e-6);\n    float freeX = shapeRatio > 1. ? (1. - mX) * (1. - 1. / max(abs(shapeRatio), 1e-6)) : 0.;\n    float freeY = shapeRatio < 1. ? (1. - mY) * (1. - shapeRatio) : 0.;\n    mL += freeX * 0.5;\n    mR += freeX * 0.5;\n    mT += freeY * 0.5;\n    mB += freeY * 0.5;\n    mX = mL + mR;\n    mY = mT + mB;\n  }\n\n  float thickness = .5 * u_thickness * min(halfSize.x, halfSize.y);\n\n  halfSize.x *= (1. - mX);\n  halfSize.y *= (1. - mY);\n\n  vec2 centerShift = vec2(\n  (mL - mR) * max(canvasRatio, 1.) * 0.5,\n  (mB - mT) / min(canvasRatio, 1.) * 0.5\n  );\n\n  borderUV -= centerShift;\n  halfSize -= mix(thickness, 0., u_softness);\n\n  float radius = mix(0., min(halfSize.x, halfSize.y), u_roundness);\n  vec2 d = abs(borderUV) - halfSize + radius;\n  float outsideDistance = length(max(d, .0001)) - radius;\n  float insideDistance = min(max(d.x, d.y), .0001);\n  float cornerDistance = abs(min(max(d.x, d.y) - .45 * radius, .0));\n  float distance = outsideDistance + insideDistance;\n\n  float borderThickness = mix(thickness, 3. * thickness, u_softness);\n  float border = roundedBox(borderUV, halfSize, distance, cornerDistance, borderThickness, u_softness);\n  border = pow(border, 1. + u_softness);\n\n  vec2 smokeUV = .3 * u_smokeSize * v_patternUV;\n  float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);\n  smoke -= valueNoise(3.4 * smokeUV - .5 * t);\n  float smokeThickness = thickness + .2;\n  smokeThickness = min(.4, max(smokeThickness, .1));\n  smoke *= roundedBox(borderUV, halfSize, distance, cornerDistance, smokeThickness, 1.);\n  smoke = 30. * smoke * smoke;\n  smoke *= mix(0., .5, pow(u_smoke, 2.));\n  smoke *= mix(1., pulse, u_pulse);\n  smoke = clamp(smoke, 0., 1.);\n  border += smoke;\n\n  border = clamp(border, 0., 1.);\n\n  vec3 blendColor = vec3(0.);\n  float blendAlpha = 0.;\n  vec3 addColor = vec3(0.);\n  float addAlpha = 0.;\n\n  float bloom = 4. * u_bloom;\n  float intensity = 1. + (1. + 4. * u_softness) * u_intensity;\n\n  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n\n  for (int colorIdx = 0; colorIdx < ${ pulsingBorderMeta.maxColorCount }; colorIdx++) {\n    if (colorIdx >= int(u_colorsCount)) break;\n    float colorIdxF = float(colorIdx);\n\n    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;\n    float a = u_colors[colorIdx].a;\n\n    for (int spotIdx = 0; spotIdx < ${ pulsingBorderMeta.maxSpots }; spotIdx++) {\n      if (spotIdx >= int(u_spots)) break;\n      float spotIdxF = float(spotIdx);\n\n      vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));\n\n      float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;\n      time *= mix(1., -1., step(.5, randVal.y));\n\n      float mask = .5 + .5 * mix(\n      sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),\n      cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),\n      step(mod(colorIdxF, 2.), .5)\n      );\n\n      float p = clamp(2. * u_pulse - randVal.x, 0., 1.);\n      mask = mix(mask, pulse, p);\n\n      float atg1 = fract(angle + time);\n      float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;\n      spotSize = mix(spotSize, .1, p);\n      float sector = sst(.5 - spotSize, .5, atg1) * (1. - sst(.5, .5 + spotSize, atg1));\n\n      sector *= mask;\n      sector *= border;\n      sector *= intensity;\n      sector = clamp(sector, 0., 1.);\n\n      vec3 srcColor = c * sector;\n      float srcAlpha = a * sector;\n\n      blendColor += ((1. - blendAlpha) * srcColor);\n      blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;\n      addColor += srcColor;\n      addAlpha += srcAlpha;\n    }\n  }\n\n  vec3 accumColor = mix(blendColor, addColor, bloom);\n  float accumAlpha = mix(blendAlpha, addAlpha, bloom);\n  accumAlpha = clamp(accumAlpha, 0., 1.);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  vec3 color = accumColor + (1. - accumAlpha) * bgColor;\n  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;\n\n  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}`;\n\nexport interface PulsingBorderUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_roundness: number;\n  u_thickness: number;\n  u_marginLeft: number;\n  u_marginRight: number;\n  u_marginTop: number;\n  u_marginBottom: number;\n  u_aspectRatio: (typeof PulsingBorderAspectRatios)[PulsingBorderAspectRatio];\n  u_softness: number;\n  u_intensity: number;\n  u_bloom: number;\n  u_spots: number;\n  u_spotSize: number;\n  u_pulse: number;\n  u_smoke: number;\n  u_smokeSize: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  roundness?: number;\n  thickness?: number;\n  margin?: number;\n  marginLeft?: number;\n  marginRight?: number;\n  marginTop?: number;\n  marginBottom?: number;\n  aspectRatio?: PulsingBorderAspectRatio;\n  softness?: number;\n  intensity?: number;\n  bloom?: number;\n  spots?: number;\n  spotSize?: number;\n  pulse?: number;\n  smoke?: number;\n  smokeSize?: number;\n}\n\nexport const PulsingBorderAspectRatios = {\n  auto: 0,\n  square: 1,\n} as const;\n\nexport type PulsingBorderAspectRatio = keyof typeof PulsingBorderAspectRatios;\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, colorBandingFix } from '../shader-utils.js';\n\nexport const pulsingBorderMeta = {\n  maxColorCount: 5,\n  maxSpots: 4,\n} as const;\n\n/**\n * Luminous trails of color merging into a glowing gradient contour.\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 5 spot colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_roundness (float): Border radius (0 to 1)\n * - u_thickness (float): Border base width (0 to 1)\n * - u_softness (float): Border edge sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_marginLeft (float): Distance from the left edge to the effect (0 to 1)\n * - u_marginRight (float): Distance from the right edge to the effect (0 to 1)\n * - u_marginTop (float): Distance from the top edge to the effect (0 to 1)\n * - u_marginBottom (float): Distance from the bottom edge to the effect (0 to 1)\n * - u_aspectRatio (float): Aspect ratio mode (0 = auto, 1 = square)\n * - u_intensity (float): Thickness of individual color spots (0 to 1)\n * - u_bloom (float): Power of glow, 0 = normal blending, 1 = additive blending (0 to 1)\n * - u_spots (float): Number of spots added for each color (1 to 4)\n * - u_spotSize (float): Angular size of spots (0 to 1)\n * - u_pulse (float): Optional pulsing animation intensity (0 to 1)\n * - u_smoke (float): Optional noisy shape extending the border (0 to 1)\n * - u_smokeSize (float): Size of the smoke effect, needs smoke > 0 (0 to 1)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_responsiveUV (vec2): Responsive UV coordinates that adapt to canvas aspect ratio\n * - v_responsiveBoxGivenSize (vec2): Given size of the responsive bounding box\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied (used for smoke calculation)\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 pulsingBorderFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${ pulsingBorderMeta.maxColorCount }];\nuniform float u_colorsCount;\nuniform float u_roundness;\nuniform float u_thickness;\nuniform float u_marginLeft;\nuniform float u_marginRight;\nuniform float u_marginTop;\nuniform float u_marginBottom;\nuniform float u_aspectRatio;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_bloom;\nuniform float u_spotSize;\nuniform float u_spots;\nuniform float u_pulse;\nuniform float u_smoke;\nuniform float u_smokeSize;\n\nuniform sampler2D u_noiseTexture;\n\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n\nfloat beat(float time) {\n  float first = pow(abs(sin(time * TWO_PI)), 10.);\n  float second = pow(abs(sin((time - .15) * TWO_PI)), 10.);\n\n  return clamp(first + 0.6 * second, 0.0, 1.0);\n}\n\nfloat sst(float edge0, float edge1, float x) {\n  return smoothstep(edge0, edge1, x);\n}\n\nfloat roundedBox(vec2 uv, vec2 halfSize, float distance, float cornerDistance, float thickness, float softness) {\n  float borderDistance = abs(distance);\n  float aa = 2. * fwidth(distance);\n  float border = 1. - sst(min(mix(thickness, -thickness, softness), thickness + aa), max(mix(thickness, -thickness, softness), thickness + aa), borderDistance);\n  float cornerFadeCircles = 0.;\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv + halfSize) / thickness)));\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(-halfSize.x, halfSize.y)) / thickness)));\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(halfSize.x, -halfSize.y)) / thickness)));\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - halfSize) / thickness)));\n  aa = fwidth(cornerDistance);\n  float cornerFade = sst(0., mix(aa, thickness, softness), cornerDistance);\n  cornerFade *= cornerFadeCircles;\n  border += cornerFade;\n  return border;\n}\n\n${ textureRandomizerGB }\n\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\nvoid main() {\n  const float firstFrameOffset = 109.;\n  float t = 1.2 * (u_time + firstFrameOffset);\n\n  vec2 borderUV = v_responsiveUV;\n  float pulse = u_pulse * beat(.18 * u_time);\n\n  float canvasRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  vec2 halfSize = vec2(.5);\n  borderUV.x *= max(canvasRatio, 1.);\n  borderUV.y /= min(canvasRatio, 1.);\n  halfSize.x *= max(canvasRatio, 1.);\n  halfSize.y /= min(canvasRatio, 1.);\n\n  float mL = u_marginLeft;\n  float mR = u_marginRight;\n  float mT = u_marginTop;\n  float mB = u_marginBottom;\n  float mX = mL + mR;\n  float mY = mT + mB;\n\n  if (u_aspectRatio > 0.) {\n    float shapeRatio = canvasRatio * (1. - mX) / max(1. - mY, 1e-6);\n    float freeX = shapeRatio > 1. ? (1. - mX) * (1. - 1. / max(abs(shapeRatio), 1e-6)) : 0.;\n    float freeY = shapeRatio < 1. ? (1. - mY) * (1. - shapeRatio) : 0.;\n    mL += freeX * 0.5;\n    mR += freeX * 0.5;\n    mT += freeY * 0.5;\n    mB += freeY * 0.5;\n    mX = mL + mR;\n    mY = mT + mB;\n  }\n\n  float thickness = .5 * u_thickness * min(halfSize.x, halfSize.y);\n\n  halfSize.x *= (1. - mX);\n  halfSize.y *= (1. - mY);\n\n  vec2 centerShift = vec2(\n  (mL - mR) * max(canvasRatio, 1.) * 0.5,\n  (mB - mT) / min(canvasRatio, 1.) * 0.5\n  );\n\n  borderUV -= centerShift;\n  halfSize -= mix(thickness, 0., u_softness);\n\n  float radius = mix(0., min(halfSize.x, halfSize.y), u_roundness);\n  vec2 d = abs(borderUV) - halfSize + radius;\n  float outsideDistance = length(max(d, .0001)) - radius;\n  float insideDistance = min(max(d.x, d.y), .0001);\n  float cornerDistance = abs(min(max(d.x, d.y) - .45 * radius, .0));\n  float distance = outsideDistance + insideDistance;\n\n  float borderThickness = mix(thickness, 3. * thickness, u_softness);\n  float border = roundedBox(borderUV, halfSize, distance, cornerDistance, borderThickness, u_softness);\n  border = pow(border, 1. + u_softness);\n\n  vec2 smokeUV = .3 * u_smokeSize * v_patternUV;\n  float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);\n  smoke -= valueNoise(3.4 * smokeUV - .5 * t);\n  float smokeThickness = thickness + .2;\n  smokeThickness = min(.4, max(smokeThickness, .1));\n  smoke *= roundedBox(borderUV, halfSize, distance, cornerDistance, smokeThickness, 1.);\n  smoke = 30. * smoke * smoke;\n  smoke *= mix(0., .5, pow(u_smoke, 2.));\n  smoke *= mix(1., pulse, u_pulse);\n  smoke = clamp(smoke, 0., 1.);\n  border += smoke;\n\n  border = clamp(border, 0., 1.);\n\n  vec3 blendColor = vec3(0.);\n  float blendAlpha = 0.;\n  vec3 addColor = vec3(0.);\n  float addAlpha = 0.;\n\n  float bloom = 4. * u_bloom;\n  float intensity = 1. + (1. + 4. * u_softness) * u_intensity;\n\n  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n\n  for (int colorIdx = 0; colorIdx < ${ pulsingBorderMeta.maxColorCount }; colorIdx++) {\n    if (colorIdx >= int(u_colorsCount)) break;\n    float colorIdxF = float(colorIdx);\n\n    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;\n    float a = u_colors[colorIdx].a;\n\n    for (int spotIdx = 0; spotIdx < ${ pulsingBorderMeta.maxSpots }; spotIdx++) {\n      if (spotIdx >= int(u_spots)) break;\n      float spotIdxF = float(spotIdx);\n\n      vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));\n\n      float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;\n      time *= mix(1., -1., step(.5, randVal.y));\n\n      float mask = .5 + .5 * mix(\n      sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),\n      cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),\n      step(mod(colorIdxF, 2.), .5)\n      );\n\n      float p = clamp(2. * u_pulse - randVal.x, 0., 1.);\n      mask = mix(mask, pulse, p);\n\n      float atg1 = fract(angle + time);\n      float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;\n      spotSize = mix(spotSize, .1, p);\n      float sector = sst(.5 - spotSize, .5, atg1) * (1. - sst(.5, .5 + spotSize, atg1));\n\n      sector *= mask;\n      sector *= border;\n      sector *= intensity;\n      sector = clamp(sector, 0., 1.);\n\n      vec3 srcColor = c * sector;\n      float srcAlpha = a * sector;\n\n      blendColor += ((1. - blendAlpha) * srcColor);\n      blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;\n      addColor += srcColor;\n      addAlpha += srcAlpha;\n    }\n  }\n\n  vec3 accumColor = mix(blendColor, addColor, bloom);\n  float accumAlpha = mix(blendAlpha, addAlpha, bloom);\n  accumAlpha = clamp(accumAlpha, 0., 1.);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  vec3 color = accumColor + (1. - accumAlpha) * bgColor;\n  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;\n\n  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}`;\n\nexport interface PulsingBorderUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_roundness: number;\n  u_thickness: number;\n  u_marginLeft: number;\n  u_marginRight: number;\n  u_marginTop: number;\n  u_marginBottom: number;\n  u_aspectRatio: (typeof PulsingBorderAspectRatios)[PulsingBorderAspectRatio];\n  u_softness: number;\n  u_intensity: number;\n  u_bloom: number;\n  u_spots: number;\n  u_spotSize: number;\n  u_pulse: number;\n  u_smoke: number;\n  u_smokeSize: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  roundness?: number;\n  thickness?: number;\n  margin?: number;\n  marginLeft?: number;\n  marginRight?: number;\n  marginTop?: number;\n  marginBottom?: number;\n  aspectRatio?: PulsingBorderAspectRatio;\n  softness?: number;\n  intensity?: number;\n  bloom?: number;\n  spots?: number;\n  spotSize?: number;\n  pulse?: number;\n  smoke?: number;\n  smokeSize?: number;\n}\n\nexport const PulsingBorderAspectRatios = {\n  auto: 0,\n  square: 1,\n} as const;\n\nexport type PulsingBorderAspectRatio = keyof typeof PulsingBorderAspectRatios;\n"],
   "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,qBAAqB,uBAAuB;AAEzD,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,UAAU;AACZ;AAgDO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM1B,kBAAkB,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,EA0BtD,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,EA6BV,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAoGgB,kBAAkB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAOhC,kBAAkB,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8C7D,eAAgB;AAAA;AAAA;AAAA;AAgDd,MAAM,4BAA4B;AAAA,EACvC,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/shaders/simplex-noise.d.ts

@@ -9,11 +9,10 @@ export declare const simplexNoiseMeta: {
  *
  * 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 base 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 10)
- * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
+ * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2×N, etc., needs 2+ colors (1 to 10)
+ * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient, needs 2+ colors (0 to 1)
  *
  * Vertex shader outputs (used in fragment shader):
  * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied

package/dist/shaders/simplex-noise.js

@@ -12,7 +12,6 @@ const simplexNoiseFragmentShader = `#version 300 es
 precision mediump float;
 
 uniform float u_time;
-uniform float u_scale;
 
 uniform vec4 u_colors[${simplexNoiseMeta.maxColorCount}];
 uniform float u_colorsCount;
@@ -48,12 +47,7 @@ void main() {
 
   float shape = .5 + .5 * getNoise(shape_uv, t);
 
-  bool u_extraSides = true;
-
-  float mixer = shape * (u_colorsCount - 1.);
-  if (u_extraSides == true) {
-    mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
-  }
+  float mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
 
   float steps = max(1., u_stepsPerColor);
 
@@ -70,19 +64,17 @@ void main() {
     gradient = mix(gradient, c, localM);
   }
 
-  if (u_extraSides == true) {
-    if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
-      float localM = mixer + 1.;
-      if (mixer > (u_colorsCount - 1.)) {
-        localM = mixer - (u_colorsCount - 1.);
-      }
-      localM = steppedSmooth(localM, steps, .5 * u_softness);
-      vec4 cFst = u_colors[0];
-      cFst.rgb *= cFst.a;
-      vec4 cLast = u_colors[int(u_colorsCount - 1.)];
-      cLast.rgb *= cLast.a;
-      gradient = mix(cLast, cFst, localM);
+  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
+    float localM = mixer + 1.;
+    if (mixer > (u_colorsCount - 1.)) {
+      localM = mixer - (u_colorsCount - 1.);
     }
+    localM = steppedSmooth(localM, steps, .5 * u_softness);
+    vec4 cFst = u_colors[0];
+    cFst.rgb *= cFst.a;
+    vec4 cLast = u_colors[int(u_colorsCount - 1.)];
+    cLast.rgb *= cLast.a;
+    gradient = mix(cLast, cFst, localM);
   }
 
   vec3 color = gradient.rgb;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/simplex-noise.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, colorBandingFix } from '../shader-utils.js';\n\nexport const simplexNoiseMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * A multi-color gradient mapped into smooth, animated curves built as a combination of 2 Simplex noises.\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 base 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 10)\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 simplexNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform float u_scale;\n\nuniform vec4 u_colors[${ simplexNoiseMeta.maxColorCount }];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_softness;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ simplexNoise }\n\nfloat getNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nfloat steppedSmooth(float m, float steps, float softness) {\n  float stepT = floor(m * steps) / steps;\n  float f = m * steps - floor(m * steps);\n  float fw = steps * fwidth(m);\n  float smoothed = smoothstep(.5 - softness, min(1., .5 + softness + fw), f);\n  return stepT + smoothed / steps;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= .1;\n\n  float t = .2 * u_time;\n\n  float shape = .5 + .5 * getNoise(shape_uv, t);\n\n  bool u_extraSides = true;\n\n  float mixer = shape * (u_colorsCount - 1.);\n  if (u_extraSides == true) {\n    mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n  }\n\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 < ${ simplexNoiseMeta.maxColorCount }; i++) {\n    if (i >= int(u_colorsCount)) break;\n\n    float localM = clamp(mixer - float(i - 1), 0., 1.);\n    localM = steppedSmooth(localM, steps, .5 * u_softness);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localM);\n  }\n\n  if (u_extraSides == true) {\n    if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n      float localM = mixer + 1.;\n      if (mixer > (u_colorsCount - 1.)) {\n        localM = mixer - (u_colorsCount - 1.);\n      }\n      localM = steppedSmooth(localM, steps, .5 * u_softness);\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, localM);\n    }\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 SimplexNoiseUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_stepsPerColor: number;\n  u_softness: number;\n}\n\nexport interface SimplexNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  stepsPerColor?: number;\n  softness?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,cAAc,uBAAuB;AAEvC,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AACjB;AAgCO,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMzB,iBAAiB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASrD,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,wBAoCS,iBAAiB,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,IA6BnD,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, colorBandingFix } from '../shader-utils.js';\n\nexport const simplexNoiseMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * A multi-color gradient mapped into smooth, animated curves built as a combination of 2 Simplex noises.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colors (vec4[]): Up to 10 base 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 10)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient, needs 2+ colors (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 simplexNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${ simplexNoiseMeta.maxColorCount }];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_softness;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ simplexNoise }\n\nfloat getNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nfloat steppedSmooth(float m, float steps, float softness) {\n  float stepT = floor(m * steps) / steps;\n  float f = m * steps - floor(m * steps);\n  float fw = steps * fwidth(m);\n  float smoothed = smoothstep(.5 - softness, min(1., .5 + softness + fw), f);\n  return stepT + smoothed / steps;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= .1;\n\n  float t = .2 * u_time;\n\n  float shape = .5 + .5 * getNoise(shape_uv, t);\n\n  float mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n\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 < ${ simplexNoiseMeta.maxColorCount }; i++) {\n    if (i >= int(u_colorsCount)) break;\n\n    float localM = clamp(mixer - float(i - 1), 0., 1.);\n    localM = steppedSmooth(localM, steps, .5 * u_softness);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localM);\n  }\n\n  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n    float localM = mixer + 1.;\n    if (mixer > (u_colorsCount - 1.)) {\n      localM = mixer - (u_colorsCount - 1.);\n    }\n    localM = steppedSmooth(localM, steps, .5 * u_softness);\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, localM);\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 SimplexNoiseUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_stepsPerColor: number;\n  u_softness: number;\n}\n\nexport interface SimplexNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  stepsPerColor?: number;\n  softness?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,cAAc,uBAAuB;AAEvC,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AACjB;AA+BO,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKzB,iBAAiB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASrD,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,wBA+BS,iBAAiB,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,IA2BnD,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/smoke-ring.d.ts

@@ -16,7 +16,7 @@ export declare const smokeRingMeta: {
  * - u_colorsCount (float): Number of active colors
  * - u_thickness (float): Thickness of the ring shape (0.01 to 1)
  * - u_radius (float): Radius of the ring shape (0 to 1)
- * - u_innerShape (float): Ring inner fill amount (0 to 4)
+ * - u_innerShape (float): Ring inner fill amount, needs radius > 0 (0 to 4)
  * - u_noiseIterations (float): Number of noise layers, more layers gives more details (1 to 8)
  * - u_noiseScale (float): Noise frequency (0.01 to 5)
  * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture

package/dist/shaders/smoke-ring.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/smoke-ring.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, textureRandomizerR, colorBandingFix } from '../shader-utils.js';\n\nexport const smokeRingMeta = {\n  maxColorCount: 10,\n  maxNoiseIterations: 8,\n} as const;\n\n/**\n * Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic.\n *\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 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_thickness (float): Thickness of the ring shape (0.01 to 1)\n * - u_radius (float): Radius of the ring shape (0 to 1)\n * - u_innerShape (float): Ring inner fill amount (0 to 4)\n * - u_noiseIterations (float): Number of noise layers, more layers gives more details (1 to 8)\n * - u_noiseScale (float): Noise frequency (0.01 to 5)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\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 smokeRingFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${ smokeRingMeta.maxColorCount }];\nuniform float u_colorsCount;\n\nuniform float u_thickness;\nuniform float u_radius;\nuniform float u_innerShape;\nuniform float u_noiseScale;\nuniform float u_noiseIterations;\n\nin vec2 v_objectUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ textureRandomizerR }\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(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}\nvec2 fbm(vec2 n0, vec2 n1) {\n  vec2 total = vec2(0.0);\n  float amplitude = .4;\n  for (int i = 0; i < ${ smokeRingMeta.maxNoiseIterations }; i++) {\n    if (i >= int(u_noiseIterations)) break;\n    total.x += valueNoise(n0) * amplitude;\n    total.y += valueNoise(n1) * amplitude;\n    n0 *= 1.99;\n    n1 *= 1.99;\n    amplitude *= 0.65;\n  }\n  return total;\n}\n\nfloat getNoise(vec2 uv, vec2 pUv, float t) {\n  vec2 pUvLeft = pUv + .03 * t;\n  float period = max(abs(u_noiseScale * TWO_PI), 1e-6);\n  vec2 pUvRight = vec2(fract(pUv.x / period) * period, pUv.y) + .03 * t;\n  vec2 noise = fbm(pUvLeft, pUvRight);\n  return mix(noise.y, noise.x, smoothstep(-.25, .25, uv.x));\n}\n\nfloat getRingShape(vec2 uv) {\n  float radius = u_radius;\n  float thickness = u_thickness;\n\n  float distance = length(uv);\n  float ringValue = 1. - smoothstep(radius, radius + thickness, distance);\n  ringValue *= smoothstep(radius - pow(u_innerShape, 3.) * thickness, radius, distance);\n\n  return ringValue;\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  float t = u_time;\n\n  float cycleDuration = 3.;\n  float period2 = 2.0 * cycleDuration;\n  float localTime1 = fract((0.1 * t + cycleDuration) / period2) * period2;\n  float localTime2 = fract((0.1 * t) / period2) * period2;\n  float timeBlend = .5 + .5 * sin(.1 * t * PI / cycleDuration - .5 * PI);\n\n  float atg = atan(shape_uv.y, shape_uv.x) + .001;\n  float l = length(shape_uv);\n  float radialOffset = .5 * l - inversesqrt(max(1e-4, l));\n  vec2 polar_uv1 = vec2(atg, localTime1 - radialOffset) * u_noiseScale;\n  vec2 polar_uv2 = vec2(atg, localTime2 - radialOffset) * u_noiseScale;\n  \n  float noise1 = getNoise(shape_uv, polar_uv1, t);\n  float noise2 = getNoise(shape_uv, polar_uv2, t);\n\n  float noise = mix(noise1, noise2, timeBlend);\n\n  shape_uv *= (.8 + 1.2 * noise);\n\n  float ringShape = getRingShape(shape_uv);\n\n  float mixer = ringShape * ringShape * (u_colorsCount - 1.);\n  int idxLast = int(u_colorsCount) - 1;\n  vec4 gradient = u_colors[idxLast];\n  gradient.rgb *= gradient.a;\n  for (int i = ${ smokeRingMeta.maxColorCount } - 2; i >= 0; i--) {\n    float localT = clamp(mixer - float(idxLast - i - 1), 0., 1.);\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * ringShape;\n  float opacity = gradient.a * ringShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SmokeRingUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_noiseScale: number;\n  u_thickness: number;\n  u_radius: number;\n  u_innerShape: number;\n  u_noiseIterations: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface SmokeRingParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  noiseScale?: number;\n  thickness?: number;\n  radius?: number;\n  innerShape?: number;\n  noiseIterations?: 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, textureRandomizerR, colorBandingFix } from '../shader-utils.js';\n\nexport const smokeRingMeta = {\n  maxColorCount: 10,\n  maxNoiseIterations: 8,\n} as const;\n\n/**\n * Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic.\n *\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 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_thickness (float): Thickness of the ring shape (0.01 to 1)\n * - u_radius (float): Radius of the ring shape (0 to 1)\n * - u_innerShape (float): Ring inner fill amount, needs radius > 0 (0 to 4)\n * - u_noiseIterations (float): Number of noise layers, more layers gives more details (1 to 8)\n * - u_noiseScale (float): Noise frequency (0.01 to 5)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\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 smokeRingFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${ smokeRingMeta.maxColorCount }];\nuniform float u_colorsCount;\n\nuniform float u_thickness;\nuniform float u_radius;\nuniform float u_innerShape;\nuniform float u_noiseScale;\nuniform float u_noiseIterations;\n\nin vec2 v_objectUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ textureRandomizerR }\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(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}\nvec2 fbm(vec2 n0, vec2 n1) {\n  vec2 total = vec2(0.0);\n  float amplitude = .4;\n  for (int i = 0; i < ${ smokeRingMeta.maxNoiseIterations }; i++) {\n    if (i >= int(u_noiseIterations)) break;\n    total.x += valueNoise(n0) * amplitude;\n    total.y += valueNoise(n1) * amplitude;\n    n0 *= 1.99;\n    n1 *= 1.99;\n    amplitude *= 0.65;\n  }\n  return total;\n}\n\nfloat getNoise(vec2 uv, vec2 pUv, float t) {\n  vec2 pUvLeft = pUv + .03 * t;\n  float period = max(abs(u_noiseScale * TWO_PI), 1e-6);\n  vec2 pUvRight = vec2(fract(pUv.x / period) * period, pUv.y) + .03 * t;\n  vec2 noise = fbm(pUvLeft, pUvRight);\n  return mix(noise.y, noise.x, smoothstep(-.25, .25, uv.x));\n}\n\nfloat getRingShape(vec2 uv) {\n  float radius = u_radius;\n  float thickness = u_thickness;\n\n  float distance = length(uv);\n  float ringValue = 1. - smoothstep(radius, radius + thickness, distance);\n  ringValue *= smoothstep(radius - pow(u_innerShape, 3.) * thickness, radius, distance);\n\n  return ringValue;\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  float t = u_time;\n\n  float cycleDuration = 3.;\n  float period2 = 2.0 * cycleDuration;\n  float localTime1 = fract((0.1 * t + cycleDuration) / period2) * period2;\n  float localTime2 = fract((0.1 * t) / period2) * period2;\n  float timeBlend = .5 + .5 * sin(.1 * t * PI / cycleDuration - .5 * PI);\n\n  float atg = atan(shape_uv.y, shape_uv.x) + .001;\n  float l = length(shape_uv);\n  float radialOffset = .5 * l - inversesqrt(max(1e-4, l));\n  vec2 polar_uv1 = vec2(atg, localTime1 - radialOffset) * u_noiseScale;\n  vec2 polar_uv2 = vec2(atg, localTime2 - radialOffset) * u_noiseScale;\n  \n  float noise1 = getNoise(shape_uv, polar_uv1, t);\n  float noise2 = getNoise(shape_uv, polar_uv2, t);\n\n  float noise = mix(noise1, noise2, timeBlend);\n\n  shape_uv *= (.8 + 1.2 * noise);\n\n  float ringShape = getRingShape(shape_uv);\n\n  float mixer = ringShape * ringShape * (u_colorsCount - 1.);\n  int idxLast = int(u_colorsCount) - 1;\n  vec4 gradient = u_colors[idxLast];\n  gradient.rgb *= gradient.a;\n  for (int i = ${ smokeRingMeta.maxColorCount } - 2; i >= 0; i--) {\n    float localT = clamp(mixer - float(idxLast - i - 1), 0., 1.);\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * ringShape;\n  float opacity = gradient.a * ringShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SmokeRingUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_noiseScale: number;\n  u_thickness: number;\n  u_radius: number;\n  u_innerShape: number;\n  u_noiseIterations: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface SmokeRingParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  noiseScale?: number;\n  thickness?: number;\n  radius?: number;\n  innerShape?: number;\n  noiseIterations?: number;\n}\n"],
   "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,oBAAoB,uBAAuB;AAExD,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,oBAAoB;AACtB;AAqCO,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQtB,cAAc,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAalD,SAAU;AAAA,EACV,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAgBG,cAAc,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBA4DxC,cAAc,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAczC,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/spiral.d.ts

@@ -28,9 +28,9 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * - u_distortion (float): Power of shape distortion applied along the spiral (0 to 1)
  * - u_strokeWidth (float): Thickness of spiral curve (0 to 1)
  * - u_strokeTaper (float): How much stroke loses width away from center, 0 = full visibility (0 to 1)
- * - u_strokeCap (float): Extra stroke width at the center, no effect with strokeWidth = 0.5 (0 to 1)
- * - u_noise (float): Noise distortion applied over the canvas, no effect with noiseFrequency = 0 (0 to 1)
- * - u_noiseFrequency (float): Noise frequency, no effect with noise = 0 (0 to 1)
+ * - u_strokeCap (float): Extra stroke width at the center, needs strokeWidth ≠ 0.5 (0 to 1)
+ * - u_noise (float): Noise distortion applied over the canvas, needs noiseFrequency > 0 (0 to 1)
+ * - u_noiseFrequency (float): Noise frequency, needs noise > 0 (0 to 1)
  * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
  *
  */

package/dist/shaders/spiral.js

@@ -38,7 +38,9 @@ void main() {
   float angle = atan(uv.y, uv.x) - t;
   float angleNormalised = angle / TWO_PI;
 
-  angleNormalised += .125 * u_noise * snoise(16. * pow(u_noiseFrequency, 3.) * uv);
+  if (u_noise > 0.) {
+    angleNormalised += .125 * u_noise * snoise(16. * pow(u_noiseFrequency, 3.) * uv);
+  }
 
   float offset = l + angleNormalised;
   offset -= u_distortion * (sin(4. * l - .5 * t) * cos(PI + l + .5 * t));

package/dist/shaders/spiral.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/spiral.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { simplexNoise, declarePI, colorBandingFix } from '../shader-utils.js';\n\n/**\n * A single-colored animated spiral that morphs across a wide range of shapes -\n * from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings.\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 * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with rotation and offset applied\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorFront (vec4): Foreground (ink) color in RGBA\n * - u_density (float): Spacing falloff simulating perspective, 0 = flat spiral (0 to 1)\n * - u_distortion (float): Power of shape distortion applied along the spiral (0 to 1)\n * - u_strokeWidth (float): Thickness of spiral curve (0 to 1)\n * - u_strokeTaper (float): How much stroke loses width away from center, 0 = full visibility (0 to 1)\n * - u_strokeCap (float): Extra stroke width at the center, no effect with strokeWidth = 0.5 (0 to 1)\n * - u_noise (float): Noise distortion applied over the canvas, no effect with noiseFrequency = 0 (0 to 1)\n * - u_noiseFrequency (float): Noise frequency, no effect with noise = 0 (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n *\n */\n\n// language=GLSL\nexport const spiralFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFront;\nuniform float u_density;\nuniform float u_distortion;\nuniform float u_strokeWidth;\nuniform float u_strokeCap;\nuniform float u_strokeTaper;\nuniform float u_noise;\nuniform float u_noiseFrequency;\nuniform float u_softness;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ simplexNoise }\n\nvoid main() {\n  vec2 uv = 2. * v_patternUV;\n\n  float t = u_time;\n  float l = length(uv);\n  float density = clamp(u_density, 0., 1.);\n  l = pow(max(l, 1e-6), density);\n  float angle = atan(uv.y, uv.x) - t;\n  float angleNormalised = angle / TWO_PI;\n\n  angleNormalised += .125 * u_noise * snoise(16. * pow(u_noiseFrequency, 3.) * uv);\n\n  float offset = l + angleNormalised;\n  offset -= u_distortion * (sin(4. * l - .5 * t) * cos(PI + l + .5 * t));\n  float stripe = fract(offset);\n\n  float shape = 2. * abs(stripe - .5);\n  float width = 1. - clamp(u_strokeWidth, .005 * u_strokeTaper, 1.);\n\n\n  float wCap = mix(width, (1. - stripe) * (1. - step(.5, stripe)), (1. - clamp(l, 0., 1.)));\n  width = mix(width, wCap, u_strokeCap);\n  width *= (1. - clamp(u_strokeTaper, 0., 1.) * l);\n\n  float fw = fwidth(offset);\n  float fwMult = 4. - 3. * (smoothstep(.05, .4, 2. * u_strokeWidth) * smoothstep(.05, .4, 2. * (1. - u_strokeWidth)));\n  float pixelSize = mix(fwMult * fw, fwidth(shape), clamp(fw, 0., 1.));\n  pixelSize = mix(pixelSize, .002, u_strokeCap * (1. - clamp(l, 0., 1.)));\n\n  float res = smoothstep(width - pixelSize - u_softness, width + pixelSize + u_softness, 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  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SpiralUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFront: [number, number, number, number];\n  u_density: number;\n  u_distortion: number;\n  u_strokeWidth: number;\n  u_strokeTaper: number;\n  u_strokeCap: number;\n  u_noise: number;\n  u_noiseFrequency: number;\n  u_softness: number;\n}\n\nexport interface SpiralParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorFront?: string;\n  density?: number;\n  distortion?: number;\n  strokeWidth?: number;\n  strokeTaper?: number;\n  strokeCap?: number;\n  noise?: number;\n  noiseFrequency?: number;\n  softness?: number;\n}\n"],
-  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,cAAc,WAAW,uBAAuB;AAsClD,MAAM,uBAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBzC,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,IA4CX,eAAgB;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { simplexNoise, declarePI, colorBandingFix } from '../shader-utils.js';\n\n/**\n * A single-colored animated spiral that morphs across a wide range of shapes -\n * from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings.\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 * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with rotation and offset applied\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorFront (vec4): Foreground (ink) color in RGBA\n * - u_density (float): Spacing falloff simulating perspective, 0 = flat spiral (0 to 1)\n * - u_distortion (float): Power of shape distortion applied along the spiral (0 to 1)\n * - u_strokeWidth (float): Thickness of spiral curve (0 to 1)\n * - u_strokeTaper (float): How much stroke loses width away from center, 0 = full visibility (0 to 1)\n * - u_strokeCap (float): Extra stroke width at the center, needs strokeWidth \u2260 0.5 (0 to 1)\n * - u_noise (float): Noise distortion applied over the canvas, needs noiseFrequency > 0 (0 to 1)\n * - u_noiseFrequency (float): Noise frequency, needs noise > 0 (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n *\n */\n\n// language=GLSL\nexport const spiralFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFront;\nuniform float u_density;\nuniform float u_distortion;\nuniform float u_strokeWidth;\nuniform float u_strokeCap;\nuniform float u_strokeTaper;\nuniform float u_noise;\nuniform float u_noiseFrequency;\nuniform float u_softness;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ simplexNoise }\n\nvoid main() {\n  vec2 uv = 2. * v_patternUV;\n\n  float t = u_time;\n  float l = length(uv);\n  float density = clamp(u_density, 0., 1.);\n  l = pow(max(l, 1e-6), density);\n  float angle = atan(uv.y, uv.x) - t;\n  float angleNormalised = angle / TWO_PI;\n\n  if (u_noise > 0.) {\n    angleNormalised += .125 * u_noise * snoise(16. * pow(u_noiseFrequency, 3.) * uv);\n  }\n\n  float offset = l + angleNormalised;\n  offset -= u_distortion * (sin(4. * l - .5 * t) * cos(PI + l + .5 * t));\n  float stripe = fract(offset);\n\n  float shape = 2. * abs(stripe - .5);\n  float width = 1. - clamp(u_strokeWidth, .005 * u_strokeTaper, 1.);\n\n\n  float wCap = mix(width, (1. - stripe) * (1. - step(.5, stripe)), (1. - clamp(l, 0., 1.)));\n  width = mix(width, wCap, u_strokeCap);\n  width *= (1. - clamp(u_strokeTaper, 0., 1.) * l);\n\n  float fw = fwidth(offset);\n  float fwMult = 4. - 3. * (smoothstep(.05, .4, 2. * u_strokeWidth) * smoothstep(.05, .4, 2. * (1. - u_strokeWidth)));\n  float pixelSize = mix(fwMult * fw, fwidth(shape), clamp(fw, 0., 1.));\n  pixelSize = mix(pixelSize, .002, u_strokeCap * (1. - clamp(l, 0., 1.)));\n\n  float res = smoothstep(width - pixelSize - u_softness, width + pixelSize + u_softness, 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  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SpiralUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFront: [number, number, number, number];\n  u_density: number;\n  u_distortion: number;\n  u_strokeWidth: number;\n  u_strokeTaper: number;\n  u_strokeCap: number;\n  u_noise: number;\n  u_noiseFrequency: number;\n  u_softness: number;\n}\n\nexport interface SpiralParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorFront?: string;\n  density?: number;\n  distortion?: number;\n  strokeWidth?: number;\n  strokeTaper?: number;\n  strokeCap?: number;\n  noise?: number;\n  noiseFrequency?: number;\n  softness?: number;\n}\n"],
+  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,cAAc,WAAW,uBAAuB;AAsClD,MAAM,uBAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBzC,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,IA8CX,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/static-mesh-gradient.d.ts

@@ -13,9 +13,9 @@ export declare const staticMeshGradientMeta: {
  * - u_colorsCount (float): Number of active colors
  * - u_positions (float): Color spots placement seed (0 to 100)
  * - u_waveX (float): Strength of sine wave distortion along X axis (0 to 1)
- * - u_waveXShift (float): Phase offset applied to the X-axis wave (0 to 1)
+ * - u_waveXShift (float): Phase offset applied to the X-axis wave, needs waveX > 0 (0 to 1)
  * - u_waveY (float): Strength of sine wave distortion along Y axis (0 to 1)
- * - u_waveYShift (float): Phase offset applied to the Y-axis wave (0 to 1)
+ * - u_waveYShift (float): Phase offset applied to the Y-axis wave, needs waveY > 0 (0 to 1)
  * - u_mixing (float): Blending behavior, 0 = hard stripes, 0.5 = smooth, 1 = gradual blend (0 to 1)
  * - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)
  * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)

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

@@ -64,8 +64,10 @@ void main() {
   uv += .5;
   vec2 grainUV = uv * 1000.;
 
-  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 radius = smoothstep(0., 1., length(uv - .5));
   float center = 1. - radius;
@@ -84,7 +86,6 @@ void main() {
 
     vec2 pos = getPosition(i, positionSeed) + mixerGrain;
     float dist = length(uv - pos);
-    dist = length(uv - pos);
 
     vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;
     float opacityFraction = u_colors[i].a;
@@ -105,17 +106,19 @@ void main() {
   color /= max(1e-4, totalWeight);
   opacity /= max(1e-4, totalWeight);
 
-  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
-  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
-  grainOverlay = pow(grainOverlay, 1.3);
+  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-mesh-gradient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/static-mesh-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 staticMeshGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Multi-point mesh gradient with up to 10 color spots, enhanced by two-direction warping,\n * adjustable blend sharpness, and grain controls.\n *\n * Fragment shader uniforms:\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_positions (float): Color spots placement seed (0 to 100)\n * - u_waveX (float): Strength of sine wave distortion along X axis (0 to 1)\n * - u_waveXShift (float): Phase offset applied to the X-axis wave (0 to 1)\n * - u_waveY (float): Strength of sine wave distortion along Y axis (0 to 1)\n * - u_waveYShift (float): Phase offset applied to the Y-axis wave (0 to 1)\n * - u_mixing (float): Blending behavior, 0 = hard stripes, 0.5 = smooth, 1 = gradual blend (0 to 1)\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 staticMeshGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colors[${ staticMeshGradientMeta.maxColorCount }];\nuniform float u_colorsCount;\n\nuniform float u_positions;\nuniform float u_waveX;\nuniform float u_waveXShift;\nuniform float u_waveY;\nuniform float u_waveYShift;\nuniform float u_mixing;\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 = v_objectUV;\n  uv += .5;\n  vec2 grainUV = uv * 1000.;\n\n  float grain = noise(grainUV, vec2(0.));\n  float mixerGrain = .4 * u_grainMixer * (grain - .5);\n\n  float radius = smoothstep(0., 1., length(uv - .5));\n  float center = 1. - radius;\n  for (float i = 1.; i <= 2.; i++) {\n    uv.x += u_waveX * center / i * cos(TWO_PI * u_waveXShift + i * 2. * smoothstep(.0, 1., uv.y));\n    uv.y += u_waveY * center / i * cos(TWO_PI * u_waveYShift + i * 2. * smoothstep(.0, 1., uv.x));\n  }\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n  float totalWeight = 0.;\n  float positionSeed = 25. + .33 * u_positions;\n\n  for (int i = 0; i < ${ staticMeshGradientMeta.maxColorCount }; i++) {\n    if (i >= int(u_colorsCount)) break;\n\n    vec2 pos = getPosition(i, positionSeed) + mixerGrain;\n    float dist = length(uv - pos);\n    dist = length(uv - pos);\n\n    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;\n    float opacityFraction = u_colors[i].a;\n\n    float mixing = pow(u_mixing, .7);\n    float power = mix(2., 1., mixing);\n    dist = pow(dist, power);\n\n    float w = 1. / (dist + 1e-3);\n    float baseSharpness = mix(.0, 8., clamp(w, 0., 1.));\n    float sharpness = mix(baseSharpness, 1., mixing);\n    w = pow(w, sharpness);\n    color += colorFraction * w;\n    opacity += opacityFraction * w;\n    totalWeight += w;\n  }\n\n  color /= max(1e-4, totalWeight);\n  opacity /= max(1e-4, totalWeight);\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 StaticMeshGradientUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_positions: number;\n  u_waveX: number;\n  u_waveXShift: number;\n  u_waveY: number;\n  u_waveYShift: number;\n  u_mixing: number;\n  u_grainMixer: number;\n  u_grainOverlay: number;\n}\n\nexport interface StaticMeshGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  positions?: number;\n  waveX?: number;\n  waveXShift?: number;\n  waveY?: number;\n  waveYShift?: number;\n  mixing?: number;\n  grainMixer?: number;\n  grainOverlay?: number;\n}\n"],
-  "mappings": ";;;;;AAEA;AAAA,OAGO;AACP,SAAS,WAAW,WAAW,wBAAwB;AAEhD,MAAM,yBAAyB;AAAA,EACpC,eAAe;AACjB;AAqCO,MAAM,mCAA2C;AAAA;AAAA;AAAA,wBAG/B,uBAAuB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAe3D,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,wBAkDK,uBAAuB,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;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 staticMeshGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Multi-point mesh gradient with up to 10 color spots, enhanced by two-direction warping,\n * adjustable blend sharpness, and grain controls.\n *\n * Fragment shader uniforms:\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_positions (float): Color spots placement seed (0 to 100)\n * - u_waveX (float): Strength of sine wave distortion along X axis (0 to 1)\n * - u_waveXShift (float): Phase offset applied to the X-axis wave, needs waveX > 0 (0 to 1)\n * - u_waveY (float): Strength of sine wave distortion along Y axis (0 to 1)\n * - u_waveYShift (float): Phase offset applied to the Y-axis wave, needs waveY > 0 (0 to 1)\n * - u_mixing (float): Blending behavior, 0 = hard stripes, 0.5 = smooth, 1 = gradual blend (0 to 1)\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 staticMeshGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colors[${ staticMeshGradientMeta.maxColorCount }];\nuniform float u_colorsCount;\n\nuniform float u_positions;\nuniform float u_waveX;\nuniform float u_waveXShift;\nuniform float u_waveY;\nuniform float u_waveYShift;\nuniform float u_mixing;\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 = v_objectUV;\n  uv += .5;\n  vec2 grainUV = uv * 1000.;\n\n  float mixerGrain = 0.;\n  if (u_grainMixer > 0.) {\n    mixerGrain = .4 * u_grainMixer * (noise(grainUV, vec2(0.)) - .5);\n  }\n\n  float radius = smoothstep(0., 1., length(uv - .5));\n  float center = 1. - radius;\n  for (float i = 1.; i <= 2.; i++) {\n    uv.x += u_waveX * center / i * cos(TWO_PI * u_waveXShift + i * 2. * smoothstep(.0, 1., uv.y));\n    uv.y += u_waveY * center / i * cos(TWO_PI * u_waveYShift + i * 2. * smoothstep(.0, 1., uv.x));\n  }\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n  float totalWeight = 0.;\n  float positionSeed = 25. + .33 * u_positions;\n\n  for (int i = 0; i < ${ staticMeshGradientMeta.maxColorCount }; i++) {\n    if (i >= int(u_colorsCount)) break;\n\n    vec2 pos = getPosition(i, positionSeed) + mixerGrain;\n    float dist = length(uv - pos);\n\n    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;\n    float opacityFraction = u_colors[i].a;\n\n    float mixing = pow(u_mixing, .7);\n    float power = mix(2., 1., mixing);\n    dist = pow(dist, power);\n\n    float w = 1. / (dist + 1e-3);\n    float baseSharpness = mix(.0, 8., clamp(w, 0., 1.));\n    float sharpness = mix(baseSharpness, 1., mixing);\n    w = pow(w, sharpness);\n    color += colorFraction * w;\n    opacity += opacityFraction * w;\n    totalWeight += w;\n  }\n\n  color /= max(1e-4, totalWeight);\n  opacity /= max(1e-4, totalWeight);\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 StaticMeshGradientUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_positions: number;\n  u_waveX: number;\n  u_waveXShift: number;\n  u_waveY: number;\n  u_waveYShift: number;\n  u_mixing: number;\n  u_grainMixer: number;\n  u_grainOverlay: number;\n}\n\nexport interface StaticMeshGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  positions?: number;\n  waveX?: number;\n  waveXShift?: number;\n  waveY?: number;\n  waveYShift?: number;\n  mixing?: number;\n  grainMixer?: number;\n  grainOverlay?: number;\n}\n"],
+  "mappings": ";;;;;AAEA;AAAA,OAGO;AACP,SAAS,WAAW,WAAW,wBAAwB;AAEhD,MAAM,yBAAyB;AAAA,EACpC,eAAe;AACjB;AAqCO,MAAM,mCAA2C;AAAA;AAAA;AAAA,wBAG/B,uBAAuB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAe3D,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,wBAoDK,uBAAuB,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;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/static-radial-gradient.d.ts

@@ -14,12 +14,12 @@ export declare const staticRadialGradientMeta: {
  * - u_colorsCount (float): Number of active colors
  * - u_radius (float): Size of the shape (0 to 3)
  * - u_focalDistance (float): Distance of the focal point from center (0 to 3)
- * - u_focalAngle (float): Angle of the focal point in degrees, effective with focalDistance > 0 (0 to 360)
- * - u_falloff (float): Gradient decay, 0 = linear gradient (-1 to 1)
+ * - u_focalAngle (float): Angle of the focal point in degrees, needs focalDistance > 0 (0 to 360)
+ * - u_falloff (float): Gradient decay, 0 = equal color distribution (-1 to 1)
  * - u_mixing (float): Blending behavior, 0 = hard stripes, 1 = smooth gradient (0 to 1)
  * - u_distortion (float): Strength of radial distortion (0 to 1)
- * - u_distortionShift (float): Radial distortion offset, effective with distortion > 0 (-1 to 1)
- * - u_distortionFreq (float): Radial distortion frequency, effective with distortion > 0 (0 to 20)
+ * - u_distortionShift (float): Radial distortion offset, needs distortion > 0 (-1 to 1)
+ * - u_distortionFreq (float): Radial distortion frequency, needs distortion > 0 (0 to 20)
  * - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)
  * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
  *