@paper-design/shaders 0.0.54 → 0.0.56

package/dist/shaders/pulsing-border.js

@@ -19,6 +19,11 @@ uniform vec4 u_colors[${pulsingBorderMeta.maxColorCount}];
 uniform float u_colorsCount;
 uniform float u_roundness;
 uniform float u_thickness;
+uniform float u_marginLeft;
+uniform float u_marginRight;
+uniform float u_marginTop;
+uniform float u_marginBottom;
+uniform float u_aspectRatio;
 uniform float u_softness;
 uniform float u_intensity;
 uniform float u_bloom;
@@ -43,19 +48,23 @@ float beat(float time) {
   return clamp(first + 0.6 * second, 0.0, 1.0);
 }
 
-float roundedBox(vec2 uv, float distance) {
-  float thickness = .5 * u_thickness;
-  float borderDistance = abs(distance);
-  float border = 1. - smoothstep(-u_softness * thickness - 2. * fwidth(borderDistance), .5 * u_softness * thickness, borderDistance - .5 * thickness);
-  border = pow(border, 2.);
-
-  return border;
+float sst(float edge0, float edge1, float x) {
+  return smoothstep(edge0, edge1, x);
 }
 
-float roundedBoxSmoke(vec2 uv, float distance, float size) {
+float roundedBox(vec2 uv, vec2 halfSize, float distance, float cornerDistance, float thickness, float softness) {
   float borderDistance = abs(distance);
-  float border = 1. - smoothstep(-.75 * size, .75 * size, borderDistance);
-  border *= border;
+  float aa = 2. * fwidth(distance);
+  float border = 1. - sst(mix(thickness, -thickness, softness), thickness + aa, borderDistance);
+  float cornerFadeCircles = 0.;
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv + halfSize) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(-halfSize.x, halfSize.y)) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(halfSize.x, -halfSize.y)) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - halfSize) / thickness)));
+  aa = fwidth(cornerDistance);
+  float cornerFade = sst(0., mix(aa, thickness, softness), cornerDistance);
+  cornerFade *= cornerFadeCircles;
+  border += cornerFade;
   return border;
 }
 
@@ -78,101 +87,86 @@ float valueNoise(vec2 st) {
   return mix(x1, x2, u.y);
 }
 
