@paper-design/shaders 0.0.54 → 0.0.56

package/dist/shaders/dithering.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dithering.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingUV,\n  drawSizingHelpers,\n} from '../shader-sizing.js';\nimport { simplexNoise, declarePI, proceduralHash11, proceduralHash21 } from '../shader-utils.js';\n\n/**\n * 2-color dithering effect over animated abstract shapes\n *\n * Uniforms:\n * - u_colorBack, u_colorFront (RGBA)\n * - pxSize: px size relative to canvas resolution\n * - u_shape (float used as integer):\n * ---- 1: simplex noise pattern\n * ---- 2: warp noise pattern\n * ---- 3: columns of dots moving vertically\n * ---- 4: sine wave\n * ---- 5: ripple effect\n * ---- 6: swirl animation\n * ---- 7: rotating sphere\n *  - u_type (float used as integer)\n * ---- 1: random dithering\n * ---- 2: 2x2 Bayer matrix\n * ---- 3: 4x4 Bayer matrix\n * ---- 4: 8x8 Bayer matrix\n *\n * Note: pixelization is applied to the shapes BEFORE dithering, meaning pixels don't react to scaling and fit\n */\n\n// language=GLSL\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\n${sizingUniformsDeclaration}\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFront;\nuniform float u_shape;\nuniform float u_type;\nuniform float u_pxSize;\n\nout vec4 fragColor;\n\n${simplexNoise}\n${declarePI}\n${proceduralHash11}\n${proceduralHash21}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n  float t = .5 * u_time;\n\n  #define USE_PATTERN_SIZING\n  #define USE_OBJECT_SIZING\n  #define USE_PIXELIZATION\n  // #define ADD_HELPERS\n\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = uv * u_resolution;\n  vec2 shape_uv = objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = patternUV;\n  }\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // Simplex noise\n    shape_uv *= .001;\n\n    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);\n    shape = smoothstep(0.3, 0.9, shape);\n\n  } else if (u_shape < 2.5) {\n    // Warp\n    shape_uv *= .003;\n\n    for (float i = 1.0; i < 6.0; i++) {\n      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);\n      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);\n    }\n\n    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));\n    shape = smoothstep(0.02, 1., shape);\n\n  } else if (u_shape < 3.5) {\n    // Dots\n    shape_uv *= .05;\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = hash11(stripeIdx * 10.);\n    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);\n    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);\n    shape = pow(abs(shape), 6.);\n\n  } else if (u_shape < 4.5) {\n    // Sine wave\n    shape_uv *= 4.;\n\n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    float dist = length(shape_uv);\n    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Swirl\n\n    float l = length(shape_uv);\n    float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;\n    float twist = 1.2;\n    float offset = pow(l, -twist) + angle / TWO_PI;\n    float mid = smoothstep(0., 1., pow(l, twist));\n    shape = mix(0., fract(offset), mid);\n\n  } else {\n    // Sphere\n    shape_uv *= 2.;\n\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\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  switch (type) {\n    case 1: {\n      dithering = step(hash21(ditheringNoise_uv), shape);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n  dithering -= .5;\n  float res = step(.5, shape + dithering);\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  #ifdef ADD_HELPERS\n    vec2 helperBox = objectHelperBox;\n    vec2 boxSize = objectBoxSize;\n    if (u_shape < 3.5) {\n      helperBox = patternHelperBox;\n      boxSize = patternBoxSize;\n    }\n    ${drawSizingHelpers}\n  #endif\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DitheringUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFront: [number, number, number, number];\n  u_shape: (typeof DitheringShapes)[DitheringShape];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n}\n\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorFront?: string;\n  shape?: DitheringShape;\n  type?: DitheringType;\n  pxSize?: number;\n}\n\nexport const DitheringShapes = {\n  simplex: 1,\n  warp: 2,\n  dots: 3,\n  wave: 4,\n  ripple: 5,\n  swirl: 6,\n  sphere: 7,\n} as const;\n\nexport type DitheringShape = keyof typeof DitheringShapes;\n\nexport const DitheringTypes = {\n  'random': 1,\n  '2x2': 2,\n  '4x4': 3,\n  '8x8': 4,\n} as const;\n\nexport type DitheringType = keyof typeof DitheringTypes;\n"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingUV,\n  drawSizingHelpers,\n} from '../shader-sizing.js';\nimport { simplexNoise, declarePI, proceduralHash11, proceduralHash21 } from '../shader-utils.js';\n\n/**\n * 2-color dithering effect over animated abstract shapes\n *\n * Uniforms:\n * - u_colorBack, u_colorFront (RGBA)\n * - pxSize: px size relative to canvas resolution\n * - u_shape (float used as integer):\n * ---- 1: simplex noise pattern\n * ---- 2: warp noise pattern\n * ---- 3: columns of dots moving vertically\n * ---- 4: sine wave\n * ---- 5: ripple effect\n * ---- 6: swirl animation\n * ---- 7: rotating sphere\n *  - u_type (float used as integer)\n * ---- 1: random dithering\n * ---- 2: 2x2 Bayer matrix\n * ---- 3: 4x4 Bayer matrix\n * ---- 4: 8x8 Bayer matrix\n *\n * Note: pixelization is applied to the shapes BEFORE dithering, meaning pixels don't react to scaling and fit\n */\n\n// language=GLSL\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\n${sizingUniformsDeclaration}\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFront;\nuniform float u_shape;\nuniform float u_type;\nuniform float u_pxSize;\n\nout vec4 fragColor;\n\n${simplexNoise}\n${declarePI}\n${proceduralHash11}\n${proceduralHash21}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n  float t = .5 * u_time;\n\n  #define USE_PATTERN_SIZING\n  #define USE_OBJECT_SIZING\n  #define USE_PIXELIZATION\n  // #define ADD_HELPERS\n\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = uv * u_resolution;\n  vec2 shape_uv = objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = patternUV;\n  }\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // Simplex noise\n    shape_uv *= .001;\n\n    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);\n    shape = smoothstep(0.3, 0.9, shape);\n\n  } else if (u_shape < 2.5) {\n    // Warp\n    shape_uv *= .003;\n\n    for (float i = 1.0; i < 6.0; i++) {\n      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);\n      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);\n    }\n\n    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));\n    shape = smoothstep(0.02, 1., shape);\n\n  } else if (u_shape < 3.5) {\n    // Dots\n    shape_uv *= .05;\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = hash11(stripeIdx * 10.);\n    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);\n    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);\n    shape = pow(abs(shape), 6.);\n\n  } else if (u_shape < 4.5) {\n    // Sine wave\n    shape_uv *= 4.;\n\n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    float dist = length(shape_uv);\n    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Swirl\n\n    float l = length(shape_uv);\n    float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;\n    float twist = 1.2;\n    float offset = pow(l, -twist) + angle / TWO_PI;\n    float mid = smoothstep(0., 1., pow(l, twist));\n    shape = mix(0., fract(offset), mid);\n\n  } else {\n    // Sphere\n    shape_uv *= 2.;\n\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\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  switch (type) {\n    case 1: {\n      dithering = step(hash21(ditheringNoise_uv), shape);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n  dithering -= .5;\n  float res = step(.5, shape + dithering);\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  #ifdef ADD_HELPERS\n    vec2 helperBox = objectHelperBox;\n    vec2 boxSize = objectBoxSize;\n    if (u_shape < 3.5) {\n      helperBox = patternHelperBox;\n      boxSize = patternBoxSize;\n    }\n    ${drawSizingHelpers}\n  #endif\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DitheringUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFront: [number, number, number, number];\n  u_shape: (typeof DitheringShapes)[DitheringShape];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n}\n\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorFront?: string;\n  shape?: DitheringShape;\n  type?: DitheringType;\n  size?: number;\n}\n\nexport const DitheringShapes = {\n  simplex: 1,\n  warp: 2,\n  dots: 3,\n  wave: 4,\n  ripple: 5,\n  swirl: 6,\n  sphere: 7,\n} as const;\n\nexport type DitheringShape = keyof typeof DitheringShapes;\n\nexport const DitheringTypes = {\n  'random': 1,\n  '2x2': 2,\n  '4x4': 3,\n  '8x8': 4,\n} as const;\n\nexport type DitheringType = keyof typeof DitheringTypes;\n"],
   "mappings": ";;;;;AACA;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc,WAAW,kBAAkB,wBAAwB;AA0BrE,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO7C,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmDd,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAkHN,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBhB,MAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAIO,MAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;",
   "names": []
 }

