@paper-design/shaders 0.0.67 → 0.0.68

package/dist/shaders/fluted-glass.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/fluted-glass.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingUniformsDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';\n\n/**\n * Mimicking glass surface distortion over the image by distorting the texture\n * coordinates within line patterns\n *\n * Uniforms:\n * - u_size, u_angle - size and direction of grid relative to the image\n * - u_shape (float used as integer):\n * ---- 1: uniformly spaced stripes\n * ---- 2: randomly spaced stripes\n * ---- 3: sine wave stripes\n * ---- 4: zigzag stripes\n * ---- 5: wave-based pattern\n * - u_distortion - the power of distortion applied along within each stripe\n * - u_distortionShape (float used as integer):\n * ---- 5 shapes available\n * - u_shift - texture shift in direction opposite to the grid\n * - u_blur - one-directional blur applied over the main distortion\n * - u_edges -\n * - u_marginLeft, u_marginRight, u_marginTop, u_marginBottom - paddings\n *   within picture to be shown without any distortion\n *\n */\n\n// language=GLSL\nexport const flutedGlassFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n${sizingUniformsDeclaration}\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorShadow;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_size;\nuniform float u_shadows;\nuniform float u_angle;\nuniform float u_stretch;\nuniform float u_shape;\nuniform float u_distortion;\nuniform float u_highlights;\nuniform float u_distortionShape;\nuniform float u_shift;\nuniform float u_blur;\nuniform float u_edges;\nuniform float u_marginLeft;\nuniform float u_marginRight;\nuniform float u_marginTop;\nuniform float u_marginBottom;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\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\n\nvec2 getImageUV(vec2 uv, vec2 extraScale) {\n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  float r = u_rotation * PI / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  vec2 imageBoxSize;\n  if (u_fit == 1.) {\n    imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n  } else {\n    imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n  }\n  imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;\n  vec2 imageBoxScale = u_resolution.xy / imageBoxSize;\n\n  vec2 imageUV = uv;\n  imageUV *= imageBoxScale;\n  imageUV += boxOrigin * (imageBoxScale - 1.);\n  imageUV += graphicOffset;\n  imageUV /= u_scale;\n  imageUV *= extraScale;\n  imageUV.x *= u_imageAspectRatio;\n  imageUV = graphicRotation * imageUV;\n  imageUV.x /= u_imageAspectRatio;\n\n  imageUV += .5;\n  imageUV.y = 1. - imageUV.y;\n\n  return imageUV;\n}\n\nfloat getUvFrame(vec2 uv, float softness) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n  float left   = smoothstep(0., aax + softness, uv.x);\n  float right  = 1. - smoothstep(1. - softness - aax, 1., uv.x);\n  float bottom = smoothstep(0., aay + softness, uv.y);\n  float top    = 1. - smoothstep(1. - softness - aay, 1., uv.y);\n  return left * right * bottom * top;\n}\n\nconst int MAX_RADIUS = 50;\nvec4 samplePremultiplied(sampler2D tex, vec2 uv) {\n  vec4 c = texture(tex, uv);\n  c.rgb *= c.a;\n  return c;\n}\nvec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) {\n  if (sigma <= .5) return texture(tex, uv);\n  int radius = int(min(float(MAX_RADIUS), ceil(3.0 * sigma)));\n\n  float twoSigma2 = 2.0 * sigma * sigma;\n  float gaussianNorm = 1.0 / sqrt(TWO_PI * sigma * sigma);\n\n  vec4 sum = samplePremultiplied(tex, uv) * gaussianNorm;\n  float weightSum = gaussianNorm;\n\n  for (int i = 1; i <= MAX_RADIUS; i++) {\n    if (i > radius) break;\n\n    float x = float(i);\n    float w = exp(-(x * x) / twoSigma2) * gaussianNorm;\n\n    vec2 offset = dir * texelSize * x;\n    vec4 s1 = samplePremultiplied(tex, uv + offset);\n    vec4 s2 = samplePremultiplied(tex, uv - offset);\n\n    sum += (s1 + s2) * w;\n    weightSum += 2.0 * w;\n  }\n\n  vec4 result = sum / weightSum;\n  if (result.a > 0.) {\n    result.rgb /= result.a;\n  }\n  \n  return result;\n}\n\nvec2 rotateAspect(vec2 p, float a, float aspect) {\n  p.x *= aspect;\n  p = rotate(p, a);\n  p.x /= aspect;\n  return p;\n}\n\nfloat smoothFract(float x) {\n  float f = fract(x);\n  float w = fwidth(x);\n\n  float edge = abs(f - 0.5) - 0.5;\n  float band = smoothstep(-w, w, edge);\n\n  return mix(f, 1.0 - f, band);\n}\n\nvoid main() {\n\n  vec2 uvNormalised = (gl_FragCoord.xy - .5 * u_resolution) / u_resolution.xy;\n  vec2 uvOriginal = getImageUV(uvNormalised, vec2(1.));\n\n  float patternRotation = -u_angle * PI / 180.;\n  float patternSize = mix(200., 5., u_size);\n\n  vec2 uv = uvOriginal;\n\n  vec2 uvMask = gl_FragCoord.xy / u_resolution.xy;\n  vec2 sw = vec2(.005);\n  vec4 margins = vec4(u_marginLeft, u_marginTop, u_marginRight, u_marginBottom);\n  float mask =\n    smoothstep(margins[0], margins[0] + sw.x, uvMask.x + sw.x) *\n    smoothstep(margins[2], margins[2] + sw.x, 1.0 - uvMask.x + sw.x) *\n    smoothstep(margins[1], margins[1] + sw.y, uvMask.y + sw.y) *\n    smoothstep(margins[3], margins[3] + sw.y, 1.0 - uvMask.y + sw.y);\n  float maskOuter =\n  smoothstep(margins[0] - sw.x, margins[0], uvMask.x + sw.x) *\n  smoothstep(margins[2] - sw.x, margins[2], 1.0 - uvMask.x + sw.x) *\n  smoothstep(margins[1] - sw.y, margins[1], uvMask.y + sw.y) *\n  smoothstep(margins[3] - sw.y, margins[3], 1.0 - uvMask.y + sw.y);\n  float maskStroke = maskOuter - mask;\n  float maskInner =\n    smoothstep(margins[0] - 2. * sw.x, margins[0], uvMask.x) *\n    smoothstep(margins[2] - 2. * sw.x, margins[2], 1.0 - uvMask.x) *\n    smoothstep(margins[1] - 2. * sw.y, margins[1], uvMask.y) *\n    smoothstep(margins[3] - 2. * sw.y, margins[3], 1.0 - uvMask.y);\n  float maskStrokeInner = maskInner - mask;\n\n  uv -= .5;\n  uv *= patternSize;\n  uv = rotateAspect(uv, patternRotation, u_imageAspectRatio);\n\n  float curve = 0.;\n  float patternY = uv.y / u_imageAspectRatio;\n  if (u_shape > 4.5) {\n    // pattern\n    curve = .5 + .5 * sin(.5 * PI * uv.x) * cos(.5 * PI * patternY);\n  } else if (u_shape > 3.5) {\n    // zigzag\n    curve = 10. * abs(fract(.1 * patternY) - .5);\n  } else if (u_shape > 2.5) {\n    // wave\n    curve = 4. * sin(.23 * patternY);\n  } else if (u_shape > 1.5) {\n    // lines irregular\n    curve = .5 + .5 * sin(.5 * uv.x) * sin(1.7 * uv.x);\n  } else {\n    // lines\n  }\n\n  vec2 UvToFract = uv + curve;\n  vec2 fractOrigUV = fract(uv);\n  vec2 floorOrigUV = floor(uv);\n\n  float x = smoothFract(UvToFract.x);\n  float xNonSmooth = fract(UvToFract.x) + .0001;\n\n  float highlightsWidth = 2. * max(.001, fwidth(UvToFract.x));\n  highlightsWidth += 2. * maskStrokeInner;\n  float highlights = smoothstep(0., highlightsWidth, xNonSmooth);\n  highlights *= smoothstep(1., 1. - highlightsWidth, xNonSmooth);\n  highlights = 1. - highlights;\n  highlights *= u_highlights;\n  highlights = clamp(highlights, 0., 1.);\n  highlights *= mask;\n\n  float shadows = pow(x, 1.3);\n  float distortion = 0.;\n  float fadeX = 1.;\n  float frameFade = 0.;\n\n  float aa = fwidth(xNonSmooth);\n  aa = max(aa, fwidth(uv.x));\n  aa = max(aa, fwidth(UvToFract.x));\n  aa = max(aa, .0001);\n\n  if (u_distortionShape == 1.) {\n    distortion = -pow(1.5 * x, 3.);\n    distortion += (.5 - u_shift);\n\n    frameFade = pow(1.5 * x, 3.);\n    aa = max(.2, aa);\n    aa += mix(.2, 0., u_size);\n    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);\n    distortion = mix(.5, distortion, fadeX);\n  } else if (u_distortionShape == 2.) {\n    distortion = 2. * pow(x, 2.);\n    distortion -= (.5 + u_shift);\n\n    frameFade = pow(abs(x - .5), 4.);\n    aa = max(.2, aa);\n    aa += mix(.2, 0., u_size);\n    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);\n    distortion = mix(.5, distortion, fadeX);\n    frameFade = mix(1., frameFade, .5 * fadeX);\n  } else if (u_distortionShape == 3.) {\n    distortion = pow(2. * (xNonSmooth - .5), 6.);\n    distortion -= .25;\n    distortion -= u_shift;\n\n    frameFade = 1. - 2. * pow(abs(x - .4), 2.);\n    aa = .15;\n    aa += mix(.1, 0., u_size);\n    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);\n    frameFade = mix(1., frameFade, fadeX);\n\n  } else if (u_distortionShape == 4.) {\n    x = xNonSmooth;\n    distortion = sin((x + .25) * TWO_PI);\n    shadows = .5 + .5 * asin(distortion) / (.5 * PI);\n    distortion *= .5;\n    distortion -= u_shift;\n    frameFade = .5 + .5 * sin(x * TWO_PI);\n  } else if (u_distortionShape == 5.) {\n    distortion -= pow(abs(x), .2) * x;\n    distortion += .33;\n    distortion -= 3. * u_shift;\n    distortion *= .33;\n\n    frameFade = .3 * (smoothstep(.0, 1., x));\n    shadows = pow(x, 2.5);\n\n    aa = max(.1, aa);\n    aa += mix(.1, 0., u_size);\n    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);\n    distortion *= fadeX;\n  }\n\n  vec2 dudx = dFdx(uvOriginal);\n  vec2 dudy = dFdy(uvOriginal);\n  vec2 grainUV = getImageUV(uvNormalised, .8 / vec2(length(dudx), length(dudy)));\n  float grain = valueNoise(grainUV);\n  grain = smoothstep(.4, .7, grain);\n  grain *= u_grainMixer;\n  distortion = mix(distortion, 0., grain);\n\n  shadows = min(shadows, 1.);\n  shadows += maskStrokeInner;\n  shadows *= mask;\n  shadows = min(shadows, 1.);\n  shadows *= pow(u_shadows, 2.);\n  shadows = clamp(shadows, 0., 1.);\n\n  distortion *= 3. * u_distortion;\n  frameFade *= u_distortion;\n\n  fractOrigUV.x += distortion;\n  floorOrigUV = rotateAspect(floorOrigUV, -patternRotation, u_imageAspectRatio);\n  fractOrigUV = rotateAspect(fractOrigUV, -patternRotation, u_imageAspectRatio);\n\n  uv = (floorOrigUV + fractOrigUV) / patternSize;\n  uv += pow(maskStroke, 4.);\n\n  uv += vec2(.5);\n\n  uv = mix(uvOriginal, uv, smoothstep(0., .7, mask));\n  float blur = mix(0., 50., u_blur);\n  blur = mix(0., blur, smoothstep(.5, 1., mask));\n\n  float edgeDistortion = mix(.0, .04, u_edges);\n  edgeDistortion += .06 * frameFade * u_edges;\n  edgeDistortion *= mask;\n  float frame = getUvFrame(uv, edgeDistortion);\n\n  float stretch = 1. - smoothstep(0., .5, xNonSmooth) * smoothstep(1., 1. - .5, xNonSmooth);\n  stretch = pow(stretch, 2.);\n  stretch *= mask;\n  stretch *= getUvFrame(uv, .1 + .05 * mask * frameFade);\n  uv.y = mix(uv.y, .5, u_stretch * stretch);\n\n  vec4 image = getBlur(u_image, uv, 1. / u_resolution / u_pixelRatio, vec2(0., 1.), blur);\n  image.rgb *= image.a;\n  vec4 backColor = u_colorBack;\n  backColor.rgb *= backColor.a;\n  vec4 highlightColor = u_colorHighlight;\n  highlightColor.rgb *= highlightColor.a;\n  vec4 shadowColor = u_colorShadow;\n\n  vec3 color = highlightColor.rgb * highlights;\n  float opacity = highlightColor.a * highlights;\n\n  shadows = mix(shadows * shadowColor.a, 0., highlights);\n  color = mix(color, shadowColor.rgb * shadowColor.a, .5 * shadows);\n  color += .5 * pow(shadows, .5) * shadowColor.rgb;\n  opacity += shadows;\n  color = clamp(color, vec3(0.), vec3(1.));\n  opacity = clamp(opacity, 0., 1.);\n\n  color += image.rgb * (1. - opacity) * frame;\n  opacity += image.a * (1. - opacity) * frame;\n\n  color += backColor.rgb * (1. - opacity);\n  opacity += backColor.a * (1. - 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  grainOverlayStrength *= mask;\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 FlutedGlassUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_colorBack: [number, number, number, number];\n  u_colorShadow: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_shadows: number;\n  u_size: number;\n  u_angle: number;\n  u_distortion: number;\n  u_shift: number;\n  u_blur: number;\n  u_edges: number;\n  u_marginLeft: number;\n  u_marginRight: number;\n  u_marginTop: number;\n  u_marginBottom: number;\n  u_stretch: number;\n  u_distortionShape: (typeof GlassDistortionShapes)[GlassDistortionShape];\n  u_highlights: number;\n  u_shape: (typeof GlassGridShapes)[GlassGridShape];\n  u_grainMixer: number;\n  u_grainOverlay: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface FlutedGlassParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string;\n  colorBack?: string;\n  colorShadow?: string;\n  colorHighlight?: string;\n  shadows?: number;\n  size?: number;\n  angle?: number;\n  distortion?: number;\n  shift?: number;\n  blur?: number;\n  edges?: number;\n  margin?: number;\n  marginLeft?: number;\n  marginRight?: number;\n  marginTop?: number;\n  marginBottom?: number;\n  stretch?: number;\n  distortionShape?: GlassDistortionShape;\n  highlights?: number;\n  shape?: GlassGridShape;\n  grainMixer?: number;\n  grainOverlay?: number;\n}\n\nexport const GlassGridShapes = {\n  lines: 1,\n  linesIrregular: 2,\n  wave: 3,\n  zigzag: 4,\n  pattern: 5,\n} as const;\n\nexport const GlassDistortionShapes = {\n  prism: 1,\n  lens: 2,\n  contour: 3,\n  cascade: 4,\n  flat: 5,\n} as const;\n\nexport type GlassDistortionShape = keyof typeof GlassDistortionShapes;\nexport type GlassGridShape = keyof typeof GlassGridShapes;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingUniformsDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, proceduralHash21 } from '../shader-utils.js';\n\n/**\n * Fluted glass image filter that transforms an image into streaked, ribbed distortions,\n * giving a mix of clarity and obscurity.\n *\n * Fragment 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_fit (float): How to fit the rendered shader into the canvas dimensions (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 * - u_image (sampler2D): Source image texture\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorShadow (vec4): Shadows color in RGBA\n * - u_colorHighlight (vec4): Highlights color in RGBA\n * - u_shadows (float): Color gradient added over image and background, following distortion shape (0 to 1)\n * - u_highlights (float): Thin strokes along distortion shape, useful for antialiasing on small grid (0 to 1)\n * - u_size (float): Size of the distortion shape grid (0 to 1)\n * - u_shape (float): Grid shape (1 = lines, 2 = linesIrregular, 3 = wave, 4 = zigzag, 5 = pattern)\n * - u_angle (float): Direction of the grid relative to the image in degrees (0 to 180)\n * - u_distortionShape (float): Shape of distortion (1 = prism, 2 = lens, 3 = contour, 4 = cascade, 5 = flat)\n * - u_distortion (float): Power of distortion applied within each stripe (0 to 1)\n * - u_shift (float): Texture shift in direction opposite to the grid (-1 to 1)\n * - u_stretch (float): Extra distortion along the grid lines (0 to 1)\n * - u_blur (float): One-directional blur over the image and extra blur around edges (0 to 1)\n * - u_edges (float): Glass distortion and softness on the image edges (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_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 * Note: This shader calculates image UVs directly in the fragment shader using gl_FragCoord,\n * rather than relying on vertex shader outputs.\n */\n\n// language=GLSL\nexport const flutedGlassFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n${ sizingUniformsDeclaration }\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorShadow;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_size;\nuniform float u_shadows;\nuniform float u_angle;\nuniform float u_stretch;\nuniform float u_shape;\nuniform float u_distortion;\nuniform float u_highlights;\nuniform float u_distortionShape;\nuniform float u_shift;\nuniform float u_blur;\nuniform float u_edges;\nuniform float u_marginLeft;\nuniform float u_marginRight;\nuniform float u_marginTop;\nuniform float u_marginBottom;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\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\n\nvec2 getImageUV(vec2 uv, vec2 extraScale) {\n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  float r = u_rotation * PI / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  vec2 imageBoxSize;\n  if (u_fit == 1.) {\n    imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n  } else {\n    imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n  }\n  imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;\n  vec2 imageBoxScale = u_resolution.xy / imageBoxSize;\n\n  vec2 imageUV = uv;\n  imageUV *= imageBoxScale;\n  imageUV += boxOrigin * (imageBoxScale - 1.);\n  imageUV += graphicOffset;\n  imageUV /= u_scale;\n  imageUV *= extraScale;\n  imageUV.x *= u_imageAspectRatio;\n  imageUV = graphicRotation * imageUV;\n  imageUV.x /= u_imageAspectRatio;\n\n  imageUV += .5;\n  imageUV.y = 1. - imageUV.y;\n\n  return imageUV;\n}\n\nfloat getUvFrame(vec2 uv, float softness) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n  float left   = smoothstep(0., aax + softness, uv.x);\n  float right  = 1. - smoothstep(1. - softness - aax, 1., uv.x);\n  float bottom = smoothstep(0., aay + softness, uv.y);\n  float top    = 1. - smoothstep(1. - softness - aay, 1., uv.y);\n  return left * right * bottom * top;\n}\n\nconst int MAX_RADIUS = 50;\nvec4 samplePremultiplied(sampler2D tex, vec2 uv) {\n  vec4 c = texture(tex, uv);\n  c.rgb *= c.a;\n  return c;\n}\nvec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) {\n  if (sigma <= .5) return texture(tex, uv);\n  int radius = int(min(float(MAX_RADIUS), ceil(3.0 * sigma)));\n\n  float twoSigma2 = 2.0 * sigma * sigma;\n  float gaussianNorm = 1.0 / sqrt(TWO_PI * sigma * sigma);\n\n  vec4 sum = samplePremultiplied(tex, uv) * gaussianNorm;\n  float weightSum = gaussianNorm;\n\n  for (int i = 1; i <= MAX_RADIUS; i++) {\n    if (i > radius) break;\n\n    float x = float(i);\n    float w = exp(-(x * x) / twoSigma2) * gaussianNorm;\n\n    vec2 offset = dir * texelSize * x;\n    vec4 s1 = samplePremultiplied(tex, uv + offset);\n    vec4 s2 = samplePremultiplied(tex, uv - offset);\n\n    sum += (s1 + s2) * w;\n    weightSum += 2.0 * w;\n  }\n\n  vec4 result = sum / weightSum;\n  if (result.a > 0.) {\n    result.rgb /= result.a;\n  }\n\n  return result;\n}\n\nvec2 rotateAspect(vec2 p, float a, float aspect) {\n  p.x *= aspect;\n  p = rotate(p, a);\n  p.x /= aspect;\n  return p;\n}\n\nfloat smoothFract(float x) {\n  float f = fract(x);\n  float w = fwidth(x);\n\n  float edge = abs(f - 0.5) - 0.5;\n  float band = smoothstep(-w, w, edge);\n\n  return mix(f, 1.0 - f, band);\n}\n\nvoid main() {\n\n  vec2 uvNormalised = (gl_FragCoord.xy - .5 * u_resolution) / u_resolution.xy;\n  vec2 uvOriginal = getImageUV(uvNormalised, vec2(1.));\n\n  float patternRotation = -u_angle * PI / 180.;\n  float patternSize = mix(200., 5., u_size);\n\n  vec2 uv = uvOriginal;\n\n  vec2 uvMask = gl_FragCoord.xy / u_resolution.xy;\n  vec2 sw = vec2(.005);\n  vec4 margins = vec4(u_marginLeft, u_marginTop, u_marginRight, u_marginBottom);\n  float mask =\n  smoothstep(margins[0], margins[0] + sw.x, uvMask.x + sw.x) *\n  smoothstep(margins[2], margins[2] + sw.x, 1.0 - uvMask.x + sw.x) *\n  smoothstep(margins[1], margins[1] + sw.y, uvMask.y + sw.y) *\n  smoothstep(margins[3], margins[3] + sw.y, 1.0 - uvMask.y + sw.y);\n  float maskOuter =\n  smoothstep(margins[0] - sw.x, margins[0], uvMask.x + sw.x) *\n  smoothstep(margins[2] - sw.x, margins[2], 1.0 - uvMask.x + sw.x) *\n  smoothstep(margins[1] - sw.y, margins[1], uvMask.y + sw.y) *\n  smoothstep(margins[3] - sw.y, margins[3], 1.0 - uvMask.y + sw.y);\n  float maskStroke = maskOuter - mask;\n  float maskInner =\n  smoothstep(margins[0] - 2. * sw.x, margins[0], uvMask.x) *\n  smoothstep(margins[2] - 2. * sw.x, margins[2], 1.0 - uvMask.x) *\n  smoothstep(margins[1] - 2. * sw.y, margins[1], uvMask.y) *\n  smoothstep(margins[3] - 2. * sw.y, margins[3], 1.0 - uvMask.y);\n  float maskStrokeInner = maskInner - mask;\n\n  uv -= .5;\n  uv *= patternSize;\n  uv = rotateAspect(uv, patternRotation, u_imageAspectRatio);\n\n  float curve = 0.;\n  float patternY = uv.y / u_imageAspectRatio;\n  if (u_shape > 4.5) {\n    // pattern\n    curve = .5 + .5 * sin(.5 * PI * uv.x) * cos(.5 * PI * patternY);\n  } else if (u_shape > 3.5) {\n    // zigzag\n    curve = 10. * abs(fract(.1 * patternY) - .5);\n  } else if (u_shape > 2.5) {\n    // wave\n    curve = 4. * sin(.23 * patternY);\n  } else if (u_shape > 1.5) {\n    // lines irregular\n    curve = .5 + .5 * sin(.5 * uv.x) * sin(1.7 * uv.x);\n  } else {\n    // lines\n  }\n\n  vec2 UvToFract = uv + curve;\n  vec2 fractOrigUV = fract(uv);\n  vec2 floorOrigUV = floor(uv);\n\n  float x = smoothFract(UvToFract.x);\n  float xNonSmooth = fract(UvToFract.x) + .0001;\n\n  float highlightsWidth = 2. * max(.001, fwidth(UvToFract.x));\n  highlightsWidth += 2. * maskStrokeInner;\n  float highlights = smoothstep(0., highlightsWidth, xNonSmooth);\n  highlights *= smoothstep(1., 1. - highlightsWidth, xNonSmooth);\n  highlights = 1. - highlights;\n  highlights *= u_highlights;\n  highlights = clamp(highlights, 0., 1.);\n  highlights *= mask;\n\n  float shadows = pow(x, 1.3);\n  float distortion = 0.;\n  float fadeX = 1.;\n  float frameFade = 0.;\n\n  float aa = fwidth(xNonSmooth);\n  aa = max(aa, fwidth(uv.x));\n  aa = max(aa, fwidth(UvToFract.x));\n  aa = max(aa, .0001);\n\n  if (u_distortionShape == 1.) {\n    distortion = -pow(1.5 * x, 3.);\n    distortion += (.5 - u_shift);\n\n    frameFade = pow(1.5 * x, 3.);\n    aa = max(.2, aa);\n    aa += mix(.2, 0., u_size);\n    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);\n    distortion = mix(.5, distortion, fadeX);\n  } else if (u_distortionShape == 2.) {\n    distortion = 2. * pow(x, 2.);\n    distortion -= (.5 + u_shift);\n\n    frameFade = pow(abs(x - .5), 4.);\n    aa = max(.2, aa);\n    aa += mix(.2, 0., u_size);\n    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);\n    distortion = mix(.5, distortion, fadeX);\n    frameFade = mix(1., frameFade, .5 * fadeX);\n  } else if (u_distortionShape == 3.) {\n    distortion = pow(2. * (xNonSmooth - .5), 6.);\n    distortion -= .25;\n    distortion -= u_shift;\n\n    frameFade = 1. - 2. * pow(abs(x - .4), 2.);\n    aa = .15;\n    aa += mix(.1, 0., u_size);\n    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);\n    frameFade = mix(1., frameFade, fadeX);\n\n  } else if (u_distortionShape == 4.) {\n    x = xNonSmooth;\n    distortion = sin((x + .25) * TWO_PI);\n    shadows = .5 + .5 * asin(distortion) / (.5 * PI);\n    distortion *= .5;\n    distortion -= u_shift;\n    frameFade = .5 + .5 * sin(x * TWO_PI);\n  } else if (u_distortionShape == 5.) {\n    distortion -= pow(abs(x), .2) * x;\n    distortion += .33;\n    distortion -= 3. * u_shift;\n    distortion *= .33;\n\n    frameFade = .3 * (smoothstep(.0, 1., x));\n    shadows = pow(x, 2.5);\n\n    aa = max(.1, aa);\n    aa += mix(.1, 0., u_size);\n    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);\n    distortion *= fadeX;\n  }\n\n  vec2 dudx = dFdx(uvOriginal);\n  vec2 dudy = dFdy(uvOriginal);\n  vec2 grainUV = getImageUV(uvNormalised, .8 / vec2(length(dudx), length(dudy)));\n  float grain = valueNoise(grainUV);\n  grain = smoothstep(.4, .7, grain);\n  grain *= u_grainMixer;\n  distortion = mix(distortion, 0., grain);\n\n  shadows = min(shadows, 1.);\n  shadows += maskStrokeInner;\n  shadows *= mask;\n  shadows = min(shadows, 1.);\n  shadows *= pow(u_shadows, 2.);\n  shadows = clamp(shadows, 0., 1.);\n\n  distortion *= 3. * u_distortion;\n  frameFade *= u_distortion;\n\n  fractOrigUV.x += distortion;\n  floorOrigUV = rotateAspect(floorOrigUV, -patternRotation, u_imageAspectRatio);\n  fractOrigUV = rotateAspect(fractOrigUV, -patternRotation, u_imageAspectRatio);\n\n  uv = (floorOrigUV + fractOrigUV) / patternSize;\n  uv += pow(maskStroke, 4.);\n\n  uv += vec2(.5);\n\n  uv = mix(uvOriginal, uv, smoothstep(0., .7, mask));\n  float blur = mix(0., 50., u_blur);\n  blur = mix(0., blur, smoothstep(.5, 1., mask));\n\n  float edgeDistortion = mix(.0, .04, u_edges);\n  edgeDistortion += .06 * frameFade * u_edges;\n  edgeDistortion *= mask;\n  float frame = getUvFrame(uv, edgeDistortion);\n\n  float stretch = 1. - smoothstep(0., .5, xNonSmooth) * smoothstep(1., 1. - .5, xNonSmooth);\n  stretch = pow(stretch, 2.);\n  stretch *= mask;\n  stretch *= getUvFrame(uv, .1 + .05 * mask * frameFade);\n  uv.y = mix(uv.y, .5, u_stretch * stretch);\n\n  vec4 image = getBlur(u_image, uv, 1. / u_resolution / u_pixelRatio, vec2(0., 1.), blur);\n  image.rgb *= image.a;\n  vec4 backColor = u_colorBack;\n  backColor.rgb *= backColor.a;\n  vec4 highlightColor = u_colorHighlight;\n  highlightColor.rgb *= highlightColor.a;\n  vec4 shadowColor = u_colorShadow;\n\n  vec3 color = highlightColor.rgb * highlights;\n  float opacity = highlightColor.a * highlights;\n\n  shadows = mix(shadows * shadowColor.a, 0., highlights);\n  color = mix(color, shadowColor.rgb * shadowColor.a, .5 * shadows);\n  color += .5 * pow(shadows, .5) * shadowColor.rgb;\n  opacity += shadows;\n  color = clamp(color, vec3(0.), vec3(1.));\n  opacity = clamp(opacity, 0., 1.);\n\n  color += image.rgb * (1. - opacity) * frame;\n  opacity += image.a * (1. - opacity) * frame;\n\n  color += backColor.rgb * (1. - opacity);\n  opacity += backColor.a * (1. - 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  grainOverlayStrength *= mask;\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 FlutedGlassUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_colorBack: [number, number, number, number];\n  u_colorShadow: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_shadows: number;\n  u_size: number;\n  u_angle: number;\n  u_distortion: number;\n  u_shift: number;\n  u_blur: number;\n  u_edges: number;\n  u_marginLeft: number;\n  u_marginRight: number;\n  u_marginTop: number;\n  u_marginBottom: number;\n  u_stretch: number;\n  u_distortionShape: (typeof GlassDistortionShapes)[GlassDistortionShape];\n  u_highlights: number;\n  u_shape: (typeof GlassGridShapes)[GlassGridShape];\n  u_grainMixer: number;\n  u_grainOverlay: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface FlutedGlassParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string;\n  colorBack?: string;\n  colorShadow?: string;\n  colorHighlight?: string;\n  shadows?: number;\n  size?: number;\n  angle?: number;\n  distortion?: number;\n  shift?: number;\n  blur?: number;\n  edges?: number;\n  margin?: number;\n  marginLeft?: number;\n  marginRight?: number;\n  marginTop?: number;\n  marginBottom?: number;\n  stretch?: number;\n  distortionShape?: GlassDistortionShape;\n  highlights?: number;\n  shape?: GlassGridShape;\n  grainMixer?: number;\n  grainOverlay?: number;\n}\n\nexport const GlassGridShapes = {\n  lines: 1,\n  linesIrregular: 2,\n  wave: 3,\n  zigzag: 4,\n  pattern: 5,\n} as const;\n\nexport const GlassDistortionShapes = {\n  prism: 1,\n  lens: 2,\n  contour: 3,\n  cascade: 4,\n  flat: 5,\n} as const;\n\nexport type GlassDistortionShape = keyof typeof GlassDistortionShapes;\nexport type GlassGridShape = keyof typeof GlassGridShapes;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/god-rays.d.ts

