shaders-oneshot 0.0.81-shared.1

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/paper-texture.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\r\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { declarePI, proceduralHash21, proceduralHash22 } from '../shader-utils.js';\r\n\r\nexport const paperTextureMeta = {\r\n  maxCrumpleCount: 15,\r\n} as const;\r\n\r\n/**\r\n * Static paper-like texture built from a combination of grain, noise and multiple fold patterns.\r\n * Works as an image filter or as a standalone texture.\r\n *\r\n * Fragment shader uniforms:\r\n * - u_image (sampler2D): Optional source image texture\r\n * - u_isImage (bool): Whether a source image was provided\r\n * - u_imageAspectRatio (float): Aspect ratio of the source image\r\n * - u_colorBack (vec4): Color behind the paper sheet in RGBA\r\n * - u_colorPaper (vec4): Color of the paper sheet in RGBA\r\n * - u_colorShadow (vec4): Color of the patterns over the paper sheet in RGBA\r\n * - u_blending (float): Amount of image-to-paper blending, needs image (0 to 1)\r\n * - u_distortion (float): How much the image bends with the paper surface, needs image (-1 to 1)\r\n * - u_clip (bool): Cuts the paper sheet to the image frame, needs image\r\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)\r\n * - u_seed (float): Seed applied to every pattern (0 to 1000)\r\n * - u_roughness (float): Fine grain covering the surface evenly (0 to 1)\r\n * - u_roughnessSize (float): Scale of the roughness grain, needs roughness > 0 (0 to 1)\r\n * - u_roughnessRows (float): Lines the roughness up into stripes, 0 = even scatter, 1 = laid-paper rows, needs roughness > 0 (0 to 1)\r\n * - u_fiber (float): Curly thread-like noise covering the surface evenly (0 to 1)\r\n * - u_fiberSize (float): Scale of the fiber noise, needs fiber > 0 (0 to 1)\r\n * - u_folds (float): Straight vertical and horizontal fold lines producing ridges and valleys (0 to 1)\r\n * - u_foldSizeX (float): Size of the vertical folds, needs folds > 0 (0 to 1)\r\n * - u_foldSizeY (float): Size of the horizontal folds, needs folds > 0 (0 to 1)\r\n * - u_foldOffsetX (float): Shifts the vertical folds across the surface, needs folds > 0 (0 to 1)\r\n * - u_foldOffsetY (float): Shifts the horizontal folds across the surface, needs folds > 0 (0 to 1)\r\n * - u_wrinkles (float): Crumple-like facets repeating across the surface (0 to 1)\r\n * - u_wrinkleSize (float): Scale of the wrinkle facets, needs wrinkles > 0 (0 to 1)\r\n * - u_crumples (float): A set of irregular folding lines (0 to 1)\r\n * - u_crumpleCount (float): Number of facets in the crumple field, needs crumples > 0 (2 to 15)\r\n * - u_drops (float): Visibility of the speckle pattern, darkens the image instead of coloring it (0 to 1)\r\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied\r\n *\r\n * Vertex shader uniforms:\r\n * - u_resolution (vec2): Canvas resolution in pixels\r\n * - u_pixelRatio (float): Device pixel ratio\r\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\r\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\r\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\r\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\r\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\r\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\r\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\r\n * - u_imageAspectRatio (float): Aspect ratio of the source image\r\n *\r\n */\r\n\r\n// language=GLSL\r\nexport const paperTextureFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform sampler2D u_image;\r\nuniform bool u_isImage;\r\nuniform float u_imageAspectRatio;\r\n\r\nuniform vec4 u_colorBack;\r\nuniform vec4 u_colorPaper;\r\nuniform vec4 u_colorShadow;\r\n\r\nuniform float u_blending;\r\nuniform float u_distortion;\r\nuniform bool u_clip;\r\nuniform float u_angle;\r\nuniform float u_seed;\r\n\r\nuniform float u_roughness;\r\nuniform float u_roughnessSize;\r\nuniform float u_roughnessRows;\r\nuniform float u_fiber;\r\nuniform float u_fiberSize;\r\nuniform float u_folds;\r\nuniform float u_foldSizeX;\r\nuniform float u_foldSizeY;\r\nuniform float u_foldOffsetX;\r\nuniform float u_foldOffsetY;\r\nuniform float u_wrinkles;\r\nuniform float u_wrinkleSize;\r\nuniform float u_crumples;\r\nuniform float u_crumpleCount;\r\nuniform float u_drops;\r\n\r\nuniform sampler2D u_noiseTexture;\r\n\r\nin vec2 v_imageUV;\r\nout vec4 fragColor;\r\n\r\nfloat getUvFrame(vec2 uv) {\r\n  vec2 invAA = .5 / clamp(fwidth(uv), 1e-5, .02);\r\n  vec2 lo = clamp(uv * invAA + .5, 0., 1.);\r\n  vec2 hi = clamp((1. - uv) * invAA + .5, 0., 1.);\r\n  return lo.x * hi.x * lo.y * hi.y;\r\n}\r\n\r\nfloat lst(float edge0, float edge1, float x) {\r\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\r\n}\r\n\r\n${declarePI}\r\n${proceduralHash21}\r\n${proceduralHash22}\r\n\r\nfloat getRoughness(vec2 p, vec2 lightDir, vec2 seedShift, float basePixel) {\r\n  vec2 u = p / vec2(2, 4);\r\n  float w = 100. * basePixel;\r\n  float eps = 4. * w;\r\n\r\n  float size = mix(3.2, .8, u_roughnessSize);\r\n  float logLac = log2(2.1);\r\n  float level = -log2(w + 1e-8) / logLac;\r\n  float baseLevel = floor(level) - 2.;\r\n  float fade = fract(level);\r\n\r\n  vec2 px = (u.x + vec2(eps, -eps)) * .1;\r\n  float py = u.y * .1;\r\n\r\n  vec2 sum = vec2(0.);\r\n  float norm = 0., amp = .5;\r\n  float freq = exp2(baseLevel * logLac);\r\n  for (int i = 0; i < 4; i++) {\r\n    float absIdx = baseLevel + float(i);\r\n    vec2 qx = size * px * freq;\r\n    float qy = size * py * freq;\r\n\r\n    float wi = 1.;\r\n    if (i == 0) wi = 1. - fade;\r\n    if (i == 3) wi = fade;\r\n\r\n    vec2 fx = fract(qx);\r\n    float fy = fract(qy);\r\n    vec2 shift = .5 + absIdx * .3 + seedShift;\r\n    float uvY = floor(qy) / 50. + shift.y;\r\n    vec2 s0a = textureLod(u_noiseTexture, fract(vec2(floor(qx.x) / 50. + shift.x, uvY)), 0.).rg;\r\n    vec2 s1a = textureLod(u_noiseTexture, fract(vec2( ceil(qx.x) / 50. + shift.x, uvY)), 0.).rg;\r\n    vec2 s0b = textureLod(u_noiseTexture, fract(vec2(floor(qx.y) / 50. + shift.x, uvY)), 0.).rg;\r\n    vec2 s1b = textureLod(u_noiseTexture, fract(vec2( ceil(qx.y) / 50. + shift.x, uvY)), 0.).rg;\r\n    vec2 ny0 = mix(vec2(s0a.r, s0b.r), vec2(s0a.g, s0b.g), fy);\r\n    vec2 ny1 = mix(vec2(s1a.r, s1b.r), vec2(s1a.g, s1b.g), fy);\r\n    vec2 n = mix(ny0, ny1, fx);\r\n\r\n    sum += amp * wi * n;\r\n    norm += amp * wi;\r\n    amp *= .8;\r\n    freq *= 2.1;\r\n  }\r\n\r\n  vec2 r = sum / norm;\r\n  float dx = .5 + r.x - r.y;\r\n  float grain = 3. * dx * dx - .7;\r\n\r\n  float rowBand = fract(dot(p, lightDir) * .05 * size);\r\n  return grain + .6 * u_roughnessRows * (rowBand - .5);\r\n}\r\n\r\nfloat getFiber(vec2 p, vec2 seedShift, float basePixel) {\r\n  float size = mix(4., 1., u_fiberSize);\r\n  float w = 50. * basePixel;\r\n  float level = -log2(w + 1e-8);\r\n  float baseLevel = floor(level) - 3.;\r\n  float fade = fract(level);\r\n\r\n  vec2 grad = vec2(0.);\r\n  float scale = 1.;\r\n  float amp = 1.;\r\n  float freq = pow(1.7, baseLevel);\r\n  for (int i = 0; i < 5; i++) {\r\n    float absIdx = baseLevel + float(i);\r\n    vec2 q = size * p * freq;\r\n\r\n    float an = absIdx * .8;\r\n    float rc = cos(an), rs = sin(an);\r\n    q = vec2(rc * q.x - rs * q.y, rs * q.x + rc * q.y);\r\n\r\n    float wi = 1.;\r\n    if (i == 0) wi = 1. - fade;\r\n    if (i == 4) wi = fade;\r\n\r\n    vec2 iq = floor(q);\r\n    vec2 fq = fract(q);\r\n    float shift = absIdx * .3;\r\n    vec4 uv = fract(vec4(iq, iq + 1.) / 50. + .5 + shift + seedShift.xyxy);\r\n    float aF = textureLod(u_noiseTexture, uv.xy, 0.).b;\r\n    float bF = textureLod(u_noiseTexture, uv.zy, 0.).b;\r\n    float cF = textureLod(u_noiseTexture, uv.xw, 0.).b;\r\n    float dF = textureLod(u_noiseTexture, uv.zw, 0.).b;\r\n    vec2 u = fq * fq * (3. - 2. * fq);\r\n    vec2 du = 8. * fq * (1. - fq);\r\n    float dx = du.x * mix(bF - aF, dF - cF, u.y);\r\n    float dy = du.y * mix(cF - aF, dF - bF, u.x);\r\n    grad += wi * amp * scale * vec2(rc * dx + rs * dy, -rs * dx + rc * dy);\r\n    scale *= 1.7;\r\n    amp *= .5;\r\n    freq *= 1.7;\r\n  }\r\n\r\n  return clamp(.333 * length(grad), 0., 1.);\r\n}\r\n\r\nvec2 smoothNoise(vec2 p) {\r\n  vec2 t = p * 50. - .5;\r\n  vec2 i = floor(t);\r\n  vec2 f = fract(t);\r\n  f = f * f * (3. - 2. * f);\r\n  return textureLod(u_noiseTexture, fract((i + f + .5) / vec2(50.)), 0.).rg;\r\n}\r\n\r\nfloat getDrops(vec2 uv, vec2 seedShift) {\r\n  vec2 iDropsUV = floor(uv);\r\n  vec2 fDropsUV = fract(uv);\r\n  float dropsMinDist = 1.;\r\n  for (int y = -1; y < 2; y += 1) {\r\n    for (int x = -1; x < 2; x += 1) {\r\n      vec2 neighbor = vec2(float(y), float(x));\r\n      vec2 offset = hash22(iDropsUV + neighbor + 50. * seedShift);\r\n      vec2 pos = neighbor + offset - fDropsUV;\r\n      dropsMinDist *= min(1., dot(pos, pos));\r\n    }\r\n  }\r\n  return .5 * lst(.09, .08, sqrt(sqrt(dropsMinDist)));\r\n}\r\n\r\nvec2 getCellTilt(float idx, float radius) {\r\n  vec2 rand = hash22(vec2(idx + 31., idx * u_seed + 17.));\r\n  float an = rand.x * TWO_PI;\r\n  return vec2(cos(an), sin(an)) * mix(.3, 1.7, rand.y * rand.y) * mix(.7, 1., radius);\r\n}\r\n\r\nvec2 getCrumpleDetail(vec2 uv, float freq, float shift, float basePixel, out float depth) {\r\n  depth = 0.;\r\n  vec2 v = uv * freq;\r\n  float pixel = .9 * freq * basePixel;\r\n  vec2 base = floor(v);\r\n  float n1 = 9., n2 = 9.;\r\n  vec2 s1 = vec2(0.), s2 = vec2(0.), q1 = vec2(0.), q2 = vec2(0.);\r\n\r\n  for (int y = -1; y <= 1; y++) {\r\n    for (int x = -1; x <= 1; x++) {\r\n      vec2 cell = base + vec2(float(x), float(y));\r\n      vec2 q = hash22(vec2(cell.y * 1.9 + 3.1 + shift, cell.x * 1.3 + .11 * u_seed));\r\n      float keep = .8;\r\n      if (q.y > keep) continue;\r\n\r\n      vec2 r = hash22(vec2(cell.x + .37 * u_seed + shift + 11.1, cell.y - .21 * u_seed + 5.7));\r\n      vec2 s = cell + .06 + .88 * r;\r\n\r\n      vec2 d = v - s;\r\n      float dsq = dot(d, d);\r\n      if (dsq < n1) {\r\n        n2 = n1;\r\n        s2 = s1;\r\n        q2 = q1;\r\n        n1 = dsq;\r\n        s1 = s;\r\n        q1 = q;\r\n      } else if (dsq < n2) {\r\n        n2 = dsq;\r\n        s2 = s;\r\n        q2 = q;\r\n      }\r\n    }\r\n  }\r\n\r\n  if (n1 > 8.) return vec2(0.);\r\n\r\n  float an1 = q1.x * TWO_PI, mag1 = q1.y / .8;\r\n  vec2 t1 = vec2(cos(an1), sin(an1)) * mix(.3, 1.7, mag1 * mag1);\r\n  float an2 = q2.x * TWO_PI, mag2 = q2.y / .8;\r\n  vec2 t2 = vec2(cos(an2), sin(an2)) * mix(.3, 1.7, mag2 * mag2);\r\n\r\n  vec2 span = s1 - s2;\r\n  float spanLen = max(length(span), 1e-4);\r\n  float toEdge = (n2 - n1) / (2. * spanLen);\r\n\r\n  float pair = hash21(s1 + s2 + 1.7 * abs(s1 - s2));\r\n  float pairSoft = .05 + .1 * step(pair, .4);\r\n  float b = clamp(toEdge / max(1.5 * pixel, .5 * pairSoft), 0., 1.);\r\n  b = b * b * (3. - 2. * b);\r\n  float d1 = max(sqrt(n1), 1e-4);\r\n  depth = .2 * d1;\r\n  float shoulderAmt = max(0., 1. - toEdge / .42) * b;\r\n  vec2 shoulder = vec2(0.);\r\n  if (shoulderAmt > 0.) {\r\n    float d2 = max(sqrt(n2), 1e-4);\r\n    shoulder = shoulderAmt * ((v - s2) / d2 - (v - s1) / d1);\r\n  }\r\n\r\n  vec2 mid = .5 * (t1 + t2);\r\n  return mid + (t1 - mid) * b + .9 * shoulder;\r\n}\r\n\r\nvec4 getCrumples(vec2 uv) {\r\n  float crumpleN = max(2., floor(u_crumpleCount + .5));\r\n  float near = 60000., nearB = 60000.;\r\n  float idx = 0., rad = 0.;\r\n  vec2 nearP = vec2(0.), nearPb = vec2(0.);\r\n  vec4 seeds[${paperTextureMeta.maxCrumpleCount}];\r\n  for (int i = 0; i < ${paperTextureMeta.maxCrumpleCount}; i++) {\r\n    if (float(i) >= crumpleN) break;\r\n    vec2 rand = hash22(vec2(float(i), float(i) * u_seed));\r\n    float an = rand.x * TWO_PI;\r\n    vec2 p = vec2(cos(an), sin(an)) * rand.y;\r\n    seeds[i] = vec4(p, rand);\r\n\r\n    vec2 d = uv - p;\r\n    float dsq = dot(d, d);\r\n    if (dsq < near) {\r\n      nearB = near;\r\n      nearPb = nearP;\r\n      near = dsq;\r\n      idx = float(i);\r\n      rad = rand.y;\r\n      nearP = p;\r\n    } else if (dsq < nearB) {\r\n      nearB = dsq;\r\n      nearPb = p;\r\n    }\r\n  }\r\n  float l = sqrt(near), lb = sqrt(nearB);\r\n  vec2 dir = (uv - nearP) / max(l, 1e-4);\r\n  float edge = lst(0., .5, lb - l);\r\n\r\n  float shoulderLimit = l + .5;\r\n\r\n  vec2 tilt = getCellTilt(idx, rad);\r\n  float tiltSum = 1.;\r\n  vec2 wide = vec2(0.);\r\n  float wideSum = 0.;\r\n  float toEdge = 9., edgeSoft = 0.;\r\n\r\n  for (int i = 0; i < ${paperTextureMeta.maxCrumpleCount}; i++) {\r\n    if (float(i) >= crumpleN) break;\r\n    if (float(i) == idx) continue;\r\n    vec4 seed = seeds[i];\r\n    vec2 p = seed.xy;\r\n    vec2 rand = seed.zw;\r\n\r\n    vec2 d = uv - p;\r\n    float dsq = dot(d, d);\r\n\r\n    if (dsq < shoulderLimit * shoulderLimit) {\r\n      float di = sqrt(dsq);\r\n      float shoulder = lst(.5, 0., di - l);\r\n      wide += shoulder * (d / max(di, 1e-4) - dir);\r\n      wideSum += shoulder;\r\n    }\r\n\r\n    float pairSoft = .01 + .05 * step(.2, rand.x) + .3 * rand.y;\r\n    float toBisector = (dsq - near) / (.2 * max(length(p - nearP), 1e-4));\r\n    if (toBisector < toEdge) {\r\n      toEdge = toBisector;\r\n      edgeSoft = pairSoft;\r\n    }\r\n\r\n    float w = 1. - toBisector / pairSoft;\r\n    if (w > 0.) {\r\n      w *= w;\r\n      tilt += w * getCellTilt(float(i), rand.y);\r\n      tiltSum += w;\r\n    }\r\n  }\r\n\r\n  float blend = clamp(toEdge / edgeSoft, 0., 1.);\r\n  vec2 sharp = (1. - edge) * ((uv - nearPb) / max(lb, 1e-4) - dir);\r\n  vec2 rounding = mix(sharp, wide / max(wideSum, 1.), min(2. * edgeSoft, 1.));\r\n  float radial = l / max(l + toEdge, 1e-4);\r\n\r\n  return vec4(tilt / tiltSum + rounding * blend * radial, .2 * l, edge);\r\n}\r\n\r\nvoid getFolds(vec2 coord, vec2 offset, vec2 count, vec2 noise, vec2 baseFwidth, out vec2 slope, out vec2 dark, out vec2 lift) {\r\n  vec2 g = coord * count + .5 * offset + noise;\r\n  vec2 dx = fract(g) - .5;\r\n  vec2 adx = abs(dx);\r\n  float foldRadius = .3;\r\n  vec2 t = clamp(adx / foldRadius, 0., 1.);\r\n  dark = t * t * (3. - 2. * t);\r\n  lift = 1. - t;\r\n  lift *= lift;\r\n\r\n  vec2 crease = clamp(dx / max(count * baseFwidth, 1e-5), -1., 1.);\r\n  slope = crease * (1. - dark);\r\n\r\n  vec2 lineWidth = .02 * count * mix(vec2(2.5), vec2(.8), dark.yx) + .1 * noise;\r\n  slope -= 1. - smoothstep(vec2(0.), lineWidth, adx);\r\n}\r\n\r\nvoid main() {\r\n\r\n  vec2 patternUV = (v_imageUV - .5) * vec2(u_imageAspectRatio, 1.);\r\n  float basePixel = max(length(dFdx(patternUV)), length(dFdy(patternUV)));\r\n  vec2 baseFwidth = fwidth(patternUV);\r\n\r\n  float pattern = 0.;\r\n\r\n  float crumpleDepth = 0.;\r\n  float wrinkleDepth = 0.;\r\n  float foldDepth = 0.;\r\n  float roughness = 0.;\r\n  float fiber = 0.;\r\n  float drops = 0.;\r\n\r\n  float grazing = 0.7;\r\n  float lightRad = radians(u_angle);\r\n  vec2 lightDir = vec2(sin(lightRad), -cos(lightRad));\r\n  float foldAngleInSector = mod(u_angle, 90.);\r\n  float foldLightRad = radians(u_angle - foldAngleInSector + mix(12., 78., foldAngleInSector / 90.));\r\n  vec2 foldLightDir = vec2(sin(foldLightRad), -cos(foldLightRad));\r\n  vec2 relief = vec2(0.);\r\n  vec2 foldSlope = vec2(0.);\r\n  float reliefAmount = 0.;\r\n  float foldInk = 1.;\r\n  vec2 crumpleFlow = vec2(0.);\r\n\r\n  vec2 warpNoise = vec2(0.);\r\n  if (u_crumples > 0. || u_folds > 0. || u_wrinkles > 0.) {\r\n    warpNoise = smoothNoise(patternUV * .1 + .2 + .6 * fract(.017 * u_seed)) - .5;\r\n  }\r\n  vec2 crumplesUV = (patternUV * .9) + .012 * warpNoise;\r\n\r\n  if (u_crumples > 0.) {\r\n    vec4 crumples = getCrumples(crumplesUV);\r\n\r\n    vec2 crumpleTilt = .5 * u_crumples * crumples.xy;\r\n    crumpleTilt -= .1 * max(dot(crumpleTilt, lightDir), 0.) * lightDir;\r\n    relief += crumpleTilt;\r\n    reliefAmount += .6 * u_crumples;\r\n    crumpleFlow = crumples.w * crumpleTilt;\r\n\r\n    crumpleDepth = clamp(5. * crumples.z, 0., 1.);\r\n  }\r\n\r\n  if (u_wrinkles > 0.) {\r\n    float detailFreq = mix(10., 1., u_wrinkleSize);\r\n    float detailAmp = .2;\r\n    vec2 detailGrad = vec2(0.);\r\n    float detailDepth = 0., depthSum = 0.;\r\n    for (int i = 0; i < 3; i++) {\r\n      float layerDepth;\r\n      detailGrad += detailAmp * getCrumpleDetail(crumplesUV, detailFreq, 31. * float(i), basePixel, layerDepth);\r\n      detailDepth += detailAmp * layerDepth;\r\n      depthSum += detailAmp;\r\n      detailAmp *= (.5 + .2 * detailGrad.x);\r\n      detailFreq *= 2.1;\r\n    }\r\n\r\n    vec2 detailTilt = 1.5 * u_wrinkles * detailGrad;\r\n    detailTilt -= .65 * max(dot(detailTilt, lightDir), 0.) * lightDir;\r\n    relief += detailTilt;\r\n    reliefAmount += .6 * u_wrinkles;\r\n\r\n    wrinkleDepth = clamp(5. * detailDepth / max(depthSum, 1e-4), 0., 1.);\r\n  }\r\n\r\n  if (u_folds > 0.) {\r\n    vec2 foldOffset = vec2(1. - 2. * u_foldOffsetX, 1. - 2. * u_foldOffsetY);\r\n    vec2 foldCount = vec2(mix(3., .5, u_foldSizeX), mix(3., .5, u_foldSizeY));\r\n    vec2 foldNoise = .005 * warpNoise * foldCount;\r\n    vec2 uv = patternUV + .03 * crumpleFlow;\r\n\r\n    vec2 slope, dark, lift;\r\n    getFolds(uv, foldOffset, foldCount, foldNoise, baseFwidth, slope, dark, lift);\r\n\r\n    foldSlope = u_folds * slope;\r\n    reliefAmount += 1. * u_folds;\r\n    vec2 ink = mix(vec2(.96), vec2(1.), dark);\r\n    float flatness = dark.x * dark.y;\r\n    foldInk *= mix(1., ink.x * ink.y * mix(.5, .3, flatness), u_folds);\r\n\r\n    foldDepth = u_folds * (lift.y * foldLightDir.y - lift.x * foldLightDir.x);\r\n  }\r\n\r\n  float unlit = cos(grazing);\r\n  float lit = unlit;\r\n\r\n  if (reliefAmount > 0.) {\r\n    float lightFalloff = clamp(.5 + dot(v_imageUV - .5, lightDir), 0., 1.);\r\n    float lightPower = mix(.5, 1., lightFalloff);\r\n    float slope = clamp(dot(relief, lightDir) + dot(foldSlope, foldLightDir), -1.2, 1.2);\r\n    lit = max(cos(slope + grazing), 0.);\r\n\r\n    pattern += (clamp(reliefAmount, 0., 1.) * unlit + (lit - unlit)) * foldInk * lightPower;\r\n  }\r\n\r\n  patternUV += .04 * crumpleFlow;\r\n\r\n  vec2 seedShift = floor(fract(u_seed * vec2(.7548776662, .5698402909)) * 50.) / 50.;\r\n\r\n  if (u_roughness > 0.) {\r\n    roughness = u_roughness * getRoughness(1000. * patternUV, lightDir, seedShift, basePixel);\r\n    pattern += roughness;\r\n  }\r\n\r\n  if (u_fiber > 0.) {\r\n    fiber = u_fiber * getFiber(50. * patternUV, seedShift, basePixel);\r\n    pattern += fiber;\r\n  }\r\n\r\n  if (u_drops > 0.) {\r\n    drops = u_drops * getDrops(patternUV * 10., seedShift);\r\n  }\r\n\r\n  pattern = clamp(pattern, 0., 1.);\r\n\r\n  vec3 backColor = u_colorBack.rgb * u_colorBack.a;\r\n  float backOpacity = u_colorBack.a;\r\n  vec3 baseColor = u_colorPaper.rgb * u_colorPaper.a;\r\n  float baseOpacity = u_colorPaper.a;\r\n  vec3 shadowColor = u_colorShadow.rgb * u_colorShadow.a;\r\n  float shadowOpacity = u_colorShadow.a;\r\n\r\n  float notClipped = u_clip ? .1 : 1.;\r\n  vec2 imageCenteredUV = v_imageUV - .5;\r\n  float edgeDist = 2. * max(abs(imageCenteredUV.x), abs(imageCenteredUV.y));\r\n  float wrinkleDistortion = mix(.38, .0175, smoothstep(0., 1., edgeDist));\r\n  float scaleDistortion = .15 * u_crumples * (crumpleDepth - .5) + wrinkleDistortion * u_wrinkles * (wrinkleDepth - .5) + .05 * foldDepth;\r\n  vec2 linearDistortion = notClipped * .002 * lightDir * drops;\r\n  float radialDistortion = notClipped * .02 * (roughness + fiber);\r\n  vec2 centeredUV = imageCenteredUV * (1. - u_distortion * scaleDistortion);\r\n  centeredUV -= u_distortion * linearDistortion;\r\n  vec2 imageUV = .5 + centeredUV * (1. - abs(u_distortion) * radialDistortion * dot(centeredUV, centeredUV));\r\n\r\n  vec3 color = shadowColor * pattern;\r\n  float opacity = shadowOpacity * pattern;\r\n  color += baseColor * (1. - opacity);\r\n  opacity += baseOpacity * (1. - opacity);\r\n\r\n  if (u_isImage) {\r\n    float frame = getUvFrame(imageUV);\r\n    vec4 image = texture(u_image, imageUV);\r\n    frame *= image.a;\r\n\r\n    float maxC = max(max(image.r, image.g), image.b);\r\n    float minC = min(min(image.r, image.g), image.b);\r\n    float sat = maxC > 0. ? (maxC - minC) / maxC : 0.;\r\n    float midC = image.r + image.g + image.b - maxC - minC;\r\n    float secondaryness = maxC > minC ? (midC - minC) / (maxC - minC) : 0.;\r\n    float satDampen = sat * (1. - .5 * secondaryness);\r\n    float darkDampen = 1. - dot(vec3(.2126, .7152, .0722), image.rgb);\r\n    float dampen = mix(0., .7, u_blending) * max(satDampen, darkDampen);\r\n\r\n    vec3 paper = vec3(1.) - opacity + color;\r\n    vec3 pic = image.rgb * paper * u_blending + image.rgb * (1. - u_blending);\r\n    pic = mix(pic, vec3(1.), .6 * pow(dampen, 2. + 3. * pattern));\r\n\r\n    color = mix(color, pic, frame);\r\n    opacity = frame + opacity * (1. - frame);\r\n\r\n    if (u_clip) {\r\n      color *= frame;\r\n      opacity *= frame;\r\n    }\r\n  }\r\n\r\n  color *= mix(vec3(1.), .5 * u_colorShadow.rgb, drops * shadowOpacity);\r\n\r\n  color += backColor * (1. - opacity);\r\n  opacity += backOpacity * (1. - opacity);\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface PaperTextureUniforms extends ShaderSizingUniforms {\r\n  u_image: HTMLImageElement | string | undefined;\r\n  u_isImage: boolean;\r\n  u_colorBack: [number, number, number, number];\r\n  u_colorPaper: [number, number, number, number];\r\n  u_colorShadow: [number, number, number, number];\r\n  u_blending: number;\r\n  u_distortion: number;\r\n  u_clip: boolean;\r\n  u_angle: number;\r\n  u_seed: number;\r\n  u_roughness: number;\r\n  u_roughnessSize: number;\r\n  u_roughnessRows: number;\r\n  u_fiber: number;\r\n  u_fiberSize: number;\r\n  u_folds: number;\r\n  u_foldSizeX: number;\r\n  u_foldSizeY: number;\r\n  u_foldOffsetX: number;\r\n  u_foldOffsetY: number;\r\n  u_wrinkles: number;\r\n  u_wrinkleSize: number;\r\n  u_crumples: number;\r\n  u_crumpleCount: number;\r\n  u_drops: number;\r\n  u_noiseTexture?: HTMLImageElement;\r\n}\r\nexport interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {\r\n  image?: HTMLImageElement | string;\r\n  colorBack?: string;\r\n  colorPaper?: string;\r\n  colorShadow?: string;\r\n  blending?: number;\r\n  distortion?: number;\r\n  clip?: boolean;\r\n  angle?: number;\r\n  seed?: number;\r\n  roughness?: number;\r\n  roughnessSize?: number;\r\n  roughnessRows?: number;\r\n  fiber?: number;\r\n  fiberSize?: number;\r\n  folds?: number;\r\n  foldSizeX?: number;\r\n  foldSizeY?: number;\r\n  foldOffsetX?: number;\r\n  foldOffsetY?: number;\r\n  wrinkles?: number;\r\n  wrinkleSize?: number;\r\n  crumples?: number;\r\n  crumpleCount?: number;\r\n  drops?: number;\r\n}\r\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