package/dist/shaders/fluted-glass.d.ts

@@ -24,7 +24,7 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  */
 export declare const flutedGlassFragmentShader: string;
 export interface FlutedGlassUniforms extends ShaderSizingUniforms {
-    u_image: HTMLImageElement | string | undefined;
+    u_image: HTMLImageElement | string;
     u_size: number;
     u_angle: number;
     u_distortion: number;
@@ -40,12 +40,13 @@ export interface FlutedGlassUniforms extends ShaderSizingUniforms {
     u_noiseTexture?: HTMLImageElement;
 }
 export interface FlutedGlassParams extends ShaderSizingParams, ShaderMotionParams {
-    image?: HTMLImageElement | string | undefined;
+    image: HTMLImageElement | string;
     size?: number;
     angle?: number;
     distortion?: number;
     shift?: number;
     blur?: number;
+    margin?: number;
     marginLeft?: number;
     marginRight?: number;
     marginTop?: number;

package/dist/shaders/fluted-glass.js

@@ -77,7 +77,7 @@ vec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) {
 
 void main() {
   vec2 imageUV = v_imageUV;
-  
+
   vec2 uv = imageUV;
   float frame = getUvFrame(imageUV);
   if (frame < .05) discard;
@@ -100,7 +100,7 @@ void main() {
   float patternRotation = u_angle * PI / 180.;
   uv = rotate(uv - vec2(.5), patternRotation);
   uv *= effectSize;
-  
+
   float curve = 0.;
   if (u_shape > 4.5) {
     // pattern
@@ -152,12 +152,12 @@ void main() {
   uv.x += xDistortion / effectSize;
   uv += pow(stroke, 4.);
   uv.y = mix(uv.y, .0, .4 * u_edges * edges);
-  
+
   uv = rotate(uv, -patternRotation) + vec2(.5);
 
   uv = mix(imageUV, uv, mask);
   float blur = mix(0., u_blur, mask);
-  
+
   vec4 color = getBlur(u_image, uv, 1. / u_resolution / u_pixelRatio, vec2(0., 1.), blur);
 
   float opacity = color.a;

package/dist/shaders/fluted-glass.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/fluted-glass.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2 } from '../shader-utils.js';\n\n/**\n * Mimicking glass surface distortion over the image by distorting the texture\n * coordinates within line patterns\n *\n * Uniforms:\n * - u_size, u_angle - size and direction of grid relative to the image\n * - u_shape (float used as integer):\n * ---- 1: uniformly spaced stripes\n * ---- 2: randomly spaced stripes\n * ---- 3: sine wave stripes\n * ---- 4: zigzag stripes\n * ---- 5: wave-based pattern\n * - u_distortion - the power of distortion applied along within each stripe\n * - u_distortionShape (float used as integer):\n * ---- 5 shapes available\n * - u_shift - texture shift in direction opposite to the grid\n * - u_blur - one-directional blur applied over the main distortion\n * - u_edges - thin color lines along the grid (independent from distortion)\n * - u_marginLeft, u_marginRight, u_marginTop, u_marginBottom - paddings\n *   within picture to be shown without any distortion\n *\n */\n\n// language=GLSL\nexport const flutedGlassFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_size;\nuniform float u_angle;\nuniform float u_edges;\nuniform float u_shape;\nuniform float u_distortion;\nuniform float u_distortionShape;\nuniform float u_shift;\nuniform float u_blur;\nuniform float u_marginLeft;\nuniform float u_marginRight;\nuniform float u_marginTop;\nuniform float u_marginBottom;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\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\nconst int MAX_RADIUS = 50;\n\nvec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) {\n  if (sigma <= .5) return texture(tex, uv);\n  int radius = int(min(float(MAX_RADIUS), ceil(3.0 * sigma)));\n\n  float twoSigma2 = 2.0 * sigma * sigma;\n  float gaussianNorm = 1.0 / sqrt(TWO_PI * sigma * sigma);\n\n  vec4 sum = texture(tex, uv) * gaussianNorm;\n  float weightSum = gaussianNorm;\n\n  for (int i = 1; i <= MAX_RADIUS; i++) {\n    if (i > radius) break;\n\n    float x = float(i);\n    float w = exp(-(x * x) / twoSigma2) * gaussianNorm;\n\n    vec2 offset = dir * texelSize * x;\n    vec4 s1 = texture(tex, uv + offset);\n    vec4 s2 = texture(tex, uv - offset);\n\n    sum += (s1 + s2) * w;\n    weightSum += 2.0 * w;\n  }\n\n  return sum / weightSum;\n}\n\nvoid main() {\n  vec2 imageUV = v_imageUV;\n  \n  vec2 uv = imageUV;\n  float frame = getUvFrame(imageUV);\n  if (frame < .05) discard;\n\n  float effectSize = 1. / pow(.7 * (u_size + .5), 6.);\n\n  vec2 sw = vec2(.005 * u_distortion) * vec2(1., u_imageAspectRatio);\n  float maskOuter =\n    smoothstep(u_marginLeft - sw.x, u_marginLeft, imageUV.x + sw.x) *\n    smoothstep(u_marginRight - sw.x, u_marginRight, 1.0 - imageUV.x + sw.x) *\n    smoothstep(u_marginTop - sw.y, u_marginTop, imageUV.y + sw.y) *\n    smoothstep(u_marginBottom - sw.y, u_marginBottom, 1.0 - imageUV.y + sw.y);\n  float mask =\n    smoothstep(u_marginLeft, u_marginLeft + sw.x, imageUV.x + sw.x) *\n    smoothstep(u_marginRight, u_marginRight + sw.x, 1.0 - imageUV.x + sw.x) *\n    smoothstep(u_marginTop, u_marginTop + sw.y, imageUV.y + sw.y) *\n    smoothstep(u_marginBottom, u_marginBottom + sw.y, 1.0 - imageUV.y + sw.y);\n  float stroke = (1. - mask) * maskOuter;\n\n  float patternRotation = u_angle * PI / 180.;\n  uv = rotate(uv - vec2(.5), patternRotation);\n  uv *= effectSize;\n  \n  float curve = 0.;\n  if (u_shape > 4.5) {\n    // pattern\n    curve = .5 + .5 * sin(1.5 * uv.x) * cos(1.5 * uv.y);\n  } else if (u_shape > 3.5) {\n    // zigzag\n    curve = 10. * abs(fract(.1 * uv.y) - .5);\n  } else if (u_shape > 2.5) {\n    // wave\n    curve = 4. * sin(.23 * uv.y);\n  } else if (u_shape > 1.5) {\n    // lines irregular\n    curve = .5 + .5 * sin(.5 * uv.x) * sin(1.7 * uv.x);\n  } else {\n    // lines\n  }\n\n  vec2 uvOrig = uv;\n  uv += curve;\n\n  vec2 fractUV = fract(uv);\n  vec2 floorUV = floor(uv);\n\n  vec2 fractOrigUV = fract(uvOrig);\n  vec2 floorOrigUV = floor(uvOrig);\n\n  float edges = smoothstep(.85, .95, fractUV.x);\n  edges *= mask;\n\n  float xDistortion = 0.;\n  if (u_distortionShape == 1.) {\n    xDistortion = -pow(1.5 * fractUV.x, 3.) + (.5 + u_shift);\n  } else if (u_distortionShape == 2.) {\n    xDistortion = 2. * pow(fractUV.x, 2.) - (.5 + u_shift);\n  } else if (u_distortionShape == 3.) {\n    xDistortion = pow(2. * (fractUV.x - .5), 6.) + .5 - .5 + u_shift;\n  } else if (u_distortionShape == 4.) {\n    xDistortion = sin((fractUV.x + .25 + u_shift) * TWO_PI);\n    xDistortion *= .5;\n  } else if (u_distortionShape == 5.) {\n    xDistortion += (.5 + u_shift);\n    xDistortion -= pow(abs(fractUV.x), .2) * fractUV.x;\n    xDistortion *= .33;\n  }\n\n  xDistortion *= 3. * u_distortion;\n\n  uv = (floorOrigUV + fractOrigUV) / effectSize;\n  uv.x += xDistortion / effectSize;\n  uv += pow(stroke, 4.);\n  uv.y = mix(uv.y, .0, .4 * u_edges * edges);\n  \n  uv = rotate(uv, -patternRotation) + vec2(.5);\n\n  uv = mix(imageUV, uv, mask);\n  float blur = mix(0., u_blur, mask);\n  \n  vec4 color = getBlur(u_image, uv, 1. / u_resolution / u_pixelRatio, vec2(0., 1.), blur);\n\n  float opacity = color.a;\n  fragColor = vec4(color.rgb, opacity);\n}\n`;\n\nexport interface FlutedGlassUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_size: number;\n  u_angle: number;\n  u_distortion: number;\n  u_shift: number;\n  u_blur: number;\n  u_marginLeft: number;\n  u_marginRight: number;\n  u_marginTop: number;\n  u_marginBottom: number;\n  u_edges: number;\n  u_distortionShape: (typeof GlassDistortionShapes)[GlassDistortionShape];\n  u_shape: (typeof GlassGridShapes)[GlassGridShape];\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface FlutedGlassParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  size?: number;\n  angle?: number;\n  distortion?: number;\n  shift?: number;\n  blur?: number;\n  marginLeft?: number;\n  marginRight?: number;\n  marginTop?: number;\n  marginBottom?: number;\n  edges?: number;\n  distortionShape?: GlassDistortionShape;\n  shape?: GlassGridShape;\n}\n\nexport const GlassGridShapes = {\n  lines: 1,\n  linesIrregular: 2,\n  wave: 3,\n  zigzag: 4,\n  pattern: 5,\n} as const;\n\nexport const GlassDistortionShapes = {\n  prism: 1,\n  lens: 2,\n  contour: 3,\n  cascade: 4,\n  facete: 5,\n} as const;\n\nexport type GlassDistortionShape = keyof typeof GlassDistortionShapes;\nexport type GlassGridShape = keyof typeof GlassGridShapes;\n"],
-  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,iBAAiB;AA0B9B,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsB/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsKJ,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,MAAM,wBAAwB;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2 } from '../shader-utils.js';\n\n/**\n * Mimicking glass surface distortion over the image by distorting the texture\n * coordinates within line patterns\n *\n * Uniforms:\n * - u_size, u_angle - size and direction of grid relative to the image\n * - u_shape (float used as integer):\n * ---- 1: uniformly spaced stripes\n * ---- 2: randomly spaced stripes\n * ---- 3: sine wave stripes\n * ---- 4: zigzag stripes\n * ---- 5: wave-based pattern\n * - u_distortion - the power of distortion applied along within each stripe\n * - u_distortionShape (float used as integer):\n * ---- 5 shapes available\n * - u_shift - texture shift in direction opposite to the grid\n * - u_blur - one-directional blur applied over the main distortion\n * - u_edges - thin color lines along the grid (independent from distortion)\n * - u_marginLeft, u_marginRight, u_marginTop, u_marginBottom - paddings\n *   within picture to be shown without any distortion\n *\n */\n\n// language=GLSL\nexport const flutedGlassFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_size;\nuniform float u_angle;\nuniform float u_edges;\nuniform float u_shape;\nuniform float u_distortion;\nuniform float u_distortionShape;\nuniform float u_shift;\nuniform float u_blur;\nuniform float u_marginLeft;\nuniform float u_marginRight;\nuniform float u_marginTop;\nuniform float u_marginBottom;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\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\nconst int MAX_RADIUS = 50;\n\nvec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) {\n  if (sigma <= .5) return texture(tex, uv);\n  int radius = int(min(float(MAX_RADIUS), ceil(3.0 * sigma)));\n\n  float twoSigma2 = 2.0 * sigma * sigma;\n  float gaussianNorm = 1.0 / sqrt(TWO_PI * sigma * sigma);\n\n  vec4 sum = texture(tex, uv) * gaussianNorm;\n  float weightSum = gaussianNorm;\n\n  for (int i = 1; i <= MAX_RADIUS; i++) {\n    if (i > radius) break;\n\n    float x = float(i);\n    float w = exp(-(x * x) / twoSigma2) * gaussianNorm;\n\n    vec2 offset = dir * texelSize * x;\n    vec4 s1 = texture(tex, uv + offset);\n    vec4 s2 = texture(tex, uv - offset);\n\n    sum += (s1 + s2) * w;\n    weightSum += 2.0 * w;\n  }\n\n  return sum / weightSum;\n}\n\nvoid main() {\n  vec2 imageUV = v_imageUV;\n\n  vec2 uv = imageUV;\n  float frame = getUvFrame(imageUV);\n  if (frame < .05) discard;\n\n  float effectSize = 1. / pow(.7 * (u_size + .5), 6.);\n\n  vec2 sw = vec2(.005 * u_distortion) * vec2(1., u_imageAspectRatio);\n  float maskOuter =\n    smoothstep(u_marginLeft - sw.x, u_marginLeft, imageUV.x + sw.x) *\n    smoothstep(u_marginRight - sw.x, u_marginRight, 1.0 - imageUV.x + sw.x) *\n    smoothstep(u_marginTop - sw.y, u_marginTop, imageUV.y + sw.y) *\n    smoothstep(u_marginBottom - sw.y, u_marginBottom, 1.0 - imageUV.y + sw.y);\n  float mask =\n    smoothstep(u_marginLeft, u_marginLeft + sw.x, imageUV.x + sw.x) *\n    smoothstep(u_marginRight, u_marginRight + sw.x, 1.0 - imageUV.x + sw.x) *\n    smoothstep(u_marginTop, u_marginTop + sw.y, imageUV.y + sw.y) *\n    smoothstep(u_marginBottom, u_marginBottom + sw.y, 1.0 - imageUV.y + sw.y);\n  float stroke = (1. - mask) * maskOuter;\n\n  float patternRotation = u_angle * PI / 180.;\n  uv = rotate(uv - vec2(.5), patternRotation);\n  uv *= effectSize;\n\n  float curve = 0.;\n  if (u_shape > 4.5) {\n    // pattern\n    curve = .5 + .5 * sin(1.5 * uv.x) * cos(1.5 * uv.y);\n  } else if (u_shape > 3.5) {\n    // zigzag\n    curve = 10. * abs(fract(.1 * uv.y) - .5);\n  } else if (u_shape > 2.5) {\n    // wave\n    curve = 4. * sin(.23 * uv.y);\n  } else if (u_shape > 1.5) {\n    // lines irregular\n    curve = .5 + .5 * sin(.5 * uv.x) * sin(1.7 * uv.x);\n  } else {\n    // lines\n  }\n\n  vec2 uvOrig = uv;\n  uv += curve;\n\n  vec2 fractUV = fract(uv);\n  vec2 floorUV = floor(uv);\n\n  vec2 fractOrigUV = fract(uvOrig);\n  vec2 floorOrigUV = floor(uvOrig);\n\n  float edges = smoothstep(.85, .95, fractUV.x);\n  edges *= mask;\n\n  float xDistortion = 0.;\n  if (u_distortionShape == 1.) {\n    xDistortion = -pow(1.5 * fractUV.x, 3.) + (.5 + u_shift);\n  } else if (u_distortionShape == 2.) {\n    xDistortion = 2. * pow(fractUV.x, 2.) - (.5 + u_shift);\n  } else if (u_distortionShape == 3.) {\n    xDistortion = pow(2. * (fractUV.x - .5), 6.) + .5 - .5 + u_shift;\n  } else if (u_distortionShape == 4.) {\n    xDistortion = sin((fractUV.x + .25 + u_shift) * TWO_PI);\n    xDistortion *= .5;\n  } else if (u_distortionShape == 5.) {\n    xDistortion += (.5 + u_shift);\n    xDistortion -= pow(abs(fractUV.x), .2) * fractUV.x;\n    xDistortion *= .33;\n  }\n\n  xDistortion *= 3. * u_distortion;\n\n  uv = (floorOrigUV + fractOrigUV) / effectSize;\n  uv.x += xDistortion / effectSize;\n  uv += pow(stroke, 4.);\n  uv.y = mix(uv.y, .0, .4 * u_edges * edges);\n\n  uv = rotate(uv, -patternRotation) + vec2(.5);\n\n  uv = mix(imageUV, uv, mask);\n  float blur = mix(0., u_blur, mask);\n\n  vec4 color = getBlur(u_image, uv, 1. / u_resolution / u_pixelRatio, vec2(0., 1.), blur);\n\n  float opacity = color.a;\n  fragColor = vec4(color.rgb, opacity);\n}\n`;\n\nexport interface FlutedGlassUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string;\n  u_size: number;\n  u_angle: number;\n  u_distortion: number;\n  u_shift: number;\n  u_blur: number;\n  u_marginLeft: number;\n  u_marginRight: number;\n  u_marginTop: number;\n  u_marginBottom: number;\n  u_edges: number;\n  u_distortionShape: (typeof GlassDistortionShapes)[GlassDistortionShape];\n  u_shape: (typeof GlassGridShapes)[GlassGridShape];\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface FlutedGlassParams extends ShaderSizingParams, ShaderMotionParams {\n  image: HTMLImageElement | string;\n  size?: number;\n  angle?: number;\n  distortion?: number;\n  shift?: number;\n  blur?: number;\n  margin?: number;\n  marginLeft?: number;\n  marginRight?: number;\n  marginTop?: number;\n  marginBottom?: number;\n  edges?: number;\n  distortionShape?: GlassDistortionShape;\n  shape?: GlassGridShape;\n}\n\nexport const GlassGridShapes = {\n  lines: 1,\n  linesIrregular: 2,\n  wave: 3,\n  zigzag: 4,\n  pattern: 5,\n} as const;\n\nexport const GlassDistortionShapes = {\n  prism: 1,\n  lens: 2,\n  contour: 3,\n  cascade: 4,\n  facete: 5,\n} as const;\n\nexport type GlassDistortionShape = keyof typeof GlassDistortionShapes;\nexport type GlassGridShape = keyof typeof GlassGridShapes;\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,iBAAiB;AA0B9B,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsB/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuKJ,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,MAAM,wBAAwB;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;",
   "names": []
 }

package/dist/shaders/heatmap.d.ts

@@ -9,7 +9,7 @@ export declare function toProcessedHeatmap(file: File | string): Promise<{
     blob: Blob;
 }>;
 export interface HeatmapUniforms extends ShaderSizingUniforms {
-    u_image: HTMLImageElement | string | undefined;
+    u_image: HTMLImageElement | string;
     u_contour: number;
     u_angle: number;
     u_noise: number;
@@ -20,7 +20,7 @@ export interface HeatmapUniforms extends ShaderSizingUniforms {
     u_colorsCount: number;
 }
 export interface HeatmapParams extends ShaderSizingParams, ShaderMotionParams {
-    image?: HTMLImageElement | string | undefined;
+    image: HTMLImageElement | string;
     contour?: number;
     angle?: number;
     noise?: number;

package/dist/shaders/heatmap.js

@@ -15,7 +15,7 @@ out vec4 fragColor;
 
 uniform sampler2D u_image;
 uniform float u_time;
-uniform float u_imageAspectRatio;
+uniform mediump float u_imageAspectRatio;
 
 uniform vec4 u_colorBack;
 uniform vec4 u_colors[${heatmapMeta.maxColorCount}];
@@ -136,7 +136,7 @@ void main() {
   imgUV *= 0.5714285714285714;
   imgUV += .5;
   float imgSoftFrame = getImgFrame(imgUV, .03);
-  
+
   vec4 img = texture(u_image, imgUV);
   if (img.a == 0.) {
     fragColor = u_colorBack;
@@ -226,7 +226,7 @@ void main() {
   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, opacity);
 }
 `;

package/dist/shaders/heatmap.js.map

@@ -1,7 +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(.2, .3, t) * sst(.6, .3, t);\n  s = pow(s, 1.4);\n  s *= 1.2;\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 -= .3;\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 - .1, 1.);\n\n    outer = .9 * pow(outerBlur, .8);\n    float y = mod(animationUV.y - t, 1.);\n    float animatedMask = sst(.3, .65, y) * sst(1., .65, y);\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, opacity);\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"],
+  "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 mediump 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(.2, .3, t) * sst(.6, .3, t);\n  s = pow(s, 1.4);\n  s *= 1.2;\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 -= .3;\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 - .1, 1.);\n\n    outer = .9 * pow(outerBlur, .8);\n    float y = mod(animationUV.y - t, 1.);\n    float animatedMask = sst(.3, .65, y) * sst(1., .65, y);\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, opacity);\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;\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;\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;AAAA,wBA6LzB,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/image-dithering.d.ts

@@ -21,7 +21,7 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  */
 export declare const imageDitheringFragmentShader: string;
 export interface ImageDitheringUniforms extends ShaderSizingUniforms {
-    u_image: HTMLImageElement | string | undefined;
+    u_image: HTMLImageElement | string;
     u_colorFront: [number, number, number, number];
     u_colorBack: [number, number, number, number];
     u_colorHighlight: [number, number, number, number];
@@ -31,12 +31,12 @@ export interface ImageDitheringUniforms extends ShaderSizingUniforms {
     u_originalColors: boolean;
 }
 export interface ImageDitheringParams extends ShaderSizingParams, ShaderMotionParams {
-    image?: HTMLImageElement | string | undefined;
+    image: HTMLImageElement | string;
     colorFront?: string;
     colorBack?: string;
     colorHighlight?: string;
     type?: DitheringType;
-    pxSize?: number;
+    size?: number;
     colorSteps?: number;
     originalColors?: boolean;
 }

package/dist/shaders/image-dithering.js

@@ -114,7 +114,7 @@ void main() {
 
   float steps = max(floor(u_colorSteps), 1.);
   float ditherAmount = 1.0 / (steps);
-  
+
   vec3 color = vec3(0.0);
   float opacity = 1.;
 

package/dist/shaders/image-dithering.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/image-dithering.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingUV, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { proceduralHash21 } from '../shader-utils.js';\n\n/**\n * Dithering effect over user texture using 3-color palette\n * or colors sampled from original image\n *\n * Uniforms:\n * - u_colorBack, u_colorFront, u_colorHighlight (RGBA)\n *   (u_colorHighlight to be the lightest parts of u_colorFront pixels)\n * - pxSize: px size set relative to canvas resolution\n * - u_type (float used as integer)\n * ---- 1: random dithering\n * ---- 2: 2x2 Bayer matrix\n * ---- 3: 4x4 Bayer matrix\n * ---- 4: 8x8 Bayer matrix\n * - u_originalColors - switching between 3 colors palette and original image colors\n * - u_colorSteps - number of colors to use (applies to both color modes)\n *\n * Note: pixelization is applied to the shapes BEFORE dithering,\n *       meaning pixels don't react to scaling and fit\n */\n\n// language=GLSL\nexport const imageDitheringFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform mediump vec2 u_resolution;\nuniform mediump float u_pixelRatio;\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\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform mediump float u_imageAspectRatio;\n\nuniform float u_type;\nuniform float u_pxSize;\nuniform bool u_originalColors;\nuniform float u_colorSteps;\n\nout vec4 fragColor;\n\nfloat getUvFrame(vec2 uv, vec2 px) {\n  float left   = step(-px.x, uv.x);\n  float right  = step(uv.x, 1.);\n  float bottom = step(-px.y, uv.y);\n  float top    = step(uv.y, 1. + px.y);\n\n  return left * right * bottom * top;\n}\n\n${proceduralHash21}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n\n  #define USE_IMAGE_SIZING\n  #define USE_PIXELIZATION\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = u_resolution * uv;\n  vec4 image = texture(u_image, imageUV);\n  float frame = getUvFrame(imageUV, pxSize / u_resolution.xy);\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  float lum = dot(vec3(.2126, .7152, .0722), image.rgb);\n\n  switch (type) {\n    case 1: {\n      dithering = step(hash21(ditheringNoise_uv), lum);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n\n  float steps = max(floor(u_colorSteps), 1.);\n  float ditherAmount = 1.0 / (steps);\n  \n  vec3 color = vec3(0.0);\n  float opacity = 1.;\n\n  dithering -= .5;\n  float brightness = clamp(lum + dithering * ditherAmount, 0.0, 1.0);\n  brightness = mix(0.0, brightness, frame);\n  float quantLum = floor(brightness * steps + 0.5) / steps;\n\n  if (u_originalColors == true) {\n    vec3 normColor = image.rgb / max(lum, 0.001);\n    color = normColor * quantLum;\n\n    float quantAlpha = floor(image.a * steps + 0.5) / steps;\n    opacity = mix(quantLum, 1., quantAlpha);\n  } else {\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    vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a;\n    float hlOpacity = u_colorHighlight.a;\n\n    fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness));\n    fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness));\n\n    color = fgColor * quantLum;\n    opacity = fgOpacity * quantLum;\n    color += bgColor * (1.0 - opacity);\n    opacity += bgOpacity * (1.0 - opacity);\n  }\n\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface ImageDitheringUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n  u_colorSteps: number;\n  u_originalColors: boolean;\n}\n\nexport interface ImageDitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  colorFront?: string;\n  colorBack?: string;\n  colorHighlight?: string;\n  type?: DitheringType;\n  pxSize?: number;\n  colorSteps?: number;\n  originalColors?: boolean;\n}\n\nexport const DitheringTypes = {\n  'random': 1,\n  '2x2': 2,\n  '4x4': 3,\n  '8x8': 4,\n} as const;\n\nexport type DitheringType = keyof typeof DitheringTypes;\n"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingUV, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { proceduralHash21 } from '../shader-utils.js';\n\n/**\n * Dithering effect over user texture using 3-color palette\n * or colors sampled from original image\n *\n * Uniforms:\n * - u_colorBack, u_colorFront, u_colorHighlight (RGBA)\n *   (u_colorHighlight to be the lightest parts of u_colorFront pixels)\n * - pxSize: px size set relative to canvas resolution\n * - u_type (float used as integer)\n * ---- 1: random dithering\n * ---- 2: 2x2 Bayer matrix\n * ---- 3: 4x4 Bayer matrix\n * ---- 4: 8x8 Bayer matrix\n * - u_originalColors - switching between 3 colors palette and original image colors\n * - u_colorSteps - number of colors to use (applies to both color modes)\n *\n * Note: pixelization is applied to the shapes BEFORE dithering,\n *       meaning pixels don't react to scaling and fit\n */\n\n// language=GLSL\nexport const imageDitheringFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform mediump vec2 u_resolution;\nuniform mediump float u_pixelRatio;\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\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform mediump float u_imageAspectRatio;\n\nuniform float u_type;\nuniform float u_pxSize;\nuniform bool u_originalColors;\nuniform float u_colorSteps;\n\nout vec4 fragColor;\n\nfloat getUvFrame(vec2 uv, vec2 px) {\n  float left   = step(-px.x, uv.x);\n  float right  = step(uv.x, 1.);\n  float bottom = step(-px.y, uv.y);\n  float top    = step(uv.y, 1. + px.y);\n\n  return left * right * bottom * top;\n}\n\n${proceduralHash21}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n\n  #define USE_IMAGE_SIZING\n  #define USE_PIXELIZATION\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = u_resolution * uv;\n  vec4 image = texture(u_image, imageUV);\n  float frame = getUvFrame(imageUV, pxSize / u_resolution.xy);\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  float lum = dot(vec3(.2126, .7152, .0722), image.rgb);\n\n  switch (type) {\n    case 1: {\n      dithering = step(hash21(ditheringNoise_uv), lum);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n\n  float steps = max(floor(u_colorSteps), 1.);\n  float ditherAmount = 1.0 / (steps);\n\n  vec3 color = vec3(0.0);\n  float opacity = 1.;\n\n  dithering -= .5;\n  float brightness = clamp(lum + dithering * ditherAmount, 0.0, 1.0);\n  brightness = mix(0.0, brightness, frame);\n  float quantLum = floor(brightness * steps + 0.5) / steps;\n\n  if (u_originalColors == true) {\n    vec3 normColor = image.rgb / max(lum, 0.001);\n    color = normColor * quantLum;\n\n    float quantAlpha = floor(image.a * steps + 0.5) / steps;\n    opacity = mix(quantLum, 1., quantAlpha);\n  } else {\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    vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a;\n    float hlOpacity = u_colorHighlight.a;\n\n    fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness));\n    fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness));\n\n    color = fgColor * quantLum;\n    opacity = fgOpacity * quantLum;\n    color += bgColor * (1.0 - opacity);\n    opacity += bgOpacity * (1.0 - opacity);\n  }\n\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface ImageDitheringUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string;\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n  u_colorSteps: number;\n  u_originalColors: boolean;\n}\n\nexport interface ImageDitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  image: HTMLImageElement | string;\n  colorFront?: string;\n  colorBack?: string;\n  colorHighlight?: string;\n  type?: DitheringType;\n  size?: number;\n  colorSteps?: number;\n  originalColors?: boolean;\n}\n\nexport const DitheringTypes = {\n  'random': 1,\n  '2x2': 2,\n  '4x4': 3,\n  '8x8': 4,\n} as const;\n\nexport type DitheringType = keyof typeof DitheringTypes;\n"],
   "mappings": ";;;;;AACA,SAAS,gBAAoE;AAC7E,SAAS,wBAAwB;AAuB1B,MAAM,+BAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuClD,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,IAwCd,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyFL,MAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;",
   "names": []
 }

package/dist/shaders/paper-texture.d.ts

@@ -7,12 +7,12 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * - u_colorFront, u_colorBack (RGBA)
  * - u_contrast - mixing front and back colors
  * - u_roughness - pixel noise, related to canvas => not scalable
- * - u_fiber, u_fiberScale - curly shaped noise
- * - u_crumples, u_crumplesScale - cell-based pattern
- * - u_folds, u_foldsNumber - lines pattern, 15 max
+ * - u_fiber, u_fiberSize - curly shaped noise
+ * - u_crumples, u_crumpleSize - cell-based pattern
+ * - u_folds, u_foldCount - lines pattern, 15 max
  * - u_drops - metaballs-like pattern
  * - u_seed - applied to folds, crumples and dots
- * - u_blur - big-scale noise mask applied to everything but roughness
+ * - u_fade - big-scale noise mask applied to everything but roughness
  *
  * - u_noiseTexture (sampler2D): pre-computed randomizer source
  *
@@ -26,28 +26,28 @@ export interface PaperTextureUniforms extends ShaderSizingUniforms {
     u_contrast: number;
     u_roughness: number;
     u_fiber: number;
-    u_fiberScale: number;
+    u_fiberSize: number;
     u_crumples: number;
-    u_foldsNumber: number;
+    u_foldCount: number;
     u_folds: number;
-    u_blur: number;
-    u_crumplesScale: number;
+    u_fade: number;
+    u_crumpleSize: number;
     u_drops: number;
     u_seed: number;
 }
 export interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {
-    image?: HTMLImageElement | string | undefined;
+    image?: HTMLImageElement | string;
     colorFront?: string;
     colorBack?: string;
     contrast?: number;
     roughness?: number;
     fiber?: number;
-    fiberScale?: number;
+    fiberSize?: number;
     crumples?: number;
-    foldsNumber?: number;
+    foldCount?: number;
     folds?: number;
-    blur?: number;
-    crumplesScale?: number;
+    fade?: number;
+    crumpleSize?: number;
     drops?: number;
     seed?: number;
 }

package/dist/shaders/paper-texture.js

@@ -20,14 +20,14 @@ uniform float u_imageAspectRatio;
 uniform float u_contrast;
 uniform float u_roughness;
 uniform float u_fiber;
-uniform float u_fiberScale;
+uniform float u_fiberSize;
 uniform float u_crumples;
-uniform float u_crumplesScale;
+uniform float u_crumpleSize;
 uniform float u_folds;
-uniform float u_foldsNumber;
+uniform float u_foldCount;
 uniform float u_drops;
 uniform float u_seed;
-uniform float u_blur;
+uniform float u_fade;
 
 uniform sampler2D u_noiseTexture;
 
@@ -125,13 +125,13 @@ vec2 folds(vec2 uv) {
     vec3 pp = vec3(0.);
     float l = 9.;
     for (float i = 0.; i < 15.; i++) {
-      if (i >= u_foldsNumber) break;
+      if (i >= u_foldCount) break;
       vec2 rand = randomGB(vec2(i, i * u_seed));
       float an = rand.x * TWO_PI;
       vec2 p = vec2(cos(an), sin(an)) * rand.y;
       float dist = distance(uv, p);
       l = min(l, dist);
-      
+
       if (l == dist) {
         pp.xy = (uv - p.xy);
         pp.z = dist;
@@ -157,6 +157,10 @@ float drops(vec2 uv) {
   return 1. - smoothstep(.05, .09, pow(dropsMinDist, .5));
 }
 
+float lst(float edge0, float edge1, float x) {
+  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+}
+
 void main() {
 
   vec2 imageUV = v_imageUV;
@@ -166,10 +170,10 @@ void main() {
   vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;
   float roughness = roughness(roughnessUv + vec2(1., 0.)) - roughness(roughnessUv - vec2(1., 0.));
 
-  vec2 crumplesUV = fract(patternUV * .1 * u_crumplesScale - u_seed) * 32.;
+  vec2 crumplesUV = fract(patternUV * .02 / u_crumpleSize - u_seed) * 32.;
   float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV));
 
-  vec2 fiberUV = 10. * u_fiberScale * patternUV;
+  vec2 fiberUV = 2. / u_fiberSize * patternUV;
   float fiber = fiberNoise(fiberUV, vec2(0.));
   fiber = .5 * u_fiber * (fiber - 1.);
 
@@ -183,7 +187,17 @@ void main() {
   vec2 w2 = folds(foldsUV);
 
   float drops = u_drops * drops(patternUV * 2.);
-  
+
+  float fade = u_fade * fbm(.17 * patternUV + 10. * u_seed);
+  fade = clamp(8. * pow(fade, 3.), 0., 1.);
+
+  w = mix(w, vec2(0.), fade);
+  w2 = mix(w2, vec2(0.), fade);
+  crumples = mix(crumples, 0., fade);
+  drops = mix(drops, 0., fade);
+  fiber *= mix(1., .5, fade);
+  roughness *= mix(1., .5, fade);
+
   normal.xy += u_folds * min(5. * u_contrast, 1.) * 4. * max(vec2(0.), w + w2);
   normalImage.xy += u_folds * 2. * w;
 
@@ -193,13 +207,9 @@ void main() {
   normal.xy += 3. * drops;
   normalImage.xy += .2 * drops;
 
-  float blur = u_blur * smoothstep(0., 1., fbm(.17 * patternUV + 10. * u_seed));
-  normal *= (1. - 2. * blur);
-  fiber *= (1. - blur);
-
   normal.xy += u_roughness * 1.5 * roughness;
   normal.xy += fiber;
-  
+
   normalImage += u_roughness * .75 * roughness;
   normalImage += .2 * fiber;
 
@@ -215,7 +225,7 @@ void main() {
   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;
@@ -224,7 +234,7 @@ void main() {
   color += bgColor * (1. - opacity);
   opacity += bgOpacity * (1. - opacity);
   opacity = mix(opacity, 1., frame);
-  
+
   color -= .007 * drops;
 
   color.rgb = mix(color, image.rgb, frame);

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 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,EA0BhD,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;",
+  "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_fiberSize - curly shaped noise\n * - u_crumples, u_crumpleSize - cell-based pattern\n * - u_folds, u_foldCount - lines pattern, 15 max\n * - u_drops - metaballs-like pattern\n * - u_seed - applied to folds, crumples and dots\n * - u_fade - 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 vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_contrast;\nuniform float u_roughness;\nuniform float u_fiber;\nuniform float u_fiberSize;\nuniform float u_crumples;\nuniform float u_crumpleSize;\nuniform float u_folds;\nuniform float u_foldCount;\nuniform float u_drops;\nuniform float u_seed;\nuniform float u_fade;\n\nuniform sampler2D u_noiseTexture;\n\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_foldCount) break;\n      vec2 rand = randomGB(vec2(i, i * u_seed));\n      float an = rand.x * TWO_PI;\n      vec2 p = vec2(cos(an), sin(an)) * rand.y;\n      float dist = distance(uv, p);\n      l = min(l, dist);\n\n      if (l == dist) {\n        pp.xy = (uv - p.xy);\n        pp.z = dist;\n      }\n    }\n    return mix(pp.xy, vec2(0.), pow(pp.z, .25));\n}\n\nfloat drops(vec2 uv) {\n  vec2 iDropsUV = floor(uv);\n  vec2 fDropsUV = fract(uv);\n  float dropsMinDist = 1.;\n  for (int j = -1; j <= 1; j++) {\n    for (int i = -1; i <= 1; i++) {\n      vec2 neighbor = vec2(float(i), float(j));\n      vec2 offset = randomGB(iDropsUV + neighbor);\n      offset = .5 + .5 * sin(10. * u_seed + TWO_PI * offset);\n      vec2 pos = neighbor + offset - fDropsUV;\n      float dist = length(pos);\n      dropsMinDist = min(dropsMinDist, dropsMinDist*dist);\n    }\n  }\n  return 1. - smoothstep(.05, .09, pow(dropsMinDist, .5));\n}\n\nfloat lst(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nvoid main() {\n\n  vec2 imageUV = v_imageUV;\n  vec2 patternUV = v_imageUV - .5;\n  patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.));\n\n  vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;\n  float roughness = roughness(roughnessUv + vec2(1., 0.)) - roughness(roughnessUv - vec2(1., 0.));\n\n  vec2 crumplesUV = fract(patternUV * .02 / u_crumpleSize - u_seed) * 32.;\n  float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV));\n\n  vec2 fiberUV = 2. / u_fiberSize * patternUV;\n  float fiber = fiberNoise(fiberUV, vec2(0.));\n  fiber = .5 * u_fiber * (fiber - 1.);\n\n  vec2 normal = vec2(0.);\n  vec2 normalImage = vec2(0.);\n\n  vec2 foldsUV = patternUV * .12;\n  foldsUV = rotate(foldsUV, 4. * u_seed);\n  vec2 w = folds(foldsUV);\n  foldsUV = rotate(foldsUV + .007 * cos(u_seed), .01 * sin(u_seed));\n  vec2 w2 = folds(foldsUV);\n\n  float drops = u_drops * drops(patternUV * 2.);\n\n  float fade = u_fade * fbm(.17 * patternUV + 10. * u_seed);\n  fade = clamp(8. * pow(fade, 3.), 0., 1.);\n\n  w = mix(w, vec2(0.), fade);\n  w2 = mix(w2, vec2(0.), fade);\n  crumples = mix(crumples, 0., fade);\n  drops = mix(drops, 0., fade);\n  fiber *= mix(1., .5, fade);\n  roughness *= mix(1., .5, fade);\n\n  normal.xy += u_folds * min(5. * u_contrast, 1.) * 4. * max(vec2(0.), w + w2);\n  normalImage.xy += u_folds * 2. * w;\n\n  normal.xy += crumples;\n  normalImage.xy += 1.5 * crumples;\n\n  normal.xy += 3. * drops;\n  normalImage.xy += .2 * drops;\n\n  normal.xy += u_roughness * 1.5 * roughness;\n  normal.xy += fiber;\n\n  normalImage += u_roughness * .75 * roughness;\n  normalImage += .2 * fiber;\n\n  vec3 lightPos = vec3(1., 2., 1.);\n  float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));\n\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n  float fgOpacity = u_colorFront.a;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  float bgOpacity = u_colorBack.a;\n\n  imageUV += .02 * normalImage;\n  float frame = getUvFrame(imageUV);\n  vec4 image = texture(u_image, imageUV);\n  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);\n\n  frame *= image.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n  opacity = mix(opacity, 1., frame);\n\n  color -= .007 * drops;\n\n  color.rgb = mix(color, image.rgb, frame);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PaperTextureUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_noiseTexture?: HTMLImageElement;\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_contrast: number;\n  u_roughness: number;\n  u_fiber: number;\n  u_fiberSize: number;\n  u_crumples: number;\n  u_foldCount: number;\n  u_folds: number;\n  u_fade: number;\n  u_crumpleSize: number;\n  u_drops: number;\n  u_seed: number;\n}\n\nexport interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string;\n  colorFront?: string;\n  colorBack?: string;\n  contrast?: number;\n  roughness?: number;\n  fiber?: number;\n  fiberSize?: number;\n  crumples?: number;\n  foldCount?: number;\n  folds?: number;\n  fade?: number;\n  crumpleSize?: number;\n  drops?: number;\n  seed?: number;\n}\n"],
+  "mappings": ";;;;;AACA,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,EA0BhD,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -12,6 +12,7 @@ export declare const pulsingBorderMeta: {
  * - u_colorBack (RGBA)
  * - u_colors (vec4[]), u_colorsCount (float used as integer)
  * - u_roundness, u_thickness, u_softness: border parameters
+ * - u_aspectRatio
  * - u_intensity: thickness of individual spots
  * - u_bloom: normal / additive color blending
  * - u_spotSize: angular size of spots
@@ -29,6 +30,11 @@ export interface PulsingBorderUniforms extends ShaderSizingUniforms {
     u_colorsCount: number;
     u_roundness: number;
     u_thickness: number;
+    u_marginLeft: number;
+    u_marginRight: number;
+    u_marginTop: number;
+    u_marginBottom: number;
+    u_aspectRatio: (typeof PulsingBorderAspectRatios)[PulsingBorderAspectRatio];
     u_softness: number;
     u_intensity: number;
     u_bloom: number;
@@ -44,6 +50,12 @@ export interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionPar
     colors?: string[];
     roundness?: number;
     thickness?: number;
+    margin?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    aspectRatio?: PulsingBorderAspectRatio;
     softness?: number;
     intensity?: number;
     bloom?: number;
@@ -53,3 +65,8 @@ export interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionPar
     smoke?: number;
     smokeSize?: number;
 }
+export declare const PulsingBorderAspectRatios: {
+    readonly auto: 0;
+    readonly square: 1;
+};
+export type PulsingBorderAspectRatio = keyof typeof PulsingBorderAspectRatios;