@paper-design/shaders 0.0.46 → 0.0.49

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/grain-gradient.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingVariablesDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingDebugVariablesDeclaration,\n} from '../shader-sizing.js';\nimport {\n  simplexNoise,\n  declarePI,\n  rotation2,\n  textureRandomizerR,\n  proceduralHash21,\n  proceduralHash11,\n} from '../shader-utils.js';\n\nexport const grainGradientMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Multi-color gradient with noise & grain over animated abstract shapes\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_softness (0..1): blur between color bands\n * - u_intensity (0..1): distortion between color bands\n * - u_noise (0..1): grainy noise independent of softness\n * - u_shape (float used as integer):\n * ---- 1: single sine wave\n * ---- 2: dots pattern\n * ---- 3: truchet pattern\n * ---- 4: corners (2 rounded rectangles)\n * ---- 5: ripple\n * ---- 6: blob (metaballs)\n * ---- 7: circle imitating 3d look\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n * Note: grains are calculated using gl_FragCoord & u_resolution, meaning grains don't react to scaling and fit\n *\n */\n\n// language=GLSL\nexport const grainGradientFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform mediump float u_time;\nuniform mediump vec2 u_resolution;\nuniform mediump float u_pixelRatio;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${grainGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\n\nuniform mediump float u_originX;\nuniform mediump float u_originY;\nuniform mediump float u_worldWidth;\nuniform mediump float u_worldHeight;\nuniform mediump float u_fit;\n\nuniform mediump float u_scale;\nuniform mediump float u_rotation;\nuniform mediump float u_offsetX;\nuniform mediump float u_offsetY;\n\n${sizingVariablesDeclaration}\n${ sizingDebugVariablesDeclaration }\n\nout vec4 fragColor;\n\n${declarePI}\n${simplexNoise}\n${rotation2}\n${proceduralHash21}\n${textureRandomizerR}\n\nfloat valueNoiseR(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 fbmR(vec2 n) {\n  float total = 0.;\n  float amplitude = .2;\n  for (int i = 0; i < 3; i++) {\n    n = rotate(n, .3);\n    total += valueNoiseR(n) * amplitude;\n    n *= 1.99;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\n${proceduralHash11}\n\nvec2 truchet(vec2 uv, float idx){\n    idx = fract(((idx - .5) * 2.));\n    if (idx > 0.75) {\n        uv = vec2(1.0) - uv;\n    } else if (idx > 0.5) {\n        uv = vec2(1.0 - uv.x, uv.y);\n    } else if (idx > 0.25) {\n        uv = 1.0 - vec2(1.0 - uv.x, uv.y);\n    }\n    return uv;\n}\n\nvoid main() {\n\n  float t = .1 * u_time;\n\n  vec2 shape_uv = vec2(0.);\n  vec2 grain_uv = vec2(0.);\n\n  if (u_shape > 3.5) {\n    shape_uv = v_objectUV;\n    grain_uv = shape_uv;\n\n    // apply inverse transform to grain_uv so it respects the originXY\n    float r = u_rotation * 3.14159265358979323846 / 180.;\n    mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n    vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n    grain_uv = transpose(graphicRotation) * grain_uv;\n    grain_uv *= u_scale;\n    grain_uv -= graphicOffset;\n    grain_uv *= v_objectBoxSize;\n    grain_uv *= .7;\n  } else {\n    shape_uv = .5 * v_patternUV;\n    grain_uv = 100. * v_patternUV;\n\n    // apply inverse transform to grain_uv so it respects the originXY\n    float r = u_rotation * 3.14159265358979323846 / 180.;\n    mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n    vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n    grain_uv = transpose(graphicRotation) * grain_uv;\n    grain_uv *= u_scale;\n    if (u_fit > 0.) {\n      vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n      givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n      float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n      vec2 patternBoxGivenSize = vec2(\n        (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n        (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n      );\n      patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n      float patternBoxNoFitBoxWidth = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n      grain_uv /= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n    }\n    vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n    grain_uv -= graphicOffset / patternBoxScale;\n    grain_uv *= 1.6;\n  }\n\n\n  float shape = 0.;\n\n  if (u_shape < 1.5) {\n    // Sine wave\n\n    float wave = cos(.5 * shape_uv.x - 4. * t) * sin(1.5 * shape_uv.x + 2. * t) * (.75 + .25 * cos(6. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 2.5) {\n    // Grid (dots)\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = hash11(stripeIdx + 2.);\n    rand = sign(rand - .5) * pow(.2 + abs(rand), .3);\n    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);\n    shape = pow(shape, 4.);\n\n  } else if (u_shape < 3.5) {\n    // Truchet pattern\n\n    float n2 = valueNoiseR(shape_uv * .4 - 3.75 * t);\n    shape_uv.x += 10.;\n    shape_uv *= .6;\n\n    vec2 tile = truchet(fract(shape_uv), randomR(floor(shape_uv)));\n\n    float distance1 = length(tile);\n    float distance2 = length(tile - vec2(1.));\n\n    n2 -= .5;\n    n2 *= .1;\n    shape = smoothstep(.2, .55, distance1 + n2) * smoothstep(.8, .45, distance1 - n2);\n    shape += smoothstep(.2, .55, distance2 + n2) * smoothstep(.8, .45, distance2 - n2);\n\n    shape = pow(shape, 1.5);\n\n  } else if (u_shape < 4.5) {\n    // Corners\n\n    shape_uv *= .6;\n    vec2 outer = vec2(.5);\n\n    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * sin(5.25 * t)));\n    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape = 1. - bl.x * bl.y * tr.x * tr.y;\n\n    shape_uv = -shape_uv;\n    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * cos(5.25 * t)));\n    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape -= bl.x * bl.y * tr.x * tr.y;\n\n    shape = 1. - smoothstep(0., 1., shape);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    shape_uv *= 2.;\n    float dist = length(.4 * shape_uv);\n    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Blob\n\n    t *= 2.;\n\n    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));\n    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));\n    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));\n    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));\n\n    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);\n\n    shape = smoothstep(.0, .9, shape);\n    float edge = smoothstep(.25, .3, shape);\n    shape = mix(.0, shape, edge);\n\n  } else {\n    // Sphere\n\n    shape_uv *= 2.;\n    float d = 1. - pow(length(shape_uv), 2.);\n    vec3 pos = vec3(shape_uv, sqrt(d));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n    shape *= step(0., d);\n  }\n\n  float simplex = snoise(grain_uv * .5);\n  float grainDist = simplex * snoise(grain_uv * .2) - fbmR(.002 * grain_uv + 10.) - fbmR(.003 * grain_uv);\n  float rawNoise = .6 * simplex - fbmR(rotate(.4 * grain_uv, 2.)) - fbmR(.001 * grain_uv);\n  float noise = clamp(rawNoise, 0., 1.);\n\n  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n  shape += u_noise * 10. / u_colorsCount * noise;\n\n  float aa = fwidth(shape);\n\n  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);\n  float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));\n  float mixer = shape * (u_colorsCount - 1.);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {\n    if (i > int(u_colorsCount) - 1) break;\n\n    float localT = clamp(mixer - float(i - 1), 0., 1.);\n    localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * totalShape;\n  float opacity = gradient.a * totalShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GrainGradientUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_softness: number;\n  u_intensity: number;\n  u_noise: number;\n  u_shape: (typeof GrainGradientShapes)[GrainGradientShape];\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  softness?: number;\n  intensity?: number;\n  noise?: number;\n  shape?: GrainGradientShape;\n}\n\nexport const GrainGradientShapes = {\n  wave: 1,\n  dots: 2,\n  truchet: 3,\n  corners: 4,\n  ripple: 5,\n  blob: 6,\n  sphere: 7,\n};\n\nexport type GrainGradientShape = keyof typeof GrainGradientShapes;\n"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingVariablesDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingDebugVariablesDeclaration,\n} from '../shader-sizing.js';\nimport {\n  simplexNoise,\n  declarePI,\n  rotation2,\n  textureRandomizerR,\n  proceduralHash21,\n  proceduralHash11,\n} from '../shader-utils.js';\n\nexport const grainGradientMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Multi-color gradient with noise & grain over animated abstract shapes\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_softness (0..1): blur between color bands\n * - u_intensity (0..1): distortion between color bands\n * - u_noise (0..1): grainy noise independent of softness\n * - u_shape (float used as integer):\n * ---- 1: single sine wave\n * ---- 2: dots pattern\n * ---- 3: truchet pattern\n * ---- 4: corners (2 rounded rectangles)\n * ---- 5: ripple\n * ---- 6: blob (metaballs)\n * ---- 7: circle imitating 3d look\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n * Note: grains are calculated using gl_FragCoord & u_resolution, meaning grains don't react to scaling and fit\n *\n */\n\n// language=GLSL\nexport const grainGradientFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform mediump float u_time;\nuniform mediump vec2 u_resolution;\nuniform mediump float u_pixelRatio;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${grainGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\n\nuniform mediump float u_originX;\nuniform mediump float u_originY;\nuniform mediump float u_worldWidth;\nuniform mediump float u_worldHeight;\nuniform mediump float u_fit;\n\nuniform mediump float u_scale;\nuniform mediump float u_rotation;\nuniform mediump float u_offsetX;\nuniform mediump float u_offsetY;\n\n${sizingVariablesDeclaration}\n${ sizingDebugVariablesDeclaration }\n\nout vec4 fragColor;\n\n${declarePI}\n${simplexNoise}\n${rotation2}\n${proceduralHash21}\n${textureRandomizerR}\n\nfloat valueNoiseR(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 fbmR(vec2 n) {\n  float total = 0.;\n  float amplitude = .2;\n  for (int i = 0; i < 3; i++) {\n    n = rotate(n, .3);\n    total += valueNoiseR(n) * amplitude;\n    n *= 1.99;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\n${proceduralHash11}\n\nvec2 truchet(vec2 uv, float idx){\n    idx = fract(((idx - .5) * 2.));\n    if (idx > 0.75) {\n        uv = vec2(1.0) - uv;\n    } else if (idx > 0.5) {\n        uv = vec2(1.0 - uv.x, uv.y);\n    } else if (idx > 0.25) {\n        uv = 1.0 - vec2(1.0 - uv.x, uv.y);\n    }\n    return uv;\n}\n\nvoid main() {\n\n  float t = .1 * u_time;\n\n  vec2 shape_uv = vec2(0.);\n  vec2 grain_uv = vec2(0.);\n\n  if (u_shape > 3.5) {\n    shape_uv = v_objectUV;\n    grain_uv = shape_uv;\n\n    // apply inverse transform to grain_uv so it respects the originXY\n    float r = u_rotation * 3.14159265358979323846 / 180.;\n    mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n    vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n    grain_uv = transpose(graphicRotation) * grain_uv;\n    grain_uv *= u_scale;\n    grain_uv -= graphicOffset;\n    grain_uv *= v_objectBoxSize;\n    grain_uv *= .7;\n  } else {\n    shape_uv = .5 * v_patternUV;\n    grain_uv = 100. * v_patternUV;\n\n    // apply inverse transform to grain_uv so it respects the originXY\n    float r = u_rotation * 3.14159265358979323846 / 180.;\n    mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n    vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n    grain_uv = transpose(graphicRotation) * grain_uv;\n    grain_uv *= u_scale;\n    if (u_fit > 0.) {\n      vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n      givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n      float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n      vec2 patternBoxGivenSize = vec2(\n        (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n        (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n      );\n      patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n      float patternBoxNoFitBoxWidth = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n      grain_uv /= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n    }\n    vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n    grain_uv -= graphicOffset / patternBoxScale;\n    grain_uv *= 1.6;\n  }\n\n\n  float shape = 0.;\n\n  if (u_shape < 1.5) {\n    // Sine wave\n\n    float wave = cos(.5 * shape_uv.x - 4. * t) * sin(1.5 * shape_uv.x + 2. * t) * (.75 + .25 * cos(6. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 2.5) {\n    // Grid (dots)\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = hash11(stripeIdx * 100.);\n    rand = sign(rand - .5) * pow(4. * abs(rand), .3);\n    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);\n    shape = pow(shape, 4.);\n\n  } else if (u_shape < 3.5) {\n    // Truchet pattern\n\n    float n2 = valueNoiseR(shape_uv * .4 - 3.75 * t);\n    shape_uv.x += 10.;\n    shape_uv *= .6;\n\n    vec2 tile = truchet(fract(shape_uv), randomR(floor(shape_uv)));\n\n    float distance1 = length(tile);\n    float distance2 = length(tile - vec2(1.));\n\n    n2 -= .5;\n    n2 *= .1;\n    shape = smoothstep(.2, .55, distance1 + n2) * smoothstep(.8, .45, distance1 - n2);\n    shape += smoothstep(.2, .55, distance2 + n2) * smoothstep(.8, .45, distance2 - n2);\n\n    shape = pow(shape, 1.5);\n\n  } else if (u_shape < 4.5) {\n    // Corners\n\n    shape_uv *= .6;\n    vec2 outer = vec2(.5);\n\n    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * sin(5.25 * t)));\n    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape = 1. - bl.x * bl.y * tr.x * tr.y;\n\n    shape_uv = -shape_uv;\n    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * cos(5.25 * t)));\n    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape -= bl.x * bl.y * tr.x * tr.y;\n\n    shape = 1. - smoothstep(0., 1., shape);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    shape_uv *= 2.;\n    float dist = length(.4 * shape_uv);\n    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Blob\n\n    t *= 2.;\n\n    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));\n    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));\n    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));\n    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));\n\n    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);\n\n    shape = smoothstep(.0, .9, shape);\n    float edge = smoothstep(.25, .3, shape);\n    shape = mix(.0, shape, edge);\n\n  } else {\n    // Sphere\n\n    shape_uv *= 2.;\n    float d = 1. - pow(length(shape_uv), 2.);\n    vec3 pos = vec3(shape_uv, sqrt(d));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n    shape *= step(0., d);\n  }\n\n  float simplex = snoise(grain_uv * .5);\n  float grainDist = simplex * snoise(grain_uv * .2) - fbmR(.002 * grain_uv + 10.) - fbmR(.003 * grain_uv);\n  float rawNoise = .75 * simplex - fbmR(rotate(.4 * grain_uv, 2.)) - fbmR(.001 * grain_uv);\n  float noise = clamp(rawNoise, 0., 1.);\n\n  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n  shape += u_noise * 10. / u_colorsCount * noise;\n\n  float aa = fwidth(shape);\n\n  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);\n  float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));\n  float mixer = shape * (u_colorsCount - 1.);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {\n    if (i > int(u_colorsCount) - 1) break;\n\n    float localT = clamp(mixer - float(i - 1), 0., 1.);\n    localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * totalShape;\n  float opacity = gradient.a * totalShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GrainGradientUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_softness: number;\n  u_intensity: number;\n  u_noise: number;\n  u_shape: (typeof GrainGradientShapes)[GrainGradientShape];\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  softness?: number;\n  intensity?: number;\n  noise?: number;\n  shape?: GrainGradientShape;\n}\n\nexport const GrainGradientShapes = {\n  wave: 1,\n  dots: 2,\n  truchet: 3,\n  corners: 4,\n  ripple: 5,\n  blob: 6,\n  sphere: 7,\n};\n\nexport type GrainGradientShape = keyof typeof GrainGradientShapes;\n"],
   "mappings": ";;;;;AAEA;AAAA,EACE;AAAA,EAGA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AACjB;AA2BO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAU3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBrD,0BAA0B;AAAA,EACzB,+BAAgC;AAAA;AAAA;AAAA;AAAA,EAIjC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BlB,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,wBAyKM,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0ChD,MAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/shaders/heatmap.d.ts