@@ -0,0 +1,52 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * Classic animated 3D Perlin noise with exposed controls.
+ * Original algorithm: https://www.shadertoy.com/view/NlSGDz
+ *
+ * Fragment shader uniforms:
+ * - 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 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, 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
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ *
+ */
+export declare const perlinNoiseFragmentShader: string;
+export interface PerlinNoiseUniforms extends ShaderSizingUniforms {
+    u_colorFront: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
+    u_proportion: number;
+    u_softness: number;
+    u_octaveCount: number;
+    u_persistence: number;
+    u_lacunarity: number;
+}
+export interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {
+    colorFront?: string;
+    colorBack?: string;
+    proportion?: number;
+    softness?: number;
+    octaveCount?: number;
+    persistence?: number;
+    lacunarity?: number;
+}

package/dist/shaders/perlin-noise.js

@@ -0,0 +1,167 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, colorBandingFix, proceduralHash11, proceduralHash21 } from "../shader-utils.js";
+const perlinNoiseFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform float u_proportion;
+uniform float u_softness;
+uniform float u_octaveCount;
+uniform float u_persistence;
+uniform float u_lacunarity;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${declarePI}
+${proceduralHash11}
+${proceduralHash21}
+
+float hash31(vec3 p) {
+  p = fract(p * 0.3183099) + 0.1;
+  p += dot(p, p.yzx + 19.19);
+  return fract(p.x * (p.y + p.z));
+}
+
+vec3 gradientPredefined(float hash) {
+  int idx = int(hash * 12.0) % 12;
+
+  if (idx == 0) return vec3(1, 1, 0);
+  if (idx == 1) return vec3(-1, 1, 0);
+  if (idx == 2) return vec3(1, -1, 0);
+  if (idx == 3) return vec3(-1, -1, 0);
+  if (idx == 4) return vec3(1, 0, 1);
+  if (idx == 5) return vec3(-1, 0, 1);
+  if (idx == 6) return vec3(1, 0, -1);
+  if (idx == 7) return vec3(-1, 0, -1);
+  if (idx == 8) return vec3(0, 1, 1);
+  if (idx == 9) return vec3(0, -1, 1);
+  if (idx == 10) return vec3(0, 1, -1);
+  return vec3(0, -1, -1);// idx == 11
+}
+
+float interpolateSafe(float v000, float v001, float v010, float v011,
+float v100, float v101, float v110, float v111, vec3 t) {
+  t = clamp(t, 0.0, 1.0);
+
+  float v00 = mix(v000, v100, t.x);
+  float v01 = mix(v001, v101, t.x);
+  float v10 = mix(v010, v110, t.x);
+  float v11 = mix(v011, v111, t.x);
+
+  float v0 = mix(v00, v10, t.y);
+  float v1 = mix(v01, v11, t.y);
+
+  return mix(v0, v1, t.z);
+}
+
+vec3 fade(vec3 t) {
+  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
+}
+
+float perlinNoise(vec3 position, float seed) {
+  position += vec3(seed * 127.1, seed * 311.7, seed * 74.7);
+
+  vec3 i = floor(position);
+  vec3 f = fract(position);
+  float h000 = hash31(i);
+  float h001 = hash31(i + vec3(0, 0, 1));
+  float h010 = hash31(i + vec3(0, 1, 0));
+  float h011 = hash31(i + vec3(0, 1, 1));
+  float h100 = hash31(i + vec3(1, 0, 0));
+  float h101 = hash31(i + vec3(1, 0, 1));
+  float h110 = hash31(i + vec3(1, 1, 0));
+  float h111 = hash31(i + vec3(1, 1, 1));
+  vec3 g000 = gradientPredefined(h000);
+  vec3 g001 = gradientPredefined(h001);
+  vec3 g010 = gradientPredefined(h010);
+  vec3 g011 = gradientPredefined(h011);
+  vec3 g100 = gradientPredefined(h100);
+  vec3 g101 = gradientPredefined(h101);
+  vec3 g110 = gradientPredefined(h110);
+  vec3 g111 = gradientPredefined(h111);
+  float v000 = dot(g000, f - vec3(0, 0, 0));
+  float v001 = dot(g001, f - vec3(0, 0, 1));
+  float v010 = dot(g010, f - vec3(0, 1, 0));
+  float v011 = dot(g011, f - vec3(0, 1, 1));
+  float v100 = dot(g100, f - vec3(1, 0, 0));
+  float v101 = dot(g101, f - vec3(1, 0, 1));
+  float v110 = dot(g110, f - vec3(1, 1, 0));
+  float v111 = dot(g111, f - vec3(1, 1, 1));
+
+  vec3 u = fade(f);
+  return interpolateSafe(v000, v001, v010, v011, v100, v101, v110, v111, u);
+}
+
+float p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {
+  float value = 0.0;
+  float amplitude = 1.0;
+  float frequency = 10.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;
+    amplitude *= persistence;
+    frequency *= lacunarity;
+  }
+  return value;
+}
+
+float get_max_amp(float persistence, float octaveCount) {
+  persistence = clamp(persistence * 0.999, 0.0, 0.999);
+  octaveCount = clamp(octaveCount, 1.0, 8.0);
+
+  return (1.0 - pow(persistence, octaveCount)) / max(1e-4, (1.0 - persistence));
+}
+
+void main() {
+  vec2 uv = v_patternUV;
+  uv *= .5;
+
+  float t = .2 * u_time;
+
+  vec3 p = vec3(uv, t);
+
+  float octCount = floor(u_octaveCount);
+  float noise = p_noise(p, int(octCount), u_persistence, u_lacunarity);
+
+  float max_amp = get_max_amp(u_persistence, octCount);
+  float noise_normalized = clamp((noise + max_amp) / max(1e-4, (2. * max_amp)) + (u_proportion - .5), 0.0, 1.0);
+  float sharpness = clamp(u_softness, 0., 1.);
+  float smooth_w = 0.5 * max(fwidth(noise_normalized), 0.001);
+  float res = smoothstep(
+  .5 - .5 * sharpness - smooth_w,
+  .5 + .5 * sharpness + smooth_w,
+  noise_normalized
+  );
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  perlinNoiseFragmentShader
+};
+//# sourceMappingURL=perlin-noise.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/perlin-noise.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\r\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { declarePI, colorBandingFix, proceduralHash11, proceduralHash21 } from '../shader-utils.js';\r\n\r\n/**\r\n * Classic animated 3D Perlin noise with exposed controls.\r\n * Original algorithm: https://www.shadertoy.com/view/NlSGDz\r\n *\r\n * Fragment shader uniforms:\r\n * - u_time (float): Animation time\r\n * - u_colorFront (vec4): Foreground color in RGBA\r\n * - u_colorBack (vec4): Background color in RGBA\r\n * - u_proportion (float): Blend point between two colors, 0.5 = equal distribution (0 to 1)\r\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\r\n * - u_octaveCount (float): Perlin noise octaves number, more octaves for more detailed patterns (1 to 8)\r\n * - u_persistence (float): Roughness, falloff between octaves, needs octaveCount > 1 (0.3 to 1)\r\n * - u_lacunarity (float): Frequency step, defines how compressed the pattern is, needs octaveCount > 1 (1.5 to 10)\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\r\n *\r\n * Vertex shader uniforms:\r\n * - u_resolution (vec2): Canvas resolution in pixels\r\n * - u_pixelRatio (float): Device pixel ratio\r\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\r\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\r\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\r\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\r\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\r\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\r\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\r\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\r\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\r\n *\r\n */\r\n\r\n// language=GLSL\r\nexport const perlinNoiseFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform float u_time;\r\n\r\nuniform vec4 u_colorFront;\r\nuniform vec4 u_colorBack;\r\nuniform float u_proportion;\r\nuniform float u_softness;\r\nuniform float u_octaveCount;\r\nuniform float u_persistence;\r\nuniform float u_lacunarity;\r\n\r\nin vec2 v_patternUV;\r\n\r\nout vec4 fragColor;\r\n\r\n${ declarePI }\r\n${ proceduralHash11 }\r\n${ proceduralHash21 }\r\n\r\nfloat hash31(vec3 p) {\r\n  p = fract(p * 0.3183099) + 0.1;\r\n  p += dot(p, p.yzx + 19.19);\r\n  return fract(p.x * (p.y + p.z));\r\n}\r\n\r\nvec3 gradientPredefined(float hash) {\r\n  int idx = int(hash * 12.0) % 12;\r\n\r\n  if (idx == 0) return vec3(1, 1, 0);\r\n  if (idx == 1) return vec3(-1, 1, 0);\r\n  if (idx == 2) return vec3(1, -1, 0);\r\n  if (idx == 3) return vec3(-1, -1, 0);\r\n  if (idx == 4) return vec3(1, 0, 1);\r\n  if (idx == 5) return vec3(-1, 0, 1);\r\n  if (idx == 6) return vec3(1, 0, -1);\r\n  if (idx == 7) return vec3(-1, 0, -1);\r\n  if (idx == 8) return vec3(0, 1, 1);\r\n  if (idx == 9) return vec3(0, -1, 1);\r\n  if (idx == 10) return vec3(0, 1, -1);\r\n  return vec3(0, -1, -1);// idx == 11\r\n}\r\n\r\nfloat interpolateSafe(float v000, float v001, float v010, float v011,\r\nfloat v100, float v101, float v110, float v111, vec3 t) {\r\n  t = clamp(t, 0.0, 1.0);\r\n\r\n  float v00 = mix(v000, v100, t.x);\r\n  float v01 = mix(v001, v101, t.x);\r\n  float v10 = mix(v010, v110, t.x);\r\n  float v11 = mix(v011, v111, t.x);\r\n\r\n  float v0 = mix(v00, v10, t.y);\r\n  float v1 = mix(v01, v11, t.y);\r\n\r\n  return mix(v0, v1, t.z);\r\n}\r\n\r\nvec3 fade(vec3 t) {\r\n  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);\r\n}\r\n\r\nfloat perlinNoise(vec3 position, float seed) {\r\n  position += vec3(seed * 127.1, seed * 311.7, seed * 74.7);\r\n\r\n  vec3 i = floor(position);\r\n  vec3 f = fract(position);\r\n  float h000 = hash31(i);\r\n  float h001 = hash31(i + vec3(0, 0, 1));\r\n  float h010 = hash31(i + vec3(0, 1, 0));\r\n  float h011 = hash31(i + vec3(0, 1, 1));\r\n  float h100 = hash31(i + vec3(1, 0, 0));\r\n  float h101 = hash31(i + vec3(1, 0, 1));\r\n  float h110 = hash31(i + vec3(1, 1, 0));\r\n  float h111 = hash31(i + vec3(1, 1, 1));\r\n  vec3 g000 = gradientPredefined(h000);\r\n  vec3 g001 = gradientPredefined(h001);\r\n  vec3 g010 = gradientPredefined(h010);\r\n  vec3 g011 = gradientPredefined(h011);\r\n  vec3 g100 = gradientPredefined(h100);\r\n  vec3 g101 = gradientPredefined(h101);\r\n  vec3 g110 = gradientPredefined(h110);\r\n  vec3 g111 = gradientPredefined(h111);\r\n  float v000 = dot(g000, f - vec3(0, 0, 0));\r\n  float v001 = dot(g001, f - vec3(0, 0, 1));\r\n  float v010 = dot(g010, f - vec3(0, 1, 0));\r\n  float v011 = dot(g011, f - vec3(0, 1, 1));\r\n  float v100 = dot(g100, f - vec3(1, 0, 0));\r\n  float v101 = dot(g101, f - vec3(1, 0, 1));\r\n  float v110 = dot(g110, f - vec3(1, 1, 0));\r\n  float v111 = dot(g111, f - vec3(1, 1, 1));\r\n\r\n  vec3 u = fade(f);\r\n  return interpolateSafe(v000, v001, v010, v011, v100, v101, v110, v111, u);\r\n}\r\n\r\nfloat p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {\r\n  float value = 0.0;\r\n  float amplitude = 1.0;\r\n  float frequency = 10.0;\r\n  octaveCount = clamp(octaveCount, 1, 8);\r\n\r\n  for (int i = 0; i < octaveCount; i++) {\r\n    float seed = float(i) * 0.7319;\r\n    value += perlinNoise(position * frequency, seed) * amplitude;\r\n    amplitude *= persistence;\r\n    frequency *= lacunarity;\r\n  }\r\n  return value;\r\n}\r\n\r\nfloat get_max_amp(float persistence, float octaveCount) {\r\n  persistence = clamp(persistence * 0.999, 0.0, 0.999);\r\n  octaveCount = clamp(octaveCount, 1.0, 8.0);\r\n\r\n  return (1.0 - pow(persistence, octaveCount)) / max(1e-4, (1.0 - persistence));\r\n}\r\n\r\nvoid main() {\r\n  vec2 uv = v_patternUV;\r\n  uv *= .5;\r\n\r\n  float t = .2 * u_time;\r\n\r\n  vec3 p = vec3(uv, t);\r\n\r\n  float octCount = floor(u_octaveCount);\r\n  float noise = p_noise(p, int(octCount), u_persistence, u_lacunarity);\r\n\r\n  float max_amp = get_max_amp(u_persistence, octCount);\r\n  float noise_normalized = clamp((noise + max_amp) / max(1e-4, (2. * max_amp)) + (u_proportion - .5), 0.0, 1.0);\r\n  float sharpness = clamp(u_softness, 0., 1.);\r\n  float smooth_w = 0.5 * max(fwidth(noise_normalized), 0.001);\r\n  float res = smoothstep(\r\n  .5 - .5 * sharpness - smooth_w,\r\n  .5 + .5 * sharpness + smooth_w,\r\n  noise_normalized\r\n  );\r\n\r\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\r\n  float fgOpacity = u_colorFront.a;\r\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\r\n  float bgOpacity = u_colorBack.a;\r\n\r\n  vec3 color = fgColor * res;\r\n  float opacity = fgOpacity * res;\r\n\r\n  color += bgColor * (1. - opacity);\r\n  opacity += bgOpacity * (1. - opacity);\r\n\r\n  ${ colorBandingFix }\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface PerlinNoiseUniforms extends ShaderSizingUniforms {\r\n  u_colorFront: [number, number, number, number];\r\n  u_colorBack: [number, number, number, number];\r\n  u_proportion: number;\r\n  u_softness: number;\r\n  u_octaveCount: number;\r\n  u_persistence: number;\r\n  u_lacunarity: number;\r\n}\r\n\r\nexport interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {\r\n  colorFront?: string;\r\n  colorBack?: string;\r\n  proportion?: number;\r\n  softness?: number;\r\n  octaveCount?: number;\r\n  persistence?: number;\r\n  lacunarity?: number;\r\n}\r\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

