@paper-design/shaders 0.0.32 → 0.0.34

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

@@ -0,0 +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\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;AAoBO,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;",
+  "names": []
+}

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

@@ -1,20 +1,18 @@
-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;
 };
 /**
- * Simplex Noise animation by Ksenia Kondrashova
- * Calculates a combination of 2 simplex noises with result mapped as
- * a gradient with dynamic number of main colors and steps between them
+ * Color Gradient mapped over a combination of 2 Simplex noises
  *
- * Uniforms include:
- * - u_colors (vec4[]): Input RGBA colors
- * - u_colorsCount (float): Number of active colors (`u_colors` length)
- * - u_stepsPerColor (float, used as int): Number of rendered colors per input color
- * - u_softness (float, 0..1): Amount of blur applied to the color steps
- */
+ * Uniforms:
+ * - u_colors (vec4[]), u_colorsCount (float used as integer)
+ * - u_stepsPerColor (float, used as int): discrete color steps between u_colors
+ * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)
+ *
+ * */
 export declare const simplexNoiseFragmentShader: string;
 export interface SimplexNoiseUniforms extends ShaderSizingUniforms {
     u_colors: vec4[];

package/dist/shaders/simplex-noise.js

@@ -0,0 +1,103 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declareSimplexNoise, colorBandingFix } from "../shader-utils.js";
+const simplexNoiseMeta = {
+  maxColorCount: 10
+};
+const simplexNoiseFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+uniform float u_scale;
+
+uniform vec4 u_colors[${simplexNoiseMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_stepsPerColor;
+uniform float u_softness;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declareSimplexNoise}
+
+float getNoise(vec2 uv, float t) {
+  float noise = .5 * snoise(uv - vec2(0., .3 * t));
+  noise += .5 * snoise(2. * uv + vec2(0., .32 * 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;
+}
+
+void main() {
+  vec2 shape_uv = v_patternUV;
+
+  shape_uv *= .001;
+
+  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;
+  }
+
+  float steps = max(1., u_stepsPerColor);
+
+  vec4 gradient = u_colors[0];
+  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);
+
+      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);
+     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);
+   }
+  }
+
+  vec3 color = gradient.rgb;
+  float opacity = gradient.a;
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  simplexNoiseFragmentShader,
+  simplexNoiseMeta
+};
+//# sourceMappingURL=simplex-noise.js.map

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

