@paper-design/shaders 0.0.68 → 0.0.69

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/pulsing-border.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, textureRandomizerGB, colorBandingFix } from '../shader-utils.js';\n\nexport const pulsingBorderMeta = {\n  maxColorCount: 5,\n  maxSpots: 4,\n} as const;\n\n/**\n * Luminous trails of color merging into a glowing gradient contour.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 5 spot colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_roundness (float): Border radius (0 to 1)\n * - u_thickness (float): Border base width (0 to 1)\n * - u_softness (float): Border edge sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_marginLeft (float): Distance from the left edge to the effect (0 to 1)\n * - u_marginRight (float): Distance from the right edge to the effect (0 to 1)\n * - u_marginTop (float): Distance from the top edge to the effect (0 to 1)\n * - u_marginBottom (float): Distance from the bottom edge to the effect (0 to 1)\n * - u_aspectRatio (float): Aspect ratio mode (0 = auto, 1 = square)\n * - u_intensity (float): Thickness of individual color spots (0 to 1)\n * - u_bloom (float): Power of glow, 0 = normal blending, 1 = additive blending (0 to 1)\n * - u_spots (float): Number of spots added for each color (1 to 20)\n * - u_spotSize (float): Angular size of spots (0 to 1)\n * - u_pulse (float): Optional pulsing animation intensity (0 to 1)\n * - u_smoke (float): Optional noisy shape extending the border (0 to 1)\n * - u_smokeSize (float): Size of the smoke effect (0 to 1)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_responsiveUV (vec2): Responsive UV coordinates that adapt to canvas aspect ratio\n * - v_responsiveBoxGivenSize (vec2): Given size of the responsive bounding box\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied (used for smoke calculation)\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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;AAgDO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM1B,kBAAkB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBtD,0BAA2B;AAAA;AAAA;AAAA;AAAA,EAI3B,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6BV,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAoGgB,kBAAkB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAOhC,kBAAkB,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8C7D,eAAgB;AAAA;AAAA;AAAA;AAgDd,MAAM,4BAA4B;AAAA,EACvC,MAAM;AAAA,EACN,QAAQ;AACV;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { 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 * Luminous trails of color merging into a glowing gradient contour.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 5 spot colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_roundness (float): Border radius (0 to 1)\n * - u_thickness (float): Border base width (0 to 1)\n * - u_softness (float): Border edge sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_marginLeft (float): Distance from the left edge to the effect (0 to 1)\n * - u_marginRight (float): Distance from the right edge to the effect (0 to 1)\n * - u_marginTop (float): Distance from the top edge to the effect (0 to 1)\n * - u_marginBottom (float): Distance from the bottom edge to the effect (0 to 1)\n * - u_aspectRatio (float): Aspect ratio mode (0 = auto, 1 = square)\n * - u_intensity (float): Thickness of individual color spots (0 to 1)\n * - u_bloom (float): Power of glow, 0 = normal blending, 1 = additive blending (0 to 1)\n * - u_spots (float): Number of spots added for each color (1 to 20)\n * - u_spotSize (float): Angular size of spots (0 to 1)\n * - u_pulse (float): Optional pulsing animation intensity (0 to 1)\n * - u_smoke (float): Optional noisy shape extending the border (0 to 1)\n * - u_smokeSize (float): Size of the smoke effect (0 to 1)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_responsiveUV (vec2): Responsive UV coordinates that adapt to canvas aspect ratio\n * - v_responsiveBoxGivenSize (vec2): Given size of the responsive bounding box\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied (used for smoke calculation)\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_patternUV;\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,eAAmE;AACnE,SAAS,WAAW,qBAAqB,uBAAuB;AAEzD,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,UAAU;AACZ;AAgDO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM1B,kBAAkB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BtD,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6BV,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAoGgB,kBAAkB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAOhC,kBAAkB,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8C7D,eAAgB;AAAA;AAAA;AAAA;AAgDd,MAAM,4BAA4B;AAAA,EACvC,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/shaders/simplex-noise.js

@@ -3,7 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import {} from "../shader-sizing.js";
 import { simplexNoise, colorBandingFix } from "../shader-utils.js";
 const simplexNoiseMeta = {
   maxColorCount: 10
@@ -19,7 +19,7 @@ uniform float u_colorsCount;
 uniform float u_stepsPerColor;
 uniform float u_softness;
 
-${sizingVariablesDeclaration}
+in vec2 v_patternUV;
 
 out vec4 fragColor;
 

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/simplex-noise.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { simplexNoise, colorBandingFix } from '../shader-utils.js';\n\nexport const simplexNoiseMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * A multi-color gradient mapped into smooth, animated curves built as a combination of 2 Simplex noises.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_scale (float): Overall zoom level, used for anti-aliasing calculations\n * - u_colors (vec4[]): Up to 10 base colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2\u00D7N, etc. (1 to 10)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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;AAgCO,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMzB,iBAAiB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrD,0BAA2B;AAAA;AAAA;AAAA;AAAA,EAI3B,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoCS,iBAAiB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA6BnD,eAAgB;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { 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 * A multi-color gradient mapped into smooth, animated curves built as a combination of 2 Simplex noises.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_scale (float): Overall zoom level, used for anti-aliasing calculations\n * - u_colors (vec4[]): Up to 10 base colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2\u00D7N, etc. (1 to 10)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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\nin vec2 v_patternUV;\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,eAAmE;AACnE,SAAS,cAAc,uBAAuB;AAEvC,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AACjB;AAgCO,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMzB,iBAAiB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASrD,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoCS,iBAAiB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA6BnD,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/smoke-ring.js

@@ -3,7 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import {} from "../shader-sizing.js";
 import { declarePI, textureRandomizerR, colorBandingFix } from "../shader-utils.js";
 const smokeRingMeta = {
   maxColorCount: 10,
@@ -26,7 +26,7 @@ uniform float u_innerShape;
 uniform float u_noiseScale;
 uniform float u_noiseIterations;
 
-${sizingVariablesDeclaration}
+in vec2 v_objectUV;
 
 out vec4 fragColor;
 
@@ -44,23 +44,26 @@ float valueNoise(vec2 st) {
   float x2 = mix(c, d, u.x);
   return mix(x1, x2, u.y);
 }
-float fbm(in vec2 n) {
-  float total = 0.0, amplitude = .4;
+vec2 fbm(vec2 n0, vec2 n1) {
+  vec2 total = vec2(0.0);
+  float amplitude = .4;
   for (int i = 0; i < ${smokeRingMeta.maxNoiseIterations}; i++) {
     if (i >= int(u_noiseIterations)) break;
-    total += valueNoise(n) * amplitude;
-    n *= 1.99;
+    total.x += valueNoise(n0) * amplitude;
+    total.y += valueNoise(n1) * amplitude;
+    n0 *= 1.99;
+    n1 *= 1.99;
     amplitude *= 0.65;
   }
   return total;
 }
 
 float getNoise(vec2 uv, vec2 pUv, float t) {
-  float noiseLeft = fbm(pUv + .03 * t);
+  vec2 pUvLeft = 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));
+  vec2 pUvRight = vec2(fract(pUv.x / period) * period, pUv.y) + .03 * t;
+  vec2 noise = fbm(pUvLeft, pUvRight);
+  return mix(noise.y, noise.x, smoothstep(-.25, .25, uv.x));
 }
 
 float getRingShape(vec2 uv) {
@@ -87,12 +90,11 @@ void main() {
 
   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 radialOffset = .5 * l - inversesqrt(max(1e-4, l));
+  vec2 polar_uv1 = vec2(atg, localTime1 - radialOffset) * u_noiseScale;
+  vec2 polar_uv2 = vec2(atg, localTime2 - radialOffset) * 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);
@@ -102,10 +104,11 @@ void main() {
   float ringShape = getRingShape(shape_uv);
 
   float mixer = ringShape * ringShape * (u_colorsCount - 1.);
-  vec4 gradient = u_colors[int(u_colorsCount) - 1];
+  int idxLast = int(u_colorsCount) - 1;
+  vec4 gradient = u_colors[idxLast];
   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.);
+    float localT = clamp(mixer - float(idxLast - i - 1), 0., 1.);
     vec4 c = u_colors[i];
     c.rgb *= c.a;
     gradient = mix(gradient, c, localT);

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

@@ -1,7 +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 multi-colored gradient shaped with layered noise for a natural, smoky aesthetic.\n *\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_thickness (float): Thickness of the ring shape (0.01 to 1)\n * - u_radius (float): Radius of the ring shape (0 to 1)\n * - u_innerShape (float): Ring inner fill amount (0 to 4)\n * - u_noiseIterations (float): Number of noise layers, more layers gives more details (1 to 8)\n * - u_noiseScale (float): Noise frequency (0.01 to 5)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\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;AAqCO,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQtB,cAAc,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASlD,0BAA2B;AAAA;AAAA;AAAA;AAAA,EAI3B,SAAU;AAAA,EACV,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAeG,cAAc,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBA0DxC,cAAc,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAczC,eAAgB;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { 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 multi-colored gradient shaped with layered noise for a natural, smoky aesthetic.\n *\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_thickness (float): Thickness of the ring shape (0.01 to 1)\n * - u_radius (float): Radius of the ring shape (0 to 1)\n * - u_innerShape (float): Ring inner fill amount (0 to 4)\n * - u_noiseIterations (float): Number of noise layers, more layers gives more details (1 to 8)\n * - u_noiseScale (float): Noise frequency (0.01 to 5)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\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\nin vec2 v_objectUV;\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}\nvec2 fbm(vec2 n0, vec2 n1) {\n  vec2 total = vec2(0.0);\n  float amplitude = .4;\n  for (int i = 0; i < ${ smokeRingMeta.maxNoiseIterations }; i++) {\n    if (i >= int(u_noiseIterations)) break;\n    total.x += valueNoise(n0) * amplitude;\n    total.y += valueNoise(n1) * amplitude;\n    n0 *= 1.99;\n    n1 *= 1.99;\n    amplitude *= 0.65;\n  }\n  return total;\n}\n\nfloat getNoise(vec2 uv, vec2 pUv, float t) {\n  vec2 pUvLeft = pUv + .03 * t;\n  float period = max(abs(u_noiseScale * TWO_PI), 1e-6);\n  vec2 pUvRight = vec2(fract(pUv.x / period) * period, pUv.y) + .03 * t;\n  vec2 noise = fbm(pUvLeft, pUvRight);\n  return mix(noise.y, noise.x, 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  float radialOffset = .5 * l - inversesqrt(max(1e-4, l));\n  vec2 polar_uv1 = vec2(atg, localTime1 - radialOffset) * u_noiseScale;\n  vec2 polar_uv2 = vec2(atg, localTime2 - radialOffset) * u_noiseScale;\n  \n  float noise1 = getNoise(shape_uv, polar_uv1, t);\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  int idxLast = int(u_colorsCount) - 1;\n  vec4 gradient = u_colors[idxLast];\n  gradient.rgb *= gradient.a;\n  for (int i = ${ smokeRingMeta.maxColorCount } - 2; i >= 0; i--) {\n    float localT = clamp(mixer - float(idxLast - 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,eAAmE;AACnE,SAAS,WAAW,oBAAoB,uBAAuB;AAExD,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,oBAAoB;AACtB;AAqCO,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQtB,cAAc,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAalD,SAAU;AAAA,EACV,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAgBG,cAAc,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBA4DxC,cAAc,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAczC,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/spiral.js

@@ -3,7 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import {} from "../shader-sizing.js";
 import { simplexNoise, declarePI, colorBandingFix } from "../shader-utils.js";
 const spiralFragmentShader = `#version 300 es
 precision mediump float;
@@ -21,7 +21,7 @@ uniform float u_noise;
 uniform float u_noiseFrequency;
 uniform float u_softness;
 
-${sizingVariablesDeclaration}
+in vec2 v_patternUV;
 
 out vec4 fragColor;
 

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 { simplexNoise, declarePI, colorBandingFix } from '../shader-utils.js';\n\n/**\n * A single-colored animated spiral that morphs across a wide range of shapes -\n * from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings.\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with rotation and offset applied\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorFront (vec4): Foreground (ink) color in RGBA\n * - u_density (float): Spacing falloff simulating perspective, 0 = flat spiral (0 to 1)\n * - u_distortion (float): Power of shape distortion applied along the spiral (0 to 1)\n * - u_strokeWidth (float): Thickness of spiral curve (0 to 1)\n * - u_strokeTaper (float): How much stroke loses width away from center, 0 = full visibility (0 to 1)\n * - u_strokeCap (float): Extra stroke width at the center, no effect with strokeWidth = 0.5 (0 to 1)\n * - u_noise (float): Noise distortion applied over the canvas, no effect with noiseFrequency = 0 (0 to 1)\n * - u_noiseFrequency (float): Noise frequency, no effect with noise = 0 (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\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${ simplexNoise }\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(max(l, 1e-6), 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 = 1. - 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,cAAc,WAAW,uBAAuB;AAsClD,MAAM,uBAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBzC,0BAA2B;AAAA;AAAA;AAAA;AAAA,EAI3B,SAAU;AAAA,EACV,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA4CX,eAAgB;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { simplexNoise, declarePI, colorBandingFix } from '../shader-utils.js';\n\n/**\n * A single-colored animated spiral that morphs across a wide range of shapes -\n * from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings.\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with rotation and offset applied\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorFront (vec4): Foreground (ink) color in RGBA\n * - u_density (float): Spacing falloff simulating perspective, 0 = flat spiral (0 to 1)\n * - u_distortion (float): Power of shape distortion applied along the spiral (0 to 1)\n * - u_strokeWidth (float): Thickness of spiral curve (0 to 1)\n * - u_strokeTaper (float): How much stroke loses width away from center, 0 = full visibility (0 to 1)\n * - u_strokeCap (float): Extra stroke width at the center, no effect with strokeWidth = 0.5 (0 to 1)\n * - u_noise (float): Noise distortion applied over the canvas, no effect with noiseFrequency = 0 (0 to 1)\n * - u_noiseFrequency (float): Noise frequency, no effect with noise = 0 (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\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\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ simplexNoise }\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(max(l, 1e-6), 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 = 1. - 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,eAAmE;AACnE,SAAS,cAAc,WAAW,uBAAuB;AAsClD,MAAM,uBAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBzC,SAAU;AAAA,EACV,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA4CX,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -16,7 +16,7 @@ export declare const staticMeshGradientMeta: {
  * - u_waveXShift (float): Phase offset applied to the X-axis wave (0 to 1)
  * - u_waveY (float): Strength of sine wave distortion along Y axis (0 to 1)
  * - u_waveYShift (float): Phase offset applied to the Y-axis wave (0 to 1)
- * - u_mixing (float): Blending behavior, 0 = stepped, 0.5 = smooth, 1 = pronounced color points (0 to 1)
+ * - u_mixing (float): Blending behavior, 0 = hard stripes, 0.5 = smooth, 1 = gradual blend (0 to 1)
  * - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)
  * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
  *

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

@@ -4,9 +4,6 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import {
-  sizingDebugVariablesDeclaration,
-  sizingVariablesDeclaration,
-  sizingUniformsDeclaration
 } from "../shader-sizing.js";
 import { declarePI, rotation2, proceduralHash21 } from "../shader-utils.js";
 const staticMeshGradientMeta = {
@@ -27,10 +24,7 @@ uniform float u_mixing;
 uniform float u_grainMixer;
 uniform float u_grainOverlay;
 
-${sizingVariablesDeclaration}
-${sizingDebugVariablesDeclaration}
-${sizingUniformsDeclaration}
-
+in vec2 v_objectUV;
 out vec4 fragColor;
 
 ${declarePI}
@@ -95,16 +89,14 @@ void main() {
     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));
-    }
+    float mixing = pow(u_mixing, .7);
+    float power = mix(2., 1., mixing);
     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));
-    }
+    float baseSharpness = mix(.0, 8., clamp(w, 0., 1.));
+    float sharpness = mix(baseSharpness, 1., mixing);
+    w = pow(w, sharpness);
     color += colorFraction * w;
     opacity += opacityFraction * w;
     totalWeight += w;

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

@@ -1,7 +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  sizingDebugVariablesDeclaration,\n  sizingVariablesDeclaration,\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from '../shader-sizing.js';\nimport { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';\n\nexport const staticMeshGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Multi-point mesh gradient with up to 10 color spots, enhanced by two-direction warping,\n * adjustable blend sharpness, and grain controls.\n *\n * Fragment shader uniforms:\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_positions (float): Color spots placement seed (0 to 100)\n * - u_waveX (float): Strength of sine wave distortion along X axis (0 to 1)\n * - u_waveXShift (float): Phase offset applied to the X-axis wave (0 to 1)\n * - u_waveY (float): Strength of sine wave distortion along Y axis (0 to 1)\n * - u_waveYShift (float): Phase offset applied to the Y-axis wave (0 to 1)\n * - u_mixing (float): Blending behavior, 0 = stepped, 0.5 = smooth, 1 = pronounced color points (0 to 1)\n * - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)\n * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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${ sizingDebugVariablesDeclaration }\n${ sizingUniformsDeclaration }\n\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ proceduralHash21 }\n\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(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\nfloat noise(vec2 n, vec2 seedOffset) {\n  return valueNoise(n + seedOffset);\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  vec2 grainUV = uv * 1000.;\n\n  float grain = noise(grainUV, vec2(0.));\n  float mixerGrain = .4 * u_grainMixer * (grain - .5);\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  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 /= max(1e-4, totalWeight);\n  opacity /= max(1e-4, totalWeight);\n\n  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));\n  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);\n  grainOverlay = pow(grainOverlay, 1.3);\n\n  float grainOverlayV = grainOverlay * 2. - 1.;\n  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));\n  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);\n  grainOverlayStrength = pow(grainOverlayStrength, .8);\n  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);\n\n  opacity += .5 * grainOverlayStrength;\n  opacity = clamp(opacity, 0., 1.);\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,EACA;AAAA,OAGK;AACP,SAAS,WAAW,WAAW,wBAAwB;AAEhD,MAAM,yBAAyB;AAAA,EACpC,eAAe;AACjB;AAqCO,MAAM,mCAA2C;AAAA;AAAA;AAAA,wBAG/B,uBAAuB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY3D,0BAA2B;AAAA,EAC3B,+BAAgC;AAAA,EAChC,yBAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAU;AAAA,EACV,SAAU;AAAA,EACV,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAkDK,uBAAuB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from '../shader-sizing.js';\nimport { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';\n\nexport const staticMeshGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Multi-point mesh gradient with up to 10 color spots, enhanced by two-direction warping,\n * adjustable blend sharpness, and grain controls.\n *\n * Fragment shader uniforms:\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_positions (float): Color spots placement seed (0 to 100)\n * - u_waveX (float): Strength of sine wave distortion along X axis (0 to 1)\n * - u_waveXShift (float): Phase offset applied to the X-axis wave (0 to 1)\n * - u_waveY (float): Strength of sine wave distortion along Y axis (0 to 1)\n * - u_waveYShift (float): Phase offset applied to the Y-axis wave (0 to 1)\n * - u_mixing (float): Blending behavior, 0 = hard stripes, 0.5 = smooth, 1 = gradual blend (0 to 1)\n * - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)\n * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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\nin vec2 v_objectUV;\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ proceduralHash21 }\n\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(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\nfloat noise(vec2 n, vec2 seedOffset) {\n  return valueNoise(n + seedOffset);\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  vec2 grainUV = uv * 1000.;\n\n  float grain = noise(grainUV, vec2(0.));\n  float mixerGrain = .4 * u_grainMixer * (grain - .5);\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  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 mixing = pow(u_mixing, .7);\n    float power = mix(2., 1., mixing);\n    dist = pow(dist, power);\n\n    float w = 1. / (dist + 1e-3);\n    float baseSharpness = mix(.0, 8., clamp(w, 0., 1.));\n    float sharpness = mix(baseSharpness, 1., mixing);\n    w = pow(w, sharpness);\n    color += colorFraction * w;\n    opacity += opacityFraction * w;\n    totalWeight += w;\n  }\n\n  color /= max(1e-4, totalWeight);\n  opacity /= max(1e-4, totalWeight);\n\n  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));\n  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);\n  grainOverlay = pow(grainOverlay, 1.3);\n\n  float grainOverlayV = grainOverlay * 2. - 1.;\n  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));\n  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);\n  grainOverlayStrength = pow(grainOverlayStrength, .8);\n  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);\n\n  opacity += .5 * grainOverlayStrength;\n  opacity = clamp(opacity, 0., 1.);\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,OAGO;AACP,SAAS,WAAW,WAAW,wBAAwB;AAEhD,MAAM,yBAAyB;AAAA,EACpC,eAAe;AACjB;AAqCO,MAAM,mCAA2C;AAAA;AAAA;AAAA,wBAG/B,uBAAuB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAe3D,SAAU;AAAA,EACV,SAAU;AAAA,EACV,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAkDK,uBAAuB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/static-radial-gradient.d.ts

@@ -16,7 +16,7 @@ export declare const staticRadialGradientMeta: {
  * - u_focalDistance (float): Distance of the focal point from center (0 to 3)
  * - u_focalAngle (float): Angle of the focal point in degrees, effective with focalDistance > 0 (0 to 360)
  * - u_falloff (float): Gradient decay, 0 = linear gradient (-1 to 1)
- * - u_mixing (float): Blending behavior, 0 = stepped, 0.5 = smooth, 1 = pronounced color points (0 to 1)
+ * - u_mixing (float): Blending behavior, 0 = hard stripes, 1 = smooth gradient (0 to 1)
  * - u_distortion (float): Strength of radial distortion (0 to 1)
  * - u_distortionShift (float): Radial distortion offset, effective with distortion > 0 (-1 to 1)
  * - u_distortionFreq (float): Radial distortion frequency, effective with distortion > 0 (0 to 20)

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

@@ -4,9 +4,6 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import {
-  sizingDebugVariablesDeclaration,
-  sizingVariablesDeclaration,
-  sizingUniformsDeclaration
 } from "../shader-sizing.js";
 import { declarePI, rotation2, proceduralHash21 } from "../shader-utils.js";
 const staticRadialGradientMeta = {
@@ -30,10 +27,7 @@ uniform float u_distortionFreq;
 uniform float u_grainMixer;
 uniform float u_grainOverlay;
 
-${sizingVariablesDeclaration}
-${sizingDebugVariablesDeclaration}
-${sizingUniformsDeclaration}
-
+in vec2 v_objectUV;
 out vec4 fragColor;
 
 ${declarePI}
@@ -140,18 +134,17 @@ void main() {
     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 = mLinear * mLinear;
-      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);
-    }
-
+    float aa = fwidth(mLinear);
+    float width = min(u_mixing, 0.5);
+    float t = clamp((mLinear - (0.5 - width - aa)) / (2. * width + 2. * aa), 0., 1.);
+    float p = mix(2., 1., clamp((u_mixing - 0.5) * 2., 0., 1.));
+    float m = t < 0.5
+      ? 0.5 * pow(2. * t, p)
+      : 1. - 0.5 * pow(2. * (1. - t), p);
+
+    float quadBlend = clamp((u_mixing - 0.5) * 2., 0., 1.);
+    m = mix(m, m * m, 0.5 * quadBlend);
+    
     if (i == 1) {
       outerShape = m;
     }

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

@@ -1,7 +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  sizingDebugVariablesDeclaration,\n  sizingVariablesDeclaration,\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from '../shader-sizing.js';\nimport { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';\n\nexport const staticRadialGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Radial gradient with up to 10 blended colors, featuring advanced mixing modes, focal point controls,\n * shape distortion, and grain effects.\n *\n * Fragment shader uniforms:\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_radius (float): Size of the shape (0 to 3)\n * - u_focalDistance (float): Distance of the focal point from center (0 to 3)\n * - u_focalAngle (float): Angle of the focal point in degrees, effective with focalDistance > 0 (0 to 360)\n * - u_falloff (float): Gradient decay, 0 = linear gradient (-1 to 1)\n * - u_mixing (float): Blending behavior, 0 = stepped, 0.5 = smooth, 1 = pronounced color points (0 to 1)\n * - u_distortion (float): Strength of radial distortion (0 to 1)\n * - u_distortionShift (float): Radial distortion offset, effective with distortion > 0 (-1 to 1)\n * - u_distortionFreq (float): Radial distortion frequency, effective with distortion > 0 (0 to 20)\n * - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)\n * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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${ sizingDebugVariablesDeclaration }\n${ sizingUniformsDeclaration }\n\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ proceduralHash21 }\n\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(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\nfloat noise(vec2 n, vec2 seedOffset) {\n  return valueNoise(n + seedOffset);\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 = 2. * v_objectUV;\n  vec2 grainUV = uv * 1000.;\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 = fract((fragAngle - angleRad + PI) / TWO_PI) * TWO_PI - PI;\n\n  float halfAngle = acos(clamp(radius / max(u_focalDistance, 1e-4), 0.0, 1.0));\n  float e0 = 0.6 * PI, e1 = halfAngle;\n  float lo = min(e0, e1), hi = max(e0, e1);\n  float s  = smoothstep(lo, hi, abs(angleDiff));\n  float isInSector = (e1 >= e0) ? (1.0 - s) : s;\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 div = max(1e-4, 2.0 * a);\n    float t0 = (-b - sqrtD) / div;\n    float t1 = (-b + sqrtD) / div;\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 / max(1e-4, 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., u_falloff * u_falloff), 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 = 1.0 - smoothstep(radius - outerMask, radius + outerMask, r);\n  outer = mix(outer, 1., isInSector);\n\n  shape = mix(0., shape, outer);\n  shape *= 1. - smoothstep(radius - .01, radius, r);\n\n  float angle = atan(f_to_uv.y, f_to_uv.x);\n  shape -= pow(u_distortion, 2.) * shape * pow(abs(sin(PI * clamp(length(f_to_uv) - 0.2 + u_distortionShift, 0.0, 1.0))), 4.0) * (sin(u_distortionFreq * angle) + cos(floor(0.65 * u_distortionFreq) * angle));\n\n  float grain = noise(grainUV, vec2(0.));\n  float mixerGrain = .4 * u_grainMixer * (grain - .5);\n\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 = mLinear * mLinear;\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 grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));\n  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);\n  grainOverlay = pow(grainOverlay, 1.3);\n\n  float grainOverlayV = grainOverlay * 2. - 1.;\n  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));\n  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);\n  grainOverlayStrength = pow(grainOverlayStrength, .8);\n  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);\n\n  opacity += .5 * grainOverlayStrength;\n  opacity = clamp(opacity, 0., 1.);\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,EACA;AAAA,OAGK;AACP,SAAS,WAAW,WAAW,wBAAwB;AAEhD,MAAM,2BAA2B;AAAA,EACtC,eAAe;AACjB;AAwCO,MAAM,qCAA6C;AAAA;AAAA;AAAA;AAAA,wBAIjC,yBAAyB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc7D,0BAA2B;AAAA,EAC3B,+BAAgC;AAAA,EAChC,yBAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAU;AAAA,EACV,SAAU;AAAA,EACV,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAkGK,yBAAyB,gBAAgB,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from '../shader-sizing.js';\nimport { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';\n\nexport const staticRadialGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Radial gradient with up to 10 blended colors, featuring advanced mixing modes, focal point controls,\n * shape distortion, and grain effects.\n *\n * Fragment shader uniforms:\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_radius (float): Size of the shape (0 to 3)\n * - u_focalDistance (float): Distance of the focal point from center (0 to 3)\n * - u_focalAngle (float): Angle of the focal point in degrees, effective with focalDistance > 0 (0 to 360)\n * - u_falloff (float): Gradient decay, 0 = linear gradient (-1 to 1)\n * - u_mixing (float): Blending behavior, 0 = hard stripes, 1 = smooth gradient (0 to 1)\n * - u_distortion (float): Strength of radial distortion (0 to 1)\n * - u_distortionShift (float): Radial distortion offset, effective with distortion > 0 (-1 to 1)\n * - u_distortionFreq (float): Radial distortion frequency, effective with distortion > 0 (0 to 20)\n * - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)\n * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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\nin vec2 v_objectUV;\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ proceduralHash21 }\n\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(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\nfloat noise(vec2 n, vec2 seedOffset) {\n  return valueNoise(n + seedOffset);\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 = 2. * v_objectUV;\n  vec2 grainUV = uv * 1000.;\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 = fract((fragAngle - angleRad + PI) / TWO_PI) * TWO_PI - PI;\n\n  float halfAngle = acos(clamp(radius / max(u_focalDistance, 1e-4), 0.0, 1.0));\n  float e0 = 0.6 * PI, e1 = halfAngle;\n  float lo = min(e0, e1), hi = max(e0, e1);\n  float s  = smoothstep(lo, hi, abs(angleDiff));\n  float isInSector = (e1 >= e0) ? (1.0 - s) : s;\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 div = max(1e-4, 2.0 * a);\n    float t0 = (-b - sqrtD) / div;\n    float t1 = (-b + sqrtD) / div;\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 / max(1e-4, 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., u_falloff * u_falloff), 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 = 1.0 - smoothstep(radius - outerMask, radius + outerMask, r);\n  outer = mix(outer, 1., isInSector);\n\n  shape = mix(0., shape, outer);\n  shape *= 1. - smoothstep(radius - .01, radius, r);\n\n  float angle = atan(f_to_uv.y, f_to_uv.x);\n  shape -= pow(u_distortion, 2.) * shape * pow(abs(sin(PI * clamp(length(f_to_uv) - 0.2 + u_distortionShift, 0.0, 1.0))), 4.0) * (sin(u_distortionFreq * angle) + cos(floor(0.65 * u_distortionFreq) * angle));\n\n  float grain = noise(grainUV, vec2(0.));\n  float mixerGrain = .4 * u_grainMixer * (grain - .5);\n\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 aa = fwidth(mLinear);\n    float width = min(u_mixing, 0.5);\n    float t = clamp((mLinear - (0.5 - width - aa)) / (2. * width + 2. * aa), 0., 1.);\n    float p = mix(2., 1., clamp((u_mixing - 0.5) * 2., 0., 1.));\n    float m = t < 0.5\n      ? 0.5 * pow(2. * t, p)\n      : 1. - 0.5 * pow(2. * (1. - t), p);\n\n    float quadBlend = clamp((u_mixing - 0.5) * 2., 0., 1.);\n    m = mix(m, m * m, 0.5 * quadBlend);\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 grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));\n  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);\n  grainOverlay = pow(grainOverlay, 1.3);\n\n  float grainOverlayV = grainOverlay * 2. - 1.;\n  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));\n  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);\n  grainOverlayStrength = pow(grainOverlayStrength, .8);\n  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);\n\n  opacity += .5 * grainOverlayStrength;\n  opacity = clamp(opacity, 0., 1.);\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,OAGO;AACP,SAAS,WAAW,WAAW,wBAAwB;AAEhD,MAAM,2BAA2B;AAAA,EACtC,eAAe;AACjB;AAwCO,MAAM,qCAA6C;AAAA;AAAA;AAAA;AAAA,wBAIjC,yBAAyB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB7D,SAAU;AAAA,EACV,SAAU;AAAA,EACV,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAkGK,yBAAyB,gBAAgB,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/swirl.js

@@ -3,7 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import {} from "../shader-sizing.js";
 import { simplexNoise, declarePI, rotation2, colorBandingFix } from "../shader-utils.js";
 const swirlMeta = {
   maxColorCount: 10
@@ -24,7 +24,7 @@ uniform float u_softness;
 uniform float u_noise;
 uniform float u_noiseFrequency;
 
-${sizingVariablesDeclaration}
+in vec2 v_objectUV;
 
 out vec4 fragColor;
 

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 { simplexNoise, declarePI, rotation2, colorBandingFix } from '../shader-utils.js';\n\nexport const swirlMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 10 stripe colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_bandCount (float): Number of color bands, 0 = concentric ripples (0 to 15)\n * - u_twist (float): Vortex power, 0 = straight sectoral shapes (0 to 1)\n * - u_center (float): How far from the center the swirl colors begin to appear (0 to 1)\n * - u_proportion (float): Blend point between colors, 0.5 = equal distribution (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_noise (float): Strength of noise distortion, no effect with noiseFrequency = 0 (0 to 1)\n * - u_noiseFrequency (float): Noise frequency, no effect with noise = 0 (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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_center;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_noise;\nuniform float u_noiseFrequency;\n\n${ sizingVariablesDeclaration }\n\nout vec4 fragColor;\n\n${ declarePI }\n${ simplexNoise }\n${ rotation2 }\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  float l = length(shape_uv);\n  l = max(1e-4, l);\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, .2 + .8 * u_center, pow(l, twist));\n  shape = mix(0., shape, mid);\n\n  float proportion = clamp(u_proportion, 0., 1.);\n  float exponent = mix(.25, 1., proportion * 2.);\n  exponent = mix(exponent, 10., max(0., proportion * 2. - 1.));\n  shape = pow(shape, exponent);\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  float midAA = .1 * fwidth(pow(l, -twist));\n  float outerMid = smoothstep(.2, .2 + midAA, pow(l, twist));\n  outerShape = mix(0., outerShape, outerMid);\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_center: number;\n  u_proportion: 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  center?: number;\n  proportion?: number;\n  softness?: number;\n  noiseFrequency?: number;\n  noise?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,cAAc,WAAW,WAAW,uBAAuB;AAE7D,MAAM,YAAY;AAAA,EACvB,eAAe;AACjB;AAqCO,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMlB,UAAU,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU9C,0BAA2B;AAAA;AAAA;AAAA;AAAA,EAI3B,SAAU;AAAA,EACV,YAAa;AAAA,EACb,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAiCY,UAAU,gBAAgB,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2BhD,eAAgB;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { simplexNoise, declarePI, rotation2, colorBandingFix } from '../shader-utils.js';\n\nexport const swirlMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 10 stripe colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_bandCount (float): Number of color bands, 0 = concentric ripples (0 to 15)\n * - u_twist (float): Vortex power, 0 = straight sectoral shapes (0 to 1)\n * - u_center (float): How far from the center the swirl colors begin to appear (0 to 1)\n * - u_proportion (float): Blend point between colors, 0.5 = equal distribution (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_noise (float): Strength of noise distortion, no effect with noiseFrequency = 0 (0 to 1)\n * - u_noiseFrequency (float): Noise frequency, no effect with noise = 0 (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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_center;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_noise;\nuniform float u_noiseFrequency;\n\nin vec2 v_objectUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ simplexNoise }\n${ rotation2 }\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  float l = length(shape_uv);\n  l = max(1e-4, l);\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, .2 + .8 * u_center, pow(l, twist));\n  shape = mix(0., shape, mid);\n\n  float proportion = clamp(u_proportion, 0., 1.);\n  float exponent = mix(.25, 1., proportion * 2.);\n  exponent = mix(exponent, 10., max(0., proportion * 2. - 1.));\n  shape = pow(shape, exponent);\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  float midAA = .1 * fwidth(pow(l, -twist));\n  float outerMid = smoothstep(.2, .2 + midAA, pow(l, twist));\n  outerShape = mix(0., outerShape, outerMid);\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_center: number;\n  u_proportion: 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  center?: number;\n  proportion?: number;\n  softness?: number;\n  noiseFrequency?: number;\n  noise?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,cAAc,WAAW,WAAW,uBAAuB;AAE7D,MAAM,YAAY;AAAA,EACvB,eAAe;AACjB;AAqCO,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMlB,UAAU,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc9C,SAAU;AAAA,EACV,YAAa;AAAA,EACb,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAiCY,UAAU,gBAAgB,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2BhD,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/voronoi.js

@@ -3,7 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import {} from "../shader-sizing.js";
 import { declarePI, textureRandomizerGB } from "../shader-utils.js";
 const voronoiMeta = {
   maxColorCount: 5
@@ -27,7 +27,7 @@ uniform float u_distortion;
 uniform float u_gap;
 uniform float u_glow;
 
-${sizingVariablesDeclaration}
+in vec2 v_patternUV;
 
 out vec4 fragColor;