@@ -0,0 +1,31 @@
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import type { ShaderSizingParams, ShaderSizingUniforms } from '../shader-sizing.js';
+export declare const heatmapMeta: {
+    readonly maxColorCount: 10;
+};
+export declare const heatmapFragmentShader: string;
+export declare function toProcessedHeatmap(file: File | string): Promise<{
+    blob: Blob;
+}>;
+export interface HeatmapUniforms extends ShaderSizingUniforms {
+    u_image: HTMLImageElement | string | undefined;
+    u_contour: number;
+    u_angle: number;
+    u_noise: number;
+    u_innerGlow: number;
+    u_outerGlow: number;
+    u_colorBack: [number, number, number, number];
+    u_colors: vec4[];
+    u_colorsCount: number;
+}
+export interface HeatmapParams extends ShaderSizingParams, ShaderMotionParams {
+    image?: HTMLImageElement | string | undefined;
+    contour?: number;
+    angle?: number;
+    noise?: number;
+    innerGlow?: number;
+    outerGlow?: number;
+    colorBack?: string;
+    colors?: string[];
+}

package/dist/shaders/heatmap.js

@@ -0,0 +1,301 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+const heatmapMeta = {
+  maxColorCount: 10
+};
+const heatmapFragmentShader = `#version 300 es
+precision highp float;
+
+in mediump vec2 v_imageUV;
+in mediump vec2 v_objectUV;
+out vec4 fragColor;
+
+uniform sampler2D u_image;
+uniform float u_time;
+uniform float u_imageAspectRatio;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${heatmapMeta.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_angle;
+uniform float u_noise;
+uniform float u_innerGlow;
+uniform float u_outerGlow;
+uniform float u_contour;
+
+#define TWO_PI 6.28318530718
+#define PI 3.14159265358979323846
+
+float getImgFrame(vec2 uv, float th) {
+  float frame = 1.;
+  frame *= smoothstep(0., th, uv.y);
+  frame *= smoothstep(1., 1. - th, uv.y);
+  frame *= smoothstep(0., th, uv.x);
+  frame *= smoothstep(1., 1. - th, uv.x);
+  return frame;
+}
+
+float circle(vec2 uv, vec2 c, vec2 r) {
+  return 1. - smoothstep(r[0], r[1], length(uv - c));
+}
+
+float lst(float edge0, float edge1, float x) {
+  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+}
+
+float sst(float edge0, float edge1, float x) {
+  return smoothstep(edge0, edge1, x);
+}
+
+float shadowShape(vec2 uv, float t, float contour) {
+  vec2 scaledUV = uv;
+
+  // base shape tranjectory
+  float posY = mix(-1., 2., t);
+
+  // scaleX when it's moving down
+  scaledUV.y -= .5;
+  float mainCircleScale = sst(0., .8, posY) * lst(1.4, .9, posY);
+  scaledUV *= vec2(1., 1. + 1.5 * mainCircleScale);
+  scaledUV.y += .5;
+
+  // base shape
+  float innerR = .4;
+  float outerR = 1. - .3 * (sst(.1, .2, t) * sst(.5, .2, t));
+  float s = circle(scaledUV, vec2(.5, posY - .2), vec2(innerR, outerR));
+  float shapeSizing = sst(.0, .3, t) * sst(.6, .3, t);
+  s = pow(s, 1.2 + .4 * shapeSizing);
+  s *= (1. + .7 * shapeSizing);
+
+  // flat gradient to take over the shadow shape
+  float topFlattener = 0.;
+  {
+    float pos = posY - uv.y;
+    float edge = 1.2;
+    topFlattener = lst(-.4, 0., pos) * sst(edge, .0, pos);
+    topFlattener = pow(topFlattener, 3.);
+    float topFlattenerMixer = (1. - sst(.0, .3, pos));
+    s = mix(topFlattener, s, topFlattenerMixer);
+  }
+
+  // apple right circle
+  {
+    float visibility = sst(.6, .7, t) * sst(.9, .8, t);
+    float angle = -2. -t * TWO_PI;
+    float rightCircle = circle(uv, vec2(.95 - .2 * cos(angle), .4 - .1 * sin(angle)), vec2(.15, .3));
+    rightCircle *= visibility;
+    s = mix(s, 0., rightCircle);
+  }
+
+  // apple top circle
+  {
+    float topCircle = circle(uv, vec2(.5, .19), vec2(.05, .25));
+    topCircle += 2. * contour * circle(uv, vec2(.5, .19), vec2(.2, .5));
+    float visibility = .55 * sst(.2, .3, t) * sst(.45, .3, t);
+    topCircle *= visibility;
+    s = mix(s, 0., topCircle);
+  }
+
+  float leafMask = circle(uv, vec2(.53, .13), vec2(.08, .19));
+  leafMask = mix(leafMask, 0., sst(.54, .4, uv.x));
+  leafMask = mix(0., leafMask, sst(.0, .2, uv.y));
+  leafMask *= (sst(.5, 1.1, posY) * sst(1.5, 1.3, posY));
+  s += leafMask;
+
+  // apple bottom circle
+  {
+    float visibility = sst(.0, .4, t) * sst(.8, .6, t);
+    s = mix(s, 0., visibility * circle(uv, vec2(.52, .92), vec2(.09, .25)));
+  }
+
+  // random balls that are invisible if apple logo is selected
+  {
+    float pos = sst(.0, .6, t) * sst(1., .6, t);
+    s = mix(s, .5, circle(uv, vec2(.0, 1.2 - .5 * pos), vec2(.1, .3)));
+    s = mix(s, .0, circle(uv, vec2(1., .5 + .5 * pos), vec2(.1, .3)));
+
+    s = mix(s, 1., circle(uv, vec2(.95, .2 + .2 * sst(.3, .4, t) * sst(.7, .5, t)), vec2(.07, .22)));
+    s /= sst(1., .85, uv.y);
+  }
+
+  s = clamp(0., 1., s);
+  return s;
+}
+
+
+void main() {
+  vec2 uv = v_objectUV + .5;
+  uv.y = 1. - uv.y;
+
+  vec2 imgUV = v_imageUV;
+  imgUV -= .5;
+  imgUV *= 0.5714285714285714;
+  imgUV += .5;
+  float imgSoftFrame = getImgFrame(imgUV, .03);
+  
+  vec4 img = texture(u_image, imgUV);
+  if (img.a == 0.) {
+    fragColor = u_colorBack;
+    return;
+  }
+
+  float t = .1 * u_time;
+  t -= .31;
+
+  float tCopy = t + 1. / 3.;
+  float tCopy2 = t + 2. / 3.;
+
+  t = mod(t, 1.);
+  tCopy = mod(tCopy, 1.);
+  tCopy2 = mod(tCopy2, 1.);
+
+  vec2 animationUV = imgUV - vec2(.5);
+  float angle = u_angle * PI / 180.;
+  float cosA = cos(angle);
+  float sinA = sin(angle);
+  animationUV = vec2(
+  animationUV.x * cosA - animationUV.y * sinA,
+  animationUV.x * sinA + animationUV.y * cosA
+  ) + vec2(.5);
+
+  float shape = img[0];
+  float outerBlur = 1. - mix(1., img[1], shape);
+  float innerBlur = mix(img[1], 0., shape);
+  float contour = mix(img[2], 0., shape);
+
+  outerBlur *= imgSoftFrame;
+
+  float shadow = shadowShape(animationUV, t, innerBlur);
+  float shadowCopy = shadowShape(animationUV, tCopy, innerBlur);
+  float shadowCopy2 = shadowShape(animationUV, tCopy2, innerBlur);
+
+  float inner = .8 + .8 * innerBlur;
+  inner = mix(inner, 0., shadow);
+  inner = mix(inner, 0., shadowCopy);
+  inner = mix(inner, 0., shadowCopy2);
+
+  inner *= mix(0., 2., u_innerGlow);
+
+  inner += (u_contour * 2.) * contour;
+  inner = min(1., inner);
+  inner *= (1. - shape);
+
+  float outer = 0.;
+  {
+    t *= 3.;
+    t = mod(t - .2, 1.);
+
+    outer = outerBlur;
+    float animatedMask = sst(.1, .65, mod(animationUV.y - t, 1.)) * sst(1., .65, mod(animationUV.y - t, 1.));
+    animatedMask = .5 + animatedMask;
+    outer *= animatedMask;
+    outer *= mix(0., 5., pow(u_outerGlow, 2.));
+    outer *= imgSoftFrame;
+  }
+
+  inner = pow(inner, 1.2);
+  float heat = clamp(inner + outer, 0., 1.);
+
+  heat += (.005 + .35 * u_noise) * (fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453123) - .5);
+
+  float mixer = heat * u_colorsCount;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  float outerShape = 0.;
+  for (int i = 1; i < ${heatmapMeta.maxColorCount + 1}; i++) {
+    if (i > int(u_colorsCount)) break;
+    float m = clamp(mixer - float(i - 1), 0., 1.);
+    if (i == 1) {
+      outerShape = m;
+    }
+    vec4 c = u_colors[i - 1];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, m);
+  }
+
+  vec3 color = gradient.rgb * outerShape;
+  float opacity = gradient.a * outerShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  color += .02 * (fract(sin(dot(uv + 1., vec2(12.9898, 78.233))) * 43758.5453123) - .5);
+  
+  fragColor = vec4(color, 1.);
+}
+`;
+function toProcessedHeatmap(file) {
+  const canvas = document.createElement("canvas");
+  const canvasSize = 1e3;
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.addEventListener("load", () => {
+      if (typeof file === "string" ? file.endsWith(".svg") : file.type === "image/svg+xml") {
+        image.width = canvasSize;
+        image.height = canvasSize;
+      }
+      const ratio = image.naturalWidth / image.naturalHeight;
+      const maxBlur = Math.floor(canvasSize * 0.15);
+      const padding = Math.ceil(maxBlur * 2.5);
+      let imgWidth = canvasSize;
+      let imgHeight = canvasSize;
+      if (ratio > 1) {
+        imgHeight = Math.floor(canvasSize / ratio);
+      } else {
+        imgWidth = Math.floor(canvasSize * ratio);
+      }
+      canvas.width = imgWidth + 2 * padding;
+      canvas.height = imgHeight + 2 * padding;
+      const ctx = canvas.getContext("2d", { willReadFrequently: true });
+      if (!ctx) {
+        throw new Error("Failed to get canvas 2d context");
+      }
+      ctx.fillStyle = "white";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.filter = "grayscale(100%) blur(" + maxBlur + "px)";
+      ctx.drawImage(image, padding, padding, imgWidth, imgHeight);
+      const bigBlurData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.filter = "grayscale(100%) blur(" + Math.round(0.12 * maxBlur) + "px)";
+      ctx.drawImage(image, padding, padding, imgWidth, imgHeight);
+      const innerBlurSmallData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.filter = "grayscale(100%) blur(5px)";
+      ctx.drawImage(image, padding, padding, imgWidth, imgHeight);
+      const contourData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+      let processedImageData = ctx.createImageData(canvas.width, canvas.height);
+      const totalPixels = canvas.width * canvas.height;
+      for (let i = 0; i < totalPixels; i++) {
+        const px = i * 4;
+        processedImageData.data[px] = contourData[px];
+        processedImageData.data[px + 1] = bigBlurData[px];
+        processedImageData.data[px + 2] = innerBlurSmallData[px];
+        processedImageData.data[px + 3] = 255;
+      }
+      ctx.putImageData(processedImageData, 0, 0);
+      canvas.toBlob((blob) => {
+        if (!blob) {
+          reject(new Error("Failed to create PNG blob"));
+          return;
+        }
+        resolve({ blob });
+      }, "image/png");
+    });
+    image.addEventListener("error", () => {
+      reject(new Error("Failed to load image"));
+    });
+    image.src = typeof file === "string" ? file : URL.createObjectURL(file);
+  });
+}
+export {
+  heatmapFragmentShader,
+  heatmapMeta,
+  toProcessedHeatmap
+};
+//# sourceMappingURL=heatmap.js.map