@@ -5,18 +5,40 @@ export declare const godRaysMeta: {
     readonly maxColorCount: 5;
 };
 /**
- * Radial rays animated from center
+ * Animated rays of light radiating from the center, blended with up to 5 colors.
  *
- * Uniforms:
- * - u_colorBack, u_colorBloom (RGBA)
- * - u_colors (vec4[]), u_colorsCount (float used as integer)
- * - u_density: frequency of sector shapes
- * - u_intensity: rays visibility within sectors
- * - u_spotty: density of spots on the ray (higher = more spots)
- * - u_midSize, u_midIntensity: central shape over the rays
- * - u_bloom (0..1): normal to additive blending mix
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_colorBloom (vec4): Color overlay blended with the rays in RGBA
+ * - u_colors (vec4[]): Up to 5 ray colors in RGBA
+ * - u_colorsCount (float): Number of active colors
+ * - u_bloom (float): Strength of the bloom/overlay effect, 0 = alpha blend, 1 = additive blend (0 to 1)
+ * - u_intensity (float): Visibility/strength of the rays (0 to 1)
+ * - u_density (float): The number of rays (0 to 1)
+ * - u_spotty (float): The length of the rays, higher = more spots/shorter rays (0 to 1)
+ * - u_midSize (float): Size of the circular glow shape in the center (0 to 1)
+ * - u_midIntensity (float): Brightness/intensity of the central glow (0 to 1)
+ * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied
+ *
+ * The rays are adjustable by size, density, brightness and center glow.
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
  *
- * - u_noiseTexture (sampler2D): pre-computed randomizer source
  */
 export declare const godRaysFragmentShader: string;
 export interface GodRaysUniforms extends ShaderSizingUniforms {

package/dist/shaders/god-rays.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/god-rays.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, rotation2, textureRandomizerR, colorBandingFix, proceduralHash11 } from '../shader-utils.js';\n\nexport const godRaysMeta = {\n  maxColorCount: 5,\n} as const;\n\n/**\n * Radial rays animated from center\n *\n * Uniforms:\n * - u_colorBack, u_colorBloom (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_density: frequency of sector shapes\n * - u_intensity: rays visibility within sectors\n * - u_spotty: density of spots on the ray (higher = more spots)\n * - u_midSize, u_midIntensity: central shape over the rays\n * - u_bloom (0..1): normal to additive blending mix\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n */\n\n// language=GLSL\nexport const godRaysFragmentShader: 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_colorBloom;\nuniform vec4 u_colors[${godRaysMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_density;\nuniform float u_spotty;\nuniform float u_midSize;\nuniform float u_midIntensity;\nuniform float u_intensity;\nuniform float u_bloom;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\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}\n\n${proceduralHash11}\n\nfloat raysShape(vec2 uv, float r, float freq, float intensity, float radius) {\n  float a = atan(uv.y, uv.x);\n  vec2 left = vec2(a * freq, r);\n  vec2 right = vec2(fract(a / TWO_PI) * TWO_PI * freq, r);\n  float n_left = pow(valueNoise(left), intensity);\n  float n_right = pow(valueNoise(right), intensity);\n  float shape = mix(n_right, n_left, smoothstep(-.15, .15, uv.x));\n  return shape;\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  float t = .2 * u_time;\n\n  float radius = length(shape_uv);\n  float spots = 6.5 * abs(u_spotty);\n\n  float intensity = 4. - 3. * clamp(u_intensity, 0., 1.);\n\n  float delta = 1. - smoothstep(0., 1., radius);\n\n  float midSize = 10. * abs(u_midSize);\n  float ms_lo = 0.02 * midSize;\n  float ms_hi = max(midSize, 1e-6);\n  float middleShape = pow(u_midIntensity, 0.3) * (1. - smoothstep(ms_lo, ms_hi, 3.0 * radius));\n  middleShape = pow(middleShape, 5.0);\n\n  vec3 accumColor = vec3(0.0);\n  float accumAlpha = 0.0;\n\n  for (int i = 0; i < ${godRaysMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n\n    vec2 rotatedUV = rotate(shape_uv, float(i) + 1.0);\n\n    float r1 = radius * (1.0 + 0.4 * float(i)) - 3.0 * t;\n    float r2 = 0.5 * radius * (1.0 + spots) - 2.0 * t;\n    float density = 6. * u_density + step(.5, u_density) * pow(4.5 * (u_density - .5), 4.);\n    float f = mix(1.0, 3.0 + 0.5 * float(i), hash11(float(i) * 15.)) * density;\n\n    float ray = raysShape(rotatedUV, r1, 5.0 * f, intensity, radius);\n    ray *= raysShape(rotatedUV, r2, 4.0 * f, intensity, radius);\n    ray += (1. + 4. * ray) * middleShape;\n    ray = clamp(ray, 0.0, 1.0);\n\n    float srcAlpha = u_colors[i].a * ray;\n    vec3 srcColor = u_colors[i].rgb * srcAlpha;\n\n    vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * srcColor;\n    float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * srcAlpha;\n\n    vec3 addBlendColor = accumColor + srcColor;\n    float addBlendAlpha = accumAlpha + srcAlpha;\n\n    accumColor = mix(alphaBlendColor, addBlendColor, u_bloom);\n    accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_bloom);\n  }\n\n  float overlayAlpha = u_colorBloom.a;\n  vec3 overlayColor = u_colorBloom.rgb * overlayAlpha;\n\n  vec3 colorWithOverlay = accumColor + accumAlpha * overlayColor;\n  accumColor = mix(accumColor, colorWithOverlay, u_bloom);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n\n  vec3 color = accumColor + (1. - accumAlpha) * bgColor;\n  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;\n  color = clamp(color, 0., 1.);\n  opacity = clamp(opacity, 0., 1.);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GodRaysUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorBloom: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_spotty: number;\n  u_midSize: number;\n  u_midIntensity: number;\n  u_density: number;\n  u_intensity: number;\n  u_bloom: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface GodRaysParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorBloom?: string;\n  colors?: string[];\n  spotty?: number;\n  midSize?: number;\n  midIntensity?: number;\n  density?: number;\n  intensity?: number;\n  bloom?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,oBAAoB,iBAAiB,wBAAwB;AAErF,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAkBO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASrB,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAclB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAiCM,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAyC7C,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, textureRandomizerR, colorBandingFix, proceduralHash11 } from '../shader-utils.js';\n\nexport const godRaysMeta = {\n  maxColorCount: 5,\n} as const;\n\n/**\n * Animated rays of light radiating from the center, blended with up to 5 colors.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorBloom (vec4): Color overlay blended with the rays in RGBA\n * - u_colors (vec4[]): Up to 5 ray colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_bloom (float): Strength of the bloom/overlay effect, 0 = alpha blend, 1 = additive blend (0 to 1)\n * - u_intensity (float): Visibility/strength of the rays (0 to 1)\n * - u_density (float): The number of rays (0 to 1)\n * - u_spotty (float): The length of the rays, higher = more spots/shorter rays (0 to 1)\n * - u_midSize (float): Size of the circular glow shape in the center (0 to 1)\n * - u_midIntensity (float): Brightness/intensity of the central glow (0 to 1)\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 * The rays are adjustable by size, density, brightness and center glow.\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 godRaysFragmentShader: 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_colorBloom;\nuniform vec4 u_colors[${ godRaysMeta.maxColorCount }];\nuniform float u_colorsCount;\n\nuniform float u_density;\nuniform float u_spotty;\nuniform float u_midSize;\nuniform float u_midIntensity;\nuniform float u_intensity;\nuniform float u_bloom;\n\n${ sizingVariablesDeclaration }\n\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\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}\n\n${ proceduralHash11 }\n\nfloat raysShape(vec2 uv, float r, float freq, float intensity, float radius) {\n  float a = atan(uv.y, uv.x);\n  vec2 left = vec2(a * freq, r);\n  vec2 right = vec2(fract(a / TWO_PI) * TWO_PI * freq, r);\n  float n_left = pow(valueNoise(left), intensity);\n  float n_right = pow(valueNoise(right), intensity);\n  float shape = mix(n_right, n_left, smoothstep(-.15, .15, uv.x));\n  return shape;\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  float t = .2 * u_time;\n\n  float radius = length(shape_uv);\n  float spots = 6.5 * abs(u_spotty);\n\n  float intensity = 4. - 3. * clamp(u_intensity, 0., 1.);\n\n  float delta = 1. - smoothstep(0., 1., radius);\n\n  float midSize = 10. * abs(u_midSize);\n  float ms_lo = 0.02 * midSize;\n  float ms_hi = max(midSize, 1e-6);\n  float middleShape = pow(u_midIntensity, 0.3) * (1. - smoothstep(ms_lo, ms_hi, 3.0 * radius));\n  middleShape = pow(middleShape, 5.0);\n\n  vec3 accumColor = vec3(0.0);\n  float accumAlpha = 0.0;\n\n  for (int i = 0; i < ${ godRaysMeta.maxColorCount }; i++) {\n    if (i >= int(u_colorsCount)) break;\n\n    vec2 rotatedUV = rotate(shape_uv, float(i) + 1.0);\n\n    float r1 = radius * (1.0 + 0.4 * float(i)) - 3.0 * t;\n    float r2 = 0.5 * radius * (1.0 + spots) - 2.0 * t;\n    float density = 6. * u_density + step(.5, u_density) * pow(4.5 * (u_density - .5), 4.);\n    float f = mix(1.0, 3.0 + 0.5 * float(i), hash11(float(i) * 15.)) * density;\n\n    float ray = raysShape(rotatedUV, r1, 5.0 * f, intensity, radius);\n    ray *= raysShape(rotatedUV, r2, 4.0 * f, intensity, radius);\n    ray += (1. + 4. * ray) * middleShape;\n    ray = clamp(ray, 0.0, 1.0);\n\n    float srcAlpha = u_colors[i].a * ray;\n    vec3 srcColor = u_colors[i].rgb * srcAlpha;\n\n    vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * srcColor;\n    float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * srcAlpha;\n\n    vec3 addBlendColor = accumColor + srcColor;\n    float addBlendAlpha = accumAlpha + srcAlpha;\n\n    accumColor = mix(alphaBlendColor, addBlendColor, u_bloom);\n    accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_bloom);\n  }\n\n  float overlayAlpha = u_colorBloom.a;\n  vec3 overlayColor = u_colorBloom.rgb * overlayAlpha;\n\n  vec3 colorWithOverlay = accumColor + accumAlpha * overlayColor;\n  accumColor = mix(accumColor, colorWithOverlay, u_bloom);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n\n  vec3 color = accumColor + (1. - accumAlpha) * bgColor;\n  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;\n  color = clamp(color, 0., 1.);\n  opacity = clamp(opacity, 0., 1.);\n\n  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GodRaysUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorBloom: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_spotty: number;\n  u_midSize: number;\n  u_midIntensity: number;\n  u_density: number;\n  u_intensity: number;\n  u_bloom: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface GodRaysParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorBloom?: string;\n  colors?: string[];\n  spotty?: number;\n  midSize?: number;\n  midIntensity?: number;\n  density?: number;\n  intensity?: number;\n  bloom?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,oBAAoB,iBAAiB,wBAAwB;AAErF,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAwCO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASpB,YAAY,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUhD,0BAA2B;AAAA;AAAA;AAAA;AAAA,EAI3B,SAAU;AAAA,EACV,SAAU;AAAA,EACV,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcnB,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,wBAiCK,YAAY,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,IAyC9C,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/grain-gradient.d.ts