@@ -0,0 +1,98 @@
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+export declare const pulsingBorderMeta: {
+    readonly maxColorCount: 5;
+    readonly maxSpots: 4;
+};
+/**
+ * Luminous trails of color merging into a glowing gradient contour.
+ *
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_colors (vec4[]): Up to 5 spot colors in RGBA
+ * - u_colorsCount (float): Number of active colors
+ * - u_roundness (float): Border radius (0 to 1)
+ * - u_thickness (float): Border base width (0 to 1)
+ * - u_softness (float): Border edge sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
+ * - u_marginLeft (float): Distance from the left edge to the effect (0 to 1)
+ * - u_marginRight (float): Distance from the right edge to the effect (0 to 1)
+ * - u_marginTop (float): Distance from the top edge to the effect (0 to 1)
+ * - u_marginBottom (float): Distance from the bottom edge to the effect (0 to 1)
+ * - 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 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, needs smoke > 0 (0 to 1)
+ * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_responsiveUV (vec2): Responsive UV coordinates that adapt to canvas aspect ratio
+ * - v_responsiveBoxGivenSize (vec2): Given size of the responsive bounding box
+ * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied (used for smoke calculation)
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ *
+ */
+export declare const pulsingBorderFragmentShader: string;
+export interface PulsingBorderUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_roundness: number;
+    u_thickness: number;
+    u_marginLeft: number;
+    u_marginRight: number;
+    u_marginTop: number;
+    u_marginBottom: number;
+    u_aspectRatio: (typeof PulsingBorderAspectRatios)[PulsingBorderAspectRatio];
+    u_softness: number;
+    u_intensity: number;
+    u_bloom: number;
+    u_spots: number;
+    u_spotSize: number;
+    u_pulse: number;
+    u_smoke: number;
+    u_smokeSize: number;
+    u_noiseTexture?: HTMLImageElement;
+}
+export interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
+    colors?: string[];
+    roundness?: number;
+    thickness?: number;
+    margin?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    aspectRatio?: PulsingBorderAspectRatio;
+    softness?: number;
+    intensity?: number;
+    bloom?: number;
+    spots?: number;
+    spotSize?: number;
+    pulse?: number;
+    smoke?: number;
+    smokeSize?: number;
+}
+export declare const PulsingBorderAspectRatios: {
+    readonly auto: 0;
+    readonly square: 1;
+};
+export type PulsingBorderAspectRatio = keyof typeof PulsingBorderAspectRatios;

