@paper-design/shaders 0.0.0-canary.156ab35

package/dist/shaders/pulsing-border.js

@@ -0,0 +1,237 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, textureRandomizerGB, colorBandingFix } from "../shader-utils.js";
+const pulsingBorderMeta = {
+  maxColorCount: 5,
+  maxSpots: 4
+};
+const pulsingBorderFragmentShader = `#version 300 es
+precision lowp float;
+
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${pulsingBorderMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_roundness;
+uniform float u_thickness;
+uniform float u_marginLeft;
+uniform float u_marginRight;
+uniform float u_marginTop;
+uniform float u_marginBottom;
+uniform float u_aspectRatio;
+uniform float u_softness;
+uniform float u_intensity;
+uniform float u_bloom;
+uniform float u_spotSize;
+uniform float u_spots;
+uniform float u_pulse;
+uniform float u_smoke;
+uniform float u_smokeSize;
+
+uniform sampler2D u_noiseTexture;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+
+float beat(float time) {
+  float first = pow(abs(sin(time * TWO_PI)), 10.);
+  float second = pow(abs(sin((time - .15) * TWO_PI)), 10.);
+
+  return clamp(first + 0.6 * second, 0.0, 1.0);
+}
+
+float sst(float edge0, float edge1, float x) {
+  return smoothstep(edge0, edge1, x);
+}
+
+float roundedBox(vec2 uv, vec2 halfSize, float distance, float cornerDistance, float thickness, float softness) {
+  float borderDistance = abs(distance);
+  float aa = 2. * fwidth(distance);
+  float border = 1. - sst(min(mix(thickness, -thickness, softness), thickness + aa), max(mix(thickness, -thickness, softness), thickness + aa), borderDistance);
+  float cornerFadeCircles = 0.;
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv + halfSize) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(-halfSize.x, halfSize.y)) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(halfSize.x, -halfSize.y)) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - halfSize) / thickness)));
+  aa = fwidth(cornerDistance);
+  float cornerFade = sst(0., mix(aa, thickness, softness), cornerDistance);
+  cornerFade *= cornerFadeCircles;
+  border += cornerFade;
+  return border;
+}
+
+${textureRandomizerGB}
+
+float randomG(vec2 p) {
+  vec2 uv = floor(p) / 100. + .5;
+  return texture(u_noiseTexture, fract(uv)).g;
+}
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomG(i);
+  float b = randomG(i + vec2(1.0, 0.0));
+  float c = randomG(i + vec2(0.0, 1.0));
+  float d = randomG(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+void main() {
+  const float firstFrameOffset = 109.;
+  float t = 1.2 * (u_time + firstFrameOffset);
+
+  vec2 borderUV = v_responsiveUV;
+  float pulse = u_pulse * beat(.18 * u_time);
+
+  float canvasRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
+  vec2 halfSize = vec2(.5);
+  borderUV.x *= max(canvasRatio, 1.);
+  borderUV.y /= min(canvasRatio, 1.);
+  halfSize.x *= max(canvasRatio, 1.);
+  halfSize.y /= min(canvasRatio, 1.);
+
+  float mL = u_marginLeft;
+  float mR = u_marginRight;
+  float mT = u_marginTop;
+  float mB = u_marginBottom;
+  float mX = mL + mR;
+  float mY = mT + mB;
+
+  if (u_aspectRatio > 0.) {
+    float shapeRatio = canvasRatio * (1. - mX) / max(1. - mY, 1e-6);
+    float freeX = shapeRatio > 1. ? (1. - mX) * (1. - 1. / max(abs(shapeRatio), 1e-6)) : 0.;
+    float freeY = shapeRatio < 1. ? (1. - mY) * (1. - shapeRatio) : 0.;
+    mL += freeX * 0.5;
+    mR += freeX * 0.5;
+    mT += freeY * 0.5;
+    mB += freeY * 0.5;
+    mX = mL + mR;
+    mY = mT + mB;
+  }
+
+  float thickness = .5 * u_thickness * min(halfSize.x, halfSize.y);
+
+  halfSize.x *= (1. - mX);
+  halfSize.y *= (1. - mY);
+
+  vec2 centerShift = vec2(
+    (mL - mR) * max(canvasRatio, 1.) * 0.5,
+    (mB - mT) / min(canvasRatio, 1.) * 0.5
+  );
+
+  borderUV -= centerShift;
+  halfSize -= mix(thickness, 0., u_softness);
+
+  float radius = mix(0., min(halfSize.x, halfSize.y), u_roundness);
+  vec2 d = abs(borderUV) - halfSize + radius;
+  float outsideDistance = length(max(d, .0001)) - radius;
+  float insideDistance = min(max(d.x, d.y), .0001);
+  float cornerDistance = abs(min(max(d.x, d.y) - .45 * radius, .0));
+  float distance = outsideDistance + insideDistance;
+
+  float borderThickness = mix(thickness, 3. * thickness, u_softness);
+  float border = roundedBox(borderUV, halfSize, distance, cornerDistance, borderThickness, u_softness);
+  border = pow(border, 1. + u_softness);
+
+  vec2 smokeUV = .3 * u_smokeSize * v_patternUV;
+  float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);
+  smoke -= valueNoise(3.4 * smokeUV - .5 * t);
+  float smokeThickness = thickness + .2;
+  smokeThickness = min(.4, max(smokeThickness, .1));
+  smoke *= roundedBox(borderUV, halfSize, distance, cornerDistance, smokeThickness, 1.);
+  smoke = 30. * smoke * smoke;
+  smoke *= mix(0., .5, pow(u_smoke, 2.));
+  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.;
+  vec3 addColor = vec3(0.);
+  float addAlpha = 0.;
+
+  float bloom = 4. * u_bloom;
+  float intensity = 1. + (1. + 4. * u_softness) * u_intensity;
+
+  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;
+
+  for (int colorIdx = 0; colorIdx < ${pulsingBorderMeta.maxColorCount}; colorIdx++) {
+    if (colorIdx >= int(u_colorsCount)) break;
+    float colorIdxF = float(colorIdx);
+
+    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;
+    float a = u_colors[colorIdx].a;
+
+    for (int spotIdx = 0; spotIdx < ${pulsingBorderMeta.maxSpots}; spotIdx++) {
+      if (spotIdx >= int(u_spots)) break;
+      float spotIdxF = float(spotIdx);
+
+      vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));
+
+      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 = .5 + .5 * mix(
+        sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),
+        cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),
+        step(mod(colorIdxF, 2.), .5)
+      );
+
+      float p = clamp(2. * u_pulse - randVal.x, 0., 1.);
+      mask = mix(mask, pulse, p);
+
+      float atg1 = fract(angle + time);
+      float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;
+      spotSize = mix(spotSize, .1, p);
+      float sector = sst(.5 - spotSize, .5, atg1) * (1. - sst(.5, .5 + spotSize, atg1));
+
+      sector *= mask;
+      sector *= border;
+      sector *= intensity;
+      sector = clamp(sector, 0., 1.);
+
+      vec3 srcColor = c * sector;
+      float srcAlpha = a * sector;
+
+      blendColor += ((1. - blendAlpha) * srcColor);
+      blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;
+      addColor += srcColor;
+      addAlpha += srcAlpha;
+    }
+  }
+
+  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;
+  vec3 color = accumColor + (1. - accumAlpha) * bgColor;
+  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}`;
+const PulsingBorderAspectRatios = {
+  auto: 0,
+  square: 1
+};
+export {
+  PulsingBorderAspectRatios,
+  pulsingBorderFragmentShader,
+  pulsingBorderMeta
+};
+//# sourceMappingURL=pulsing-border.js.map

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

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

