@paper-design/shaders 0.0.30 → 0.0.31

package/dist/shaders/neuro-noise.js

@@ -3,8 +3,8 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing";
-import { declareRotate, colorBandingFix } from "../shader-utils";
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declareRotate, colorBandingFix } from "../shader-utils.js";
 const neuroNoiseFragmentShader = `#version 300 es
 precision mediump float;
 
@@ -13,8 +13,10 @@ uniform vec2 u_resolution;
 uniform float u_pixelRatio;
 
 uniform vec4 u_colorFront;
+uniform vec4 u_colorMid;
 uniform vec4 u_colorBack;
 uniform float u_brightness;
+uniform float u_contrast;
 
 
 ${sizingVariablesDeclaration}
@@ -23,7 +25,7 @@ out vec4 fragColor;
 
 ${declareRotate}
 
-float neuro_shape(vec2 uv, float t) {
+float neuroShape(vec2 uv, float t) {
   vec2 sine_acc = vec2(0.);
   vec2 res = vec2(0.);
   float scale = 8.;
@@ -42,19 +44,32 @@ float neuro_shape(vec2 uv, float t) {
 void main() {
   vec2 shape_uv = v_patternUV;
 
-  shape_uv *= .002;
+  shape_uv *= .0013;
 
   float t = .5 * u_time;
 
-  float noise = neuro_shape(shape_uv, t);
+  float noise = neuroShape(shape_uv, t);
 
-  noise = u_brightness * pow(noise, 3.);
-  noise += pow(noise, 12.);
-  noise = max(.0, noise - .5);
+  noise = (1. + u_brightness) * pow(noise, 2.);
+  noise = pow(noise, .7 + 6. * u_contrast);
+  noise = min(1.4, noise);
+
+  float blend = smoothstep(0.7, 1.4, noise);
+
+  vec4 frontC = u_colorFront;
+  frontC.rgb *= frontC.a;
+  vec4 midC = u_colorMid;
+  midC.rgb *= midC.a;
+  vec4 blendFront = mix(midC, frontC, blend);
+
+  float safeNoise = max(noise, 0.0);
+  vec3 color = blendFront.rgb * safeNoise;
+  float opacity = clamp(blendFront.a * safeNoise, 0., 1.);
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
 
-  vec3 color = mix(u_colorBack.rgb * u_colorBack.a, u_colorFront.rgb * u_colorFront.a, noise);
-  float opacity = mix(u_colorBack.a, u_colorFront.a, noise);
-  
   ${colorBandingFix}
 
   fragColor = vec4(color, opacity);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/neuro-noise.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declareRotate, colorBandingFix } from '../shader-utils';\n\n/**\n * Neuro Noise Pattern\n * The original artwork: https://codepen.io/ksenia-k/full/vYwgrWv by Ksenia Kondrashova\n * Renders a fractal-like structure made of several layers of since-arches\n *\n * Uniforms include:\n * u_colorFront - the front color of pattern\n * u_colorBack - the back color of pattern\n * u_brightness - the power (brightness) of pattern lines\n */\nexport const neuroNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_brightness;\n\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declareRotate}\n\nfloat neuro_shape(vec2 uv, float t) {\n  vec2 sine_acc = vec2(0.);\n  vec2 res = vec2(0.);\n  float scale = 8.;\n\n  for (int j = 0; j < 15; j++) {\n    uv = rotate(uv, 1.);\n    sine_acc = rotate(sine_acc, 1.);\n    vec2 layer = uv * scale + float(j) + sine_acc - t;\n    sine_acc += sin(layer);\n    res += (.5 + .5 * cos(layer)) / scale;\n    scale *= (1.2);\n  }\n  return res.x + res.y;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n\n  shape_uv *= .002;\n\n  float t = .5 * u_time;\n\n  float noise = neuro_shape(shape_uv, t);\n\n  noise = u_brightness * pow(noise, 3.);\n  noise += pow(noise, 12.);\n  noise = max(.0, noise - .5);\n\n  vec3 color = mix(u_colorBack.rgb * u_colorBack.a, u_colorFront.rgb * u_colorFront.a, noise);\n  float opacity = mix(u_colorBack.a, u_colorFront.a, noise);\n  \n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface NeuroNoiseUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_brightness: number;\n}\n\nexport interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colorFront?: string;\n  colorBack?: string;\n  brightness?: number;\n}\n"],
-  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,eAAe,uBAAuB;AAYxC,MAAM,2BAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY9C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkCX,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declareRotate, colorBandingFix } from '../shader-utils.js';\n\n/**\n * Neuro Noise Pattern\n * Original algo: https://x.com/zozuar/status/1625182758745128981/\n * Renders a fractal-like structure made of several layers of since-arches\n *\n * Uniforms include:\n * u_colorFront - the highlights (overexposed noise areas)\n * u_colorMid - the base color of pattern\n * u_colorBack - the backgrond color of pattern\n * u_brightness - increase/decrease the weight of strong lines\n * u_contrast - show/hide the weak pattern lines\n */\nexport const neuroNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorMid;\nuniform vec4 u_colorBack;\nuniform float u_brightness;\nuniform float u_contrast;\n\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declareRotate}\n\nfloat neuroShape(vec2 uv, float t) {\n  vec2 sine_acc = vec2(0.);\n  vec2 res = vec2(0.);\n  float scale = 8.;\n\n  for (int j = 0; j < 15; j++) {\n    uv = rotate(uv, 1.);\n    sine_acc = rotate(sine_acc, 1.);\n    vec2 layer = uv * scale + float(j) + sine_acc - t;\n    sine_acc += sin(layer);\n    res += (.5 + .5 * cos(layer)) / scale;\n    scale *= (1.2);\n  }\n  return res.x + res.y;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n\n  shape_uv *= .0013;\n\n  float t = .5 * u_time;\n\n  float noise = neuroShape(shape_uv, t);\n\n  noise = (1. + u_brightness) * pow(noise, 2.);\n  noise = pow(noise, .7 + 6. * u_contrast);\n  noise = min(1.4, noise);\n\n  float blend = smoothstep(0.7, 1.4, noise);\n\n  vec4 frontC = u_colorFront;\n  frontC.rgb *= frontC.a;\n  vec4 midC = u_colorMid;\n  midC.rgb *= midC.a;\n  vec4 blendFront = mix(midC, frontC, blend);\n\n  float safeNoise = max(noise, 0.0);\n  vec3 color = blendFront.rgb * safeNoise;\n  float opacity = clamp(blendFront.a * safeNoise, 0., 1.);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface NeuroNoiseUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorMid: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_brightness: number;\n  u_contrast: number;\n}\n\nexport interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colorFront?: string;\n  colorMid?: string;\n  colorBack?: string;\n  brightness?: number;\n  contrast?: number;\n}\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,eAAe,uBAAuB;AAcxC,MAAM,2BAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc9C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA+CX,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,14 +1,14 @@
-import type { ShaderMotionParams } from '../shader-mount';
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 /**
  * 3d Perlin noise with exposed parameters
  * Based on https://www.shadertoy.com/view/NlSGDz
  *
  * Uniforms include:
- * u_color1 - the first mixed color
- * u_color2 - the second mixed color
- * u_proportion (0 .. 1) - the proportion between u_color1 and u_color2;
- * u_softness - the sharpness of the transition between u_color1 and u_color2 in the noise output
+ * u_colorFront - the first mixed color
+ * u_colorBack - the second mixed color
+ * u_proportion (0 .. 1) - the proportion between u_colorFront and u_colorBack;
+ * u_softness - the sharpness of the transition between u_colorFront and u_colorBack in the noise output
  * u_octaveCount - the number of octaves for Perlin noise;
  *    higher values increase the complexity of the noise
  * u_persistence (0 .. 1) - the amplitude of each successive octave of the noise;
@@ -18,8 +18,8 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  */
 export declare const perlinNoiseFragmentShader: string;
 export interface PerlinNoiseUniforms extends ShaderSizingUniforms {
-    u_color1: [number, number, number, number];
-    u_color2: [number, number, number, number];
+    u_colorFront: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
     u_proportion: number;
     u_softness: number;
     u_octaveCount: number;
@@ -27,8 +27,8 @@ export interface PerlinNoiseUniforms extends ShaderSizingUniforms {
     u_lacunarity: number;
 }
 export interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {
-    color1?: string;
-    color2?: string;
+    colorFront?: string;
+    colorBack?: string;
     proportion?: number;
     softness?: number;
     octaveCount?: number;

package/dist/shaders/perlin-noise.js

@@ -3,15 +3,15 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing";
-import { declarePI, colorBandingFix } from "../shader-utils";
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, colorBandingFix } from "../shader-utils.js";
 const perlinNoiseFragmentShader = `#version 300 es
 precision mediump float;
 
 uniform float u_time;
 