-float linearstep(float edge0, float edge1, float x) {
-  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
-}
-
 void main() {
-
-  const float firstFrameOffset = 4.;
+  const float firstFrameOffset = 109.;
   float t = 1.2 * (u_time + firstFrameOffset);
 
   vec2 borderUV = v_responsiveUV;
-
-  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;
-
   float pulse = u_pulse * beat(.18 * u_time);
 
-  float borderRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
-  borderUV.x *= borderRatio;
+  float canvasRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
   vec2 halfSize = vec2(.5);
-  halfSize.x *= borderRatio;
-  float radius = min(.5 * u_roundness, halfSize.x);
+  borderUV.x *= max(canvasRatio, 1.);
+  borderUV.y /= min(canvasRatio, 1.);
+  halfSize.x *= max(canvasRatio, 1.);
+  halfSize.y /= min(canvasRatio, 1.);
+
+  float mL = u_marginLeft;
+  float mR = u_marginRight;
+  float mT = u_marginTop;
+  float mB = u_marginBottom;
+  float mX = mL + mR;
+  float mY = mT + mB;
+
+  if (u_aspectRatio > 0.) {
+    float shapeRatio = canvasRatio * (1. - mX) / (1. - mY);
+    float freeX = shapeRatio > 1. ? (1. - mX) * (1. - 1. / shapeRatio) : 0.;
+    float freeY = shapeRatio < 1. ? (1. - mY) * (1. - shapeRatio) : 0.;
+    mL += freeX * 0.5;
+    mR += freeX * 0.5;
+    mT += freeY * 0.5;
+    mB += freeY * 0.5;
+    mX = mL + mR;
+    mY = mT + mB;
+  }
+
+  float thickness = .5 * u_thickness * min(halfSize.x, halfSize.y);
+
+  halfSize.x *= (1. - mX);
+  halfSize.y *= (1. - mY);
+
+  vec2 centerShift = vec2(
+    (mL - mR) * max(canvasRatio, 1.) * 0.5,
+    (mB - mT) / min(canvasRatio, 1.) * 0.5
+  );
+
+  borderUV -= centerShift;
+  halfSize -= mix(thickness, 0., u_softness);
+
+  float radius = mix(0., min(halfSize.x, halfSize.y), u_roundness);
   vec2 d = abs(borderUV) - halfSize + radius;
-  float outsideDistance = length(max(d, 0.)) - radius;
-  float insideDistance = min(max(d.x, d.y), 0.0);
+  float outsideDistance = length(max(d, .0001)) - radius;
+  float insideDistance = min(max(d.x, d.y), .0001);
+  float cornerDistance = abs(min(max(d.x, d.y) - .45 * radius, .0));
   float distance = outsideDistance + insideDistance;
 
-  float border = roundedBox(borderUV, distance);
-
-  vec2 v0 = borderUV + halfSize;
-  vec2 v1 = borderUV - vec2(-halfSize.x, halfSize.y);
-  vec2 v2 = borderUV - vec2(halfSize.x, -halfSize.y);
-  vec2 v3 = borderUV - halfSize;
-
-  float cornerFade = 1. - abs(v0.x - v0.y);
-  cornerFade = max(cornerFade, 1. - abs(v1.x + v1.y));
-  cornerFade = max(cornerFade, 1. - abs(v2.x + v2.y));
-  cornerFade = max(cornerFade, 1. - abs(v3.x - v3.y));
-  cornerFade = .75 * pow(cornerFade, 20.);
-
-  float cornerFadeMask = 0.;
-  float maskR = (.35 * u_thickness - .25 * radius);
-  float maskHL = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, borderUV.x);
-  float maskHR = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, -borderUV.x);
-  float maskVT = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, -borderUV.y);
-  float maskVB = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, borderUV.y);
-  float maskOffset = .25 * (u_thickness + radius);
-  {
-    float m = maskHR;
-    m *= maskVT;
-    m *= (1. - clamp(length((v0 - maskOffset) / maskR), 0., 1.));
-    cornerFadeMask += m;
-  }
-  {
-    float m = maskHR;
-    m *= maskVB;
-    m *= (1. - clamp(length((v1 - vec2(1., -1.) * maskOffset) / maskR), 0., 1.));
-    cornerFadeMask += m;
-  }
-  {
-    float m = maskHL;
-    m *= maskVT;
-    m *= (1. - clamp(length((v2 - vec2(-1., 1.) * maskOffset) / maskR), 0., 1.));
-    cornerFadeMask += m;
-  }
-  {
-    float m = maskHL;
-    m *= maskVB;
-    m *= (1. - clamp(length((v3 + maskOffset) / maskR), 0., 1.));
-    cornerFadeMask += m;
-  }
-  cornerFade = clamp(cornerFade, 0., 1.);
-  cornerFade *= cornerFadeMask;
-  border += cornerFade;
+  float borderThickness = mix(thickness, 3. * thickness, u_softness);
+  float border = roundedBox(borderUV, halfSize, distance, cornerDistance, borderThickness, u_softness);
+  border = pow(border, 1. + u_softness);
 
-  vec2 smokeUV = .2 * u_smokeSize * v_patternUV;
+  vec2 smokeUV = .3 * u_smokeSize * v_patternUV;
   float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);
   smoke -= valueNoise(3.4 * smokeUV - .5 * t);
-  smoke *= roundedBoxSmoke(borderUV, distance, u_smoke);
+  float smokeThickness = thickness + .2;
+  smokeThickness = min(.4, max(smokeThickness, .1));
+  smoke *= roundedBox(borderUV, halfSize, distance, cornerDistance, smokeThickness, 1.);
   smoke = 30. * pow(smoke, 2.);
-  smoke += cornerFadeMask;
-  smoke *= u_smoke;
+  smoke *= mix(0., .5, pow(u_smoke, 2.));
   smoke *= mix(1., pulse, u_pulse);
   smoke = clamp(smoke, 0., 1.);
-
   border += smoke;
-  float borderBounds = 1. - smoothstep(.9, 1., length(v_responsiveUV));
-  border *= borderBounds;
+
   border = clamp(border, 0., 1.);
 
   vec3 blendColor = vec3(0.);
-  float blendAlpha = 0.0;
+  float blendAlpha = 0.;
   vec3 addColor = vec3(0.);
-  float addAlpha = 0.0;
+  float addAlpha = 0.;
 
   float bloom = 4. * u_bloom;