package/dist/shaders/heatmap.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/heatmap.ts"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport type { ShaderSizingParams, ShaderSizingUniforms } from '../shader-sizing.js';\n\nexport const heatmapMeta = {\n  maxColorCount: 10,\n} as const;\n\n// language=GLSL\nexport const heatmapFragmentShader: string = `#version 300 es\nprecision highp float;\n\nin mediump vec2 v_imageUV;\nin mediump vec2 v_objectUV;\nout vec4 fragColor;\n\nuniform sampler2D u_image;\nuniform float u_time;\nuniform float u_imageAspectRatio;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${heatmapMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_angle;\nuniform float u_noise;\nuniform float u_innerGlow;\nuniform float u_outerGlow;\nuniform float u_contour;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nfloat getImgFrame(vec2 uv, float th) {\n  float frame = 1.;\n  frame *= smoothstep(0., th, uv.y);\n  frame *= smoothstep(1., 1. - th, uv.y);\n  frame *= smoothstep(0., th, uv.x);\n  frame *= smoothstep(1., 1. - th, uv.x);\n  return frame;\n}\n\nfloat circle(vec2 uv, vec2 c, vec2 r) {\n  return 1. - smoothstep(r[0], r[1], length(uv - c));\n}\n\nfloat lst(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nfloat sst(float edge0, float edge1, float x) {\n  return smoothstep(edge0, edge1, x);\n}\n\nfloat shadowShape(vec2 uv, float t, float contour) {\n  vec2 scaledUV = uv;\n\n  // base shape tranjectory\n  float posY = mix(-1., 2., t);\n\n  // scaleX when it's moving down\n  scaledUV.y -= .5;\n  float mainCircleScale = sst(0., .8, posY) * lst(1.4, .9, posY);\n  scaledUV *= vec2(1., 1. + 1.5 * mainCircleScale);\n  scaledUV.y += .5;\n\n  // base shape\n  float innerR = .4;\n  float outerR = 1. - .3 * (sst(.1, .2, t) * sst(.5, .2, t));\n  float s = circle(scaledUV, vec2(.5, posY - .2), vec2(innerR, outerR));\n  float shapeSizing = sst(.0, .3, t) * sst(.6, .3, t);\n  s = pow(s, 1.2 + .4 * shapeSizing);\n  s *= (1. + .7 * shapeSizing);\n\n  // flat gradient to take over the shadow shape\n  float topFlattener = 0.;\n  {\n    float pos = posY - uv.y;\n    float edge = 1.2;\n    topFlattener = lst(-.4, 0., pos) * sst(edge, .0, pos);\n    topFlattener = pow(topFlattener, 3.);\n    float topFlattenerMixer = (1. - sst(.0, .3, pos));\n    s = mix(topFlattener, s, topFlattenerMixer);\n  }\n\n  // apple right circle\n  {\n    float visibility = sst(.6, .7, t) * sst(.9, .8, t);\n    float angle = -2. -t * TWO_PI;\n    float rightCircle = circle(uv, vec2(.95 - .2 * cos(angle), .4 - .1 * sin(angle)), vec2(.15, .3));\n    rightCircle *= visibility;\n    s = mix(s, 0., rightCircle);\n  }\n\n  // apple top circle\n  {\n    float topCircle = circle(uv, vec2(.5, .19), vec2(.05, .25));\n    topCircle += 2. * contour * circle(uv, vec2(.5, .19), vec2(.2, .5));\n    float visibility = .55 * sst(.2, .3, t) * sst(.45, .3, t);\n    topCircle *= visibility;\n    s = mix(s, 0., topCircle);\n  }\n\n  float leafMask = circle(uv, vec2(.53, .13), vec2(.08, .19));\n  leafMask = mix(leafMask, 0., sst(.54, .4, uv.x));\n  leafMask = mix(0., leafMask, sst(.0, .2, uv.y));\n  leafMask *= (sst(.5, 1.1, posY) * sst(1.5, 1.3, posY));\n  s += leafMask;\n\n  // apple bottom circle\n  {\n    float visibility = sst(.0, .4, t) * sst(.8, .6, t);\n    s = mix(s, 0., visibility * circle(uv, vec2(.52, .92), vec2(.09, .25)));\n  }\n\n  // random balls that are invisible if apple logo is selected\n  {\n    float pos = sst(.0, .6, t) * sst(1., .6, t);\n    s = mix(s, .5, circle(uv, vec2(.0, 1.2 - .5 * pos), vec2(.1, .3)));\n    s = mix(s, .0, circle(uv, vec2(1., .5 + .5 * pos), vec2(.1, .3)));\n\n    s = mix(s, 1., circle(uv, vec2(.95, .2 + .2 * sst(.3, .4, t) * sst(.7, .5, t)), vec2(.07, .22)));\n    s /= sst(1., .85, uv.y);\n  }\n\n  s = clamp(0., 1., s);\n  return s;\n}\n\n\nvoid main() {\n  vec2 uv = v_objectUV + .5;\n  uv.y = 1. - uv.y;\n\n  vec2 imgUV = v_imageUV;\n  imgUV -= .5;\n  imgUV *= 0.5714285714285714;\n  imgUV += .5;\n  float imgSoftFrame = getImgFrame(imgUV, .03);\n  \n  vec4 img = texture(u_image, imgUV);\n  if (img.a == 0.) {\n    fragColor = u_colorBack;\n    return;\n  }\n\n  float t = .1 * u_time;\n  t -= .31;\n\n  float tCopy = t + 1. / 3.;\n  float tCopy2 = t + 2. / 3.;\n\n  t = mod(t, 1.);\n  tCopy = mod(tCopy, 1.);\n  tCopy2 = mod(tCopy2, 1.);\n\n  vec2 animationUV = imgUV - vec2(.5);\n  float angle = u_angle * PI / 180.;\n  float cosA = cos(angle);\n  float sinA = sin(angle);\n  animationUV = vec2(\n  animationUV.x * cosA - animationUV.y * sinA,\n  animationUV.x * sinA + animationUV.y * cosA\n  ) + vec2(.5);\n\n  float shape = img[0];\n  float outerBlur = 1. - mix(1., img[1], shape);\n  float innerBlur = mix(img[1], 0., shape);\n  float contour = mix(img[2], 0., shape);\n\n  outerBlur *= imgSoftFrame;\n\n  float shadow = shadowShape(animationUV, t, innerBlur);\n  float shadowCopy = shadowShape(animationUV, tCopy, innerBlur);\n  float shadowCopy2 = shadowShape(animationUV, tCopy2, innerBlur);\n\n  float inner = .8 + .8 * innerBlur;\n  inner = mix(inner, 0., shadow);\n  inner = mix(inner, 0., shadowCopy);\n  inner = mix(inner, 0., shadowCopy2);\n\n  inner *= mix(0., 2., u_innerGlow);\n\n  inner += (u_contour * 2.) * contour;\n  inner = min(1., inner);\n  inner *= (1. - shape);\n\n  float outer = 0.;\n  {\n    t *= 3.;\n    t = mod(t - .2, 1.);\n\n    outer = outerBlur;\n    float animatedMask = sst(.1, .65, mod(animationUV.y - t, 1.)) * sst(1., .65, mod(animationUV.y - t, 1.));\n    animatedMask = .5 + animatedMask;\n    outer *= animatedMask;\n    outer *= mix(0., 5., pow(u_outerGlow, 2.));\n    outer *= imgSoftFrame;\n  }\n\n  inner = pow(inner, 1.2);\n  float heat = clamp(inner + outer, 0., 1.);\n\n  heat += (.005 + .35 * u_noise) * (fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453123) - .5);\n\n  float mixer = heat * u_colorsCount;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  float outerShape = 0.;\n  for (int i = 1; i < ${heatmapMeta.maxColorCount + 1}; i++) {\n    if (i > int(u_colorsCount)) break;\n    float m = clamp(mixer - float(i - 1), 0., 1.);\n    if (i == 1) {\n      outerShape = m;\n    }\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  vec3 color = gradient.rgb * outerShape;\n  float opacity = gradient.a * outerShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  color += .02 * (fract(sin(dot(uv + 1., vec2(12.9898, 78.233))) * 43758.5453123) - .5);\n  \n  fragColor = vec4(color, 1.);\n}\n`;\n\nexport function toProcessedHeatmap(file: File | string): Promise<{ blob: Blob }> {\n  const canvas = document.createElement('canvas');\n  const canvasSize = 1000;\n\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.crossOrigin = 'anonymous';\n\n    image.addEventListener('load', () => {\n      if (typeof file === 'string' ? file.endsWith('.svg') : file.type === 'image/svg+xml') {\n        // Force SVG to load at a high fidelity size if it's an SVG\n        image.width = canvasSize;\n        image.height = canvasSize;\n      }\n\n      const ratio = image.naturalWidth / image.naturalHeight;\n\n      const maxBlur = Math.floor(canvasSize * 0.15);\n      const padding = Math.ceil(maxBlur * 2.5);\n      let imgWidth = canvasSize;\n      let imgHeight = canvasSize;\n      if (ratio > 1) {\n        imgHeight = Math.floor(canvasSize / ratio);\n      } else {\n        imgWidth = Math.floor(canvasSize * ratio);\n      }\n\n      canvas.width = imgWidth + 2 * padding;\n      canvas.height = imgHeight + 2 * padding;\n\n      const ctx = canvas.getContext('2d', { willReadFrequently: true });\n      if (!ctx) {\n        throw new Error('Failed to get canvas 2d context');\n      }\n\n      ctx.fillStyle = 'white';\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\n      ctx.filter = 'grayscale(100%) blur(' + maxBlur + 'px)';\n      ctx.drawImage(image, padding, padding, imgWidth, imgHeight);\n      const bigBlurData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\n\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\n      ctx.filter = 'grayscale(100%) blur(' + Math.round(0.12 * maxBlur) + 'px)';\n      ctx.drawImage(image, padding, padding, imgWidth, imgHeight);\n      const innerBlurSmallData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\n\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\n      ctx.filter = 'grayscale(100%) blur(5px)';\n      ctx.drawImage(image, padding, padding, imgWidth, imgHeight);\n      const contourData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\n\n      let processedImageData = ctx.createImageData(canvas.width, canvas.height);\n      const totalPixels = canvas.width * canvas.height;\n      for (let i = 0; i < totalPixels; i++) {\n        const px = i * 4;\n        processedImageData.data[px] = contourData[px]!;\n        processedImageData.data[px + 1] = bigBlurData[px]!;\n        processedImageData.data[px + 2] = innerBlurSmallData[px]!;\n        processedImageData.data[px + 3] = 255;\n      }\n      ctx.putImageData(processedImageData, 0, 0);\n\n      canvas.toBlob((blob) => {\n        if (!blob) {\n          reject(new Error('Failed to create PNG blob'));\n          return;\n        }\n\n        resolve({ blob });\n      }, 'image/png');\n    });\n\n    image.addEventListener('error', () => {\n      reject(new Error('Failed to load image'));\n    });\n\n    image.src = typeof file === 'string' ? file : URL.createObjectURL(file);\n  });\n}\n\nexport interface HeatmapUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_contour: number;\n  u_angle: number;\n  u_noise: number;\n  u_innerGlow: number;\n  u_outerGlow: number;\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n}\n\nexport interface HeatmapParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  contour?: number;\n  angle?: number;\n  noise?: number;\n  innerGlow?: number;\n  outerGlow?: number;\n  colorBack?: string;\n  colors?: string[];\n}\n"],
+  "mappings": ";;;;;AAIO,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAGO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAYrB,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA4LzB,YAAY,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwB9C,SAAS,mBAAmB,MAA8C;AAC/E,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,aAAa;AAEnB,SAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACtC,UAAM,QAAQ,IAAI,MAAM;AACxB,UAAM,cAAc;AAEpB,UAAM,iBAAiB,QAAQ,MAAM;AACnC,UAAI,OAAO,SAAS,WAAW,KAAK,SAAS,MAAM,IAAI,KAAK,SAAS,iBAAiB;AAEpF,cAAM,QAAQ;AACd,cAAM,SAAS;AAAA,MACjB;AAEA,YAAM,QAAQ,MAAM,eAAe,MAAM;AAEzC,YAAM,UAAU,KAAK,MAAM,aAAa,IAAI;AAC5C,YAAM,UAAU,KAAK,KAAK,UAAU,GAAG;AACvC,UAAI,WAAW;AACf,UAAI,YAAY;AAChB,UAAI,QAAQ,GAAG;AACb,oBAAY,KAAK,MAAM,aAAa,KAAK;AAAA,MAC3C,OAAO;AACL,mBAAW,KAAK,MAAM,aAAa,KAAK;AAAA,MAC1C;AAEA,aAAO,QAAQ,WAAW,IAAI;AAC9B,aAAO,SAAS,YAAY,IAAI;AAEhC,YAAM,MAAM,OAAO,WAAW,MAAM,EAAE,oBAAoB,KAAK,CAAC;AAChE,UAAI,CAAC,KAAK;AACR,cAAM,IAAI,MAAM,iCAAiC;AAAA,MACnD;AAEA,UAAI,YAAY;AAChB,UAAI,SAAS,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AAC9C,UAAI,SAAS,0BAA0B,UAAU;AACjD,UAAI,UAAU,OAAO,SAAS,SAAS,UAAU,SAAS;AAC1D,YAAM,cAAc,IAAI,aAAa,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM,EAAE;AAExE,UAAI,SAAS,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AAC9C,UAAI,SAAS,0BAA0B,KAAK,MAAM,OAAO,OAAO,IAAI;AACpE,UAAI,UAAU,OAAO,SAAS,SAAS,UAAU,SAAS;AAC1D,YAAM,qBAAqB,IAAI,aAAa,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM,EAAE;AAE/E,UAAI,SAAS,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AAC9C,UAAI,SAAS;AACb,UAAI,UAAU,OAAO,SAAS,SAAS,UAAU,SAAS;AAC1D,YAAM,cAAc,IAAI,aAAa,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM,EAAE;AAExE,UAAI,qBAAqB,IAAI,gBAAgB,OAAO,OAAO,OAAO,MAAM;AACxE,YAAM,cAAc,OAAO,QAAQ,OAAO;AAC1C,eAAS,IAAI,GAAG,IAAI,aAAa,KAAK;AACpC,cAAM,KAAK,IAAI;AACf,2BAAmB,KAAK,EAAE,IAAI,YAAY,EAAE;AAC5C,2BAAmB,KAAK,KAAK,CAAC,IAAI,YAAY,EAAE;AAChD,2BAAmB,KAAK,KAAK,CAAC,IAAI,mBAAmB,EAAE;AACvD,2BAAmB,KAAK,KAAK,CAAC,IAAI;AAAA,MACpC;AACA,UAAI,aAAa,oBAAoB,GAAG,CAAC;AAEzC,aAAO,OAAO,CAAC,SAAS;AACtB,YAAI,CAAC,MAAM;AACT,iBAAO,IAAI,MAAM,2BAA2B,CAAC;AAC7C;AAAA,QACF;AAEA,gBAAQ,EAAE,KAAK,CAAC;AAAA,MAClB,GAAG,WAAW;AAAA,IAChB,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,IAAI,MAAM,sBAAsB,CAAC;AAAA,IAC1C,CAAC;AAED,UAAM,MAAM,OAAO,SAAS,WAAW,OAAO,IAAI,gBAAgB,IAAI;AAAA,EACxE,CAAC;AACH;",
+  "names": []
+}

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