@@ -5,26 +5,50 @@ export declare const grainGradientMeta: {
     readonly maxColorCount: 7;
 };
 /**
- * Multi-color gradient with noise & grain over animated abstract shapes
+ * Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms.
  *
- * Uniforms:
- * - u_colorBack (RGBA)
- * - u_colors (vec4[]), u_colorsCount (float used as integer)
- * - u_softness (0..1): blur between color bands
- * - u_intensity (0..1): distortion between color bands
- * - u_noise (0..1): grainy noise independent of softness
- * - u_shape (float used as integer):
- * ---- 1: single sine wave
- * ---- 2: dots pattern
- * ---- 3: truchet pattern
- * ---- 4: corners (2 rounded rectangles)
- * ---- 5: ripple
- * ---- 6: blob (metaballs)
- * ---- 7: circle imitating 3d look
+ * Note: grains are calculated using gl_FragCoord & u_resolution, meaning grains don't react to scaling and fit
  *
- * - u_noiseTexture (sampler2D): pre-computed randomizer source
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning (0 to 1)
+ * - u_originY (float): Reference point for positioning (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic
+ * - u_worldHeight (float): Virtual height of the graphic
+ * - u_fit (float): Fit mode (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level (0.01 to 4)
+ * - u_rotation (float): Rotation angle in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset (-1 to 1)
+ * - u_offsetY (float): Vertical offset (-1 to 1)
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_colors (vec4[]): Up to 7 gradient colors in RGBA
+ * - u_colorsCount (float): Number of active colors
+ * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
+ * - u_intensity (float): Distortion between color bands (0 to 1)
+ * - u_noise (float): Grainy noise overlay (0 to 1)
+ * - u_shape (float): Shape type (1 = wave, 2 = dots, 3 = truchet, 4 = corners, 5 = ripple, 6 = blob, 7 = sphere)
+ * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
  *
- * Note: grains are calculated using gl_FragCoord & u_resolution, meaning grains don't react to scaling and fit
+ * Vertex shader outputs (used in fragment shader):
+ * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied (used for shapes 4-7)
+ * - v_objectBoxSize (vec2): Size of the object bounding box in pixels
+ * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied (used for shapes 1-3)
+ * - v_patternBoxSize (vec2): Size of the pattern bounding box in pixels
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
  *
  */
 export declare const grainGradientFragmentShader: string;

