@paper-design/shaders 0.0.38 → 0.0.40

package/dist/shaders/spiral.js.map

@@ -1,7 +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\n// language=GLSL\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;AAkBzD,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;",
+  "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_noise: simplex noise distortion over the shape\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n *\n */\n\n// language=GLSL\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;\nuniform float u_noise;\nuniform float u_noiseFrequency;\nuniform float u_softness;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n\nvoid main() {\n  vec2 uv = 2. * v_patternUV;\n  \n  float t = u_time;\n  float l = length(uv);\n  float density = clamp(u_density, 0., 1.);\n  l = pow(l, density);\n  float angle = atan(uv.y, uv.x) - t;\n  float angleNormalised = angle / TWO_PI;\n\n  angleNormalised += .125 * u_noise * snoise(16. * pow(u_noiseFrequency, 3.) * uv);\n\n  float offset = l + angleNormalised;\n  offset -= u_distortion * (sin(4. * l - .5 * t) * cos(PI + l + .5 * t));\n  float stripe = fract(offset);\n  \n  float shape = 2. * abs(stripe - .5);\n  float width = clamp(u_strokeWidth, .005 * u_strokeTaper, 1.);\n\n\n  float wCap = mix(width, (1. - stripe) * (1. - step(.5, stripe)), (1. - clamp(l, 0., 1.)));\n  width = mix(width, wCap, u_strokeCap);\n  width *= (1. - clamp(u_strokeTaper, 0., 1.) * l);\n\n  float fw = fwidth(offset);\n  float fwMult = 4. - 3. * (smoothstep(.05, .4, 2. * u_strokeWidth) * smoothstep(.05, .4, 2. * (1. - u_strokeWidth)));\n  float pixelSize = mix(fwMult * fw, fwidth(shape), clamp(fw, 0., 1.));\n  pixelSize = mix(pixelSize, .002, u_strokeCap * (1. - clamp(l, 0., 1.)));\n\n  float res = smoothstep(width - pixelSize - u_softness, width + pixelSize + 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 = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface 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_noise: number;\n  u_noiseFrequency: 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  noise?: number;\n  noiseFrequency?: number;\n  softness?: number;\n}\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,uBAAuB;AAkBzD,MAAM,uBAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgB1C,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,IA4CjB,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/static-mesh-gradient.d.ts

@@ -0,0 +1,43 @@
+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 staticMeshGradientMeta: {
+    readonly maxColorCount: 10;
+};
+/**
+ * A composition of N color spots (one per color)
+ *
+ * Uniforms:
+ * - u_colorBack (RGBA)
+ * - u_colors (vec4[]), u_colorsCount (float used as integer)
+ * - u_waveX, u_waveY - power of sine wave distortion along X and Y axes
+ * - u_waveXShift, u_waveYShift - each wave phase offset
+ * - u_mixing (0 .. 1, float) - 0 for stepped gradient, 0.5 for smooth transitions, 1 for pronounced color points
+ * - u_grainMixer - shape distortion
+ * - u_grainOverlay - post-processing blending
+ *
+ */
+export declare const staticMeshGradientFragmentShader: string;
+export interface StaticMeshGradientUniforms extends ShaderSizingUniforms {
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_positions: number;
+    u_waveX: number;
+    u_waveXShift: number;
+    u_waveY: number;
+    u_waveYShift: number;
+    u_mixing: number;
+    u_grainMixer: number;
+    u_grainOverlay: number;
+}
+export interface StaticMeshGradientParams extends ShaderSizingParams, ShaderMotionParams {
+    colors?: string[];
+    positions?: number;
+    waveX?: number;
+    waveXShift?: number;
+    waveY?: number;
+    waveYShift?: number;
+    mixing?: number;
+    grainMixer?: number;
+    grainOverlay?: number;
+}

package/dist/shaders/static-mesh-gradient.js