@@ -2,7 +2,7 @@ import type { ShaderMotionParams } from '../shader-mount.js';
 import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 /**
  *
- * Fractal-like structure made of several layers of since arches
+ * Fractal-like structure made of several layers of sine arches
  * Original algorithm: https://x.com/zozuar/status/1625182758745128981/
  *
  * Uniforms:

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/neuro-noise.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, colorBandingFix } from '../shader-utils.js';\n\n/**\n *\n * Fractal-like structure made of several layers of since arches\n * Original algorithm: https://x.com/zozuar/status/1625182758745128981/\n *\n * Uniforms:\n * - u_colorBack, u_colorMid, u_colorFront (RGBA)\n * - u_brightness, u_contrast\n *\n */\n\n// language=GLSL\nexport const neuroNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorMid;\nuniform vec4 u_colorBack;\nuniform float u_brightness;\nuniform float u_contrast;\n\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${rotation2}\n\nfloat neuroShape(vec2 uv, float t) {\n  vec2 sine_acc = vec2(0.);\n  vec2 res = vec2(0.);\n  float scale = 8.;\n\n  for (int j = 0; j < 15; j++) {\n    uv = rotate(uv, 1.);\n    sine_acc = rotate(sine_acc, 1.);\n    vec2 layer = uv * scale + float(j) + sine_acc - t;\n    sine_acc += sin(layer);\n    res += (.5 + .5 * cos(layer)) / scale;\n    scale *= (1.2);\n  }\n  return res.x + res.y;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= .13;\n\n  float t = .5 * u_time;\n\n  float noise = neuroShape(shape_uv, t);\n\n  noise = (1. + u_brightness) * pow(noise, 2.);\n  noise = pow(noise, .7 + 6. * u_contrast);\n  noise = min(1.4, noise);\n\n  float blend = smoothstep(0.7, 1.4, noise);\n\n  vec4 frontC = u_colorFront;\n  frontC.rgb *= frontC.a;\n  vec4 midC = u_colorMid;\n  midC.rgb *= midC.a;\n  vec4 blendFront = mix(midC, frontC, blend);\n\n  float safeNoise = max(noise, 0.0);\n  vec3 color = blendFront.rgb * safeNoise;\n  float opacity = clamp(blendFront.a * safeNoise, 0., 1.);\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 NeuroNoiseUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorMid: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_brightness: number;\n  u_contrast: number;\n}\n\nexport interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colorFront?: string;\n  colorMid?: string;\n  colorBack?: string;\n  brightness?: number;\n  contrast?: number;\n}\n"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, colorBandingFix } from '../shader-utils.js';\n\n/**\n *\n * Fractal-like structure made of several layers of sine arches\n * Original algorithm: https://x.com/zozuar/status/1625182758745128981/\n *\n * Uniforms:\n * - u_colorBack, u_colorMid, u_colorFront (RGBA)\n * - u_brightness, u_contrast\n *\n */\n\n// language=GLSL\nexport const neuroNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorMid;\nuniform vec4 u_colorBack;\nuniform float u_brightness;\nuniform float u_contrast;\n\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${rotation2}\n\nfloat neuroShape(vec2 uv, float t) {\n  vec2 sine_acc = vec2(0.);\n  vec2 res = vec2(0.);\n  float scale = 8.;\n\n  for (int j = 0; j < 15; j++) {\n    uv = rotate(uv, 1.);\n    sine_acc = rotate(sine_acc, 1.);\n    vec2 layer = uv * scale + float(j) + sine_acc - t;\n    sine_acc += sin(layer);\n    res += (.5 + .5 * cos(layer)) / scale;\n    scale *= (1.2);\n  }\n  return res.x + res.y;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= .13;\n\n  float t = .5 * u_time;\n\n  float noise = neuroShape(shape_uv, t);\n\n  noise = (1. + u_brightness) * pow(noise, 2.);\n  noise = pow(noise, .7 + 6. * u_contrast);\n  noise = min(1.4, noise);\n\n  float blend = smoothstep(0.7, 1.4, noise);\n\n  vec4 frontC = u_colorFront;\n  frontC.rgb *= frontC.a;\n  vec4 midC = u_colorMid;\n  midC.rgb *= midC.a;\n  vec4 blendFront = mix(midC, frontC, blend);\n\n  float safeNoise = max(noise, 0.0);\n  vec3 color = blendFront.rgb * safeNoise;\n  float opacity = clamp(blendFront.a * safeNoise, 0., 1.);\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 NeuroNoiseUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorMid: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_brightness: number;\n  u_contrast: number;\n}\n\nexport interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colorFront?: string;\n  colorMid?: string;\n  colorBack?: string;\n  brightness?: number;\n  contrast?: number;\n}\n"],
   "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAcpC,MAAM,2BAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc9C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8CP,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/paper-texture.js