package/dist/shaders/pulsing-border.js

@@ -0,0 +1,239 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, textureRandomizerGB, colorBandingFix } from "../shader-utils.js";
+const pulsingBorderMeta = {
+  maxColorCount: 5,
+  maxSpots: 4
+};
+const pulsingBorderFragmentShader = `#version 300 es
+precision lowp float;
+
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${pulsingBorderMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_roundness;
+uniform float u_thickness;
+uniform float u_marginLeft;
+uniform float u_marginRight;
+uniform float u_marginTop;
+uniform float u_marginBottom;
+uniform float u_aspectRatio;
+uniform float u_softness;
+uniform float u_intensity;
+uniform float u_bloom;
+uniform float u_spotSize;
+uniform float u_spots;
+uniform float u_pulse;
+uniform float u_smoke;
+uniform float u_smokeSize;
+
+uniform sampler2D u_noiseTexture;
+
+in vec2 v_responsiveUV;
+in vec2 v_responsiveBoxGivenSize;
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${declarePI}
+
+float beat(float time) {
+  float first = pow(abs(sin(time * TWO_PI)), 10.);
+  float second = pow(abs(sin((time - .15) * TWO_PI)), 10.);
+
+  return clamp(first + 0.6 * second, 0.0, 1.0);
+}
+
+float sst(float edge0, float edge1, float x) {
+  return smoothstep(edge0, edge1, x);
+}
+
+float roundedBox(vec2 uv, vec2 halfSize, float distance, float cornerDistance, float thickness, float softness) {
+  float borderDistance = abs(distance);
+  float aa = 2. * fwidth(distance);
+  float border = 1. - sst(min(mix(thickness, -thickness, softness), thickness + aa), max(mix(thickness, -thickness, softness), thickness + aa), borderDistance);
+  float cornerFadeCircles = 0.;
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv + halfSize) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(-halfSize.x, halfSize.y)) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(halfSize.x, -halfSize.y)) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - halfSize) / thickness)));
+  aa = fwidth(cornerDistance);
+  float cornerFade = sst(0., mix(aa, thickness, softness), cornerDistance);
+  cornerFade *= cornerFadeCircles;
+  border += cornerFade;
+  return border;
+}
+
+${textureRandomizerGB}
+
+float randomG(vec2 p) {
+  vec2 uv = floor(p) / 100. + .5;
+  return texture(u_noiseTexture, fract(uv)).g;
+}
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomG(i);
+  float b = randomG(i + vec2(1.0, 0.0));
+  float c = randomG(i + vec2(0.0, 1.0));
+  float d = randomG(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+void main() {
+  const float firstFrameOffset = 109.;
+  float t = 1.2 * (u_time + firstFrameOffset);
+
+  vec2 borderUV = v_responsiveUV;
+  float pulse = u_pulse * beat(.18 * u_time);
+
+  float canvasRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
+  vec2 halfSize = vec2(.5);
+  borderUV.x *= max(canvasRatio, 1.);
+  borderUV.y /= min(canvasRatio, 1.);
+  halfSize.x *= max(canvasRatio, 1.);
+  halfSize.y /= min(canvasRatio, 1.);
+
+  float mL = u_marginLeft;
+  float mR = u_marginRight;
+  float mT = u_marginTop;
+  float mB = u_marginBottom;
+  float mX = mL + mR;
+  float mY = mT + mB;
+
+  if (u_aspectRatio > 0.) {
+    float shapeRatio = canvasRatio * (1. - mX) / max(1. - mY, 1e-6);
+    float freeX = shapeRatio > 1. ? (1. - mX) * (1. - 1. / max(abs(shapeRatio), 1e-6)) : 0.;
+    float freeY = shapeRatio < 1. ? (1. - mY) * (1. - shapeRatio) : 0.;
+    mL += freeX * 0.5;
+    mR += freeX * 0.5;
+    mT += freeY * 0.5;
+    mB += freeY * 0.5;
+    mX = mL + mR;
+    mY = mT + mB;
+  }
+
+  float thickness = .5 * u_thickness * min(halfSize.x, halfSize.y);
+
+  halfSize.x *= (1. - mX);
+  halfSize.y *= (1. - mY);
+
+  vec2 centerShift = vec2(
+  (mL - mR) * max(canvasRatio, 1.) * 0.5,
+  (mB - mT) / min(canvasRatio, 1.) * 0.5
+  );
+
+  borderUV -= centerShift;
+  halfSize -= mix(thickness, 0., u_softness);
+
+  float radius = mix(0., min(halfSize.x, halfSize.y), u_roundness);
+  vec2 d = abs(borderUV) - halfSize + radius;
+  float outsideDistance = length(max(d, .0001)) - radius;
+  float insideDistance = min(max(d.x, d.y), .0001);
+  float cornerDistance = abs(min(max(d.x, d.y) - .45 * radius, .0));
+  float distance = outsideDistance + insideDistance;
+
+  float borderThickness = mix(thickness, 3. * thickness, u_softness);
+  float border = roundedBox(borderUV, halfSize, distance, cornerDistance, borderThickness, u_softness);
+  border = pow(border, 1. + u_softness);
+
+  vec2 smokeUV = .3 * u_smokeSize * v_patternUV;
+  float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);
+  smoke -= valueNoise(3.4 * smokeUV - .5 * t);
+  float smokeThickness = thickness + .2;
+  smokeThickness = min(.4, max(smokeThickness, .1));
+  smoke *= roundedBox(borderUV, halfSize, distance, cornerDistance, smokeThickness, 1.);
+  smoke = 30. * smoke * smoke;
+  smoke *= mix(0., .5, pow(u_smoke, 2.));
+  smoke *= mix(1., pulse, u_pulse);
+  smoke = clamp(smoke, 0., 1.);
+  border += smoke;
+
+  border = clamp(border, 0., 1.);
+
+  vec3 blendColor = vec3(0.);
+  float blendAlpha = 0.;
+  vec3 addColor = vec3(0.);
+  float addAlpha = 0.;
+
+  float bloom = 4. * u_bloom;
+  float intensity = 1. + (1. + 4. * u_softness) * u_intensity;
+
+  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;
+
+  for (int colorIdx = 0; colorIdx < ${pulsingBorderMeta.maxColorCount}; colorIdx++) {
+    if (colorIdx >= int(u_colorsCount)) break;
+    float colorIdxF = float(colorIdx);
+
+    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;
+    float a = u_colors[colorIdx].a;
+
+    for (int spotIdx = 0; spotIdx < ${pulsingBorderMeta.maxSpots}; spotIdx++) {
+      if (spotIdx >= int(u_spots)) break;
+      float spotIdxF = float(spotIdx);
+
+      vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));
+
+      float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;
+      time *= mix(1., -1., step(.5, randVal.y));
+
+      float mask = .5 + .5 * mix(
+      sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),
+      cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),
+      step(mod(colorIdxF, 2.), .5)
+      );
+
+      float p = clamp(2. * u_pulse - randVal.x, 0., 1.);
+      mask = mix(mask, pulse, p);
+
+      float atg1 = fract(angle + time);
+      float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;
+      spotSize = mix(spotSize, .1, p);
+      float sector = sst(.5 - spotSize, .5, atg1) * (1. - sst(.5, .5 + spotSize, atg1));
+
+      sector *= mask;
+      sector *= border;
+      sector *= intensity;
+      sector = clamp(sector, 0., 1.);
+
+      vec3 srcColor = c * sector;
+      float srcAlpha = a * sector;
+
+      blendColor += ((1. - blendAlpha) * srcColor);
+      blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;
+      addColor += srcColor;
+      addAlpha += srcAlpha;
+    }
+  }
+
+  vec3 accumColor = mix(blendColor, addColor, bloom);
+  float accumAlpha = mix(blendAlpha, addAlpha, bloom);
+  accumAlpha = clamp(accumAlpha, 0., 1.);
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  vec3 color = accumColor + (1. - accumAlpha) * bgColor;
+  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}`;
+const PulsingBorderAspectRatios = {
+  auto: 0,
+  square: 1
+};
+export {
+  PulsingBorderAspectRatios,
+  pulsingBorderFragmentShader,
+  pulsingBorderMeta
+};
+//# sourceMappingURL=pulsing-border.js.map