@@ -0,0 +1,114 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {
+  sizingVariablesDeclaration,
+  sizingUniformsDeclaration
+} from "../shader-sizing.js";
+import { declarePI, declareRotate, declareGrainShape, colorBandingFix } from "../shader-utils.js";
+const staticMeshGradientMeta = {
+  maxColorCount: 10
+};
+const staticMeshGradientFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec4 u_colors[${staticMeshGradientMeta.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_positions;
+uniform float u_waveX;
+uniform float u_waveXShift;
+uniform float u_waveY;
+uniform float u_waveYShift;
+uniform float u_mixing;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+
+${sizingVariablesDeclaration}
+${sizingUniformsDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareRotate}
+${declareGrainShape}
+
+
+vec2 getPosition(int i, float t) {
+  float a = float(i) * .37;
+  float b = .6 + mod(float(i), 3.) * .3;
+  float c = .8 + mod(float(i + 1), 4.) * 0.25;
+
+  float x = sin(t * b + a);
+  float y = cos(t * c + a * 1.5);
+
+  return .5 + .5 * vec2(x, y);
+}
+
+void main() {
+  vec2 uv = v_objectUV;
+  uv += .5;
+
+  vec2 grainUV = rotate(v_objectUV, 2.) * 180.;
+  float grain = grainShape(grainUV, vec2(100.));
+
+  float radius = smoothstep(0., 1., length(uv - .5));
+  float center = 1. - radius;
+  for (float i = 1.; i <= 2.; i++) {
+    uv.x += u_waveX * center / i * cos(TWO_PI * u_waveXShift + i * 2. * smoothstep(.0, 1., uv.y));
+    uv.y += u_waveY * center / i * cos(TWO_PI * u_waveYShift + i * 2. * smoothstep(.0, 1., uv.x));
+  }
+
+  float mixerGrain = .4 * u_grainMixer * (grain - .3);
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+  float totalWeight = 0.;
+  float positionSeed = 25. + .33 * u_positions;
+
+  for (int i = 0; i < ${staticMeshGradientMeta.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+
+    vec2 pos = getPosition(i, positionSeed) + mixerGrain;
+    float dist = length(uv - pos);
+    dist = length(uv - pos);
+
+    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;
+    float opacityFraction = u_colors[i].a;
+
+    float power = 4.;
+    if (u_mixing > .5) {
+      power = mix(power, .75, 2. * (u_mixing - .5));
+    }
+    dist = pow(dist, power);
+
+    float w = 1. / (dist + 1e-3);
+    if (u_mixing < .5) {
+      w = pow(w, mix(mix(.01, 5., clamp(w, 0., 1.)), 1., 2. * u_mixing));
+    }
+    color += colorFraction * w;
+    opacity += opacityFraction * w;
+    totalWeight += w;
+  }
+
+  color /= totalWeight;
+  opacity /= totalWeight;
+
+  float rr = grainShape(grainUV, vec2(0.));
+  float gg = grainShape(grainUV, vec2(-1.));
+  float bb = grainShape(grainUV, vec2(2.));
+  vec3 grainColor = 2. * vec3(rr, gg, bb);
+  color = mix(color, grainColor, u_grainOverlay * grain);
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  staticMeshGradientFragmentShader,
+  staticMeshGradientMeta
+};
+//# sourceMappingURL=static-mesh-gradient.js.map

package/dist/shaders/static-mesh-gradient.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/static-mesh-gradient.ts"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingVariablesDeclaration,\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from '../shader-sizing.js';\nimport { declarePI, declareRotate, declareGrainShape, colorBandingFix } from '../shader-utils.js';\n\nexport const staticMeshGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * A composition of N color spots (one per color)\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_waveX, u_waveY - power of sine wave distortion along X and Y axes\n * - u_waveXShift, u_waveYShift - each wave phase offset\n * - u_mixing (0 .. 1, float) - 0 for stepped gradient, 0.5 for smooth transitions, 1 for pronounced color points\n * - u_grainMixer - shape distortion\n * - u_grainOverlay - post-processing blending\n *\n */\n\n// language=GLSL\nexport const staticMeshGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colors[${staticMeshGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_positions;\nuniform float u_waveX;\nuniform float u_waveXShift;\nuniform float u_waveY;\nuniform float u_waveYShift;\nuniform float u_mixing;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\n\n${sizingVariablesDeclaration}\n${sizingUniformsDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n${declareGrainShape}\n\n\nvec2 getPosition(int i, float t) {\n  float a = float(i) * .37;\n  float b = .6 + mod(float(i), 3.) * .3;\n  float c = .8 + mod(float(i + 1), 4.) * 0.25;\n\n  float x = sin(t * b + a);\n  float y = cos(t * c + a * 1.5);\n\n  return .5 + .5 * vec2(x, y);\n}\n\nvoid main() {\n  vec2 uv = v_objectUV;\n  uv += .5;\n\n  vec2 grainUV = rotate(v_objectUV, 2.) * 180.;\n  float grain = grainShape(grainUV, vec2(100.));\n\n  float radius = smoothstep(0., 1., length(uv - .5));\n  float center = 1. - radius;\n  for (float i = 1.; i <= 2.; i++) {\n    uv.x += u_waveX * center / i * cos(TWO_PI * u_waveXShift + i * 2. * smoothstep(.0, 1., uv.y));\n    uv.y += u_waveY * center / i * cos(TWO_PI * u_waveYShift + i * 2. * smoothstep(.0, 1., uv.x));\n  }\n\n  float mixerGrain = .4 * u_grainMixer * (grain - .3);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n  float totalWeight = 0.;\n  float positionSeed = 25. + .33 * u_positions;\n\n  for (int i = 0; i < ${staticMeshGradientMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n\n    vec2 pos = getPosition(i, positionSeed) + mixerGrain;\n    float dist = length(uv - pos);\n    dist = length(uv - pos);\n\n    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;\n    float opacityFraction = u_colors[i].a;\n\n    float power = 4.;\n    if (u_mixing > .5) {\n      power = mix(power, .75, 2. * (u_mixing - .5));\n    }\n    dist = pow(dist, power);\n\n    float w = 1. / (dist + 1e-3);\n    if (u_mixing < .5) {\n      w = pow(w, mix(mix(.01, 5., clamp(w, 0., 1.)), 1., 2. * u_mixing));\n    }\n    color += colorFraction * w;\n    opacity += opacityFraction * w;\n    totalWeight += w;\n  }\n\n  color /= totalWeight;\n  opacity /= totalWeight;\n\n  float rr = grainShape(grainUV, vec2(0.));\n  float gg = grainShape(grainUV, vec2(-1.));\n  float bb = grainShape(grainUV, vec2(2.));\n  vec3 grainColor = 2. * vec3(rr, gg, bb);\n  color = mix(color, grainColor, u_grainOverlay * grain);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface StaticMeshGradientUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_positions: number;\n  u_waveX: number;\n  u_waveXShift: number;\n  u_waveY: number;\n  u_waveYShift: number;\n  u_mixing: number;\n  u_grainMixer: number;\n  u_grainOverlay: number;\n}\n\nexport interface StaticMeshGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  positions?: number;\n  waveX?: number;\n  waveXShift?: number;\n  waveY?: number;\n  waveYShift?: number;\n  mixing?: number;\n  grainMixer?: number;\n  grainOverlay?: number;\n}\n"],
+  "mappings": ";;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,WAAW,eAAe,mBAAmB,uBAAuB;AAEtE,MAAM,yBAAyB;AAAA,EACpC,eAAe;AACjB;AAiBO,MAAM,mCAA2C;AAAA;AAAA;AAAA,wBAGhC,uBAAuB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY1D,0BAA0B;AAAA,EAC1B,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIzB,SAAS;AAAA,EACT,aAAa;AAAA,EACb,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,wBAmCK,uBAAuB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkCxD,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/static-radial-gradient.d.ts

@@ -0,0 +1,51 @@
+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 staticRadialGradientMeta: {
+    readonly maxColorCount: 10;
+};
+/**
+ * N-colors radial gradient
+ *
+ * Uniforms:
+ * - u_colorBack (RGBA)
+ * - u_colors (vec4[]), u_colorsCount (float used as integer)
+ * - u_radius - circle radius
+ * - u_focalDistance, u_focalAngle (float) - gradient center offset to the circle center
+ * - u_falloff (-1 .. 1, float) - color points distribution (0 for linear gradient)
+ * - u_mixing (0 .. 1, float) - 0 for stepped gradient, 0.5 for smooth transitions, 1 for pronounced color points
+ * - u_distortion, u_distortionShift, u_distortionFreq - radial distortion (effective with u_distortion > 0)
+ * - u_grainMixer - shape distortion
+ * - u_grainOverlay - post-processing blending
+ *
+ */
+export declare const staticRadialGradientFragmentShader: string;
+export interface StaticRadialGradientUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_radius: number;
+    u_focalDistance: number;
+    u_focalAngle: number;
+    u_falloff: number;
+    u_mixing: number;
+    u_distortion: number;
+    u_distortionShift: number;
+    u_distortionFreq: number;
+    u_grainMixer: number;
+    u_grainOverlay: number;
+}
+export interface StaticRadialGradientParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
+    colors?: string[];
+    radius?: number;
+    focalDistance?: number;
+    focalAngle?: number;
+    falloff?: number;
+    mixing?: number;
+    distortion?: number;
+    distortionShift?: number;
+    distortionFreq?: number;
+    grainMixer?: number;
+    grainOverlay?: number;
+}