package/dist/shaders/grain-gradient.js

@@ -80,19 +80,36 @@ float fbmR(vec2 n) {
   }
   return total;
 }
+vec3 fbmR3(vec2 n0, vec2 n1, vec2 n2) {
+  float amplitude = 0.2;
+  vec3 total = vec3(0.0);
+  for (int i = 0; i < 3; i++) {
+    n0 = rotate(n0, 0.3);
+    n1 = rotate(n1, 0.3);
+    n2 = rotate(n2, 0.3);
+    total.x += valueNoiseR(n0) * amplitude;
+    total.y += valueNoiseR(n1) * amplitude;
+    total.z += valueNoiseR(n2) * amplitude;
+    n0 *= 1.99;
+    n1 *= 1.99;
+    n2 *= 1.99;
+    amplitude *= 0.6;
+  }
+  return total;
+}
 
 ${proceduralHash11}
 
 vec2 truchet(vec2 uv, float idx){
-    idx = fract(((idx - .5) * 2.));
-    if (idx > 0.75) {
-        uv = vec2(1.0) - uv;
-    } else if (idx > 0.5) {
-        uv = vec2(1.0 - uv.x, uv.y);
-    } else if (idx > 0.25) {
-        uv = 1.0 - vec2(1.0 - uv.x, uv.y);
-    }
-    return uv;
+  idx = fract(((idx - .5) * 2.));
+  if (idx > 0.75) {
+    uv = vec2(1.0) - uv;
+  } else if (idx > 0.5) {
+    uv = vec2(1.0 - uv.x, uv.y);
+  } else if (idx > 0.25) {
+    uv = 1.0 - vec2(1.0 - uv.x, uv.y);
+  }
+  return uv;
 }
 
 void main() {
@@ -103,14 +120,17 @@ void main() {
   vec2 shape_uv = vec2(0.);
   vec2 grain_uv = vec2(0.);
 
+  float r = u_rotation * 3.14159265358979323846 / 180.;
+  float cr = cos(r);
+  float sr = sin(r);
+  mat2 graphicRotation = mat2(cr, sr, -sr, cr);
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
   if (u_shape > 3.5) {
     shape_uv = v_objectUV;
     grain_uv = shape_uv;
 
     // apply inverse transform to grain_uv so it respects the originXY
-    float r = u_rotation * 3.14159265358979323846 / 180.;
-    mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
-    vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
     grain_uv = transpose(graphicRotation) * grain_uv;
     grain_uv *= u_scale;
     grain_uv -= graphicOffset;
@@ -121,9 +141,6 @@ void main() {
     grain_uv = 100. * v_patternUV;
 
     // apply inverse transform to grain_uv so it respects the originXY
-    float r = u_rotation * 3.14159265358979323846 / 180.;
-    mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
-    vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
     grain_uv = transpose(graphicRotation) * grain_uv;
     grain_uv *= u_scale;
     if (u_fit > 0.) {
@@ -131,8 +148,8 @@ void main() {
       givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
       float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
       vec2 patternBoxGivenSize = vec2(
-        (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
-        (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
       );
       patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;
       float patternBoxNoFitBoxWidth = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);
@@ -235,9 +252,14 @@ void main() {
     shape *= step(0., d);
   }
 
-  float simplex = snoise(grain_uv * .5);
-  float grainDist = simplex * snoise(grain_uv * .2) - fbmR(.002 * grain_uv + 10.) - fbmR(.003 * grain_uv);
-  float rawNoise = .75 * simplex - fbmR(rotate(.4 * grain_uv, 2.)) - fbmR(.001 * grain_uv);
+  float baseNoise = snoise(grain_uv * .5);
+  vec3 fbmVals = fbmR3(
+  .002 * grain_uv + 10.,
+  .003 * grain_uv,
+  .001 * grain_uv
+  );
+  float grainDist = baseNoise * snoise(grain_uv * .2) - fbmVals.x - fbmVals.y;
+  float rawNoise = .75 * baseNoise - fbmR(rotate(.4 * grain_uv, 2.)) - fbmVals.z;
   float noise = clamp(rawNoise, 0., 1.);
 
   shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);
@@ -249,10 +271,11 @@ void main() {
   float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));
   float mixer = shape * (u_colorsCount - 1.);
 
+  int cntStop = int(u_colorsCount) - 1;
   vec4 gradient = u_colors[0];
   gradient.rgb *= gradient.a;
   for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {
-    if (i > int(u_colorsCount) - 1) break;
+    if (i > cntStop) break;
 
     float localT = clamp(mixer - float(i - 1), 0., 1.);
     localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);

package/dist/shaders/grain-gradient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/grain-gradient.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingVariablesDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingDebugVariablesDeclaration,\n} from '../shader-sizing.js';\nimport {\n  simplexNoise,\n  declarePI,\n  rotation2,\n  textureRandomizerR,\n  proceduralHash21,\n  proceduralHash11,\n} from '../shader-utils.js';\n\nexport const grainGradientMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Multi-color gradient with noise & grain over animated abstract shapes\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_softness (0..1): blur between color bands\n * - u_intensity (0..1): distortion between color bands\n * - u_noise (0..1): grainy noise independent of softness\n * - u_shape (float used as integer):\n * ---- 1: single sine wave\n * ---- 2: dots pattern\n * ---- 3: truchet pattern\n * ---- 4: corners (2 rounded rectangles)\n * ---- 5: ripple\n * ---- 6: blob (metaballs)\n * ---- 7: circle imitating 3d look\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n * Note: grains are calculated using gl_FragCoord & u_resolution, meaning grains don't react to scaling and fit\n *\n */\n\n// language=GLSL\nexport const grainGradientFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform mediump float u_time;\nuniform mediump vec2 u_resolution;\nuniform mediump float u_pixelRatio;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${grainGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\n\nuniform mediump float u_originX;\nuniform mediump float u_originY;\nuniform mediump float u_worldWidth;\nuniform mediump float u_worldHeight;\nuniform mediump float u_fit;\n\nuniform mediump float u_scale;\nuniform mediump float u_rotation;\nuniform mediump float u_offsetX;\nuniform mediump float u_offsetY;\n\n${sizingVariablesDeclaration}\n${ sizingDebugVariablesDeclaration }\n\nout vec4 fragColor;\n\n${declarePI}\n${simplexNoise}\n${rotation2}\n${proceduralHash21}\n${textureRandomizerR}\n\nfloat valueNoiseR(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 fbmR(vec2 n) {\n  float total = 0.;\n  float amplitude = .2;\n  for (int i = 0; i < 3; i++) {\n    n = rotate(n, .3);\n    total += valueNoiseR(n) * amplitude;\n    n *= 1.99;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\n${proceduralHash11}\n\nvec2 truchet(vec2 uv, float idx){\n    idx = fract(((idx - .5) * 2.));\n    if (idx > 0.75) {\n        uv = vec2(1.0) - uv;\n    } else if (idx > 0.5) {\n        uv = vec2(1.0 - uv.x, uv.y);\n    } else if (idx > 0.25) {\n        uv = 1.0 - vec2(1.0 - uv.x, uv.y);\n    }\n    return uv;\n}\n\nvoid main() {\n\n  const float firstFrameOffset = 7.;\n  float t = .1 * (u_time + firstFrameOffset);\n\n  vec2 shape_uv = vec2(0.);\n  vec2 grain_uv = vec2(0.);\n\n  if (u_shape > 3.5) {\n    shape_uv = v_objectUV;\n    grain_uv = shape_uv;\n\n    // apply inverse transform to grain_uv so it respects the originXY\n    float r = u_rotation * 3.14159265358979323846 / 180.;\n    mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n    vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n    grain_uv = transpose(graphicRotation) * grain_uv;\n    grain_uv *= u_scale;\n    grain_uv -= graphicOffset;\n    grain_uv *= v_objectBoxSize;\n    grain_uv *= .7;\n  } else {\n    shape_uv = .5 * v_patternUV;\n    grain_uv = 100. * v_patternUV;\n\n    // apply inverse transform to grain_uv so it respects the originXY\n    float r = u_rotation * 3.14159265358979323846 / 180.;\n    mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n    vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n    grain_uv = transpose(graphicRotation) * grain_uv;\n    grain_uv *= u_scale;\n    if (u_fit > 0.) {\n      vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n      givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n      float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n      vec2 patternBoxGivenSize = vec2(\n        (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n        (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n      );\n      patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n      float patternBoxNoFitBoxWidth = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n      grain_uv /= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n    }\n    vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n    grain_uv -= graphicOffset / patternBoxScale;\n    grain_uv *= 1.6;\n  }\n\n\n  float shape = 0.;\n\n  if (u_shape < 1.5) {\n    // Sine wave\n\n    float wave = cos(.5 * shape_uv.x - 4. * t) * sin(1.5 * shape_uv.x + 2. * t) * (.75 + .25 * cos(6. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 2.5) {\n    // Grid (dots)\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = hash11(stripeIdx * 100.);\n    rand = sign(rand - .5) * pow(4. * abs(rand), .3);\n    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);\n    shape = pow(abs(shape), 4.);\n\n  } else if (u_shape < 3.5) {\n    // Truchet pattern\n\n    float n2 = valueNoiseR(shape_uv * .4 - 3.75 * t);\n    shape_uv.x += 10.;\n    shape_uv *= .6;\n\n    vec2 tile = truchet(fract(shape_uv), randomR(floor(shape_uv)));\n\n    float distance1 = length(tile);\n    float distance2 = length(tile - vec2(1.));\n\n    n2 -= .5;\n    n2 *= .1;\n    shape = smoothstep(.2, .55, distance1 + n2) * (1. - smoothstep(.45, .8, distance1 - n2));\n    shape += smoothstep(.2, .55, distance2 + n2) * (1. - smoothstep(.45, .8, distance2 - n2));\n\n    shape = pow(shape, 1.5);\n\n  } else if (u_shape < 4.5) {\n    // Corners\n\n    shape_uv *= .6;\n    vec2 outer = vec2(.5);\n\n    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * sin(5.25 * t)));\n    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape = 1. - bl.x * bl.y * tr.x * tr.y;\n\n    shape_uv = -shape_uv;\n    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * cos(5.25 * t)));\n    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape -= bl.x * bl.y * tr.x * tr.y;\n\n    shape = 1. - smoothstep(0., 1., shape);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    shape_uv *= 2.;\n    float dist = length(.4 * shape_uv);\n    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Blob\n\n    t *= 2.;\n\n    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));\n    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));\n    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));\n    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));\n\n    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);\n\n    shape = smoothstep(.0, .9, shape);\n    float edge = smoothstep(.25, .3, shape);\n    shape = mix(.0, shape, edge);\n\n  } else {\n    // Sphere\n\n    shape_uv *= 2.;\n    float d = 1. - pow(length(shape_uv), 2.);\n    vec3 pos = vec3(shape_uv, sqrt(max(d, 0.)));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n    shape *= step(0., d);\n  }\n\n  float simplex = snoise(grain_uv * .5);\n  float grainDist = simplex * snoise(grain_uv * .2) - fbmR(.002 * grain_uv + 10.) - fbmR(.003 * grain_uv);\n  float rawNoise = .75 * simplex - fbmR(rotate(.4 * grain_uv, 2.)) - fbmR(.001 * grain_uv);\n  float noise = clamp(rawNoise, 0., 1.);\n\n  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n  shape += u_noise * 10. / u_colorsCount * noise;\n\n  float aa = fwidth(shape);\n\n  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);\n  float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));\n  float mixer = shape * (u_colorsCount - 1.);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {\n    if (i > int(u_colorsCount) - 1) break;\n\n    float localT = clamp(mixer - float(i - 1), 0., 1.);\n    localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * totalShape;\n  float opacity = gradient.a * totalShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GrainGradientUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_softness: number;\n  u_intensity: number;\n  u_noise: number;\n  u_shape: (typeof GrainGradientShapes)[GrainGradientShape];\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  softness?: number;\n  intensity?: number;\n  noise?: number;\n  shape?: GrainGradientShape;\n}\n\nexport const GrainGradientShapes = {\n  wave: 1,\n  dots: 2,\n  truchet: 3,\n  corners: 4,\n  ripple: 5,\n  blob: 6,\n  sphere: 7,\n};\n\nexport type GrainGradientShape = keyof typeof GrainGradientShapes;\n"],
-  "mappings": ";;;;;AAEA;AAAA,EACE;AAAA,EAGA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AACjB;AA2BO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAU3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBrD,0BAA0B;AAAA,EACzB,+BAAgC;AAAA;AAAA;AAAA;AAAA,EAIjC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BlB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA0KM,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0ChD,MAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingVariablesDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingDebugVariablesDeclaration,\n} from '../shader-sizing.js';\nimport {\n  simplexNoise,\n  declarePI,\n  rotation2,\n  textureRandomizerR,\n  proceduralHash21,\n  proceduralHash11,\n} from '../shader-utils.js';\n\nexport const grainGradientMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms.\n *\n * Note: grains are calculated using gl_FragCoord & u_resolution, meaning grains don't react to scaling and fit\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning (0 to 1)\n * - u_originY (float): Reference point for positioning (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic\n * - u_worldHeight (float): Virtual height of the graphic\n * - u_fit (float): Fit mode (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level (0.01 to 4)\n * - u_rotation (float): Rotation angle in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset (-1 to 1)\n * - u_offsetY (float): Vertical offset (-1 to 1)\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 7 gradient colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_intensity (float): Distortion between color bands (0 to 1)\n * - u_noise (float): Grainy noise overlay (0 to 1)\n * - u_shape (float): Shape type (1 = wave, 2 = dots, 3 = truchet, 4 = corners, 5 = ripple, 6 = blob, 7 = sphere)\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 (used for shapes 4-7)\n * - v_objectBoxSize (vec2): Size of the object bounding box in pixels\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied (used for shapes 1-3)\n * - v_patternBoxSize (vec2): Size of the pattern bounding box in pixels\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 grainGradientFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform mediump float u_time;\nuniform mediump vec2 u_resolution;\nuniform mediump float u_pixelRatio;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${ grainGradientMeta.maxColorCount }];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\n\nuniform mediump float u_originX;\nuniform mediump float u_originY;\nuniform mediump float u_worldWidth;\nuniform mediump float u_worldHeight;\nuniform mediump float u_fit;\n\nuniform mediump float u_scale;\nuniform mediump float u_rotation;\nuniform mediump float u_offsetX;\nuniform mediump float u_offsetY;\n\n${ sizingVariablesDeclaration }\n${ sizingDebugVariablesDeclaration }\n\nout vec4 fragColor;\n\n${ declarePI }\n${ simplexNoise }\n${ rotation2 }\n${ proceduralHash21 }\n${ textureRandomizerR }\n\nfloat valueNoiseR(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 fbmR(vec2 n) {\n  float total = 0.;\n  float amplitude = .2;\n  for (int i = 0; i < 3; i++) {\n    n = rotate(n, .3);\n    total += valueNoiseR(n) * amplitude;\n    n *= 1.99;\n    amplitude *= 0.6;\n  }\n  return total;\n}\nvec3 fbmR3(vec2 n0, vec2 n1, vec2 n2) {\n  float amplitude = 0.2;\n  vec3 total = vec3(0.0);\n  for (int i = 0; i < 3; i++) {\n    n0 = rotate(n0, 0.3);\n    n1 = rotate(n1, 0.3);\n    n2 = rotate(n2, 0.3);\n    total.x += valueNoiseR(n0) * amplitude;\n    total.y += valueNoiseR(n1) * amplitude;\n    total.z += valueNoiseR(n2) * amplitude;\n    n0 *= 1.99;\n    n1 *= 1.99;\n    n2 *= 1.99;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\n${ proceduralHash11 }\n\nvec2 truchet(vec2 uv, float idx){\n  idx = fract(((idx - .5) * 2.));\n  if (idx > 0.75) {\n    uv = vec2(1.0) - uv;\n  } else if (idx > 0.5) {\n    uv = vec2(1.0 - uv.x, uv.y);\n  } else if (idx > 0.25) {\n    uv = 1.0 - vec2(1.0 - uv.x, uv.y);\n  }\n  return uv;\n}\n\nvoid main() {\n\n  const float firstFrameOffset = 7.;\n  float t = .1 * (u_time + firstFrameOffset);\n\n  vec2 shape_uv = vec2(0.);\n  vec2 grain_uv = vec2(0.);\n\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  float cr = cos(r);\n  float sr = sin(r);\n  mat2 graphicRotation = mat2(cr, sr, -sr, cr);\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  if (u_shape > 3.5) {\n    shape_uv = v_objectUV;\n    grain_uv = shape_uv;\n\n    // apply inverse transform to grain_uv so it respects the originXY\n    grain_uv = transpose(graphicRotation) * grain_uv;\n    grain_uv *= u_scale;\n    grain_uv -= graphicOffset;\n    grain_uv *= v_objectBoxSize;\n    grain_uv *= .7;\n  } else {\n    shape_uv = .5 * v_patternUV;\n    grain_uv = 100. * v_patternUV;\n\n    // apply inverse transform to grain_uv so it respects the originXY\n    grain_uv = transpose(graphicRotation) * grain_uv;\n    grain_uv *= u_scale;\n    if (u_fit > 0.) {\n      vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n      givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n      float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n      vec2 patternBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n      );\n      patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n      float patternBoxNoFitBoxWidth = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n      grain_uv /= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n    }\n    vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n    grain_uv -= graphicOffset / patternBoxScale;\n    grain_uv *= 1.6;\n  }\n\n\n  float shape = 0.;\n\n  if (u_shape < 1.5) {\n    // Sine wave\n\n    float wave = cos(.5 * shape_uv.x - 4. * t) * sin(1.5 * shape_uv.x + 2. * t) * (.75 + .25 * cos(6. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 2.5) {\n    // Grid (dots)\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = hash11(stripeIdx * 100.);\n    rand = sign(rand - .5) * pow(4. * abs(rand), .3);\n    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);\n    shape = pow(abs(shape), 4.);\n\n  } else if (u_shape < 3.5) {\n    // Truchet pattern\n\n    float n2 = valueNoiseR(shape_uv * .4 - 3.75 * t);\n    shape_uv.x += 10.;\n    shape_uv *= .6;\n\n    vec2 tile = truchet(fract(shape_uv), randomR(floor(shape_uv)));\n\n    float distance1 = length(tile);\n    float distance2 = length(tile - vec2(1.));\n\n    n2 -= .5;\n    n2 *= .1;\n    shape = smoothstep(.2, .55, distance1 + n2) * (1. - smoothstep(.45, .8, distance1 - n2));\n    shape += smoothstep(.2, .55, distance2 + n2) * (1. - smoothstep(.45, .8, distance2 - n2));\n\n    shape = pow(shape, 1.5);\n\n  } else if (u_shape < 4.5) {\n    // Corners\n\n    shape_uv *= .6;\n    vec2 outer = vec2(.5);\n\n    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * sin(5.25 * t)));\n    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape = 1. - bl.x * bl.y * tr.x * tr.y;\n\n    shape_uv = -shape_uv;\n    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * cos(5.25 * t)));\n    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape -= bl.x * bl.y * tr.x * tr.y;\n\n    shape = 1. - smoothstep(0., 1., shape);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    shape_uv *= 2.;\n    float dist = length(.4 * shape_uv);\n    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Blob\n\n    t *= 2.;\n\n    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));\n    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));\n    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));\n    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));\n\n    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);\n\n    shape = smoothstep(.0, .9, shape);\n    float edge = smoothstep(.25, .3, shape);\n    shape = mix(.0, shape, edge);\n\n  } else {\n    // Sphere\n\n    shape_uv *= 2.;\n    float d = 1. - pow(length(shape_uv), 2.);\n    vec3 pos = vec3(shape_uv, sqrt(max(d, 0.)));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n    shape *= step(0., d);\n  }\n\n  float baseNoise = snoise(grain_uv * .5);\n  vec3 fbmVals = fbmR3(\n  .002 * grain_uv + 10.,\n  .003 * grain_uv,\n  .001 * grain_uv\n  );\n  float grainDist = baseNoise * snoise(grain_uv * .2) - fbmVals.x - fbmVals.y;\n  float rawNoise = .75 * baseNoise - fbmR(rotate(.4 * grain_uv, 2.)) - fbmVals.z;\n  float noise = clamp(rawNoise, 0., 1.);\n\n  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n  shape += u_noise * 10. / u_colorsCount * noise;\n\n  float aa = fwidth(shape);\n\n  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);\n  float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));\n  float mixer = shape * (u_colorsCount - 1.);\n\n  int cntStop = int(u_colorsCount) - 1;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${ grainGradientMeta.maxColorCount }; i++) {\n    if (i > cntStop) break;\n\n    float localT = clamp(mixer - float(i - 1), 0., 1.);\n    localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * totalShape;\n  float opacity = gradient.a * totalShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GrainGradientUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_softness: number;\n  u_intensity: number;\n  u_noise: number;\n  u_shape: (typeof GrainGradientShapes)[GrainGradientShape];\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  softness?: number;\n  intensity?: number;\n  noise?: number;\n  shape?: GrainGradientShape;\n}\n\nexport const GrainGradientShapes = {\n  wave: 1,\n  dots: 2,\n  truchet: 3,\n  corners: 4,\n  ripple: 5,\n  blob: 6,\n  sphere: 7,\n};\n\nexport type GrainGradientShape = keyof typeof GrainGradientShapes;\n"],
+  "mappings": ";;;;;AAEA;AAAA,EACE;AAAA,EAGA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AACjB;AAmDO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAU1B,kBAAkB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBtD,0BAA2B;AAAA,EAC3B,+BAAgC;AAAA;AAAA;AAAA;AAAA,EAIhC,SAAU;AAAA,EACV,YAAa;AAAA,EACb,SAAU;AAAA,EACV,gBAAiB;AAAA,EACjB,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,EA2CnB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAgLK,kBAAkB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0ClD,MAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/shaders/halftone-dots.d.ts

@@ -1,12 +1,36 @@
 import type { ShaderMotionParams } from '../shader-mount.js';
 import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 /**
-
-
- Uniforms:
- - u_colorBack, u_colorFront, u_colorHighlight (RGBA)
- (u_colorHighlight to be the lighstraight parts of u_colorFront pixels)
- - size: px size set relative to canvas resolution
+ * A halftone-dot image filter featuring customizable grids, color palettes, and dot styles.
+ *
+ * Fragment shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ * - u_time (float): Animation time
+ * - u_image (sampler2D): Source image texture
+ * - u_imageAspectRatio (float): Aspect ratio of the source image
+ * - u_colorFront (vec4): Foreground color in RGBA
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_originalColors (bool): Use sampled image's original colors instead of colorFront
+ * - u_type (float): Dot style (0 = classic, 1 = gooey, 2 = holes, 3 = soft)
+ * - u_inverted (bool): Inverts the image luminance, doesn’t affect the color scheme; not effective at zero contrast
+ * - u_grid (float): Grid type (0 = square, 1 = hex)
+ * - u_size (float): Grid size relative to the image box (0 to 1)
+ * - u_radius (float): Maximum dot size relative to grid cell (0 to 2)
+ * - u_contrast (float): Contrast applied to the sampled image (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)
+ * - u_grainSize (float): Scale applied to both grain distortion and grain overlay (0 to 1)
+ *
+ * Note: This shader calculates image UVs directly in the fragment shader using gl_FragCoord,
+ * rather than relying on vertex shader outputs.
  */
 export declare const halftoneDotsFragmentShader: string;
 export interface HalftoneDotsUniforms extends ShaderSizingUniforms {

package/dist/shaders/halftone-dots.js

@@ -92,7 +92,7 @@ vec2 getImageUV(vec2 uv, vec2 extraScale) {
 
   imageUV += .5;
   imageUV.y = 1. - imageUV.y;
-  
+
   return imageUV;
 }
 
@@ -114,7 +114,7 @@ float getCircleWithHole(vec2 uv, float r, float baseR) {
 
   r = mix(.75 * baseR, 0., r);
   float rMod = mod(r, .5);
-  
+
   float d = length(uv - .5);
   float aa = fwidth(d);
   float circle = 1. - smoothstep(rMod - aa, rMod + aa, d);
@@ -133,7 +133,7 @@ float getGooeyBall(vec2 uv, float r, float baseR) {
   }
   sizeRadius = mix(sizeRadius * baseR, 0., r);
   d = 1. - sst(0., sizeRadius, d);
-  
+
   d = pow(d, 2. + baseR);
   return d;
 }
@@ -182,7 +182,7 @@ float getLumBall(vec2 p, vec2 pad, vec2 inCellOffset, float contrast, float base
   vec2 uv_f = fract(p);
   vec2 samplingUV = (uv_i + .5 - inCellOffset) * pad + vec2(.5);
   float outOfFrame = getUvFrame(samplingUV, pad * stepSize);
-  
+
   float lum = getLumAtPx(samplingUV, contrast);
   ballColor = texture(u_image, samplingUV);
   ballColor.rgb *= ballColor.a;
@@ -208,7 +208,7 @@ float getLumBall(vec2 p, vec2 pad, vec2 inCellOffset, float contrast, float base
 
 
 void main() {
-  
+
   float stepMultiplier = 1.;
   if (u_type == 0.) {
     // classic
@@ -217,7 +217,7 @@ void main() {
     // gooey & soft
     stepMultiplier = 6.;
   }
-  
+
   float cellsPerSide = mix(300., 7., pow(u_size, .7));
   cellsPerSide /= stepMultiplier;
   float cellSizeY = 1. / cellsPerSide;
@@ -276,9 +276,9 @@ void main() {
       totalOpacity += shape;
     }
   }
-  
+
   const float eps = 1e-4;
-  
+
   totalColor /= max(totalShape, eps);
   totalOpacity /= max(totalShape, eps);
 
@@ -304,7 +304,7 @@ void main() {
 
   vec3 color = vec3(0.);
   float opacity = 0.;
-  
+
   if (u_originalColors == true) {
     color = totalColor * finalShape;
     opacity = totalOpacity * finalShape;
@@ -327,13 +327,13 @@ void main() {
   float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
   grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
   grainOverlay = pow(grainOverlay, 1.3);
-  
+
   float grainOverlayV = grainOverlay * 2. - 1.;
   vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
   float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
   grainOverlayStrength = pow(grainOverlayStrength, .8);
   color = mix(color, grainOverlayColor, .5 * grainOverlayStrength);
-  
+
   opacity += .5 * grainOverlayStrength;
   opacity = clamp(opacity, 0., 1.);