@paper-design/shaders 0.0.38 → 0.0.40

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

@@ -3,7 +3,7 @@ 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;
+    readonly maxSpots: 4;
 };
 /**
  * Color spots traveling around rectangular stroke (border)
@@ -12,13 +12,13 @@ export declare const pulsingBorderMeta: {
  * - u_colorBack (RGBA)
  * - u_colors (vec4[]), u_colorsCount (float used as integer)
  * - u_roundness, u_thickness, u_softness: border parameters
- * - u_intensity: global multiplier for spots shape & color
+ * - u_intensity: thickness of individual spots
+ * - u_bloom: normal / additive color blending
  * - u_spotSize: angular size of spots
- * - u_spotsPerColor (float used as int): number of spots rendered per color (not all visible at the same time)
+ * - u_spots (float used as int): number of spots rendered per color
  * - u_pulse: optional pulsing animation
  * - u_smoke, u_smokeSize: optional noisy shapes around the border
  *
- * - u_pulseTexture (sampler2D): pulsing signal source
  * - u_noiseTexture (sampler2D): pre-computed randomizer source
  *
  */
@@ -31,12 +31,12 @@ export interface PulsingBorderUniforms extends ShaderSizingUniforms {
     u_thickness: number;
     u_softness: number;
     u_intensity: number;
-    u_spotsPerColor: number;
+    u_bloom: number;
+    u_spots: number;
     u_spotSize: number;
     u_pulse: number;
     u_smoke: number;
     u_smokeSize: number;
-    u_pulseTexture?: HTMLImageElement;
 }
 export interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionParams {
     colorBack?: string;
@@ -45,7 +45,8 @@ export interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionPar
     thickness?: number;
     softness?: number;
     intensity?: number;
-    spotsPerColor?: number;
+    bloom?: number;
+    spots?: number;
     spotSize?: number;
     pulse?: number;
     smoke?: number;

package/dist/shaders/pulsing-border.js

@@ -7,7 +7,7 @@ import { sizingVariablesDeclaration } from "../shader-sizing.js";
 import { declarePI, declareValueNoise, colorBandingFix } from "../shader-utils.js";
 const pulsingBorderMeta = {
   maxColorCount: 5,
-  maxSpotsPerColor: 5
+  maxSpots: 4
 };
 const pulsingBorderFragmentShader = `#version 300 es
 precision lowp float;
@@ -21,13 +21,13 @@ uniform float u_roundness;
 uniform float u_thickness;
 uniform float u_softness;
 uniform float u_intensity;
+uniform float u_bloom;
 uniform float u_spotSize;
-uniform float u_spotsPerColor;
+uniform float u_spots;
 uniform float u_pulse;
 uniform float u_smoke;
 uniform float u_smokeSize;
 
-uniform sampler2D u_pulseTexture;
 uniform sampler2D u_noiseTexture;
 
 ${sizingVariablesDeclaration}
@@ -36,60 +36,27 @@ 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;
-
-    vec2 v0 = uv + halfSize;
-    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);
-    fillFix *= (1.5 - .5 * smoothstep(0., .5, edgeSoftness));
-    fillFix = clamp(fillFix, 0., 1.);
-
-    return border + fillFix;
-}
+float beat(float time) {
+  float first = pow(sin(time * TWO_PI), 10.);
+  float second = pow(sin((time - 0.15) * TWO_PI), 10.);
 
-float roundedBoxSmoke(vec2 uv, vec2 halfSize, float radius, float distance, float size) {
-    float borderDistance = abs(distance);
-    float border = 1. - smoothstep(-.75 * size, .75 * size, borderDistance);
-    border *= border;
+  return clamp(first + 0.6 * second, 0.0, 1.0);
+}
 
-    vec2 v0 = uv + halfSize;
-    vec2 v1 = uv - vec2(-halfSize.x, halfSize.y);
-    vec2 v2 = uv - vec2(halfSize.x, -halfSize.y);
-    vec2 v3 = uv - halfSize;
+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.);
 
-    float l_mask = .5;
-    float mask = smoothstep(0., 1., length(v0) / l_mask);
-    mask *= smoothstep(0., 1., length(v1) / l_mask);
-    mask *= smoothstep(0., 1., length(v2) / l_mask);
-    mask *= smoothstep(0., 1., length(v3) / l_mask);
+  return border;
+}
 
-    return border * mask;
+float roundedBoxSmoke(vec2 uv, float distance, float size) {
+  float borderDistance = abs(distance);
+  float border = 1. - smoothstep(-.75 * size, .75 * size, borderDistance);
+  border *= border;
+  return border;
 }
 
 float random(vec2 p) {
@@ -103,22 +70,19 @@ vec2 rand2(vec2 p) {
 
 ${declareValueNoise}
 
-float getWaveformValue(float time) {
-  float dur = 5.;
-  float wrappedTime = mod(time, dur);
-  float normalizedTime = wrappedTime / dur;
-  float value = texture(u_pulseTexture, vec2(normalizedTime, 0.5)).r;
-  return value * 2. - 1.;
+float linearstep(float edge0, float edge1, float x) {
+  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
 }
 
 void main() {
 
-  float t = .5 * u_time + 20.;
+  float t = 1.2 * u_time;
 
   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;
@@ -130,80 +94,132 @@ void main() {
   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);
+  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;
+  }
 
-  border *= (1. + .1 * pulse);
-  border *= (1. + u_intensity);
+  cornerFade *= cornerFadeMask;
+  border += cornerFade;
 
-  vec2 smokeUV = .001 * u_smokeSize * v_patternUV;
+  vec2 smokeUV = .2 * 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, halfSize, radius, distance, u_smoke);
-  smoke = 50. * pow(smoke, 2.);
+  smoke *= roundedBoxSmoke(borderUV, distance, u_smoke);
+  smoke = 30. * pow(smoke, 2.);
+  smoke += cornerFadeMask;
   smoke *= u_smoke;
-  smoke *= (.8 + .4 * pulse);
+  smoke *= mix(1., pulse, u_pulse);
   smoke = clamp(smoke, 0., 1.);
 
   border += smoke;
+  border = clamp(border, 0., 1.);
+  
+  vec3 blendColor = vec3(0.);
+  float blendAlpha = 0.0;
+  vec3 addColor = vec3(0.);
+  float addAlpha = 0.0;
+  
+  float bloom = 4. * u_bloom;
+  float intensity = 1. + 4. * u_intensity;
 
-  float sectorsTotal = 0.;
-
-  vec3 color = vec3(0.);
-  float opacity = 0.;
+  for (int colorIdx = 0; colorIdx < ${pulsingBorderMeta.maxColorCount}; colorIdx++) {
+    if (colorIdx >= int(u_colorsCount)) break;
+    float colorIdxF = float(colorIdx);
 
-  vec3 accumColor = vec3(0.);
-  float accumAlpha = 0.;
+    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;
+    float a = u_colors[colorIdx].a;
 
-  for (int i = 0; i < ${pulsingBorderMeta.maxSpotsPerColor}; i++) {
-    if (i >= int(u_spotsPerColor)) break;
-    float idx = float(i);
+    for (int spotIdx = 0; spotIdx < ${pulsingBorderMeta.maxSpots}; spotIdx++) {
+      if (spotIdx >= int(u_spots)) break;
+      float spotIdxF = float(spotIdx);
 
-    for (int j = 0; j < ${pulsingBorderMeta.maxColorCount}; j++) {
-      if (j >= int(u_colorsCount)) break;
-      float colorIdx = float(j);
+      vec2 randVal = rand2(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));
 
-      vec2 randVal = rand2(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.;
+      float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;
       time *= mix(1., -1., step(.5, randVal.y));
 
-      float mask = .2 + mix(
-        sin(t + idx * (5. - 1.5 * colorIdx)),
-        cos(t + idx * (3. + 1.3 * colorIdx)),
-        step(mod(colorIdx, 2.), .5)
+      float mask = .5 + .5 * mix(
+        sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),
+        cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),
+        step(mod(colorIdxF, 2.), .5)
       );
 
-      mask += pulse;
-      if (mask < 0.) continue;
+      float p = clamp(2. * u_pulse - randVal.x, 0., 1.);
+      mask = mix(mask, pulse, p);
 
       float atg1 = fract(angle + time);
-      float sector = smoothstep(.5 - u_spotSize, .5, atg1) * smoothstep(.5 + u_spotSize, .5, atg1);
-      sector *= border;
+      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);
+      
       sector *= mask;
+      sector *= border;
+      sector *= intensity;
       sector = clamp(sector, 0., 1.);
 
-      sectorsTotal += sector;
+      vec3 srcColor = c * sector;
+      float srcAlpha = a * sector;
 
-      float alpha = sector * u_colors[j].a;
-      accumColor += u_colors[j].rgb * alpha;
-      accumAlpha += alpha;
+      blendColor += ((1. - blendAlpha) * srcColor);
+      blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;
+      addColor += srcColor;
+      addAlpha += srcAlpha;
     }
   }
 
-  color = accumColor;
-  opacity = clamp(accumAlpha, 0., 1.);
+  vec3 accumColor = mix(blendColor, addColor, bloom);
+  float accumAlpha = mix(blendAlpha, addAlpha, bloom);
+  accumAlpha = clamp(accumAlpha, 0., 1.);
 
   vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
-  color = color + bgColor * (1. - opacity);
-  opacity = opacity + u_colorBack.a * (1. - opacity);
-
+  vec3 color = accumColor + (1. - accumAlpha) * bgColor;
+  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;
+  
   ${colorBandingFix}
 
   fragColor = vec4(color, opacity);
-}
-`;
+}`;
 export {
   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, declareValueNoise, colorBandingFix } from '../shader-utils.js';\n\nexport const pulsingBorderMeta = {\n  maxColorCount: 5,\n  maxSpotsPerColor: 5,\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: global multiplier for spots shape & color\n * - u_spotSize: angular size of spots\n * - u_spotsPerColor (float used as int): number of spots rendered per color (not all visible at the same time)\n * - u_pulse: optional pulsing animation\n * - u_smoke, u_smokeSize: optional noisy shapes around the border\n *\n * - u_pulseTexture (sampler2D): pulsing signal source\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_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\nfloat random(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, uv).g;\n}\nvec2 rand2(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, uv).gb;\n}\n\n${declareValueNoise}\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. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);\n  smoke -= valueNoise(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 = rand2(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,mBAAmB,uBAAuB;AAEvD,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,EAmET,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAuDK,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;",
+  "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, declareValueNoise, 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\nfloat random(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, uv).g;\n}\nvec2 rand2(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, uv).gb;\n}\n\n${declareValueNoise}\n\nfloat linearstep(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nvoid main() {\n\n  float t = 1.2 * u_time;\n\n  vec2 borderUV = v_responsiveUV;\n\n  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n\n  float pulse = u_pulse * beat(.18 * u_time);\n\n  float borderRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  borderUV.x *= borderRatio;\n  vec2 halfSize = vec2(.5);\n  halfSize.x *= borderRatio;\n  float radius = min(.5 * u_roundness, halfSize.x);\n  vec2 d = abs(borderUV) - halfSize + radius;\n  float outsideDistance = length(max(d, 0.)) - radius;\n  float insideDistance = min(max(d.x, d.y), 0.0);\n  float distance = outsideDistance + insideDistance;\n\n  float border = roundedBox(borderUV, distance);\n  \n  vec2 v0 = borderUV + halfSize;\n  vec2 v1 = borderUV - vec2(-halfSize.x, halfSize.y);\n  vec2 v2 = borderUV - vec2(halfSize.x, -halfSize.y);\n  vec2 v3 = borderUV - halfSize;\n  \n  float cornerFade = 1. - abs(v0.x - v0.y);\n  cornerFade = max(cornerFade, 1. - abs(v1.x + v1.y));\n  cornerFade = max(cornerFade, 1. - abs(v2.x + v2.y));\n  cornerFade = max(cornerFade, 1. - abs(v3.x - v3.y));\n  cornerFade = .75 * pow(cornerFade, 20.);\n\n  float cornerFadeMask = 0.;\n  float maskR = (.35 * u_thickness - .25 * radius);\n  float maskHL = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, borderUV.x);\n  float maskHR = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, -borderUV.x);\n  float maskVT = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, -borderUV.y);\n  float maskVB = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, borderUV.y);\n  float maskOffset = .25 * (u_thickness + radius);\n  {\n    float m = maskHR;\n    m *= maskVT;\n    m *= (1. - clamp(length((v0 - maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHR;\n    m *= maskVB;\n    m *= (1. - clamp(length((v1 - vec2(1., -1.) * maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHL;\n    m *= maskVT;\n    m *= (1. - clamp(length((v2 - vec2(-1., 1.) * maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHL;\n    m *= maskVB;\n    m *= (1. - clamp(length((v3 + maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n\n  cornerFade *= cornerFadeMask;\n  border += cornerFade;\n\n  vec2 smokeUV = .2 * u_smokeSize * v_patternUV;\n  float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);\n  smoke -= valueNoise(3.4 * smokeUV - .5 * t);\n  smoke *= roundedBoxSmoke(borderUV, distance, u_smoke);\n  smoke = 30. * pow(smoke, 2.);\n  smoke += cornerFadeMask;\n  smoke *= u_smoke;\n  smoke *= mix(1., pulse, u_pulse);\n  smoke = clamp(smoke, 0., 1.);\n\n  border += smoke;\n  border = clamp(border, 0., 1.);\n  \n  vec3 blendColor = vec3(0.);\n  float blendAlpha = 0.0;\n  vec3 addColor = vec3(0.);\n  float addAlpha = 0.0;\n  \n  float bloom = 4. * u_bloom;\n  float intensity = 1. + 4. * u_intensity;\n\n  for (int colorIdx = 0; colorIdx < ${pulsingBorderMeta.maxColorCount}; colorIdx++) {\n    if (colorIdx >= int(u_colorsCount)) break;\n    float colorIdxF = float(colorIdx);\n\n    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;\n    float a = u_colors[colorIdx].a;\n\n    for (int spotIdx = 0; spotIdx < ${pulsingBorderMeta.maxSpots}; spotIdx++) {\n      if (spotIdx >= int(u_spots)) break;\n      float spotIdxF = float(spotIdx);\n\n      vec2 randVal = rand2(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}\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,mBAAmB,uBAAuB;AAEvD,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkCT,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCA+FmB,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAO/B,kBAAkB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8C5D,eAAe;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/simplex-noise.js

@@ -32,20 +32,16 @@ float getNoise(vec2 uv, float t) {
   return noise;
 }
 
-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;
+float steppedSmooth(float m, float steps, float softness) { 
+  float stepT = floor(m * steps) / steps;
+  float f = m * steps - floor(m * steps);
+  float smoothed = smoothstep(.5 - softness, .5 + softness, f);
+  return stepT + smoothed / steps;
 }
 
 void main() {
   vec2 shape_uv = v_patternUV;
-
-  shape_uv *= .001;
+  shape_uv *= .1;
 
   float t = .2 * u_time;
 
@@ -65,26 +61,26 @@ void main() {
   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);
+      float localM = clamp(mixer - float(i - 1), 0., 1.);
+      localM = steppedSmooth(localM, steps, .5 * u_softness + steps * fwidth(localM));
 
       vec4 c = u_colors[i];
       c.rgb *= c.a;
-      gradient = mix(gradient, c, localT);
+      gradient = mix(gradient, c, localM);
   }
 
   if (u_extraSides == true) {
    if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
-     float localT = mixer + 1.;
+     float localM = mixer + 1.;
      if (mixer > (u_colorsCount - 1.)) {
-       localT = mixer - (u_colorsCount - 1.);
+       localM = mixer - (u_colorsCount - 1.);
      }
-     localT = steppedSmooth(localT, steps, u_softness);
+     localM = steppedSmooth(localM, steps, .5 * u_softness + steps * fwidth(localM));
      vec4 cFst = u_colors[0];
      cFst.rgb *= cFst.a;
      vec4 cLast = u_colors[int(u_colorsCount - 1.)];
      cLast.rgb *= cLast.a;
-     gradient = mix(cLast, cFst, localT);
+     gradient = mix(cLast, cFst, localM);
    }
   }
 

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.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 * Color Gradient mapped over a combination of 2 Simplex noises\n *\n * Uniforms:\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_stepsPerColor (float, used as int): discrete color steps between u_colors\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n *\n * */\n\n// language=GLSL\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;",
+  "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 * Color Gradient mapped over a combination of 2 Simplex noises\n *\n * Uniforms:\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_stepsPerColor (float, used as int): discrete color steps between u_colors\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n *\n * */\n\n// language=GLSL\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 m, float steps, float softness) { \n  float stepT = floor(m * steps) / steps;\n  float f = m * steps - floor(m * steps);\n  float smoothed = smoothstep(.5 - softness, .5 + softness, f);\n  return stepT + smoothed / steps;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= .1;\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 localM = clamp(mixer - float(i - 1), 0., 1.);\n      localM = steppedSmooth(localM, steps, .5 * u_softness + steps * fwidth(localM));\n\n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localM);\n  }\n\n  if (u_extraSides == true) {\n   if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n     float localM = mixer + 1.;\n     if (mixer > (u_colorsCount - 1.)) {\n       localM = mixer - (u_colorsCount - 1.);\n     }\n     localM = steppedSmooth(localM, steps, .5 * u_softness + steps * fwidth(localM));\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, localM);\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,wBAmCG,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/spiral.d.ts

@@ -10,7 +10,7 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * - u_strokeTaper: stroke loosing width further from center (0 for full visibility)
  * - u_distortion: per-arch shift
  * - u_strokeCap: extra width at the center (no effect on u_strokeWidth = 0.5)
- * - u_noiseFrequency, u_noisePower: simplex noise distortion over the shape
+ * - u_noiseFrequency, u_noise: simplex noise distortion over the shape
  * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)
  *
  */
@@ -23,8 +23,8 @@ export interface SpiralUniforms extends ShaderSizingUniforms {
     u_strokeWidth: number;
     u_strokeTaper: number;
     u_strokeCap: number;
+    u_noise: number;
     u_noiseFrequency: number;
-    u_noisePower: number;
     u_softness: number;
 }
 export interface SpiralParams extends ShaderSizingParams, ShaderMotionParams {
@@ -35,7 +35,7 @@ export interface SpiralParams extends ShaderSizingParams, ShaderMotionParams {
     strokeWidth?: number;
     strokeTaper?: number;
     strokeCap?: number;
+    noise?: number;
     noiseFrequency?: number;
-    noisePower?: number;
     softness?: number;
 }

package/dist/shaders/spiral.js

@@ -17,9 +17,8 @@ uniform float u_distortion;
 uniform float u_strokeWidth;
 uniform float u_strokeCap;
 uniform float u_strokeTaper;
-
+uniform float u_noise;
 uniform float u_noiseFrequency;
-uniform float u_noisePower;
 uniform float u_softness;
 
 ${sizingVariablesDeclaration}
@@ -30,48 +29,46 @@ ${declarePI}
 ${declareSimplexNoise}
 
 void main() {
-  vec2 shape_uv = v_patternUV * .02;
-
+  vec2 uv = 2. * v_patternUV;
+  
   float t = u_time;
+  float l = length(uv);
+  float density = clamp(u_density, 0., 1.);
+  l = pow(l, density);
+  float angle = atan(uv.y, uv.x) - t;
+  float angleNormalised = angle / TWO_PI;
 
-  float l = length(shape_uv);
-  float angle = atan(shape_uv.y, shape_uv.x) - 2. * t;
-  float angle_norm = angle / TWO_PI;
-
-  angle_norm += .125 * u_noisePower * snoise(.5 * u_noiseFrequency * shape_uv);
-
-  float offset = pow(l, 1. - clamp(u_density, 0., 1.)) + angle_norm;
-
-  float stripe_map = fract(offset);
-  stripe_map -= .5 * u_strokeTaper * l;
-
-  stripe_map += .25 * u_noisePower * snoise(u_noiseFrequency * shape_uv);
-
-  float shape = 2. * abs(stripe_map - .5);
-  float test = step(.5, stripe_map);
+  angleNormalised += .125 * u_noise * snoise(16. * pow(u_noiseFrequency, 3.) * uv);
 
-  shape *= (1. + u_distortion * sin(4. * l - t) * cos(PI + l + t));
+  float offset = l + angleNormalised;
+  offset -= u_distortion * (sin(4. * l - .5 * t) * cos(PI + l + .5 * t));
+  float stripe = fract(offset);
+  
+  float shape = 2. * abs(stripe - .5);
+  float width = clamp(u_strokeWidth, .005 * u_strokeTaper, 1.);
 
-  float stroke_width = clamp(u_strokeWidth, fwidth(l), 1. - fwidth(l));
 
-  float edge_width = min(fwidth(l), fwidth(offset));
+  float wCap = mix(width, (1. - stripe) * (1. - step(.5, stripe)), (1. - clamp(l, 0., 1.)));
+  width = mix(width, wCap, u_strokeCap);
+  width *= (1. - clamp(u_strokeTaper, 0., 1.) * l);
 
-  float mid = 1. - smoothstep(.0, .9, l);
-  mid = pow(mid, 2.);
-  shape -= .5 * u_strokeCap * mid;
+  float fw = fwidth(offset);
+  float fwMult = 4. - 3. * (smoothstep(.05, .4, 2. * u_strokeWidth) * smoothstep(.05, .4, 2. * (1. - u_strokeWidth)));
+  float pixelSize = mix(fwMult * fw, fwidth(shape), clamp(fw, 0., 1.));
+  pixelSize = mix(pixelSize, .002, u_strokeCap * (1. - clamp(l, 0., 1.)));
 
-  float res = smoothstep(stroke_width - edge_width - u_softness, stroke_width + edge_width + u_softness, shape);
+  float res = smoothstep(width - pixelSize - u_softness, width + pixelSize + u_softness, shape);
 
   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 = bgColor * res;
-  float opacity = bgOpacity * res;
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
 
-  color += fgColor * (1. - opacity);
-  opacity += fgOpacity * (1. - opacity);
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
 
   ${colorBandingFix}