package/dist/shaders/static-radial-gradient.js

@@ -0,0 +1,155 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {
+  sizingVariablesDeclaration,
+  sizingUniformsDeclaration
+} from "../shader-sizing.js";
+import { declarePI, declareRotate, declareGrainShape, colorBandingFix } from "../shader-utils.js";
+const staticRadialGradientMeta = {
+  maxColorCount: 10
+};
+const staticRadialGradientFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${staticRadialGradientMeta.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_radius;
+uniform float u_focalDistance;
+uniform float u_focalAngle;
+uniform float u_falloff;
+uniform float u_mixing;
+uniform float u_distortion;
+uniform float u_distortionShift;
+uniform float u_distortionFreq;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+
+${sizingVariablesDeclaration}
+${sizingUniformsDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareRotate}
+${declareGrainShape}
+
+void main() {
+  vec2 uv = 2. * v_objectUV;
+
+
+  vec2 center = vec2(0.);
+  float angleRad = radians(u_focalAngle - 90.);
+  vec2 focalPoint = vec2(cos(angleRad), sin(angleRad)) * u_focalDistance;
+  float radius = u_radius;
+  
+  vec2 c_to_uv = uv - center;
+  vec2 f_to_uv = uv - focalPoint;
+  vec2 f_to_c = center - focalPoint;
+  float r = length(c_to_uv);
+  
+  float fragAngle = atan(c_to_uv.y, c_to_uv.x);
+  float angleDiff = fragAngle - angleRad;
+  angleDiff = mod(angleDiff + PI, TWO_PI) - PI;
+  
+  float halfAngle = acos(clamp(radius / u_focalDistance, 0.0, 1.0));
+  float isInSector = 1.0 - smoothstep(.6 * PI, halfAngle, abs(angleDiff));
+  
+  float a = dot(f_to_uv, f_to_uv);
+  float b = -2.0 * dot(f_to_uv, f_to_c);
+  float c = dot(f_to_c, f_to_c) - radius * radius;
+
+  float discriminant = b * b - 4.0 * a * c;
+  float t = 1.0;
+
+  if (discriminant >= 0.0) {
+    float sqrtD = sqrt(discriminant);
+    float t0 = (-b - sqrtD) / (2.0 * a);
+    float t1 = (-b + sqrtD) / (2.0 * a);
+    t = max(t0, t1);
+    if (t < 0.0) t = 0.0;
+  }
+
+  float dist = length(f_to_uv);
+  float normalized = dist / (length(f_to_uv * t));
+  float shape = clamp(normalized, 0.0, 1.0);
+
+  float falloffMapped = mix(.2 + .8 * max(0., u_falloff + 1.), mix(1., 15., pow(u_falloff, 2.)), step(.0, u_falloff));
+  
+  float falloffExp = mix(falloffMapped, 1., shape);
+  shape = pow(shape, falloffExp);
+  shape = 1. - clamp(shape, 0., 1.);
+
+
+  float outerMask = .002;
+  float outer = smoothstep(radius + outerMask, radius - outerMask, r);
+  outer = mix(outer, 1., isInSector);
+  
+  shape = mix(0., shape, outer);
+  shape *= smoothstep(radius, radius - .01, r);
+
+  float angle = atan(f_to_uv.y, f_to_uv.x);
+  shape -= pow(u_distortion, 2.) * shape * pow(sin(PI * clamp(length(f_to_uv) - .2 + u_distortionShift, 0., 1.)), 4.) * (sin(u_distortionFreq * angle) + cos(floor(.65 * u_distortionFreq) * angle));
+
+
+  vec2 grainUV = rotate(v_objectUV, 2.) * 180.;
+  float grain = grainShape(grainUV, vec2(100.));
+
+  float mixerGrain = u_grainMixer * (grain - .3);
+  float mixer = shape * u_colorsCount + mixerGrain;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  
+  float outerShape = 0.;
+  for (int i = 1; i < ${staticRadialGradientMeta.maxColorCount + 1}; i++) {
+    if (i > int(u_colorsCount)) break;
+    float mLinear = clamp(mixer - float(i - 1), 0.0, 1.0);
+    
+    float m = 0.;
+    float mixing = u_mixing * 3.;
+    if (mixing > 2.) {
+      float tt = pow(mLinear, 2.);
+      m = mix(mLinear, tt, .5 * clamp((mixing - 2.), 0., 1.));
+    } else if (mixing > 1.) {
+      m = mix(smoothstep(0., 1., mLinear), mLinear, clamp((mixing - 1.), 0., 1.));
+    } else {
+      float aa = fwidth(mLinear);
+      m = smoothstep(.5 - .5 * mixing - aa, .5 + .5 * mixing + aa, mLinear);
+    }
+    
+    if (i == 1) {
+      outerShape = m;
+    }
+
+    vec4 c = u_colors[i - 1];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, m);
+  }
+
+  vec3 color = gradient.rgb * outerShape;
+  float opacity = gradient.a * outerShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+  
+  float rr = grainShape(grainUV, vec2(0.));
+  float gg = grainShape(grainUV, vec2(-1.));
+  float bb = grainShape(grainUV, vec2(2.));
+  vec3 grainColor = 2. * vec3(rr, gg, bb);
+  color = mix(color, grainColor, u_grainOverlay * grain);
+  
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  staticRadialGradientFragmentShader,
+  staticRadialGradientMeta
+};
+//# sourceMappingURL=static-radial-gradient.js.map