-uniform vec4 u_color1;
-uniform vec4 u_color2;
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
 uniform float u_proportion;
 uniform float u_softness;
 uniform float u_octaveCount;
@@ -158,29 +158,37 @@ float get_max_amp(float persistence, float octaveCount) {
 }
 
 void main() {
-  vec2 shape_uv = v_patternUV;
+  vec2 uv = v_patternUV;
 
-  shape_uv *= .005;
+  uv *= .005;
   float t = .2 * u_time;
 
-    vec3 p = vec3(shape_uv, t);
+  vec3 p = vec3(uv, t);
 
-    float oct_count = max(0., floor(u_octaveCount));
-    float persistence = clamp(u_persistence, 0., 1.);
-    float noise = p_noise(p, int(oct_count), persistence, u_lacunarity);
+  float oct_count = max(0., floor(u_octaveCount));
+  float persistence = clamp(u_persistence, 0., 1.);
+  float noise = p_noise(p, int(oct_count), persistence, u_lacunarity);
 
-    float max_amp = get_max_amp(persistence, oct_count);
-    float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);
-    float sharpness = clamp(u_softness, 0., 1.);
-    float smooth_w = 0.5 * fwidth(noise_normalized);
-    float sharp_noise = smoothstep(
-        .5 - .5 * sharpness - smooth_w,
-        .5 + .5 * sharpness + smooth_w,
-        noise_normalized
-    );
+  float max_amp = get_max_amp(persistence, oct_count);
+  float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);
+  float sharpness = clamp(u_softness, 0., 1.);
+  float smooth_w = 0.5 * fwidth(noise_normalized);
+  float res = smoothstep(
+    .5 - .5 * sharpness - smooth_w,
+    .5 + .5 * sharpness + smooth_w,
+    noise_normalized
+  );
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
 