@@ -0,0 +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\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;AAYO,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,23 +1,20 @@
-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;
 };
 /**
- * Smoke Ring by Ksenia Kondrashova
- * Renders a fractional Brownian motion (fBm) noise over the
- * polar coordinates masked with ring shape
+ * Radial gradient with layered FBM displacement, masked with ring shape
  *
- * Uniforms include:
- * - u_colorBack: the background color of the scene
- * - uColors (vec4[]): Input RGBA colors
- * - uColorsCount (float): Number of active colors (`uColors` length) * u_noiseScale - the resolution of noise texture
- * - u_thickness (float): the thickness of the ring
- * - u_radius (float): the radius of the ring (u_radius = 0.5 to fit in contain mode)
- * - u_innerShape (float): if we fill the shape inside the radius (u_innerShape = 1 to render only the thickness)
- * - u_noiseIterations (float): how detailed is the noise (number of fbm layers)
+ * Uniforms:
+ * - u_colorBack (RGBA)
+ * - u_colors (vec4[]), u_colorsCount (float used as integer)
+ * - u_thickness, u_radius, u_innerShape: ring mask settings
+ * - u_noiseIterations, u_noiseScale: how detailed is the noise (number of fbm layers & noise frequency)
+ *
+ * - u_noiseTexture (sampler2D): pre-computed randomizer source
  */
 export declare const smokeRingFragmentShader: string;
 export interface SmokeRingUniforms extends ShaderSizingUniforms {

package/dist/shaders/smoke-ring.js

@@ -0,0 +1,124 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, declareValueNoise, colorBandingFix } from "../shader-utils.js";
+const smokeRingMeta = {
+  maxColorCount: 10,
+  maxNoiseIterations: 8
+};
+const smokeRingFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${smokeRingMeta.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_thickness;
+uniform float u_radius;
+uniform float u_innerShape;
+uniform float u_noiseScale;
+uniform float u_noiseIterations;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+
+float random(vec2 p) {
+  vec2 uv = floor(p) / 100. + .5;
+  return texture(u_noiseTexture, uv).r;
+}
+
+${declareValueNoise}
+
+float fbm(in vec2 n) {
+  float total = 0.0, amplitude = .4;
+  for (int i = 0; i < ${smokeRingMeta.maxNoiseIterations}; i++) {
+    if (i >= int(u_noiseIterations)) break;
+    total += valueNoise(n) * amplitude;
+    n *= 1.99;
+    amplitude *= 0.65;
+  }
+  return total;
+}
+
+float getNoise(vec2 uv, vec2 pUv, float t) {
+  float noiseLeft = fbm(pUv + .03 * t);
+  pUv.x = mod(pUv.x, u_noiseScale * TWO_PI);
+  float noiseRight = fbm(pUv + .03 * t);
+  return mix(noiseRight, noiseLeft, smoothstep(-.25, .25, uv.x));
+}
+
+float getRingShape(vec2 uv) {
+  float radius = u_radius;
+  float thickness = u_thickness;
+
+  float distance = length(uv);
+  float ringValue = 1. - smoothstep(radius, radius + thickness, distance);
+  ringValue *= smoothstep(radius - pow(u_innerShape, 3.) * thickness, radius, distance);
+
+  return ringValue;
+}
+
+void main() {
+  vec2 shape_uv = v_objectUV;
+
+  float t = u_time;
+
+  float cycleDuration = 3.;
+  float localTime1 = mod(.1 * t + cycleDuration, 2. * cycleDuration);
+  float localTime2 = mod(.1 * t, 2. * cycleDuration);
+  float timeBlend = .5 + .5 * sin(.1 * t * PI / cycleDuration - .5 * PI);
+
+  float atg = atan(shape_uv.y, shape_uv.x) + .001;
+  float l = length(shape_uv);
+  vec2 polar_uv1 = vec2(atg, localTime1 - (.5 * l) + 1. / pow(l, .5));
+  polar_uv1 *= u_noiseScale;
+  float noise1 = getNoise(shape_uv, polar_uv1, t);
+
+  vec2 polar_uv2 = vec2(atg, localTime2 - (.5 * l) + 1. / pow(l, .5));
+  polar_uv2 *= u_noiseScale;
+  float noise2 = getNoise(shape_uv, polar_uv2, t);
+
+  float noise = mix(noise1, noise2, timeBlend);
+
+  shape_uv *= (.8 + 1.2 * noise);
+
+  float ringShape = getRingShape(shape_uv);
+
+  float mixer = pow(ringShape, 3.) * (u_colorsCount - 1.);
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${smokeRingMeta.maxColorCount}; i++) {
+      if (i >= int(u_colorsCount)) break;
+      float localT = clamp(mixer - float(i - 1), 0., 1.);
+      vec4 c = u_colors[i];
+      c.rgb *= c.a;
+      gradient = mix(gradient, c, localT);
+  }
+
+  vec3 color = gradient.rgb * ringShape;
+  float opacity = gradient.a * ringShape;
+
+  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);
+}
+`;
+export {
+  smokeRingFragmentShader,
+  smokeRingMeta
+};
+//# sourceMappingURL=smoke-ring.js.map

package/dist/shaders/smoke-ring.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/smoke-ring.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 smokeRingMeta = {\n  maxColorCount: 10,\n  maxNoiseIterations: 8,\n} as const;\n\n/**\n * Radial gradient with layered FBM displacement, masked with ring shape\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_thickness, u_radius, u_innerShape: ring mask settings\n * - u_noiseIterations, u_noiseScale: how detailed is the noise (number of fbm layers & noise frequency)\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n */\n\nexport const smokeRingFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${smokeRingMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_thickness;\nuniform float u_radius;\nuniform float u_innerShape;\nuniform float u_noiseScale;\nuniform float u_noiseIterations;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat random(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, uv).r;\n}\n\n${declareValueNoise}\n\nfloat fbm(in vec2 n) {\n  float total = 0.0, amplitude = .4;\n  for (int i = 0; i < ${smokeRingMeta.maxNoiseIterations}; i++) {\n    if (i >= int(u_noiseIterations)) break;\n    total += valueNoise(n) * amplitude;\n    n *= 1.99;\n    amplitude *= 0.65;\n  }\n  return total;\n}\n\nfloat getNoise(vec2 uv, vec2 pUv, float t) {\n  float noiseLeft = fbm(pUv + .03 * t);\n  pUv.x = mod(pUv.x, u_noiseScale * TWO_PI);\n  float noiseRight = fbm(pUv + .03 * t);\n  return mix(noiseRight, noiseLeft, smoothstep(-.25, .25, uv.x));\n}\n\nfloat getRingShape(vec2 uv) {\n  float radius = u_radius;\n  float thickness = u_thickness;\n\n  float distance = length(uv);\n  float ringValue = 1. - smoothstep(radius, radius + thickness, distance);\n  ringValue *= smoothstep(radius - pow(u_innerShape, 3.) * thickness, radius, distance);\n\n  return ringValue;\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  float t = u_time;\n\n  float cycleDuration = 3.;\n  float localTime1 = mod(.1 * t + cycleDuration, 2. * cycleDuration);\n  float localTime2 = mod(.1 * t, 2. * cycleDuration);\n  float timeBlend = .5 + .5 * sin(.1 * t * PI / cycleDuration - .5 * PI);\n\n  float atg = atan(shape_uv.y, shape_uv.x) + .001;\n  float l = length(shape_uv);\n  vec2 polar_uv1 = vec2(atg, localTime1 - (.5 * l) + 1. / pow(l, .5));\n  polar_uv1 *= u_noiseScale;\n  float noise1 = getNoise(shape_uv, polar_uv1, t);\n\n  vec2 polar_uv2 = vec2(atg, localTime2 - (.5 * l) + 1. / pow(l, .5));\n  polar_uv2 *= u_noiseScale;\n  float noise2 = getNoise(shape_uv, polar_uv2, t);\n\n  float noise = mix(noise1, noise2, timeBlend);\n\n  shape_uv *= (.8 + 1.2 * noise);\n\n  float ringShape = getRingShape(shape_uv);\n\n  float mixer = pow(ringShape, 3.) * (u_colorsCount - 1.);\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${smokeRingMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n      float localT = clamp(mixer - float(i - 1), 0., 1.);\n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * ringShape;\n  float opacity = gradient.a * ringShape;\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 SmokeRingUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_noiseScale: number;\n  u_thickness: number;\n  u_radius: number;\n  u_innerShape: number;\n  u_noiseIterations: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface SmokeRingParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  noiseScale?: number;\n  thickness?: number;\n  radius?: number;\n  innerShape?: number;\n  noiseIterations?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,mBAAmB,uBAAuB;AAEvD,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,oBAAoB;AACtB;AAcO,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQvB,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASjD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOT,iBAAiB;AAAA;AAAA;AAAA;AAAA,wBAIK,cAAc,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAwDhC,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAe/C,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/spiral.d.ts

@@ -1,29 +1,23 @@
-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';
 /**
- * Spiral shape by Ksenia Kondrashova
- * Generates a dynamic spiral shape with configurable parameters
+ * 2-color spiral shape
  *
- * Uniforms include:
+ * Uniforms:
+ * - u_colorBack, u_colorFront (RGBA)
+ * - u_density: spacing falloff to simulate radial perspective (0 = no perspective)
+ * - u_strokeWidth: thickness of stroke
+ * - 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_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)
  *
- * u_scale - controls the overall scale of the spiral (u_scale = 1 makes it fit the viewport height)
- * u_offsetX - left / right pan
- * u_offsetY - up / down pan
- * u_color1 - the first color used in the spiral (stroke)
- * u_color2 - the second color used in the spiral (back)
- * u_density (0 .. 1) - the spacing of the spiral arms
- * u_distortion (0 .. 1) - adds a wavy distortion effect to the spiral arms
- * u_strokeWidth (0 .. 1) - defines the thickness of the spiral lines.
- * u_strokeCap (0 .. 1) - adjusts the fading of the spiral edges.
- * u_strokeTaper (0 .. 1) - controls the tapering effect along the spiral arms.
- * u_noiseFrequency - frequency of the noise applied to the spiral.
- * u_noisePower (0 .. 1) - strength of the noise effect.
- * u_softness - softens the edges of the spiral for a smoother appearance.
  */
 export declare const spiralFragmentShader: string;
 export interface SpiralUniforms extends ShaderSizingUniforms {
-    u_color1: [number, number, number, number];
-    u_color2: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
+    u_colorFront: [number, number, number, number];
     u_density: number;
     u_distortion: number;
     u_strokeWidth: number;
@@ -34,8 +28,8 @@ export interface SpiralUniforms extends ShaderSizingUniforms {
     u_softness: number;
 }
 export interface SpiralParams extends ShaderSizingParams, ShaderMotionParams {
-    color1?: string;
-    color2?: string;
+    colorBack?: string;
+    colorFront?: string;
     density?: number;
     distortion?: number;
     strokeWidth?: number;

package/dist/shaders/spiral.js

@@ -0,0 +1,84 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declareSimplexNoise, declarePI, colorBandingFix } from "../shader-utils.js";
+const spiralFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorFront;
+uniform float u_density;
+uniform float u_distortion;
+uniform float u_strokeWidth;
+uniform float u_strokeCap;
+uniform float u_strokeTaper;
+
+uniform float u_noiseFrequency;
+uniform float u_noisePower;
+uniform float u_softness;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareSimplexNoise}
+
+void main() {
+  vec2 shape_uv = v_patternUV * .02;
+
+  float t = u_time;
+
+  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);
+
+  shape *= (1. + u_distortion * sin(4. * l - t) * cos(PI + l + t));
+
+  float stroke_width = clamp(u_strokeWidth, fwidth(l), 1. - fwidth(l));
+
+  float edge_width = min(fwidth(l), fwidth(offset));
+
+  float mid = 1. - smoothstep(.0, .9, l);
+  mid = pow(mid, 2.);
+  shape -= .5 * u_strokeCap * mid;
+
+  float res = smoothstep(stroke_width - edge_width - u_softness, stroke_width + edge_width + 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;
+
+  color += fgColor * (1. - opacity);
+  opacity += fgOpacity * (1. - opacity);
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  spiralFragmentShader
+};
+//# sourceMappingURL=spiral.js.map

package/dist/shaders/spiral.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/spiral.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declareSimplexNoise, declarePI, colorBandingFix } from '../shader-utils.js';\n\n/**\n * 2-color spiral shape\n *\n * Uniforms:\n * - u_colorBack, u_colorFront (RGBA)\n * - u_density: spacing falloff to simulate radial perspective (0 = no perspective)\n * - u_strokeWidth: thickness of stroke\n * - u_strokeTaper: stroke loosing width further from center (0 for full visibility)\n * - u_distortion: per-arch shift\n * - u_strokeCap: extra width at the center (no effect on u_strokeWidth = 0.5)\n * - u_noiseFrequency, u_noisePower: simplex noise distortion over the shape\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n *\n */\n\nexport const spiralFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFront;\nuniform float u_density;\nuniform float u_distortion;\nuniform float u_strokeWidth;\nuniform float u_strokeCap;\nuniform float u_strokeTaper;\n\nuniform float u_noiseFrequency;\nuniform float u_noisePower;\nuniform float u_softness;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV * .02;\n\n  float t = u_time;\n\n  float l = length(shape_uv);\n  float angle = atan(shape_uv.y, shape_uv.x) - 2. * t;\n  float angle_norm = angle / TWO_PI;\n\n  angle_norm += .125 * u_noisePower * snoise(.5 * u_noiseFrequency * shape_uv);\n\n  float offset = pow(l, 1. - clamp(u_density, 0., 1.)) + angle_norm;\n\n  float stripe_map = fract(offset);\n  stripe_map -= .5 * u_strokeTaper * l;\n\n  stripe_map += .25 * u_noisePower * snoise(u_noiseFrequency * shape_uv);\n\n  float shape = 2. * abs(stripe_map - .5);\n  float test = step(.5, stripe_map);\n\n  shape *= (1. + u_distortion * sin(4. * l - t) * cos(PI + l + t));\n\n  float stroke_width = clamp(u_strokeWidth, fwidth(l), 1. - fwidth(l));\n\n  float edge_width = min(fwidth(l), fwidth(offset));\n\n  float mid = 1. - smoothstep(.0, .9, l);\n  mid = pow(mid, 2.);\n  shape -= .5 * u_strokeCap * mid;\n\n  float res = smoothstep(stroke_width - edge_width - u_softness, stroke_width + edge_width + u_softness, shape);\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 = bgColor * res;\n  float opacity = bgOpacity * res;\n\n  color += fgColor * (1. - opacity);\n  opacity += fgOpacity * (1. - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SpiralUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFront: [number, number, number, number];\n  u_density: number;\n  u_distortion: number;\n  u_strokeWidth: number;\n  u_strokeTaper: number;\n  u_strokeCap: number;\n  u_noiseFrequency: number;\n  u_noisePower: number;\n  u_softness: number;\n}\n\nexport interface SpiralParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorFront?: string;\n  density?: number;\n  distortion?: number;\n  strokeWidth?: number;\n  strokeTaper?: number;\n  strokeCap?: number;\n  noiseFrequency?: number;\n  noisePower?: number;\n  softness?: number;\n}\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,uBAAuB;AAiBzD,MAAM,uBAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB1C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8CjB,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/swirl.d.ts

@@ -1,13 +1,24 @@
-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 swirlMeta: {
     readonly maxColorCount: 10;
 };
 /**
+ * Twisting radial bands
+ *
+ * Uniforms:
+ * - u_colorBack (RGBA)
+ * - u_colors (vec4[]), u_colorsCount (float used as integer)
+ * - u_bandCount (float, used as int): number of sectors
+ * - u_twist: sectors twist intensity (0 = linear)
+ * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)
+ * - u_noisePower, u_noiseFrequency: simplex noise distortion over the shape
+ *
  */
 export declare const swirlFragmentShader: string;
 export interface SwirlUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
     u_colors: vec4[];
     u_colorsCount: number;
     u_bandCount: number;
@@ -17,6 +28,7 @@ export interface SwirlUniforms extends ShaderSizingUniforms {
     u_noisePower: number;
 }
 export interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
     colors?: string[];
     bandCount?: number;
     twist?: number;

package/dist/shaders/swirl.js

@@ -0,0 +1,89 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declareSimplexNoise, declarePI, declareRotate, colorBandingFix } from "../shader-utils.js";
+const swirlMeta = {
+  maxColorCount: 10
+};
+const swirlFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${swirlMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_bandCount;
+uniform float u_twist;
+uniform float u_softness;
+uniform float u_noisePower;
+uniform float u_noiseFrequency;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareSimplexNoise}
+${declareRotate}
+
+void main() {
+  vec2 shape_uv = v_objectUV;
+
+  float l = length(shape_uv);
+
+  float t = u_time;
+
+  float angle = ceil(u_bandCount) * atan(shape_uv.y, shape_uv.x) + t;
+  float angle_norm = angle / TWO_PI;
+
+  float twist = 3. * clamp(u_twist, 0., 1.);
+  float offset = pow(l, -twist) + angle_norm;
+
+  float shape = fract(offset);
+  shape = 1. - abs(2. * shape - 1.);
+  shape += u_noisePower * snoise(pow(u_noiseFrequency, 2.) * shape_uv);
+
+  float mid = smoothstep(.2, .4, pow(l, twist));
+  shape = mix(0., shape, mid);
+
+  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);
+
+  float edge_w = fwidth(shape);
+  
+  float totalShape = smoothstep(0., u_softness + 2. * edge_w, clamp(shape * u_colorsCount, 0., 1.));
+  float mixer = shape * (u_colorsCount - 1.);
+
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${swirlMeta.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+
+    float localT = clamp(mixer - float(i - 1), 0., 1.);
+    localT = smoothstep(.5 - .5 * u_softness, .5 + .5 * u_softness + edge_w, localT);
+
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, localT);
+  }
+
+  vec3 color = gradient.rgb * totalShape;
+  float opacity = gradient.a * totalShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  swirlFragmentShader,
+  swirlMeta
+};
+//# sourceMappingURL=swirl.js.map

package/dist/shaders/swirl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/swirl.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, declarePI, declareRotate, colorBandingFix } from '../shader-utils.js';\n\nexport const swirlMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Twisting radial bands\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_bandCount (float, used as int): number of sectors\n * - u_twist: sectors twist intensity (0 = linear)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n * - u_noisePower, u_noiseFrequency: simplex noise distortion over the shape\n *\n */\n\nexport const swirlFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${swirlMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_bandCount;\nuniform float u_twist;\nuniform float u_softness;\nuniform float u_noisePower;\nuniform float u_noiseFrequency;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n${declareRotate}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  float l = length(shape_uv);\n\n  float t = u_time;\n\n  float angle = ceil(u_bandCount) * atan(shape_uv.y, shape_uv.x) + t;\n  float angle_norm = angle / TWO_PI;\n\n  float twist = 3. * clamp(u_twist, 0., 1.);\n  float offset = pow(l, -twist) + angle_norm;\n\n  float shape = fract(offset);\n  shape = 1. - abs(2. * shape - 1.);\n  shape += u_noisePower * snoise(pow(u_noiseFrequency, 2.) * shape_uv);\n\n  float mid = smoothstep(.2, .4, pow(l, twist));\n  shape = mix(0., shape, mid);\n\n  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);\n\n  float edge_w = fwidth(shape);\n  \n  float totalShape = smoothstep(0., u_softness + 2. * edge_w, clamp(shape * u_colorsCount, 0., 1.));\n  float mixer = shape * (u_colorsCount - 1.);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${swirlMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n\n    float localT = clamp(mixer - float(i - 1), 0., 1.);\n    localT = smoothstep(.5 - .5 * u_softness, .5 + .5 * u_softness + edge_w, localT);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * totalShape;\n  float opacity = gradient.a * totalShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SwirlUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_bandCount: number;\n  u_twist: number;\n  u_softness: number;\n  u_noiseFrequency: number;\n  u_noisePower: number;\n}\n\nexport interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  bandCount?: number;\n  twist?: number;\n  softness?: number;\n  noiseFrequency?: number;\n  noisePower?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,eAAe,uBAAuB;AAExE,MAAM,YAAY;AAAA,EACvB,eAAe;AACjB;AAeO,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMnB,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ7C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA+BS,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkB3C,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}