package/dist/shaders/static-radial-gradient.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/static-radial-gradient.ts"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingVariablesDeclaration,\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from '../shader-sizing.js';\nimport { declarePI, declareRotate, declareGrainShape, colorBandingFix } from '../shader-utils.js';\n\nexport const staticRadialGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * N-colors radial gradient\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_radius - circle radius\n * - u_focalDistance, u_focalAngle (float) - gradient center offset to the circle center\n * - u_falloff (-1 .. 1, float) - color points distribution (0 for linear gradient)\n * - u_mixing (0 .. 1, float) - 0 for stepped gradient, 0.5 for smooth transitions, 1 for pronounced color points\n * - u_distortion, u_distortionShift, u_distortionFreq - radial distortion (effective with u_distortion > 0)\n * - u_grainMixer - shape distortion\n * - u_grainOverlay - post-processing blending\n *\n */\n\n// language=GLSL\nexport const staticRadialGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${staticRadialGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_radius;\nuniform float u_focalDistance;\nuniform float u_focalAngle;\nuniform float u_falloff;\nuniform float u_mixing;\nuniform float u_distortion;\nuniform float u_distortionShift;\nuniform float u_distortionFreq;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\n\n${sizingVariablesDeclaration}\n${sizingUniformsDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n${declareGrainShape}\n\nvoid main() {\n  vec2 uv = 2. * v_objectUV;\n\n\n  vec2 center = vec2(0.);\n  float angleRad = radians(u_focalAngle - 90.);\n  vec2 focalPoint = vec2(cos(angleRad), sin(angleRad)) * u_focalDistance;\n  float radius = u_radius;\n  \n  vec2 c_to_uv = uv - center;\n  vec2 f_to_uv = uv - focalPoint;\n  vec2 f_to_c = center - focalPoint;\n  float r = length(c_to_uv);\n  \n  float fragAngle = atan(c_to_uv.y, c_to_uv.x);\n  float angleDiff = fragAngle - angleRad;\n  angleDiff = mod(angleDiff + PI, TWO_PI) - PI;\n  \n  float halfAngle = acos(clamp(radius / u_focalDistance, 0.0, 1.0));\n  float isInSector = 1.0 - smoothstep(.6 * PI, halfAngle, abs(angleDiff));\n  \n  float a = dot(f_to_uv, f_to_uv);\n  float b = -2.0 * dot(f_to_uv, f_to_c);\n  float c = dot(f_to_c, f_to_c) - radius * radius;\n\n  float discriminant = b * b - 4.0 * a * c;\n  float t = 1.0;\n\n  if (discriminant >= 0.0) {\n    float sqrtD = sqrt(discriminant);\n    float t0 = (-b - sqrtD) / (2.0 * a);\n    float t1 = (-b + sqrtD) / (2.0 * a);\n    t = max(t0, t1);\n    if (t < 0.0) t = 0.0;\n  }\n\n  float dist = length(f_to_uv);\n  float normalized = dist / (length(f_to_uv * t));\n  float shape = clamp(normalized, 0.0, 1.0);\n\n  float falloffMapped = mix(.2 + .8 * max(0., u_falloff + 1.), mix(1., 15., pow(u_falloff, 2.)), step(.0, u_falloff));\n  \n  float falloffExp = mix(falloffMapped, 1., shape);\n  shape = pow(shape, falloffExp);\n  shape = 1. - clamp(shape, 0., 1.);\n\n\n  float outerMask = .002;\n  float outer = smoothstep(radius + outerMask, radius - outerMask, r);\n  outer = mix(outer, 1., isInSector);\n  \n  shape = mix(0., shape, outer);\n  shape *= smoothstep(radius, radius - .01, r);\n\n  float angle = atan(f_to_uv.y, f_to_uv.x);\n  shape -= pow(u_distortion, 2.) * shape * pow(sin(PI * clamp(length(f_to_uv) - .2 + u_distortionShift, 0., 1.)), 4.) * (sin(u_distortionFreq * angle) + cos(floor(.65 * u_distortionFreq) * angle));\n\n\n  vec2 grainUV = rotate(v_objectUV, 2.) * 180.;\n  float grain = grainShape(grainUV, vec2(100.));\n\n  float mixerGrain = u_grainMixer * (grain - .3);\n  float mixer = shape * u_colorsCount + mixerGrain;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  \n  float outerShape = 0.;\n  for (int i = 1; i < ${staticRadialGradientMeta.maxColorCount + 1}; i++) {\n    if (i > int(u_colorsCount)) break;\n    float mLinear = clamp(mixer - float(i - 1), 0.0, 1.0);\n    \n    float m = 0.;\n    float mixing = u_mixing * 3.;\n    if (mixing > 2.) {\n      float tt = pow(mLinear, 2.);\n      m = mix(mLinear, tt, .5 * clamp((mixing - 2.), 0., 1.));\n    } else if (mixing > 1.) {\n      m = mix(smoothstep(0., 1., mLinear), mLinear, clamp((mixing - 1.), 0., 1.));\n    } else {\n      float aa = fwidth(mLinear);\n      m = smoothstep(.5 - .5 * mixing - aa, .5 + .5 * mixing + aa, mLinear);\n    }\n    \n    if (i == 1) {\n      outerShape = m;\n    }\n\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  vec3 color = gradient.rgb * outerShape;\n  float opacity = gradient.a * outerShape;\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  float rr = grainShape(grainUV, vec2(0.));\n  float gg = grainShape(grainUV, vec2(-1.));\n  float bb = grainShape(grainUV, vec2(2.));\n  vec3 grainColor = 2. * vec3(rr, gg, bb);\n  color = mix(color, grainColor, u_grainOverlay * grain);\n  \n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface StaticRadialGradientUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_radius: number;\n  u_focalDistance: number;\n  u_focalAngle: number;\n  u_falloff: number;\n  u_mixing: number;\n  u_distortion: number;\n  u_distortionShift: number;\n  u_distortionFreq: number;\n  u_grainMixer: number;\n  u_grainOverlay: number;\n}\n\nexport interface StaticRadialGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  radius?: number;\n  focalDistance?: number;\n  focalAngle?: number;\n  falloff?: number;\n  mixing?: number;\n  distortion?: number;\n  distortionShift?: number;\n  distortionFreq?: number;\n  grainMixer?: number;\n  grainOverlay?: number;\n}\n"],
+  "mappings": ";;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,WAAW,eAAe,mBAAmB,uBAAuB;AAEtE,MAAM,2BAA2B;AAAA,EACtC,eAAe;AACjB;AAmBO,MAAM,qCAA6C;AAAA;AAAA;AAAA;AAAA,wBAIlC,yBAAyB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc5D,0BAA0B;AAAA,EAC1B,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIzB,SAAS;AAAA,EACT,aAAa;AAAA,EACb,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,wBAqEK,yBAAyB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsC9D,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/swirl.d.ts