@@ -205,27 +205,30 @@ void main() {
   normalImage += .2 * fiber;
 
   vec3 lightPos = vec3(1., 2., 1.);
-  float res = clamp(dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos)), 0., 1.);
+  float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));
 
   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;
 
+  imageUV += .02 * normalImage;
+  float frame = getUvFrame(imageUV);
+  vec4 image = texture(u_image, imageUV);
+  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);
+  
+  frame *= image.a;
+
   vec3 color = fgColor * res;
   float opacity = fgOpacity * res;
 
   color += bgColor * (1. - opacity);
   opacity += bgOpacity * (1. - opacity);
+  opacity = mix(opacity, 1., frame);
   
   color -= .007 * drops;
 
-  imageUV += .02 * normalImage;
-  vec4 image = texture(u_image, imageUV);
-  image.rgb += .5 * (res - .6);
-
-  float frame = getUvFrame(imageUV);
-  color.rgb = mix(color, image.rgb, min(.8 * frame, image.a));
+  color.rgb = mix(color, image.rgb, frame);
 
   fragColor = vec4(color, opacity);
 }

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 { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, declarePI, fiberNoise, textureRandomizerR } from '../shader-utils.js';\n\n/**\n * Mimicking paper texture with a combination of noises\n *\n * Uniforms:\n * - u_colorFront, u_colorBack (RGBA)\n * - u_contrast - mixing front and back colors\n * - u_roughness - pixel noise, related to canvas => not scalable\n * - u_fiber, u_fiberScale - curly shaped noise\n * - u_crumples, u_crumplesScale - cell-based pattern\n * - u_folds, u_foldsNumber - lines pattern, 15 max\n * - u_drops - metaballs-like pattern\n * - u_seed - applied to folds, crumples and dots\n * - u_blur - big-scale noise mask applied to everything but roughness\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const paperTextureFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\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_fiberScale;\nuniform float u_crumples;\nuniform float u_crumplesScale;\nuniform float u_folds;\nuniform float u_foldsNumber;\nuniform float u_drops;\nuniform float u_seed;\nuniform float u_blur;\n\nuniform sampler2D u_noiseTexture;\n\n${sizingVariablesDeclaration}\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  = smoothstep(1., 1. - aax, uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top    = smoothstep(1., 1. - aay, 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(cl / wsum, .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_foldsNumber) 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\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 * .1 * u_crumplesScale - u_seed) * 32.;\n  float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV));\n\n  vec2 fiberUV = 10. * u_fiberScale * 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  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  float blur = u_blur * smoothstep(0., 1., fbm(.17 * patternUV + 10. * u_seed));\n  normal *= (1. - 2. * blur);\n  fiber *= (1. - blur);\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 = clamp(dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos)), 0., 1.);\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  color -= .007 * drops;\n\n  imageUV += .02 * normalImage;\n  vec4 image = texture(u_image, imageUV);\n  image.rgb += .5 * (res - .6);\n\n  float frame = getUvFrame(imageUV);\n  color.rgb = mix(color, image.rgb, min(.8 * frame, image.a));\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_fiberScale: number;\n  u_crumples: number;\n  u_foldsNumber: number;\n  u_folds: number;\n  u_blur: number;\n  u_crumplesScale: number;\n  u_drops: number;\n  u_seed: number;\n}\n\nexport interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  colorFront?: string;\n  colorBack?: string;\n  contrast?: number;\n  roughness?: number;\n  fiber?: number;\n  fiberScale?: number;\n  crumples?: number;\n  foldsNumber?: number;\n  folds?: number;\n  blur?: number;\n  crumplesScale?: number;\n  drops?: number;\n  seed?: number;\n}\n"],
-  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,YAAY,0BAA0B;AAqB9D,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,EA2BhD,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgB1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2ClB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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 { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, declarePI, fiberNoise, textureRandomizerR } from '../shader-utils.js';\n\n/**\n * Mimicking paper texture with a combination of noises\n *\n * Uniforms:\n * - u_colorFront, u_colorBack (RGBA)\n * - u_contrast - mixing front and back colors\n * - u_roughness - pixel noise, related to canvas => not scalable\n * - u_fiber, u_fiberScale - curly shaped noise\n * - u_crumples, u_crumplesScale - cell-based pattern\n * - u_folds, u_foldsNumber - lines pattern, 15 max\n * - u_drops - metaballs-like pattern\n * - u_seed - applied to folds, crumples and dots\n * - u_blur - big-scale noise mask applied to everything but roughness\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const paperTextureFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\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_fiberScale;\nuniform float u_crumples;\nuniform float u_crumplesScale;\nuniform float u_folds;\nuniform float u_foldsNumber;\nuniform float u_drops;\nuniform float u_seed;\nuniform float u_blur;\n\nuniform sampler2D u_noiseTexture;\n\n${sizingVariablesDeclaration}\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  = smoothstep(1., 1. - aax, uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top    = smoothstep(1., 1. - aay, 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(cl / wsum, .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_foldsNumber) 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\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 * .1 * u_crumplesScale - u_seed) * 32.;\n  float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV));\n\n  vec2 fiberUV = 10. * u_fiberScale * 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  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  float blur = u_blur * smoothstep(0., 1., fbm(.17 * patternUV + 10. * u_seed));\n  normal *= (1. - 2. * blur);\n  fiber *= (1. - blur);\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_fiberScale: number;\n  u_crumples: number;\n  u_foldsNumber: number;\n  u_folds: number;\n  u_blur: number;\n  u_crumplesScale: number;\n  u_drops: number;\n  u_seed: number;\n}\n\nexport interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  colorFront?: string;\n  colorBack?: string;\n  contrast?: number;\n  roughness?: number;\n  fiber?: number;\n  fiberScale?: number;\n  crumples?: number;\n  foldsNumber?: number;\n  folds?: number;\n  blur?: number;\n  crumplesScale?: number;\n  drops?: number;\n  seed?: number;\n}\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,YAAY,0BAA0B;AAqB9D,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,EA2BhD,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgB1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2ClB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/pulsing-border.js

@@ -146,7 +146,7 @@ void main() {
     m *= (1. - clamp(length((v3 + maskOffset) / maskR), 0., 1.));
     cornerFadeMask += m;
   }
-
+  cornerFade = clamp(cornerFade, 0., 1.);
   cornerFade *= cornerFadeMask;
   border += cornerFade;
 
@@ -161,6 +161,8 @@ void main() {
   smoke = clamp(smoke, 0., 1.);
 
   border += smoke;
+  float borderBounds = 1. - smoothstep(.9, 1., length(v_responsiveUV));
+  border *= borderBounds;
   border = clamp(border, 0., 1.);
 
   vec3 blendColor = vec3(0.);

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 { sizingVariablesDeclaration, 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 * Color spots traveling around rectangular stroke (border)\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_roundness, u_thickness, u_softness: border parameters\n * - u_intensity: thickness of individual spots\n * - u_bloom: normal / additive color blending\n * - u_spotSize: angular size of spots\n * - u_spots (float used as int): number of spots rendered per color\n * - u_pulse: optional pulsing animation\n * - u_smoke, u_smokeSize: optional noisy shapes around the border\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\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_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\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat beat(float time) {\n  float first = pow(sin(time * TWO_PI), 10.);\n  float second = pow(sin((time - 0.15) * TWO_PI), 10.);\n\n  return clamp(first + 0.6 * second, 0.0, 1.0);\n}\n\nfloat roundedBox(vec2 uv, float distance) {\n  float thickness = .5 * u_thickness;\n  float borderDistance = abs(distance);\n  float border = 1. - smoothstep(-u_softness * thickness - 2. * fwidth(borderDistance), .5 * u_softness * thickness, borderDistance - .5 * thickness);\n  border = pow(border, 2.);\n\n  return border;\n}\n\nfloat roundedBoxSmoke(vec2 uv, float distance, float size) {\n  float borderDistance = abs(distance);\n  float border = 1. - smoothstep(-.75 * size, .75 * size, borderDistance);\n  border *= border;\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\nfloat linearstep(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nvoid main() {\n\n  float t = 1.2 * u_time;\n\n  vec2 borderUV = v_responsiveUV;\n\n  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n\n  float pulse = u_pulse * beat(.18 * u_time);\n\n  float borderRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  borderUV.x *= borderRatio;\n  vec2 halfSize = vec2(.5);\n  halfSize.x *= borderRatio;\n  float radius = min(.5 * u_roundness, halfSize.x);\n  vec2 d = abs(borderUV) - halfSize + radius;\n  float outsideDistance = length(max(d, 0.)) - radius;\n  float insideDistance = min(max(d.x, d.y), 0.0);\n  float distance = outsideDistance + insideDistance;\n\n  float border = roundedBox(borderUV, distance);\n\n  vec2 v0 = borderUV + halfSize;\n  vec2 v1 = borderUV - vec2(-halfSize.x, halfSize.y);\n  vec2 v2 = borderUV - vec2(halfSize.x, -halfSize.y);\n  vec2 v3 = borderUV - halfSize;\n\n  float cornerFade = 1. - abs(v0.x - v0.y);\n  cornerFade = max(cornerFade, 1. - abs(v1.x + v1.y));\n  cornerFade = max(cornerFade, 1. - abs(v2.x + v2.y));\n  cornerFade = max(cornerFade, 1. - abs(v3.x - v3.y));\n  cornerFade = .75 * pow(cornerFade, 20.);\n\n  float cornerFadeMask = 0.;\n  float maskR = (.35 * u_thickness - .25 * radius);\n  float maskHL = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, borderUV.x);\n  float maskHR = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, -borderUV.x);\n  float maskVT = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, -borderUV.y);\n  float maskVB = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, borderUV.y);\n  float maskOffset = .25 * (u_thickness + radius);\n  {\n    float m = maskHR;\n    m *= maskVT;\n    m *= (1. - clamp(length((v0 - maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHR;\n    m *= maskVB;\n    m *= (1. - clamp(length((v1 - vec2(1., -1.) * maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHL;\n    m *= maskVT;\n    m *= (1. - clamp(length((v2 - vec2(-1., 1.) * maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHL;\n    m *= maskVB;\n    m *= (1. - clamp(length((v3 + maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n\n  cornerFade *= cornerFadeMask;\n  border += cornerFade;\n\n  vec2 smokeUV = .2 * 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  smoke *= roundedBoxSmoke(borderUV, distance, u_smoke);\n  smoke = 30. * pow(smoke, 2.);\n  smoke += cornerFadeMask;\n  smoke *= u_smoke;\n  smoke *= mix(1., pulse, u_pulse);\n  smoke = clamp(smoke, 0., 1.);\n\n  border += smoke;\n  border = clamp(border, 0., 1.);\n\n  vec3 blendColor = vec3(0.);\n  float blendAlpha = 0.0;\n  vec3 addColor = vec3(0.);\n  float addAlpha = 0.0;\n\n  float bloom = 4. * u_bloom;\n  float intensity = 1. + 4. * u_intensity;\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 = smoothstep(.5 - spotSize, .5, atg1) * smoothstep(.5 + spotSize, .5, 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_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  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"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,qBAAqB,uBAAuB;AAEzD,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,UAAU;AACZ;AAqBO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAerD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBT,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAgHiB,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAO/B,kBAAkB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8C5D,eAAe;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, 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 * Color spots traveling around rectangular stroke (border)\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_roundness, u_thickness, u_softness: border parameters\n * - u_intensity: thickness of individual spots\n * - u_bloom: normal / additive color blending\n * - u_spotSize: angular size of spots\n * - u_spots (float used as int): number of spots rendered per color\n * - u_pulse: optional pulsing animation\n * - u_smoke, u_smokeSize: optional noisy shapes around the border\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\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_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\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat beat(float time) {\n  float first = pow(sin(time * TWO_PI), 10.);\n  float second = pow(sin((time - 0.15) * TWO_PI), 10.);\n\n  return clamp(first + 0.6 * second, 0.0, 1.0);\n}\n\nfloat roundedBox(vec2 uv, float distance) {\n  float thickness = .5 * u_thickness;\n  float borderDistance = abs(distance);\n  float border = 1. - smoothstep(-u_softness * thickness - 2. * fwidth(borderDistance), .5 * u_softness * thickness, borderDistance - .5 * thickness);\n  border = pow(border, 2.);\n\n  return border;\n}\n\nfloat roundedBoxSmoke(vec2 uv, float distance, float size) {\n  float borderDistance = abs(distance);\n  float border = 1. - smoothstep(-.75 * size, .75 * size, borderDistance);\n  border *= border;\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\nfloat linearstep(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nvoid main() {\n\n  float t = 1.2 * u_time;\n\n  vec2 borderUV = v_responsiveUV;\n\n  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n\n  float pulse = u_pulse * beat(.18 * u_time);\n\n  float borderRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  borderUV.x *= borderRatio;\n  vec2 halfSize = vec2(.5);\n  halfSize.x *= borderRatio;\n  float radius = min(.5 * u_roundness, halfSize.x);\n  vec2 d = abs(borderUV) - halfSize + radius;\n  float outsideDistance = length(max(d, 0.)) - radius;\n  float insideDistance = min(max(d.x, d.y), 0.0);\n  float distance = outsideDistance + insideDistance;\n\n  float border = roundedBox(borderUV, distance);\n\n  vec2 v0 = borderUV + halfSize;\n  vec2 v1 = borderUV - vec2(-halfSize.x, halfSize.y);\n  vec2 v2 = borderUV - vec2(halfSize.x, -halfSize.y);\n  vec2 v3 = borderUV - halfSize;\n\n  float cornerFade = 1. - abs(v0.x - v0.y);\n  cornerFade = max(cornerFade, 1. - abs(v1.x + v1.y));\n  cornerFade = max(cornerFade, 1. - abs(v2.x + v2.y));\n  cornerFade = max(cornerFade, 1. - abs(v3.x - v3.y));\n  cornerFade = .75 * pow(cornerFade, 20.);\n\n  float cornerFadeMask = 0.;\n  float maskR = (.35 * u_thickness - .25 * radius);\n  float maskHL = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, borderUV.x);\n  float maskHR = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, -borderUV.x);\n  float maskVT = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, -borderUV.y);\n  float maskVB = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, borderUV.y);\n  float maskOffset = .25 * (u_thickness + radius);\n  {\n    float m = maskHR;\n    m *= maskVT;\n    m *= (1. - clamp(length((v0 - maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHR;\n    m *= maskVB;\n    m *= (1. - clamp(length((v1 - vec2(1., -1.) * maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHL;\n    m *= maskVT;\n    m *= (1. - clamp(length((v2 - vec2(-1., 1.) * maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHL;\n    m *= maskVB;\n    m *= (1. - clamp(length((v3 + maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  cornerFade = clamp(cornerFade, 0., 1.);\n  cornerFade *= cornerFadeMask;\n  border += cornerFade;\n\n  vec2 smokeUV = .2 * 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  smoke *= roundedBoxSmoke(borderUV, distance, u_smoke);\n  smoke = 30. * pow(smoke, 2.);\n  smoke += cornerFadeMask;\n  smoke *= u_smoke;\n  smoke *= mix(1., pulse, u_pulse);\n  smoke = clamp(smoke, 0., 1.);\n\n  border += smoke;\n  float borderBounds = 1. - smoothstep(.9, 1., length(v_responsiveUV));\n  border *= borderBounds;\n  border = clamp(border, 0., 1.);\n\n  vec3 blendColor = vec3(0.);\n  float blendAlpha = 0.0;\n  vec3 addColor = vec3(0.);\n  float addAlpha = 0.0;\n\n  float bloom = 4. * u_bloom;\n  float intensity = 1. + 4. * u_intensity;\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 = smoothstep(.5 - spotSize, .5, atg1) * smoothstep(.5 + spotSize, .5, 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_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  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"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,qBAAqB,uBAAuB;AAEzD,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,UAAU;AACZ;AAqBO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAerD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBT,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAkHiB,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAO/B,kBAAkB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8C5D,eAAe;AAAA;AAAA;AAAA;",
   "names": []
 }