-    vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, sharp_noise);
-    float opacity = mix(u_color1.a, u_color2.a, sharp_noise);
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
 
   ${colorBandingFix}
 

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/perlin-noise.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, colorBandingFix } from '../shader-utils';\n\n/**\n * 3d Perlin noise with exposed parameters\n * Based on https://www.shadertoy.com/view/NlSGDz\n *\n * Uniforms include:\n * u_color1 - the first mixed color\n * u_color2 - the second mixed color\n * u_proportion (0 .. 1) - the proportion between u_color1 and u_color2;\n * u_softness - the sharpness of the transition between u_color1 and u_color2 in the noise output\n * u_octaveCount - the number of octaves for Perlin noise;\n *    higher values increase the complexity of the noise\n * u_persistence (0 .. 1) - the amplitude of each successive octave of the noise;\n *    lower values make higher octaves less pronounced\n * u_lacunarity - the frequency of each successive octave of the noise;\n *    higher values increase the detail\n */\nexport const perlinNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_octaveCount;\nuniform float u_persistence;\nuniform float u_lacunarity;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nuint hash(uint x, uint seed) {\n  const uint m = 0x5bd1e995U;\n  uint hash = seed;\n    // process input\n    uint k = x;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\nuint hash(uvec3 x, uint seed){\n    const uint m = 0x5bd1e995U;\n    uint hash = seed;\n    // process first vector element\n    uint k = x.x;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process second vector element\n    k = x.y;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process third vector element\n    k = x.z;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\n\nvec3 gradientdy(uint hash) {\n    switch (int(hash) & 15) { // look at the last four bits to pick a gradient dy\n    case 0:\n        return vec3(1, 1, 0);\n    case 1:\n        return vec3(-1, 1, 0);\n    case 2:\n        return vec3(1, -1, 0);\n    case 3:\n        return vec3(-1, -1, 0);\n    case 4:\n        return vec3(1, 0, 1);\n    case 5:\n        return vec3(-1, 0, 1);\n    case 6:\n        return vec3(1, 0, -1);\n    case 7:\n        return vec3(-1, 0, -1);\n    case 8:\n        return vec3(0, 1, 1);\n    case 9:\n        return vec3(0, -1, 1);\n    case 10:\n        return vec3(0, 1, -1);\n    case 11:\n        return vec3(0, -1, -1);\n    case 12:\n        return vec3(1, 1, 0);\n    case 13:\n        return vec3(-1, 1, 0);\n    case 14:\n        return vec3(0, -1, 1);\n    case 15:\n        return vec3(0, -1, -1);\n    }\n}\n\nfloat interpolate(float value1, float value2, float value3, float value4, float value5, float value6, float value7, float value8, vec3 t) {\n    return mix(\n        mix(mix(value1, value2, t.x), mix(value3, value4, t.x), t.y),\n        mix(mix(value5, value6, t.x), mix(value7, value8, t.x), t.y),\n        t.z\n    );\n}\n\nvec3 fade(vec3 t) {\n    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);\n}\n\nfloat perlinNoise(vec3 position, uint seed) {\n    position += 1e+4;\n    vec3 floorPosition = floor(position);\n    vec3 fractPosition = fract(position);\n    uvec3 cellCoordinates = uvec3(floorPosition);\n    float value1 = dot(gradientdy(hash(cellCoordinates, seed)), fractPosition);\n    float value2 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 0)), seed)), fractPosition - vec3(1, 0, 0));\n    float value3 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 0)), seed)), fractPosition - vec3(0, 1, 0));\n    float value4 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 0)), seed)), fractPosition - vec3(1, 1, 0));\n    float value5 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 0, 1)), seed)), fractPosition - vec3(0, 0, 1));\n    float value6 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 1)), seed)), fractPosition - vec3(1, 0, 1));\n    float value7 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 1)), seed)), fractPosition - vec3(0, 1, 1));\n    float value8 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 1)), seed)), fractPosition - vec3(1, 1, 1));\n    return interpolate(value1, value2, value3, value4, value5, value6, value7, value8, fade(fractPosition));\n}\n\nfloat p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {\n    float value = 0.0;\n    float amplitude = 1.0;\n    float currentFrequency = 10.;\n    uint currentSeed = uint(0);\n    for (int i = 0; i < octaveCount; i++) {\n        currentSeed = hash(currentSeed, 0x0U);\n        value += perlinNoise(position * currentFrequency, currentSeed) * amplitude;\n        amplitude *= persistence;\n        currentFrequency *= lacunarity;\n    }\n    return value;\n}\n\nfloat get_max_amp(float persistence, float octaveCount) {\n    persistence *= .999;\n    return (1. - pow(persistence, octaveCount)) / (1. - persistence);\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n\n  shape_uv *= .005;\n  float t = .2 * u_time;\n\n    vec3 p = vec3(shape_uv, t);\n\n    float oct_count = max(0., floor(u_octaveCount));\n    float persistence = clamp(u_persistence, 0., 1.);\n    float noise = p_noise(p, int(oct_count), persistence, u_lacunarity);\n\n    float max_amp = get_max_amp(persistence, oct_count);\n    float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);\n    float sharpness = clamp(u_softness, 0., 1.);\n    float smooth_w = 0.5 * fwidth(noise_normalized);\n    float sharp_noise = smoothstep(\n        .5 - .5 * sharpness - smooth_w,\n        .5 + .5 * sharpness + smooth_w,\n        noise_normalized\n    );\n\n    vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, sharp_noise);\n    float opacity = mix(u_color1.a, u_color2.a, sharp_noise);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PerlinNoiseUniforms extends ShaderSizingUniforms {\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_proportion: number;\n  u_softness: number;\n  u_octaveCount: number;\n  u_persistence: number;\n  u_lacunarity: number;\n}\n\nexport interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  color1?: string;\n  color2?: string;\n  proportion?: number;\n  softness?: number;\n  octaveCount?: number;\n  persistence?: number;\n  lacunarity?: number;\n}\n"],
-  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAkBpC,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAa/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgKP,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, colorBandingFix } from '../shader-utils.js';\n\n/**\n * 3d Perlin noise with exposed parameters\n * Based on https://www.shadertoy.com/view/NlSGDz\n *\n * Uniforms include:\n * u_colorFront - the first mixed color\n * u_colorBack - the second mixed color\n * u_proportion (0 .. 1) - the proportion between u_colorFront and u_colorBack;\n * u_softness - the sharpness of the transition between u_colorFront and u_colorBack in the noise output\n * u_octaveCount - the number of octaves for Perlin noise;\n *    higher values increase the complexity of the noise\n * u_persistence (0 .. 1) - the amplitude of each successive octave of the noise;\n *    lower values make higher octaves less pronounced\n * u_lacunarity - the frequency of each successive octave of the noise;\n *    higher values increase the detail\n */\nexport const perlinNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_octaveCount;\nuniform float u_persistence;\nuniform float u_lacunarity;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nuint hash(uint x, uint seed) {\n  const uint m = 0x5bd1e995U;\n  uint hash = seed;\n    // process input\n    uint k = x;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\nuint hash(uvec3 x, uint seed){\n    const uint m = 0x5bd1e995U;\n    uint hash = seed;\n    // process first vector element\n    uint k = x.x;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process second vector element\n    k = x.y;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process third vector element\n    k = x.z;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\n\nvec3 gradientdy(uint hash) {\n    switch (int(hash) & 15) { // look at the last four bits to pick a gradient dy\n    case 0:\n        return vec3(1, 1, 0);\n    case 1:\n        return vec3(-1, 1, 0);\n    case 2:\n        return vec3(1, -1, 0);\n    case 3:\n        return vec3(-1, -1, 0);\n    case 4:\n        return vec3(1, 0, 1);\n    case 5:\n        return vec3(-1, 0, 1);\n    case 6:\n        return vec3(1, 0, -1);\n    case 7:\n        return vec3(-1, 0, -1);\n    case 8:\n        return vec3(0, 1, 1);\n    case 9:\n        return vec3(0, -1, 1);\n    case 10:\n        return vec3(0, 1, -1);\n    case 11:\n        return vec3(0, -1, -1);\n    case 12:\n        return vec3(1, 1, 0);\n    case 13:\n        return vec3(-1, 1, 0);\n    case 14:\n        return vec3(0, -1, 1);\n    case 15:\n        return vec3(0, -1, -1);\n    }\n}\n\nfloat interpolate(float value1, float value2, float value3, float value4, float value5, float value6, float value7, float value8, vec3 t) {\n    return mix(\n        mix(mix(value1, value2, t.x), mix(value3, value4, t.x), t.y),\n        mix(mix(value5, value6, t.x), mix(value7, value8, t.x), t.y),\n        t.z\n    );\n}\n\nvec3 fade(vec3 t) {\n    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);\n}\n\nfloat perlinNoise(vec3 position, uint seed) {\n    position += 1e+4;\n    vec3 floorPosition = floor(position);\n    vec3 fractPosition = fract(position);\n    uvec3 cellCoordinates = uvec3(floorPosition);\n    float value1 = dot(gradientdy(hash(cellCoordinates, seed)), fractPosition);\n    float value2 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 0)), seed)), fractPosition - vec3(1, 0, 0));\n    float value3 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 0)), seed)), fractPosition - vec3(0, 1, 0));\n    float value4 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 0)), seed)), fractPosition - vec3(1, 1, 0));\n    float value5 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 0, 1)), seed)), fractPosition - vec3(0, 0, 1));\n    float value6 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 1)), seed)), fractPosition - vec3(1, 0, 1));\n    float value7 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 1)), seed)), fractPosition - vec3(0, 1, 1));\n    float value8 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 1)), seed)), fractPosition - vec3(1, 1, 1));\n    return interpolate(value1, value2, value3, value4, value5, value6, value7, value8, fade(fractPosition));\n}\n\nfloat p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {\n    float value = 0.0;\n    float amplitude = 1.0;\n    float currentFrequency = 10.;\n    uint currentSeed = uint(0);\n    for (int i = 0; i < octaveCount; i++) {\n        currentSeed = hash(currentSeed, 0x0U);\n        value += perlinNoise(position * currentFrequency, currentSeed) * amplitude;\n        amplitude *= persistence;\n        currentFrequency *= lacunarity;\n    }\n    return value;\n}\n\nfloat get_max_amp(float persistence, float octaveCount) {\n    persistence *= .999;\n    return (1. - pow(persistence, octaveCount)) / (1. - persistence);\n}\n\nvoid main() {\n  vec2 uv = v_patternUV;\n\n  uv *= .005;\n  float t = .2 * u_time;\n\n  vec3 p = vec3(uv, t);\n\n  float oct_count = max(0., floor(u_octaveCount));\n  float persistence = clamp(u_persistence, 0., 1.);\n  float noise = p_noise(p, int(oct_count), persistence, u_lacunarity);\n\n  float max_amp = get_max_amp(persistence, oct_count);\n  float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);\n  float sharpness = clamp(u_softness, 0., 1.);\n  float smooth_w = 0.5 * fwidth(noise_normalized);\n  float res = smoothstep(\n    .5 - .5 * sharpness - smooth_w,\n    .5 + .5 * sharpness + smooth_w,\n    noise_normalized\n  );\n\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n  float fgOpacity = u_colorFront.a;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  float bgOpacity = u_colorBack.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PerlinNoiseUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_proportion: number;\n  u_softness: number;\n  u_octaveCount: number;\n  u_persistence: number;\n  u_lacunarity: number;\n}\n\nexport interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colorFront?: string;\n  colorBack?: string;\n  proportion?: number;\n  softness?: number;\n  octaveCount?: number;\n  persistence?: number;\n  lacunarity?: number;\n}\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAkBpC,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAa/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwKP,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
-import type { vec4 } from '../types';
-import type { ShaderMotionParams } from '../shader-mount';
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 export declare const pulsingBorderMeta: {
     readonly maxColorCount: 5;
     readonly maxSpotsPerColor: 5;

package/dist/shaders/pulsing-border.js

@@ -3,8 +3,8 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing";
-import { declarePI, colorBandingFix } from "../shader-utils";
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, colorBandingFix } from "../shader-utils.js";
 const pulsingBorderMeta = {
   maxColorCount: 5,
   maxSpotsPerColor: 5
@@ -37,7 +37,7 @@ out vec4 fragColor;
 ${declarePI}
 
 float roundedBox(vec2 uv, vec2 halfSize, float radius, float distance, float edgeSoftness) {
-    
+
     float borderDistance = abs(distance) - .5 * u_thickness;
     float border = 1. - smoothstep(-.5 * edgeSoftness, .5 * edgeSoftness, borderDistance);
     border *= border;
@@ -46,24 +46,24 @@ float roundedBox(vec2 uv, vec2 halfSize, float radius, float distance, float edg
     vec2 v1 = uv - vec2(-halfSize.x, halfSize.y);
     vec2 v2 = uv - vec2(halfSize.x, -halfSize.y);
     vec2 v3 = uv - halfSize;
-    
+
     float mult = (.07 - .25 * radius);
     float m0 = mult * clamp(pow(1. - abs(v0.x - v0.y), 20.), 0., 1.);
     float m1 = mult * clamp(pow(1. - abs(v1.x + v1.y), 20.), 0., 1.);
     float m2 = mult * clamp(pow(1. - abs(v2.x + v2.y), 20.), 0., 1.);
     float m3 = mult * clamp(pow(1. - abs(v3.x - v3.y), 20.), 0., 1.);
-    
+
     float l = edgeSoftness * .5 + .75 * u_thickness;
     float fade0 = 1. - clamp(length(v0) / l, 0., 1.);
     float fade1 = 1. - clamp(length(v1) / l, 0., 1.);
     float fade2 = 1. - clamp(length(v2) / l, 0., 1.);
     float fade3 = 1. - clamp(length(v3) / l, 0., 1.);
-    
+
     m0 *= fade0;
     m1 *= fade1;
     m2 *= fade2;
     m3 *= fade3;
-    
+
     float fillFix = m0 + m1 + m2 + m3;
     fillFix *= step(distance, 0.);
     fillFix *= (1. + 3. * u_thickness);
@@ -82,7 +82,7 @@ float roundedBoxSmoke(vec2 uv, vec2 halfSize, float radius, float distance, floa
     vec2 v1 = uv - vec2(-halfSize.x, halfSize.y);
     vec2 v2 = uv - vec2(halfSize.x, -halfSize.y);
     vec2 v3 = uv - halfSize;
-    
+
     float l_mask = .5;
     float mask = smoothstep(0., 1., length(v0) / l_mask);
     mask *= smoothstep(0., 1., length(v1) / l_mask);
@@ -121,12 +121,12 @@ float getWaveformValue(float time) {
 void main() {
 
   float t = .5 * u_time + 20.;
-  
+
   vec2 borderUV = v_responsiveUV;
 
   float angle = atan(borderUV.y, borderUV.x) / TWO_PI;
-  
-  
+
+
   float borderRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
   borderUV.x *= borderRatio;
   vec2 halfSize = vec2(.5);
@@ -136,11 +136,11 @@ void main() {
   float outsideDistance = length(max(d, 0.)) - radius;
   float insideDistance = min(max(d.x, d.y), 0.0);
   float distance = outsideDistance + insideDistance;
-    
+
   float border = roundedBox(borderUV, halfSize, radius, distance, .5 * u_softness);
 
   float pulse = u_pulse * getWaveformValue(.18 * u_time);
-  
+
   border *= (1. + .1 * pulse);
   border *= (1. + u_intensity);
 
@@ -159,53 +159,53 @@ void main() {
 
   vec3 color = vec3(0.);
   float opacity = 0.;
-  
+
   vec3 accumColor = vec3(0.);
   float accumAlpha = 0.;
-  
+
   for (int i = 0; i < ${pulsingBorderMeta.maxSpotsPerColor}; i++) {
     if (i >= int(u_spotsPerColor)) break;
     float idx = float(i);
-  
+
     for (int j = 0; j < ${pulsingBorderMeta.maxColorCount}; j++) {
       if (j >= int(u_colorsCount)) break;
       float colorIdx = float(j);
 
       vec2 randVal = rand(vec2(idx * 10. + 2., 40. + colorIdx));
-  
+
       float time = (.1 + .15 * abs(sin(idx * (2. + colorIdx)) * cos(idx * (2. + 2.5 * colorIdx)))) * t + randVal.x * 3.;
       time *= mix(1., -1., step(.5, randVal.y));
-  
+
       float mask = .2 + mix(
         sin(t + idx * (5. - 1.5 * colorIdx)),
         cos(t + idx * (3. + 1.3 * colorIdx)),
         step(mod(colorIdx, 2.), .5)
       );
-      
+
       mask += pulse;
       if (mask < 0.) continue;
-  
+
       float atg1 = fract(angle + time);
       float sector = smoothstep(.5 - u_spotSize, .5, atg1) * smoothstep(.5 + u_spotSize, .5, atg1);
       sector *= border;
       sector *= mask;
       sector = clamp(sector, 0., 1.);
-      
+
       sectorsTotal += sector;
-      
+
       float alpha = sector * u_colors[j].a;
       accumColor += u_colors[j].rgb * alpha;
       accumAlpha += alpha;
     }
   }
-  
+
   color = accumColor;
   opacity = clamp(accumAlpha, 0., 1.);
-  
+
   vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
   color = color + bgColor * (1. - opacity);
   opacity = opacity + u_colorBack.a * (1. - opacity);
-  
+
   ${colorBandingFix}
 
   fragColor = vec4(color, opacity);

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';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, colorBandingFix } from '../shader-utils';\n\nexport const pulsingBorderMeta = {\n  maxColorCount: 5,\n  maxSpotsPerColor: 5,\n} as const;\n\n/**\n * Pulsing Border Pattern with Smoke Effect\n * This shader creates a rounded border mask with multiple color spots\n * traveling along the border\n *\n * Uniforms include:\n * u_colorBack   - The background color of the pattern\n * u_colors      - An array of colors for the pulsing spots (with up to `u_colorsCount` entries)\n * u_colorsCount - The number of colors used in the pattern\n * u_roundness   - The roundness of the border corners\n * u_thickness   - The thickness of the border\n * u_softness    - The blur around the border edges\n * u_intensity   - The intensity multiplier for the pulsing effect\n * u_spotSize    - The size of the color spots\n * u_spotsPerColor - The number of spots for each color (not all the spots are visible all the time)\n * u_pulse     - A multiplier for the pulsing strength (pulsing signal taken from the u_pulseTexture)\n * u_smoke       - The strength of the smoke effect (the noise aroung the border)\n */\n\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_spotSize;\nuniform float u_spotsPerColor;\nuniform float u_pulse;\nuniform float u_smoke;\nuniform float u_smokeSize;\n\nuniform sampler2D u_pulseTexture;\nuniform sampler2D u_noiseTexture;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat roundedBox(vec2 uv, vec2 halfSize, float radius, float distance, float edgeSoftness) {\n    \n    float borderDistance = abs(distance) - .5 * u_thickness;\n    float border = 1. - smoothstep(-.5 * edgeSoftness, .5 * edgeSoftness, borderDistance);\n    border *= border;\n\n    vec2 v0 = uv + halfSize;\n    vec2 v1 = uv - vec2(-halfSize.x, halfSize.y);\n    vec2 v2 = uv - vec2(halfSize.x, -halfSize.y);\n    vec2 v3 = uv - halfSize;\n    \n    float mult = (.07 - .25 * radius);\n    float m0 = mult * clamp(pow(1. - abs(v0.x - v0.y), 20.), 0., 1.);\n    float m1 = mult * clamp(pow(1. - abs(v1.x + v1.y), 20.), 0., 1.);\n    float m2 = mult * clamp(pow(1. - abs(v2.x + v2.y), 20.), 0., 1.);\n    float m3 = mult * clamp(pow(1. - abs(v3.x - v3.y), 20.), 0., 1.);\n    \n    float l = edgeSoftness * .5 + .75 * u_thickness;\n    float fade0 = 1. - clamp(length(v0) / l, 0., 1.);\n    float fade1 = 1. - clamp(length(v1) / l, 0., 1.);\n    float fade2 = 1. - clamp(length(v2) / l, 0., 1.);\n    float fade3 = 1. - clamp(length(v3) / l, 0., 1.);\n    \n    m0 *= fade0;\n    m1 *= fade1;\n    m2 *= fade2;\n    m3 *= fade3;\n    \n    float fillFix = m0 + m1 + m2 + m3;\n    fillFix *= step(distance, 0.);\n    fillFix *= (1. + 3. * u_thickness);\n    fillFix *= (1.5 - .5 * smoothstep(0., .5, edgeSoftness));\n    fillFix = clamp(fillFix, 0., 1.);\n\n    return border + fillFix;\n}\n\nfloat roundedBoxSmoke(vec2 uv, vec2 halfSize, float radius, float distance, float size) {\n    float borderDistance = abs(distance);\n    float border = 1. - smoothstep(-.75 * size, .75 * size, borderDistance);\n    border *= border;\n\n    vec2 v0 = uv + halfSize;\n    vec2 v1 = uv - vec2(-halfSize.x, halfSize.y);\n    vec2 v2 = uv - vec2(halfSize.x, -halfSize.y);\n    vec2 v3 = uv - halfSize;\n    \n    float l_mask = .5;\n    float mask = smoothstep(0., 1., length(v0) / l_mask);\n    mask *= smoothstep(0., 1., length(v1) / l_mask);\n    mask *= smoothstep(0., 1., length(v2) / l_mask);\n    mask *= smoothstep(0., 1., length(v3) / l_mask);\n\n    return border * mask;\n}\n\nvec2 rand(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, uv).gb;\n}\n\nfloat noise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = rand(i).x;\n  float b = rand(i + vec2(1.0, 0.0)).x;\n  float c = rand(i + vec2(0.0, 1.0)).x;\n  float d = rand(i + vec2(1.0, 1.0)).x;\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 getWaveformValue(float time) {\n  float dur = 5.;\n  float wrappedTime = mod(time, dur);\n  float normalizedTime = wrappedTime / dur;\n  float value = texture(u_pulseTexture, vec2(normalizedTime, 0.5)).r;\n  return value * 2. - 1.;\n}\n\nvoid main() {\n\n  float t = .5 * u_time + 20.;\n  \n  vec2 borderUV = v_responsiveUV;\n\n  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n  \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, halfSize, radius, distance, .5 * u_softness);\n\n  float pulse = u_pulse * getWaveformValue(.18 * u_time);\n  \n  border *= (1. + .1 * pulse);\n  border *= (1. + u_intensity);\n\n  vec2 smokeUV = .001 * u_smokeSize * v_patternUV;\n  float smoke = clamp(3. * noise(2.7 * smokeUV + .5 * t), 0., 1.);\n  smoke -= noise(3.4 * smokeUV - .5 * t);\n  smoke *= roundedBoxSmoke(borderUV, halfSize, radius, distance, u_smoke);\n  smoke = 50. * pow(smoke, 2.);\n  smoke *= u_smoke;\n  smoke *= (.8 + .4 * pulse);\n  smoke = clamp(smoke, 0., 1.);\n\n  border += smoke;\n\n  float sectorsTotal = 0.;\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n  \n  vec3 accumColor = vec3(0.);\n  float accumAlpha = 0.;\n  \n  for (int i = 0; i < ${pulsingBorderMeta.maxSpotsPerColor}; i++) {\n    if (i >= int(u_spotsPerColor)) break;\n    float idx = float(i);\n  \n    for (int j = 0; j < ${pulsingBorderMeta.maxColorCount}; j++) {\n      if (j >= int(u_colorsCount)) break;\n      float colorIdx = float(j);\n\n      vec2 randVal = rand(vec2(idx * 10. + 2., 40. + colorIdx));\n  \n      float time = (.1 + .15 * abs(sin(idx * (2. + colorIdx)) * cos(idx * (2. + 2.5 * colorIdx)))) * t + randVal.x * 3.;\n      time *= mix(1., -1., step(.5, randVal.y));\n  \n      float mask = .2 + mix(\n        sin(t + idx * (5. - 1.5 * colorIdx)),\n        cos(t + idx * (3. + 1.3 * colorIdx)),\n        step(mod(colorIdx, 2.), .5)\n      );\n      \n      mask += pulse;\n      if (mask < 0.) continue;\n  \n      float atg1 = fract(angle + time);\n      float sector = smoothstep(.5 - u_spotSize, .5, atg1) * smoothstep(.5 + u_spotSize, .5, atg1);\n      sector *= border;\n      sector *= mask;\n      sector = clamp(sector, 0., 1.);\n      \n      sectorsTotal += sector;\n      \n      float alpha = sector * u_colors[j].a;\n      accumColor += u_colors[j].rgb * alpha;\n      accumAlpha += alpha;\n    }\n  }\n  \n  color = accumColor;\n  opacity = clamp(accumAlpha, 0., 1.);\n  \n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n  \n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface 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_spotsPerColor: number;\n  u_spotSize: number;\n  u_pulse: number;\n  u_smoke: number;\n  u_smokeSize: number;\n  u_pulseTexture?: 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  spotsPerColor?: number;\n  spotSize?: number;\n  pulse?: number;\n  smoke?: number;\n  smokeSize?: number;\n}\n"],
+  "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, colorBandingFix } from '../shader-utils.js';\n\nexport const pulsingBorderMeta = {\n  maxColorCount: 5,\n  maxSpotsPerColor: 5,\n} as const;\n\n/**\n * Pulsing Border Pattern with Smoke Effect\n * This shader creates a rounded border mask with multiple color spots\n * traveling along the border\n *\n * Uniforms include:\n * u_colorBack   - The background color of the pattern\n * u_colors      - An array of colors for the pulsing spots (with up to `u_colorsCount` entries)\n * u_colorsCount - The number of colors used in the pattern\n * u_roundness   - The roundness of the border corners\n * u_thickness   - The thickness of the border\n * u_softness    - The blur around the border edges\n * u_intensity   - The intensity multiplier for the pulsing effect\n * u_spotSize    - The size of the color spots\n * u_spotsPerColor - The number of spots for each color (not all the spots are visible all the time)\n * u_pulse     - A multiplier for the pulsing strength (pulsing signal taken from the u_pulseTexture)\n * u_smoke       - The strength of the smoke effect (the noise aroung the border)\n */\n\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_spotSize;\nuniform float u_spotsPerColor;\nuniform float u_pulse;\nuniform float u_smoke;\nuniform float u_smokeSize;\n\nuniform sampler2D u_pulseTexture;\nuniform sampler2D u_noiseTexture;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat roundedBox(vec2 uv, vec2 halfSize, float radius, float distance, float edgeSoftness) {\n\n    float borderDistance = abs(distance) - .5 * u_thickness;\n    float border = 1. - smoothstep(-.5 * edgeSoftness, .5 * edgeSoftness, borderDistance);\n    border *= border;\n\n    vec2 v0 = uv + halfSize;\n    vec2 v1 = uv - vec2(-halfSize.x, halfSize.y);\n    vec2 v2 = uv - vec2(halfSize.x, -halfSize.y);\n    vec2 v3 = uv - halfSize;\n\n    float mult = (.07 - .25 * radius);\n    float m0 = mult * clamp(pow(1. - abs(v0.x - v0.y), 20.), 0., 1.);\n    float m1 = mult * clamp(pow(1. - abs(v1.x + v1.y), 20.), 0., 1.);\n    float m2 = mult * clamp(pow(1. - abs(v2.x + v2.y), 20.), 0., 1.);\n    float m3 = mult * clamp(pow(1. - abs(v3.x - v3.y), 20.), 0., 1.);\n\n    float l = edgeSoftness * .5 + .75 * u_thickness;\n    float fade0 = 1. - clamp(length(v0) / l, 0., 1.);\n    float fade1 = 1. - clamp(length(v1) / l, 0., 1.);\n    float fade2 = 1. - clamp(length(v2) / l, 0., 1.);\n    float fade3 = 1. - clamp(length(v3) / l, 0., 1.);\n\n    m0 *= fade0;\n    m1 *= fade1;\n    m2 *= fade2;\n    m3 *= fade3;\n\n    float fillFix = m0 + m1 + m2 + m3;\n    fillFix *= step(distance, 0.);\n    fillFix *= (1. + 3. * u_thickness);\n    fillFix *= (1.5 - .5 * smoothstep(0., .5, edgeSoftness));\n    fillFix = clamp(fillFix, 0., 1.);\n\n    return border + fillFix;\n}\n\nfloat roundedBoxSmoke(vec2 uv, vec2 halfSize, float radius, float distance, float size) {\n    float borderDistance = abs(distance);\n    float border = 1. - smoothstep(-.75 * size, .75 * size, borderDistance);\n    border *= border;\n\n    vec2 v0 = uv + halfSize;\n    vec2 v1 = uv - vec2(-halfSize.x, halfSize.y);\n    vec2 v2 = uv - vec2(halfSize.x, -halfSize.y);\n    vec2 v3 = uv - halfSize;\n\n    float l_mask = .5;\n    float mask = smoothstep(0., 1., length(v0) / l_mask);\n    mask *= smoothstep(0., 1., length(v1) / l_mask);\n    mask *= smoothstep(0., 1., length(v2) / l_mask);\n    mask *= smoothstep(0., 1., length(v3) / l_mask);\n\n    return border * mask;\n}\n\nvec2 rand(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, uv).gb;\n}\n\nfloat noise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = rand(i).x;\n  float b = rand(i + vec2(1.0, 0.0)).x;\n  float c = rand(i + vec2(0.0, 1.0)).x;\n  float d = rand(i + vec2(1.0, 1.0)).x;\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 getWaveformValue(float time) {\n  float dur = 5.;\n  float wrappedTime = mod(time, dur);\n  float normalizedTime = wrappedTime / dur;\n  float value = texture(u_pulseTexture, vec2(normalizedTime, 0.5)).r;\n  return value * 2. - 1.;\n}\n\nvoid main() {\n\n  float t = .5 * u_time + 20.;\n\n  vec2 borderUV = v_responsiveUV;\n\n  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n\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, halfSize, radius, distance, .5 * u_softness);\n\n  float pulse = u_pulse * getWaveformValue(.18 * u_time);\n\n  border *= (1. + .1 * pulse);\n  border *= (1. + u_intensity);\n\n  vec2 smokeUV = .001 * u_smokeSize * v_patternUV;\n  float smoke = clamp(3. * noise(2.7 * smokeUV + .5 * t), 0., 1.);\n  smoke -= noise(3.4 * smokeUV - .5 * t);\n  smoke *= roundedBoxSmoke(borderUV, halfSize, radius, distance, u_smoke);\n  smoke = 50. * pow(smoke, 2.);\n  smoke *= u_smoke;\n  smoke *= (.8 + .4 * pulse);\n  smoke = clamp(smoke, 0., 1.);\n\n  border += smoke;\n\n  float sectorsTotal = 0.;\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n\n  vec3 accumColor = vec3(0.);\n  float accumAlpha = 0.;\n\n  for (int i = 0; i < ${pulsingBorderMeta.maxSpotsPerColor}; i++) {\n    if (i >= int(u_spotsPerColor)) break;\n    float idx = float(i);\n\n    for (int j = 0; j < ${pulsingBorderMeta.maxColorCount}; j++) {\n      if (j >= int(u_colorsCount)) break;\n      float colorIdx = float(j);\n\n      vec2 randVal = rand(vec2(idx * 10. + 2., 40. + colorIdx));\n\n      float time = (.1 + .15 * abs(sin(idx * (2. + colorIdx)) * cos(idx * (2. + 2.5 * colorIdx)))) * t + randVal.x * 3.;\n      time *= mix(1., -1., step(.5, randVal.y));\n\n      float mask = .2 + mix(\n        sin(t + idx * (5. - 1.5 * colorIdx)),\n        cos(t + idx * (3. + 1.3 * colorIdx)),\n        step(mod(colorIdx, 2.), .5)\n      );\n\n      mask += pulse;\n      if (mask < 0.) continue;\n\n      float atg1 = fract(angle + time);\n      float sector = smoothstep(.5 - u_spotSize, .5, atg1) * smoothstep(.5 + u_spotSize, .5, atg1);\n      sector *= border;\n      sector *= mask;\n      sector = clamp(sector, 0., 1.);\n\n      sectorsTotal += sector;\n\n      float alpha = sector * u_colors[j].a;\n      accumColor += u_colors[j].rgb * alpha;\n      accumAlpha += alpha;\n    }\n  }\n\n  color = accumColor;\n  opacity = clamp(accumAlpha, 0., 1.);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface 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_spotsPerColor: number;\n  u_spotSize: number;\n  u_pulse: number;\n  u_smoke: number;\n  u_smokeSize: number;\n  u_pulseTexture?: 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  spotsPerColor?: number;\n  spotSize?: number;\n  pulse?: number;\n  smoke?: number;\n  smokeSize?: number;\n}\n"],
   "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAEpC,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,kBAAkB;AACpB;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAiIa,kBAAkB,gBAAgB;AAAA;AAAA;AAAA;AAAA,0BAIhC,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,IAuCrD,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
-import type { vec4 } from '../types';
-import type { ShaderMotionParams } from '../shader-mount';
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 export declare const simplexNoiseMeta: {
     readonly maxColorCount: 10;
 };

package/dist/shaders/simplex-noise.js

@@ -3,8 +3,8 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing";
-import { declareSimplexNoise, colorBandingFix } from "../shader-utils";
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declareSimplexNoise, colorBandingFix } from "../shader-utils.js";
 const simplexNoiseMeta = {
   maxColorCount: 10
 };
@@ -35,10 +35,10 @@ float getNoise(vec2 uv, float t) {
 float steppedSmooth(float t, float steps, float softness) {
     float stepT = floor(t * steps) / steps;
     float f = t * steps - floor(t * steps);
-    
+
     float fw = 0.005 / u_scale;
     float smoothed = smoothstep(.5 - softness * .5 - fw, .5 + softness * .5 + fw, f);
-        
+
     return stepT + smoothed / steps;
 }
 
@@ -50,9 +50,9 @@ void main() {
   float t = .2 * u_time;
 
   float shape = .5 + .5 * getNoise(shape_uv, t);
-  
+
   bool u_extraSides = true;
-  
+
   float mixer = shape * (u_colorsCount - 1.);
   if (u_extraSides == true) {
     mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
@@ -64,22 +64,22 @@ void main() {
   gradient.rgb *= gradient.a;
   for (int i = 1; i < ${simplexNoiseMeta.maxColorCount}; i++) {
       if (i >= int(u_colorsCount)) break;
-      
+
       float localT = clamp(mixer - float(i - 1), 0., 1.);
-      localT = steppedSmooth(localT, steps, u_softness);   
-      
+      localT = steppedSmooth(localT, steps, u_softness);
+
       vec4 c = u_colors[i];
       c.rgb *= c.a;
       gradient = mix(gradient, c, localT);
   }
-  
+
   if (u_extraSides == true) {
    if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
      float localT = mixer + 1.;
      if (mixer > (u_colorsCount - 1.)) {
        localT = mixer - (u_colorsCount - 1.);
      }
-     localT = steppedSmooth(localT, steps, u_softness);   
+     localT = steppedSmooth(localT, steps, u_softness);
      vec4 cFst = u_colors[0];
      cFst.rgb *= cFst.a;
      vec4 cLast = u_colors[int(u_colorsCount - 1.)];
@@ -90,7 +90,7 @@ void main() {
 
   vec3 color = gradient.rgb;
   float opacity = gradient.a;
-  
+
   ${colorBandingFix}
 
   fragColor = vec4(color, opacity);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/simplex-noise.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declareSimplexNoise, colorBandingFix } from '../shader-utils';\n\nexport const simplexNoiseMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Simplex Noise animation by Ksenia Kondrashova\n * Calculates a combination of 2 simplex noises with result mapped as\n * a gradient with dynamic number of main colors and steps between them\n *\n * Uniforms include:\n * - u_colors (vec4[]): Input RGBA colors\n * - u_colorsCount (float): Number of active colors (`u_colors` length)\n * - u_stepsPerColor (float, used as int): Number of rendered colors per input color\n * - u_softness (float, 0..1): Amount of blur applied to the color steps\n */\nexport const simplexNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform float u_scale;\n\nuniform vec4 u_colors[${simplexNoiseMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_softness;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declareSimplexNoise}\n\nfloat getNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nfloat steppedSmooth(float t, float steps, float softness) {\n    float stepT = floor(t * steps) / steps;\n    float f = t * steps - floor(t * steps);\n    \n    float fw = 0.005 / u_scale;\n    float smoothed = smoothstep(.5 - softness * .5 - fw, .5 + softness * .5 + fw, f);\n        \n    return stepT + smoothed / steps;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n\n  shape_uv *= .001;\n\n  float t = .2 * u_time;\n\n  float shape = .5 + .5 * getNoise(shape_uv, t);\n  \n  bool u_extraSides = true;\n  \n  float mixer = shape * (u_colorsCount - 1.);\n  if (u_extraSides == true) {\n    mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n  }\n\n  float steps = max(1., u_stepsPerColor);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${simplexNoiseMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n      \n      float localT = clamp(mixer - float(i - 1), 0., 1.);\n      localT = steppedSmooth(localT, steps, u_softness);   \n      \n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localT);\n  }\n  \n  if (u_extraSides == true) {\n   if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n     float localT = mixer + 1.;\n     if (mixer > (u_colorsCount - 1.)) {\n       localT = mixer - (u_colorsCount - 1.);\n     }\n     localT = steppedSmooth(localT, steps, u_softness);   \n     vec4 cFst = u_colors[0];\n     cFst.rgb *= cFst.a;\n     vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n     cLast.rgb *= cLast.a;\n     gradient = mix(cLast, cFst, localT);\n   }\n  }\n\n  vec3 color = gradient.rgb;\n  float opacity = gradient.a;\n  \n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SimplexNoiseUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_stepsPerColor: number;\n  u_softness: number;\n}\n\nexport interface SimplexNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  stepsPerColor?: number;\n  softness?: number;\n}\n"],
+  "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 { declareSimplexNoise, colorBandingFix } from '../shader-utils.js';\n\nexport const simplexNoiseMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Simplex Noise animation by Ksenia Kondrashova\n * Calculates a combination of 2 simplex noises with result mapped as\n * a gradient with dynamic number of main colors and steps between them\n *\n * Uniforms include:\n * - u_colors (vec4[]): Input RGBA colors\n * - u_colorsCount (float): Number of active colors (`u_colors` length)\n * - u_stepsPerColor (float, used as int): Number of rendered colors per input color\n * - u_softness (float, 0..1): Amount of blur applied to the color steps\n */\nexport const simplexNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform float u_scale;\n\nuniform vec4 u_colors[${simplexNoiseMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_softness;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declareSimplexNoise}\n\nfloat getNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nfloat steppedSmooth(float t, float steps, float softness) {\n    float stepT = floor(t * steps) / steps;\n    float f = t * steps - floor(t * steps);\n\n    float fw = 0.005 / u_scale;\n    float smoothed = smoothstep(.5 - softness * .5 - fw, .5 + softness * .5 + fw, f);\n\n    return stepT + smoothed / steps;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n\n  shape_uv *= .001;\n\n  float t = .2 * u_time;\n\n  float shape = .5 + .5 * getNoise(shape_uv, t);\n\n  bool u_extraSides = true;\n\n  float mixer = shape * (u_colorsCount - 1.);\n  if (u_extraSides == true) {\n    mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n  }\n\n  float steps = max(1., u_stepsPerColor);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${simplexNoiseMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n\n      float localT = clamp(mixer - float(i - 1), 0., 1.);\n      localT = steppedSmooth(localT, steps, u_softness);\n\n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localT);\n  }\n\n  if (u_extraSides == true) {\n   if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n     float localT = mixer + 1.;\n     if (mixer > (u_colorsCount - 1.)) {\n       localT = mixer - (u_colorsCount - 1.);\n     }\n     localT = steppedSmooth(localT, steps, u_softness);\n     vec4 cFst = u_colors[0];\n     cFst.rgb *= cFst.a;\n     vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n     cLast.rgb *= cLast.a;\n     gradient = mix(cLast, cFst, localT);\n   }\n  }\n\n  vec3 color = gradient.rgb;\n  float opacity = gradient.a;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SimplexNoiseUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_stepsPerColor: number;\n  u_softness: number;\n}\n\nexport interface SimplexNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  stepsPerColor?: number;\n  softness?: number;\n}\n"],
   "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,uBAAuB;AAE9C,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AACjB;AAaO,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM1B,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,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,wBAuCG,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA6BlD,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
-import type { vec4 } from '../types';
-import type { ShaderMotionParams } from '../shader-mount';
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 export declare const smokeRingMeta: {
     readonly maxColorCount: 10;
     readonly maxNoiseIterations: 8;

package/dist/shaders/smoke-ring.js

@@ -3,8 +3,8 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing";
-import { declarePI, declareRandom, colorBandingFix } from "../shader-utils";
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, declareRandom, colorBandingFix } from "../shader-utils.js";
 const smokeRingMeta = {
   maxColorCount: 10,
   maxNoiseIterations: 8
@@ -122,12 +122,12 @@ void main() {
       gradient = mix(gradient, c, localT);
   }
 
+  vec3 color = gradient.rgb * ringShape;
   float opacity = gradient.a * ringShape;
-  opacity += u_colorBack.a;
 
-  vec3 color = gradient.rgb * ringShape;
-  color += u_colorBack.rgb * u_colorBack.a * (1. - ringShape);
-  color += u_colorBack.rgb * u_colorBack.a * ringShape * (1. - gradient.a);
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
 
   ${colorBandingFix}