@@ -13,7 +13,7 @@ export declare const swirlMeta: {
  * - 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
+ * - u_noise, u_noiseFrequency: simplex noise distortion over the shape
  *
  */
 export declare const swirlFragmentShader: string;
@@ -25,7 +25,7 @@ export interface SwirlUniforms extends ShaderSizingUniforms {
     u_twist: number;
     u_softness: number;
     u_noiseFrequency: number;
-    u_noisePower: number;
+    u_noise: number;
 }
 export interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {
     colorBack?: string;
@@ -34,5 +34,5 @@ export interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {
     twist?: number;
     softness?: number;
     noiseFrequency?: number;
-    noisePower?: number;
+    noise?: number;
 }

package/dist/shaders/swirl.js

@@ -19,7 +19,7 @@ uniform float u_colorsCount;
 uniform float u_bandCount;
 uniform float u_twist;
 uniform float u_softness;
-uniform float u_noisePower;
+uniform float u_noise;
 uniform float u_noiseFrequency;
 
 ${sizingVariablesDeclaration}
@@ -45,33 +45,34 @@ void main() {
 
   float shape = fract(offset);
   shape = 1. - abs(2. * shape - 1.);
-  shape += u_noisePower * snoise(pow(u_noiseFrequency, 2.) * shape_uv);
+  shape += u_noise * snoise(15. * 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.);
-
+  float mixer = shape * u_colorsCount;
   vec4 gradient = u_colors[0];
   gradient.rgb *= gradient.a;
-  for (int i = 1; i < ${swirlMeta.maxColorCount}; i++) {
-    if (i >= int(u_colorsCount)) break;
+  
+  float outerShape = 0.;
+  for (int i = 1; i < ${swirlMeta.maxColorCount + 1}; i++) {
+    if (i > int(u_colorsCount)) break;
+
+    float m = clamp(mixer - float(i - 1), 0., 1.);
+    float aa = fwidth(m);
+    m = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, m);
 
-    float localT = clamp(mixer - float(i - 1), 0., 1.);
-    localT = smoothstep(.5 - .5 * u_softness, .5 + .5 * u_softness + edge_w, localT);
+    if (i == 1) {
+      outerShape = m;
+    }
 
-    vec4 c = u_colors[i];
+    vec4 c = u_colors[i - 1];
     c.rgb *= c.a;
-    gradient = mix(gradient, c, localT);
+    gradient = mix(gradient, c, m);
   }
 
-  vec3 color = gradient.rgb * totalShape;
-  float opacity = gradient.a * totalShape;
+  vec3 color = gradient.rgb * outerShape;
+  float opacity = gradient.a * outerShape;
 
   vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
   color = color + bgColor * (1.0 - opacity);

package/dist/shaders/swirl.js.map

@@ -1,7 +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\n// language=GLSL\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;AAgBO,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;",
+  "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_noise, u_noiseFrequency: simplex noise distortion over the shape\n *\n */\n\n// language=GLSL\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_noise;\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_noise * snoise(15. * pow(u_noiseFrequency, 2.) * shape_uv);\n\n  float mid = smoothstep(.2, .4, pow(l, twist));\n  shape = mix(0., shape, mid);\n\n  float mixer = shape * u_colorsCount;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  \n  float outerShape = 0.;\n  for (int i = 1; i < ${swirlMeta.maxColorCount + 1}; i++) {\n    if (i > int(u_colorsCount)) break;\n\n    float m = clamp(mixer - float(i - 1), 0., 1.);\n    float aa = fwidth(m);\n    m = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, m);\n\n    if (i == 1) {\n      outerShape = m;\n    }\n\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  vec3 color = gradient.rgb * outerShape;\n  float opacity = gradient.a * outerShape;\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_noise: 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  noise?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,eAAe,uBAAuB;AAExE,MAAM,YAAY;AAAA,EACvB,eAAe;AACjB;AAgBO,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,wBA2BS,UAAU,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAuB/C,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/voronoi.js

@@ -82,7 +82,7 @@ vec4 voronoi(vec2 x, float t) {
 
 void main() {
   vec2 shape_uv = v_patternUV;
-  shape_uv *= .0125;
+  shape_uv *= 1.25;
 
   float t = u_time;
 
@@ -120,7 +120,7 @@ void main() {
   vec3 cellColor = gradient.rgb;
   float cellOpacity = gradient.a;
 
-  float glows = length(voronoiRes.yz * u_glow + .1);
+  float glows = length(voronoiRes.yz * u_glow);
   glows = pow(glows, 1.5);
 
   vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);

package/dist/shaders/voronoi.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/voronoi.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 } from '../shader-utils.js';\n\nexport const voronoiMeta = {\n  maxColorCount: 5,\n} as const;\n\n/**\n * Double-pass Voronoi pattern cell edges\n * Original algorithm: https://www.shadertoy.com/view/ldl3W8\n *\n * Uniforms:\n * - u_colorBack, u_colorGlow (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_stepsPerColor: discrete color steps between u_colors\n * - u_distortion (0..0.5): max distance the cell center moves away from regular grid\n * - u_gap: width of the stroke between the cells\n * - u_glow: radial glow around each cell center\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n * Note: gaps can't be removed completely due to artifacts of Voronoi cells\n *\n */\n\n// language=GLSL\nexport const voronoiFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${voronoiMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_stepsPerColor;\nuniform vec4 u_colorGlow;\nuniform vec4 u_colorGap;\nuniform float u_distortion;\nuniform float u_gap;\nuniform float u_glow;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nvec2 hash(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, uv).gb;\n}\n\nvec4 voronoi(vec2 x, float t) {\n  vec2 ip = floor(x);\n  vec2 fp = fract(x);\n\n  vec2 mg, mr;\n  float md = 8.;\n  float rand = 0.;\n\n  for (int j = -1; j <= 1; j++) {\n    for (int i = -1; i <= 1; i++) {\n      vec2 g = vec2(float(i), float(j));\n      vec2 raw_hash = hash(ip + g);\n      vec2 o = hash(ip + g);\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\n      vec2 r = g + o - fp;\n      float d = dot(r, r);\n\n      if (d < md) {\n        md = d;\n        mr = r;\n        mg = g;\n        rand = raw_hash.x;\n      }\n    }\n  }\n\n  md = 8.;\n  for (int j = -2; j <= 2; j++) {\n    for (int i = -2; i <= 2; i++) {\n      vec2 g = mg + vec2(float(i), float(j));\n      vec2 o = hash(ip + g);\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\n      vec2 r = g + o - fp;\n      if (dot(mr - r, mr - r) > .00001) {\n        md = min(md, dot(.5 * (mr + r), normalize(r - mr)));\n      }\n    }\n  }\n\n  return vec4(md, mr, rand);\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= .0125;\n\n  float t = u_time;\n\n  vec4 voronoiRes = voronoi(shape_uv, t);\n\n  float shape = clamp(voronoiRes.w, 0., 1.);\n  float mixer = shape * (u_colorsCount - 1.);\n  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\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 < ${voronoiMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n      float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n      localT = round(localT * steps) / steps;\n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localT);\n  }\n\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 = round(localT * steps) / steps;\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  vec3 cellColor = gradient.rgb;\n  float cellOpacity = gradient.a;\n\n  float glows = length(voronoiRes.yz * u_glow + .1);\n  glows = pow(glows, 1.5);\n\n  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);\n  float opacity = cellOpacity + u_colorGlow.a * glows;\n\n  float edge = voronoiRes.x;\n  float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);\n  edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);\n\n  color = mix(u_colorGap.rgb * u_colorGap.a, color, edge);\n  opacity = mix(u_colorGap.a, opacity, edge);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface VoronoiUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_stepsPerColor: number;\n  u_colorGap: [number, number, number, number];\n  u_colorGlow: [number, number, number, number];\n  u_distortion: number;\n  u_gap: number;\n  u_glow: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  stepsPerColor?: number;\n  colorGap?: string;\n  colorGlow?: string;\n  distortion?: number;\n  gap?: number;\n  glow?: number;\n}\n"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI } from '../shader-utils.js';\n\nexport const voronoiMeta = {\n  maxColorCount: 5,\n} as const;\n\n/**\n * Double-pass Voronoi pattern cell edges\n * Original algorithm: https://www.shadertoy.com/view/ldl3W8\n *\n * Uniforms:\n * - u_colorBack, u_colorGlow (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_stepsPerColor: discrete color steps between u_colors\n * - u_distortion (0..0.5): max distance the cell center moves away from regular grid\n * - u_gap: width of the stroke between the cells\n * - u_glow: radial glow around each cell center\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n * Note: gaps can't be removed completely due to artifacts of Voronoi cells\n *\n */\n\n// language=GLSL\nexport const voronoiFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${voronoiMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_stepsPerColor;\nuniform vec4 u_colorGlow;\nuniform vec4 u_colorGap;\nuniform float u_distortion;\nuniform float u_gap;\nuniform float u_glow;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nvec2 hash(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, uv).gb;\n}\n\nvec4 voronoi(vec2 x, float t) {\n  vec2 ip = floor(x);\n  vec2 fp = fract(x);\n\n  vec2 mg, mr;\n  float md = 8.;\n  float rand = 0.;\n\n  for (int j = -1; j <= 1; j++) {\n    for (int i = -1; i <= 1; i++) {\n      vec2 g = vec2(float(i), float(j));\n      vec2 raw_hash = hash(ip + g);\n      vec2 o = hash(ip + g);\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\n      vec2 r = g + o - fp;\n      float d = dot(r, r);\n\n      if (d < md) {\n        md = d;\n        mr = r;\n        mg = g;\n        rand = raw_hash.x;\n      }\n    }\n  }\n\n  md = 8.;\n  for (int j = -2; j <= 2; j++) {\n    for (int i = -2; i <= 2; i++) {\n      vec2 g = mg + vec2(float(i), float(j));\n      vec2 o = hash(ip + g);\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\n      vec2 r = g + o - fp;\n      if (dot(mr - r, mr - r) > .00001) {\n        md = min(md, dot(.5 * (mr + r), normalize(r - mr)));\n      }\n    }\n  }\n\n  return vec4(md, mr, rand);\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= 1.25;\n\n  float t = u_time;\n\n  vec4 voronoiRes = voronoi(shape_uv, t);\n\n  float shape = clamp(voronoiRes.w, 0., 1.);\n  float mixer = shape * (u_colorsCount - 1.);\n  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\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 < ${voronoiMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n      float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n      localT = round(localT * steps) / steps;\n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localT);\n  }\n\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 = round(localT * steps) / steps;\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  vec3 cellColor = gradient.rgb;\n  float cellOpacity = gradient.a;\n\n  float glows = length(voronoiRes.yz * u_glow);\n  glows = pow(glows, 1.5);\n\n  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);\n  float opacity = cellOpacity + u_colorGlow.a * glows;\n\n  float edge = voronoiRes.x;\n  float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);\n  edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);\n\n  color = mix(u_colorGap.rgb * u_colorGap.a, color, edge);\n  opacity = mix(u_colorGap.a, opacity, edge);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface VoronoiUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_stepsPerColor: number;\n  u_colorGap: [number, number, number, number];\n  u_colorGlow: [number, number, number, number];\n  u_distortion: number;\n  u_gap: number;\n  u_glow: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  stepsPerColor?: number;\n  colorGap?: string;\n  colorGlow?: string;\n  distortion?: number;\n  gap?: number;\n  glow?: number;\n}\n"],
   "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,iBAAiB;AAEnB,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAqBO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASrB,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAgEa,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/warp.js

@@ -36,7 +36,7 @@ ${declareValueNoise}
 
 void main() {
   vec2 uv = v_patternUV;
-  uv *= .005;
+  uv *= .5;
 
   float t = 0.0625 * u_time;
 
@@ -46,10 +46,13 @@ void main() {
   uv.x += 4. * u_distortion * n2 * cos(angle);
   uv.y += 4. * u_distortion * n2 * sin(angle);
 
-  float iterationsNumber = ceil(clamp(u_swirlIterations, 1., 30.));
-  for (float i = 1.; i <= iterationsNumber; i++) {
-    uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * uv.y);
-    uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * uv.x);
+  float swirl = u_swirl;
+  for (int i = 1; i <= 20; i++) {
+    if (i >= int(u_swirlIterations)) break;
+    float iFloat = float(i);
+//    swirl *= (1. - smoothstep(.0, .25, length(fwidth(uv))));
+    uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);
+    uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x);
   }
 
   float proportion = clamp(u_proportion, 0., 1.);
@@ -72,19 +75,21 @@ void main() {
   float mixer = shape * (u_colorsCount - 1.);
   vec4 gradient = u_colors[0];
   gradient.rgb *= gradient.a;
+  float aa = fwidth(shape);
   for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {
     if (i >= int(u_colorsCount)) break;
-    float localMixer = clamp(mixer - float(i - 1), 0.0, 1.0);
+    float m = clamp(mixer - float(i - 1), 0.0, 1.0);
 
-    float localMixerStart = floor(localMixer);
-    float smoothed = smoothstep(.5 - u_softness * .5, .5 + u_softness * .5, localMixer - localMixerStart);
-    float localTStepped = localMixerStart + smoothed;
+    float localMixerStart = floor(m);
+    float softness = .5 * u_softness + fwidth(m);
+    float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart);
+    float stepped = localMixerStart + smoothed;
 
-    localMixer = mix(localTStepped, localMixer, u_softness);
+    m = mix(stepped, m, u_softness);
 
     vec4 c = u_colors[i];
     c.rgb *= c.a;
-    gradient = mix(gradient, c, localMixer);
+    gradient = mix(gradient, c, m);
   }
 
   vec3 color = gradient.rgb;