-  float intensity = 1. + 4. * u_intensity;
+  float intensity = 1. + (1. + 4. * u_softness) * u_intensity;
+
+  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;
 
   for (int colorIdx = 0; colorIdx < ${pulsingBorderMeta.maxColorCount}; colorIdx++) {
     if (colorIdx >= int(u_colorsCount)) break;
@@ -202,7 +196,7 @@ void main() {
       float atg1 = fract(angle + time);
       float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;
       spotSize = mix(spotSize, .1, p);
-      float sector = smoothstep(.5 - spotSize, .5, atg1) * smoothstep(.5 + spotSize, .5, atg1);
+      float sector = sst(.5 - spotSize, .5, atg1) * sst(.5 + spotSize, .5, atg1);
 
       sector *= mask;
       sector *= border;
@@ -231,7 +225,12 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }`;
+const PulsingBorderAspectRatios = {
+  auto: 0,
+  square: 1
+};
 export {
+  PulsingBorderAspectRatios,
   pulsingBorderFragmentShader,
   pulsingBorderMeta
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/pulsing-border.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, textureRandomizerGB, colorBandingFix } from '../shader-utils.js';\n\nexport const pulsingBorderMeta = {\n  maxColorCount: 5,\n  maxSpots: 4,\n} as const;\n\n/**\n * Color spots traveling around rectangular stroke (border)\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_roundness, u_thickness, u_softness: border parameters\n * - u_intensity: thickness of individual spots\n * - u_bloom: normal / additive color blending\n * - u_spotSize: angular size of spots\n * - u_spots (float used as int): number of spots rendered per color\n * - u_pulse: optional pulsing animation\n * - u_smoke, u_smokeSize: optional noisy shapes around the border\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const pulsingBorderFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${pulsingBorderMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_roundness;\nuniform float u_thickness;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_bloom;\nuniform float u_spotSize;\nuniform float u_spots;\nuniform float u_pulse;\nuniform float u_smoke;\nuniform float u_smokeSize;\n\nuniform sampler2D u_noiseTexture;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat beat(float time) {\n  float first = pow(sin(time * TWO_PI), 10.);\n  float second = pow(sin((time - 0.15) * TWO_PI), 10.);\n\n  return clamp(first + 0.6 * second, 0.0, 1.0);\n}\n\nfloat roundedBox(vec2 uv, float distance) {\n  float thickness = .5 * u_thickness;\n  float borderDistance = abs(distance);\n  float border = 1. - smoothstep(-u_softness * thickness - 2. * fwidth(borderDistance), .5 * u_softness * thickness, borderDistance - .5 * thickness);\n  border = pow(border, 2.);\n\n  return border;\n}\n\nfloat roundedBoxSmoke(vec2 uv, float distance, float size) {\n  float borderDistance = abs(distance);\n  float border = 1. - smoothstep(-.75 * size, .75 * size, borderDistance);\n  border *= border;\n  return border;\n}\n\n${textureRandomizerGB}\n\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomG(i);\n  float b = randomG(i + vec2(1.0, 0.0));\n  float c = randomG(i + vec2(0.0, 1.0));\n  float d = randomG(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat linearstep(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nvoid main() {\n\n  const float firstFrameOffset = 4.;\n  float t = 1.2 * (u_time + firstFrameOffset);\n\n  vec2 borderUV = v_responsiveUV;\n\n  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n\n  float pulse = u_pulse * beat(.18 * u_time);\n\n  float borderRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  borderUV.x *= borderRatio;\n  vec2 halfSize = vec2(.5);\n  halfSize.x *= borderRatio;\n  float radius = min(.5 * u_roundness, halfSize.x);\n  vec2 d = abs(borderUV) - halfSize + radius;\n  float outsideDistance = length(max(d, 0.)) - radius;\n  float insideDistance = min(max(d.x, d.y), 0.0);\n  float distance = outsideDistance + insideDistance;\n\n  float border = roundedBox(borderUV, distance);\n\n  vec2 v0 = borderUV + halfSize;\n  vec2 v1 = borderUV - vec2(-halfSize.x, halfSize.y);\n  vec2 v2 = borderUV - vec2(halfSize.x, -halfSize.y);\n  vec2 v3 = borderUV - halfSize;\n\n  float cornerFade = 1. - abs(v0.x - v0.y);\n  cornerFade = max(cornerFade, 1. - abs(v1.x + v1.y));\n  cornerFade = max(cornerFade, 1. - abs(v2.x + v2.y));\n  cornerFade = max(cornerFade, 1. - abs(v3.x - v3.y));\n  cornerFade = .75 * pow(cornerFade, 20.);\n\n  float cornerFadeMask = 0.;\n  float maskR = (.35 * u_thickness - .25 * radius);\n  float maskHL = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, borderUV.x);\n  float maskHR = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, -borderUV.x);\n  float maskVT = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, -borderUV.y);\n  float maskVB = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, borderUV.y);\n  float maskOffset = .25 * (u_thickness + radius);\n  {\n    float m = maskHR;\n    m *= maskVT;\n    m *= (1. - clamp(length((v0 - maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHR;\n    m *= maskVB;\n    m *= (1. - clamp(length((v1 - vec2(1., -1.) * maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHL;\n    m *= maskVT;\n    m *= (1. - clamp(length((v2 - vec2(-1., 1.) * maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHL;\n    m *= maskVB;\n    m *= (1. - clamp(length((v3 + maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  cornerFade = clamp(cornerFade, 0., 1.);\n  cornerFade *= cornerFadeMask;\n  border += cornerFade;\n\n  vec2 smokeUV = .2 * u_smokeSize * v_patternUV;\n  float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);\n  smoke -= valueNoise(3.4 * smokeUV - .5 * t);\n  smoke *= roundedBoxSmoke(borderUV, distance, u_smoke);\n  smoke = 30. * pow(smoke, 2.);\n  smoke += cornerFadeMask;\n  smoke *= u_smoke;\n  smoke *= mix(1., pulse, u_pulse);\n  smoke = clamp(smoke, 0., 1.);\n\n  border += smoke;\n  float borderBounds = 1. - smoothstep(.9, 1., length(v_responsiveUV));\n  border *= borderBounds;\n  border = clamp(border, 0., 1.);\n\n  vec3 blendColor = vec3(0.);\n  float blendAlpha = 0.0;\n  vec3 addColor = vec3(0.);\n  float addAlpha = 0.0;\n\n  float bloom = 4. * u_bloom;\n  float intensity = 1. + 4. * u_intensity;\n\n  for (int colorIdx = 0; colorIdx < ${pulsingBorderMeta.maxColorCount}; colorIdx++) {\n    if (colorIdx >= int(u_colorsCount)) break;\n    float colorIdxF = float(colorIdx);\n\n    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;\n    float a = u_colors[colorIdx].a;\n\n    for (int spotIdx = 0; spotIdx < ${pulsingBorderMeta.maxSpots}; spotIdx++) {\n      if (spotIdx >= int(u_spots)) break;\n      float spotIdxF = float(spotIdx);\n\n      vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));\n\n      float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;\n      time *= mix(1., -1., step(.5, randVal.y));\n\n      float mask = .5 + .5 * mix(\n        sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),\n        cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),\n        step(mod(colorIdxF, 2.), .5)\n      );\n\n      float p = clamp(2. * u_pulse - randVal.x, 0., 1.);\n      mask = mix(mask, pulse, p);\n\n      float atg1 = fract(angle + time);\n      float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;\n      spotSize = mix(spotSize, .1, p);\n      float sector = smoothstep(.5 - spotSize, .5, atg1) * smoothstep(.5 + spotSize, .5, atg1);\n\n      sector *= mask;\n      sector *= border;\n      sector *= intensity;\n      sector = clamp(sector, 0., 1.);\n\n      vec3 srcColor = c * sector;\n      float srcAlpha = a * sector;\n\n      blendColor += ((1. - blendAlpha) * srcColor);\n      blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;\n      addColor += srcColor;\n      addAlpha += srcAlpha;\n    }\n  }\n\n  vec3 accumColor = mix(blendColor, addColor, bloom);\n  float accumAlpha = mix(blendAlpha, addAlpha, bloom);\n  accumAlpha = clamp(accumAlpha, 0., 1.);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  vec3 color = accumColor + (1. - accumAlpha) * bgColor;\n  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}`;\n\nexport interface PulsingBorderUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_roundness: number;\n  u_thickness: number;\n  u_softness: number;\n  u_intensity: number;\n  u_bloom: number;\n  u_spots: number;\n  u_spotSize: number;\n  u_pulse: number;\n  u_smoke: number;\n  u_smokeSize: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  roundness?: number;\n  thickness?: number;\n  softness?: number;\n  intensity?: number;\n  bloom?: number;\n  spots?: number;\n  spotSize?: number;\n  pulse?: number;\n  smoke?: number;\n  smokeSize?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,qBAAqB,uBAAuB;AAEzD,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,UAAU;AACZ;AAqBO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAerD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBT,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAmHiB,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAO/B,kBAAkB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8C5D,eAAe;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, textureRandomizerGB, colorBandingFix } from '../shader-utils.js';\n\nexport const pulsingBorderMeta = {\n  maxColorCount: 5,\n  maxSpots: 4,\n} as const;\n\n/**\n * Color spots traveling around rectangular stroke (border)\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_roundness, u_thickness, u_softness: border parameters\n * - u_aspectRatio\n * - u_intensity: thickness of individual spots\n * - u_bloom: normal / additive color blending\n * - u_spotSize: angular size of spots\n * - u_spots (float used as int): number of spots rendered per color\n * - u_pulse: optional pulsing animation\n * - u_smoke, u_smokeSize: optional noisy shapes around the border\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const pulsingBorderFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${pulsingBorderMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_roundness;\nuniform float u_thickness;\nuniform float u_marginLeft;\nuniform float u_marginRight;\nuniform float u_marginTop;\nuniform float u_marginBottom;\nuniform float u_aspectRatio;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_bloom;\nuniform float u_spotSize;\nuniform float u_spots;\nuniform float u_pulse;\nuniform float u_smoke;\nuniform float u_smokeSize;\n\nuniform sampler2D u_noiseTexture;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat beat(float time) {\n  float first = pow(sin(time * TWO_PI), 10.);\n  float second = pow(sin((time - 0.15) * TWO_PI), 10.);\n\n  return clamp(first + 0.6 * second, 0.0, 1.0);\n}\n\nfloat sst(float edge0, float edge1, float x) {\n  return smoothstep(edge0, edge1, x);\n}\n\nfloat roundedBox(vec2 uv, vec2 halfSize, float distance, float cornerDistance, float thickness, float softness) {\n  float borderDistance = abs(distance);\n  float aa = 2. * fwidth(distance);\n  float border = 1. - sst(mix(thickness, -thickness, softness), thickness + aa, borderDistance);\n  float cornerFadeCircles = 0.;\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv + halfSize) / thickness)));\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(-halfSize.x, halfSize.y)) / thickness)));\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(halfSize.x, -halfSize.y)) / thickness)));\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - halfSize) / thickness)));\n  aa = fwidth(cornerDistance);\n  float cornerFade = sst(0., mix(aa, thickness, softness), cornerDistance);\n  cornerFade *= cornerFadeCircles;\n  border += cornerFade;\n  return border;\n}\n\n${textureRandomizerGB}\n\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomG(i);\n  float b = randomG(i + vec2(1.0, 0.0));\n  float c = randomG(i + vec2(0.0, 1.0));\n  float d = randomG(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nvoid main() {\n  const float firstFrameOffset = 109.;\n  float t = 1.2 * (u_time + firstFrameOffset);\n\n  vec2 borderUV = v_responsiveUV;\n  float pulse = u_pulse * beat(.18 * u_time);\n\n  float canvasRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  vec2 halfSize = vec2(.5);\n  borderUV.x *= max(canvasRatio, 1.);\n  borderUV.y /= min(canvasRatio, 1.);\n  halfSize.x *= max(canvasRatio, 1.);\n  halfSize.y /= min(canvasRatio, 1.);\n\n  float mL = u_marginLeft;\n  float mR = u_marginRight;\n  float mT = u_marginTop;\n  float mB = u_marginBottom;\n  float mX = mL + mR;\n  float mY = mT + mB;\n\n  if (u_aspectRatio > 0.) {\n    float shapeRatio = canvasRatio * (1. - mX) / (1. - mY);\n    float freeX = shapeRatio > 1. ? (1. - mX) * (1. - 1. / shapeRatio) : 0.;\n    float freeY = shapeRatio < 1. ? (1. - mY) * (1. - shapeRatio) : 0.;\n    mL += freeX * 0.5;\n    mR += freeX * 0.5;\n    mT += freeY * 0.5;\n    mB += freeY * 0.5;\n    mX = mL + mR;\n    mY = mT + mB;\n  }\n\n  float thickness = .5 * u_thickness * min(halfSize.x, halfSize.y);\n\n  halfSize.x *= (1. - mX);\n  halfSize.y *= (1. - mY);\n\n  vec2 centerShift = vec2(\n    (mL - mR) * max(canvasRatio, 1.) * 0.5,\n    (mB - mT) / min(canvasRatio, 1.) * 0.5\n  );\n\n  borderUV -= centerShift;\n  halfSize -= mix(thickness, 0., u_softness);\n\n  float radius = mix(0., min(halfSize.x, halfSize.y), u_roundness);\n  vec2 d = abs(borderUV) - halfSize + radius;\n  float outsideDistance = length(max(d, .0001)) - radius;\n  float insideDistance = min(max(d.x, d.y), .0001);\n  float cornerDistance = abs(min(max(d.x, d.y) - .45 * radius, .0));\n  float distance = outsideDistance + insideDistance;\n\n  float borderThickness = mix(thickness, 3. * thickness, u_softness);\n  float border = roundedBox(borderUV, halfSize, distance, cornerDistance, borderThickness, u_softness);\n  border = pow(border, 1. + u_softness);\n\n  vec2 smokeUV = .3 * u_smokeSize * v_patternUV;\n  float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);\n  smoke -= valueNoise(3.4 * smokeUV - .5 * t);\n  float smokeThickness = thickness + .2;\n  smokeThickness = min(.4, max(smokeThickness, .1));\n  smoke *= roundedBox(borderUV, halfSize, distance, cornerDistance, smokeThickness, 1.);\n  smoke = 30. * pow(smoke, 2.);\n  smoke *= mix(0., .5, pow(u_smoke, 2.));\n  smoke *= mix(1., pulse, u_pulse);\n  smoke = clamp(smoke, 0., 1.);\n  border += smoke;\n\n  border = clamp(border, 0., 1.);\n\n  vec3 blendColor = vec3(0.);\n  float blendAlpha = 0.;\n  vec3 addColor = vec3(0.);\n  float addAlpha = 0.;\n\n  float bloom = 4. * u_bloom;\n  float intensity = 1. + (1. + 4. * u_softness) * u_intensity;\n\n  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n\n  for (int colorIdx = 0; colorIdx < ${pulsingBorderMeta.maxColorCount}; colorIdx++) {\n    if (colorIdx >= int(u_colorsCount)) break;\n    float colorIdxF = float(colorIdx);\n\n    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;\n    float a = u_colors[colorIdx].a;\n\n    for (int spotIdx = 0; spotIdx < ${pulsingBorderMeta.maxSpots}; spotIdx++) {\n      if (spotIdx >= int(u_spots)) break;\n      float spotIdxF = float(spotIdx);\n\n      vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));\n\n      float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;\n      time *= mix(1., -1., step(.5, randVal.y));\n\n      float mask = .5 + .5 * mix(\n        sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),\n        cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),\n        step(mod(colorIdxF, 2.), .5)\n      );\n\n      float p = clamp(2. * u_pulse - randVal.x, 0., 1.);\n      mask = mix(mask, pulse, p);\n\n      float atg1 = fract(angle + time);\n      float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;\n      spotSize = mix(spotSize, .1, p);\n      float sector = sst(.5 - spotSize, .5, atg1) * sst(.5 + spotSize, .5, atg1);\n\n      sector *= mask;\n      sector *= border;\n      sector *= intensity;\n      sector = clamp(sector, 0., 1.);\n\n      vec3 srcColor = c * sector;\n      float srcAlpha = a * sector;\n\n      blendColor += ((1. - blendAlpha) * srcColor);\n      blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;\n      addColor += srcColor;\n      addAlpha += srcAlpha;\n    }\n  }\n\n  vec3 accumColor = mix(blendColor, addColor, bloom);\n  float accumAlpha = mix(blendAlpha, addAlpha, bloom);\n  accumAlpha = clamp(accumAlpha, 0., 1.);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  vec3 color = accumColor + (1. - accumAlpha) * bgColor;\n  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}`;\n\nexport interface PulsingBorderUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_roundness: number;\n  u_thickness: number;\n  u_marginLeft: number;\n  u_marginRight: number;\n  u_marginTop: number;\n  u_marginBottom: number;\n  u_aspectRatio: (typeof PulsingBorderAspectRatios)[PulsingBorderAspectRatio];\n  u_softness: number;\n  u_intensity: number;\n  u_bloom: number;\n  u_spots: number;\n  u_spotSize: number;\n  u_pulse: number;\n  u_smoke: number;\n  u_smokeSize: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  roundness?: number;\n  thickness?: number;\n  margin?: number;\n  marginLeft?: number;\n  marginRight?: number;\n  marginTop?: number;\n  marginBottom?: number;\n  aspectRatio?: PulsingBorderAspectRatio;\n  softness?: number;\n  intensity?: number;\n  bloom?: number;\n  spots?: number;\n  spotSize?: number;\n  pulse?: number;\n  smoke?: number;\n  smokeSize?: number;\n}\n\nexport const PulsingBorderAspectRatios = {\n  auto: 0,\n  square: 1,\n} as const;\n\nexport type PulsingBorderAspectRatio = keyof typeof PulsingBorderAspectRatios;\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,qBAAqB,uBAAuB;AAEzD,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,UAAU;AACZ;AAsBO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBrD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6BT,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAoGiB,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAO/B,kBAAkB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8C5D,eAAe;AAAA;AAAA;AAAA;AAgDZ,MAAM,4BAA4B;AAAA,EACvC,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/shaders/water.d.ts

@@ -27,7 +27,7 @@ export interface WaterUniforms extends ShaderSizingUniforms {
     u_size: number;
 }
 export interface WaterParams extends ShaderSizingParams, ShaderMotionParams {
-    image?: HTMLImageElement | string | undefined;
+    image?: HTMLImageElement | string;
     colorBack?: string;
     colorHighlight?: string;
     highlights?: number;

package/dist/shaders/water.js

@@ -67,26 +67,26 @@ void main() {
   vec2 patternUV = v_imageUV - .5;
   patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));
   patternUV /= (.01 + .09 * u_size);
-  
+
   float t = u_time;
-  
+
   float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));
 
   float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);
 
   causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);
   causticNoise = pow(causticNoise, 2.);
-  
+
   float edgesDistortion = smoothstep(0., .1, imageUV.x);
   edgesDistortion *= smoothstep(0., .1, imageUV.y);
   edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + smoothstep(.95, .8, imageUV.x));
   edgesDistortion *= smoothstep(1., .9, imageUV.y);
   edgesDistortion = mix(edgesDistortion, 1., u_edges);
-  
+
   float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;
-  
+
   float wavesDistortion = .1 * u_waves * wavesNoise;
-  
+
   imageUV += vec2(wavesDistortion, -wavesDistortion);
   imageUV += (u_caustic * causticNoiseDistortion);
 
@@ -95,20 +95,20 @@ void main() {
   vec4 image = texture(u_image, imageUV);
   vec4 backColor = u_colorBack;
   backColor.rgb *= backColor.a;
-  
+
   vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);
   float opacity = backColor.a + image.a * frame;
 
   causticNoise = max(-.2, causticNoise);
-  
+
   float hightlight = .025 * u_highlights * causticNoise;
   hightlight *= u_colorHighlight.a;
   color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise);
   opacity += hightlight;
-  
+
   color += hightlight * (.5 + .5 * wavesNoise);
   opacity += hightlight * (.5 + .5 * wavesNoise);
-  
+
   opacity = clamp(opacity, 0., 1.);
 
   fragColor = vec4(color, opacity);

package/dist/shaders/water.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/water.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, simplexNoise } from '../shader-utils.js';\n\n/**\n * Mimicking water surface distortion with a combination of noises;\n * Can be applied over the texture or just be used as an animated pattern\n *\n * Uniforms:\n * - u_colorBack, u_colorHighlight (RGBA)\n * - u_size: pattern scale relative to the image\n * - u_caustic: power of caustic distortion\n * - u_layering: the power of 2nd layer of caustic distortion\n * - u_edges: caustic distortion power on the image edges\n * - u_waves: additional distortion based in Simplex noise, independent from caustic\n * - u_highlights: a coloring added over the image/background, following the caustic shape\n *\n */\n\n// language=GLSL\nexport const waterFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_size;\nuniform float u_highlights;\nuniform float u_layering;\nuniform float u_edges;\nuniform float u_caustic;\nuniform float u_waves;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\n${simplexNoise}\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n\n  float left   = smoothstep(0., aax, uv.x);\n  float right  = 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\nmat2 rotate2D(float r) {\n  return mat2(cos(r), sin(r), -sin(r), cos(r));\n}\n\nfloat getCausticNoise(vec2 uv, float t, float scale) {\n  vec2 n = vec2(.1);\n  vec2 N = vec2(.1);\n  mat2 m = rotate2D(.5);\n  for (int j = 0; j < 6; j++) {\n    uv *= m;\n    n *= m;\n    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;\n    n += sin(q);\n    N += cos(q) / scale;\n    scale *= 1.1;\n  }\n  return (N.x + N.y + 1.);\n}\n\nvoid main() {\n  vec2 imageUV = v_imageUV;\n  vec2 patternUV = v_imageUV - .5;\n  patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));\n  patternUV /= (.01 + .09 * u_size);\n  \n  float t = u_time;\n  \n  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));\n\n  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);\n\n  causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);\n  causticNoise = pow(causticNoise, 2.);\n  \n  float edgesDistortion = smoothstep(0., .1, imageUV.x);\n  edgesDistortion *= smoothstep(0., .1, imageUV.y);\n  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + smoothstep(.95, .8, imageUV.x));\n  edgesDistortion *= smoothstep(1., .9, imageUV.y);\n  edgesDistortion = mix(edgesDistortion, 1., u_edges);\n  \n  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;\n  \n  float wavesDistortion = .1 * u_waves * wavesNoise;\n  \n  imageUV += vec2(wavesDistortion, -wavesDistortion);\n  imageUV += (u_caustic * causticNoiseDistortion);\n\n  float frame = getUvFrame(imageUV);\n\n  vec4 image = texture(u_image, imageUV);\n  vec4 backColor = u_colorBack;\n  backColor.rgb *= backColor.a;\n  \n  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);\n  float opacity = backColor.a + image.a * frame;\n\n  causticNoise = max(-.2, causticNoise);\n  \n  float hightlight = .025 * u_highlights * causticNoise;\n  hightlight *= u_colorHighlight.a;\n  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise);\n  opacity += hightlight;\n  \n  color += hightlight * (.5 + .5 * wavesNoise);\n  opacity += hightlight * (.5 + .5 * wavesNoise);\n  \n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WaterUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_colorBack: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_highlights: number;\n  u_layering: number;\n  u_edges: number;\n  u_caustic: number;\n  u_waves: number;\n  u_size: number;\n}\n\nexport interface WaterParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  colorBack?: string;\n  colorHighlight?: string;\n  highlights?: number;\n  layering?: number;\n  edges?: number;\n  caustic?: number;\n  waves?: number;\n  size?: number;\n}\n"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, simplexNoise } from '../shader-utils.js';\n\n/**\n * Mimicking water surface distortion with a combination of noises;\n * Can be applied over the texture or just be used as an animated pattern\n *\n * Uniforms:\n * - u_colorBack, u_colorHighlight (RGBA)\n * - u_size: pattern scale relative to the image\n * - u_caustic: power of caustic distortion\n * - u_layering: the power of 2nd layer of caustic distortion\n * - u_edges: caustic distortion power on the image edges\n * - u_waves: additional distortion based in Simplex noise, independent from caustic\n * - u_highlights: a coloring added over the image/background, following the caustic shape\n *\n */\n\n// language=GLSL\nexport const waterFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_size;\nuniform float u_highlights;\nuniform float u_layering;\nuniform float u_edges;\nuniform float u_caustic;\nuniform float u_waves;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\n${simplexNoise}\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n\n  float left   = smoothstep(0., aax, uv.x);\n  float right  = 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\nmat2 rotate2D(float r) {\n  return mat2(cos(r), sin(r), -sin(r), cos(r));\n}\n\nfloat getCausticNoise(vec2 uv, float t, float scale) {\n  vec2 n = vec2(.1);\n  vec2 N = vec2(.1);\n  mat2 m = rotate2D(.5);\n  for (int j = 0; j < 6; j++) {\n    uv *= m;\n    n *= m;\n    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;\n    n += sin(q);\n    N += cos(q) / scale;\n    scale *= 1.1;\n  }\n  return (N.x + N.y + 1.);\n}\n\nvoid main() {\n  vec2 imageUV = v_imageUV;\n  vec2 patternUV = v_imageUV - .5;\n  patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));\n  patternUV /= (.01 + .09 * u_size);\n\n  float t = u_time;\n\n  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));\n\n  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);\n\n  causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);\n  causticNoise = pow(causticNoise, 2.);\n\n  float edgesDistortion = smoothstep(0., .1, imageUV.x);\n  edgesDistortion *= smoothstep(0., .1, imageUV.y);\n  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + smoothstep(.95, .8, imageUV.x));\n  edgesDistortion *= smoothstep(1., .9, imageUV.y);\n  edgesDistortion = mix(edgesDistortion, 1., u_edges);\n\n  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;\n\n  float wavesDistortion = .1 * u_waves * wavesNoise;\n\n  imageUV += vec2(wavesDistortion, -wavesDistortion);\n  imageUV += (u_caustic * causticNoiseDistortion);\n\n  float frame = getUvFrame(imageUV);\n\n  vec4 image = texture(u_image, imageUV);\n  vec4 backColor = u_colorBack;\n  backColor.rgb *= backColor.a;\n\n  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);\n  float opacity = backColor.a + image.a * frame;\n\n  causticNoise = max(-.2, causticNoise);\n\n  float hightlight = .025 * u_highlights * causticNoise;\n  hightlight *= u_colorHighlight.a;\n  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise);\n  opacity += hightlight;\n\n  color += hightlight * (.5 + .5 * wavesNoise);\n  opacity += hightlight * (.5 + .5 * wavesNoise);\n\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WaterUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_colorBack: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_highlights: number;\n  u_layering: number;\n  u_edges: number;\n  u_caustic: number;\n  u_waves: number;\n  u_size: number;\n}\n\nexport interface WaterParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string;\n  colorBack?: string;\n  colorHighlight?: string;\n  highlights?: number;\n  layering?: number;\n  edges?: number;\n  caustic?: number;\n  waves?: number;\n  size?: number;\n}\n"],
   "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,oBAAoB;AAkB5C,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBzC,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,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;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE",
   "type": "module",
   "sideEffects": false,