@@ -0,0 +1,27 @@
+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;
+};
+/**
+ * Color Gradient mapped over a combination of 2 Simplex noises
+ *
+ * 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[];
+    u_colorsCount: number;
+    u_stepsPerColor: number;
+    u_softness: number;
+}
+export interface SimplexNoiseParams extends ShaderSizingParams, ShaderMotionParams {
+    colors?: string[];
+    stepsPerColor?: number;
+    softness?: number;
+}

package/dist/shaders/simplex-noise.js

@@ -0,0 +1,100 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { simplexNoise, 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;
+
+${simplexNoise}
+
+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 m, float steps, float softness) { 
+  float stepT = floor(m * steps) / steps;
+  float f = m * steps - floor(m * steps);
+  float fw = steps * fwidth(m);
+  float smoothed = smoothstep(.5 - softness, min(1., .5 + softness + fw), f);
+  return stepT + smoothed / steps;
+}
+
+void main() {
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= .1;
+
+  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 localM = clamp(mixer - float(i - 1), 0., 1.);
+      localM = steppedSmooth(localM, steps, .5 * u_softness);
+
+      vec4 c = u_colors[i];
+      c.rgb *= c.a;
+      gradient = mix(gradient, c, localM);
+  }
+
+  if (u_extraSides == true) {
+   if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
+     float localM = mixer + 1.;
+     if (mixer > (u_colorsCount - 1.)) {
+       localM = mixer - (u_colorsCount - 1.);
+     }
+     localM = steppedSmooth(localM, steps, .5 * 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, localM);
+   }
+  }
+
+  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 { simplexNoise, 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${simplexNoise}\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 fw = steps * fwidth(m);\n  float smoothed = smoothstep(.5 - softness, min(1., .5 + softness + fw), 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);\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);\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,cAAc,uBAAuB;AAEvC,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,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoCU,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

@@ -0,0 +1,39 @@
+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;
+};
+/**
+ * Radial gradient with layered FBM displacement, masked with ring shape
+ *
+ * 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 {
+    u_colorBack: [number, number, number, number];
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_noiseScale: number;
+    u_thickness: number;
+    u_radius: number;
+    u_innerShape: number;
+    u_noiseIterations: number;
+    u_noiseTexture?: HTMLImageElement;
+}
+export interface SmokeRingParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
+    colors?: string[];
+    noiseScale?: number;
+    thickness?: number;
+    radius?: number;
+    innerShape?: number;
+    noiseIterations?: number;
+}

package/dist/shaders/smoke-ring.js

@@ -0,0 +1,130 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, textureRandomizerR, 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}
+${textureRandomizerR}
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomR(i);
+  float b = randomR(i + vec2(1.0, 0.0));
+  float c = randomR(i + vec2(0.0, 1.0));
+  float d = randomR(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+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);
+  float period = max(abs(u_noiseScale * TWO_PI), 1e-6);
+  pUv.x = fract(pUv.x / period) * period;
+  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 period2 = 2.0 * cycleDuration;
+  float localTime1 = fract((0.1 * t + cycleDuration) / period2) * period2;
+  float localTime2 = fract((0.1 * t) / period2) * period2;
+  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(max(1e-4, l), .5));
+  polar_uv1 *= u_noiseScale;
+  float noise1 = getNoise(shape_uv, polar_uv1, t);
+
+  vec2 polar_uv2 = vec2(atg, localTime2 - (.5 * l) + 1. / pow(max(1e-4, 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 = ringShape * ringShape * (u_colorsCount - 1.);
+  vec4 gradient = u_colors[int(u_colorsCount) - 1];
+  gradient.rgb *= gradient.a;
+  for (int i = ${smokeRingMeta.maxColorCount} - 2; i >= 0; i--) {
+    float localT = clamp(mixer - float(int(u_colorsCount) - 1 - 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, textureRandomizerR, 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\n// language=GLSL\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${textureRandomizerR}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\nfloat fbm(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  float period = max(abs(u_noiseScale * TWO_PI), 1e-6);\n  pUv.x = fract(pUv.x / period) * period;\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 period2 = 2.0 * cycleDuration;\n  float localTime1 = fract((0.1 * t + cycleDuration) / period2) * period2;\n  float localTime2 = fract((0.1 * t) / period2) * period2;\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(max(1e-4, 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(max(1e-4, 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 = ringShape * ringShape * (u_colorsCount - 1.);\n  vec4 gradient = u_colors[int(u_colorsCount) - 1];\n  gradient.rgb *= gradient.a;\n  for (int i = ${smokeRingMeta.maxColorCount} - 2; i >= 0; i--) {\n    float localT = clamp(mixer - float(int(u_colorsCount) - 1 - 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,oBAAoB,uBAAuB;AAExD,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,oBAAoB;AACtB;AAeO,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,EACT,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAeI,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;AAAA;AAAA,iBA0DvC,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAcxC,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/spiral.d.ts

@@ -0,0 +1,41 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * 2-color spiral shape
+ *
+ * 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_noise: simplex noise distortion over the shape
+ * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)
+ *
+ */
+export declare const spiralFragmentShader: string;
+export interface SpiralUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
+    u_colorFront: [number, number, number, number];
+    u_density: number;
+    u_distortion: number;
+    u_strokeWidth: number;
+    u_strokeTaper: number;
+    u_strokeCap: number;
+    u_noise: number;
+    u_noiseFrequency: number;
+    u_softness: number;
+}
+export interface SpiralParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
+    colorFront?: string;
+    density?: number;
+    distortion?: number;
+    strokeWidth?: number;
+    strokeTaper?: number;
+    strokeCap?: number;
+    noise?: number;
+    noiseFrequency?: number;
+    softness?: number;
+}