@paper-design/shaders 0.0.0-canary.0d8316e

package/dist/shaders/dot-orbit.js

@@ -0,0 +1,123 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, rotation2, textureRandomizerR, textureRandomizerGB } from "../shader-utils.js";
+const dotOrbitMeta = {
+  maxColorCount: 10
+};
+const dotOrbitFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${dotOrbitMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_stepsPerColor;
+uniform float u_size;
+uniform float u_sizeRange;
+uniform float u_spreading;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${declarePI}
+${rotation2}
+${textureRandomizerR}
+${textureRandomizerGB}
+
+
+vec3 voronoiShape(vec2 uv, float time) {
+  vec2 i_uv = floor(uv);
+  vec2 f_uv = fract(uv);
+
+  float spreading = .25 * clamp(u_spreading, 0., 1.);
+
+  float minDist = 1.;
+  vec2 randomizer = vec2(0.);
+  for (int y = -1; y <= 1; y++) {
+    for (int x = -1; x <= 1; x++) {
+      vec2 tileOffset = vec2(float(x), float(y));
+      vec2 rand = randomGB(i_uv + tileOffset);
+      vec2 cellCenter = vec2(.5 + 1e-4);
+      cellCenter += spreading * cos(time + TWO_PI * rand);
+      cellCenter -= .5;
+      cellCenter = rotate(cellCenter, randomR(vec2(rand.x, rand.y)) + .1 * time);
+      cellCenter += .5;
+      float dist = length(tileOffset + cellCenter - f_uv);
+      if (dist < minDist) {
+        minDist = dist;
+        randomizer = rand;
+      }
+    }
+  }
+
+  return vec3(minDist, randomizer);
+}
+
+void main() {
+
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= 1.5;
+
+  const float firstFrameOffset = -10.;
+  float t = u_time + firstFrameOffset;
+
+  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;
+
+  float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];
+  float dist = voronoi[0];
+  float edgeWidth = fwidth(dist);
+  float dots = 1. - smoothstep(radius - edgeWidth, radius + edgeWidth, dist);
+
+  float shape = voronoi[1];
+
+  float mixer = shape * (u_colorsCount - 1.);
+  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
+  float steps = max(1., u_stepsPerColor);
+
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${dotOrbitMeta.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+    float localT = clamp(mixer - float(i - 1), 0.0, 1.0);
+    localT = round(localT * steps) / steps;
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, localT);
+  }
+
+  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
+    float localT = mixer + 1.;
+    if (mixer > (u_colorsCount - 1.)) {
+      localT = mixer - (u_colorsCount - 1.);
+    }
+    localT = round(localT * steps) / steps;
+    vec4 cFst = u_colors[0];
+    cFst.rgb *= cFst.a;
+    vec4 cLast = u_colors[int(u_colorsCount - 1.)];
+    cLast.rgb *= cLast.a;
+    gradient = mix(cLast, cFst, localT);
+  }
+
+  vec3 color = gradient.rgb * dots;
+  float opacity = gradient.a * dots;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  dotOrbitFragmentShader,
+  dotOrbitMeta
+};
+//# sourceMappingURL=dot-orbit.js.map

package/dist/shaders/dot-orbit.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/dot-orbit.ts"],
+  "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, rotation2, textureRandomizerR, textureRandomizerGB } from '../shader-utils.js';\n\nexport const dotOrbitMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Animated multi-color dots pattern with each dot orbiting around its cell center.\n * Supports up to 10 colors and various shape and motion controls.\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 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., needs 2+ colors (1 to 4)\n * - u_size (float): Dot radius relative to cell size (0 to 1)\n * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)\n * - u_spreading (float): Maximum orbit distance around cell center, dots are static at 0 (0 to 1)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\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 * 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 dotOrbitFragmentShader: 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[${ dotOrbitMeta.maxColorCount }];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_spreading;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ textureRandomizerR }\n${ textureRandomizerGB }\n\n\nvec3 voronoiShape(vec2 uv, float time) {\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n\n  float spreading = .25 * clamp(u_spreading, 0., 1.);\n\n  float minDist = 1.;\n  vec2 randomizer = vec2(0.);\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tileOffset = vec2(float(x), float(y));\n      vec2 rand = randomGB(i_uv + tileOffset);\n      vec2 cellCenter = vec2(.5 + 1e-4);\n      cellCenter += spreading * cos(time + TWO_PI * rand);\n      cellCenter -= .5;\n      cellCenter = rotate(cellCenter, randomR(vec2(rand.x, rand.y)) + .1 * time);\n      cellCenter += .5;\n      float dist = length(tileOffset + cellCenter - f_uv);\n      if (dist < minDist) {\n        minDist = dist;\n        randomizer = rand;\n      }\n    }\n  }\n\n  return vec3(minDist, randomizer);\n}\n\nvoid main() {\n\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= 1.5;\n\n  const float firstFrameOffset = -10.;\n  float t = u_time + firstFrameOffset;\n\n  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;\n\n  float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];\n  float dist = voronoi[0];\n  float edgeWidth = fwidth(dist);\n  float dots = 1. - smoothstep(radius - edgeWidth, radius + edgeWidth, dist);\n\n  float shape = voronoi[1];\n\n  float mixer = shape * (u_colorsCount - 1.);\n  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n  float steps = max(1., u_stepsPerColor);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${ dotOrbitMeta.maxColorCount }; i++) {\n    if (i >= int(u_colorsCount)) break;\n    float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n    localT = round(localT * steps) / steps;\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n    float localT = mixer + 1.;\n    if (mixer > (u_colorsCount - 1.)) {\n      localT = mixer - (u_colorsCount - 1.);\n    }\n    localT = round(localT * steps) / steps;\n    vec4 cFst = u_colors[0];\n    cFst.rgb *= cFst.a;\n    vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n    cLast.rgb *= cLast.a;\n    gradient = mix(cLast, cFst, localT);\n  }\n\n  vec3 color = gradient.rgb * dots;\n  float opacity = gradient.a * dots;\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  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotOrbitUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_size: number;\n  u_sizeRange: number;\n  u_spreading: number;\n  u_stepsPerColor: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  size?: number;\n  sizeRange?: number;\n  spreading?: number;\n  stepsPerColor?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,WAAW,oBAAoB,2BAA2B;AAEvE,MAAM,eAAe;AAAA,EAC1B,eAAe;AACjB;AAoCO,MAAM,yBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQrB,aAAa,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWjD,SAAU;AAAA,EACV,SAAU;AAAA,EACV,kBAAmB;AAAA,EACnB,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,wBAsDE,aAAa,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;",
+  "names": []
+}

package/dist/shaders/fluted-glass.d.ts

@@ -0,0 +1,115 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * Fluted glass image filter that transforms an image into streaked, ribbed distortions,
+ * giving a mix of clarity and obscurity.
+ *
+ * Fragment shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_image (sampler2D): Source image texture, premultiplied alpha
+ * - u_imageAspectRatio (float): Aspect ratio of the source image; over HTML the canvas aspect from u_resolution is used instead
+ * - u_imageIsHtml (float): 1 when u_image is HTML. HTML is drawn 1:1, so the flutes are sized in CSS px to keep their size
+ *   over it, size setting the flute width from 5px to 200px, and anchored at originX / originY instead of the center,
+ *   0 0 being the top left like CSS. Their distortion follows the flute size; margins and edges stay relative to the frame
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_colorShadow (vec4): Shadows color in RGBA, needs shadows > 0
+ * - u_colorHighlight (vec4): Highlights color in RGBA, needs highlights > 0
+ * - u_shadows (float): Color gradient added over image and background, following distortion shape, needs colorShadow alpha > 0 (0 to 1)
+ * - u_highlights (float): Thin strokes along distortion shape, useful for antialiasing on small grid (0 to 1)
+ * - u_size (float): Size of the distortion shape grid (0 to 1)
+ * - u_shape (float): Grid shape (1 = lines, 2 = linesIrregular, 3 = wave, 4 = zigzag, 5 = pattern)
+ * - u_angle (float): Direction of the grid relative to the image in degrees (0 to 180)
+ * - u_distortionShape (float): Shape of distortion (1 = prism, 2 = lens, 3 = contour, 4 = cascade, 5 = flat)
+ * - u_distortion (float): Power of distortion applied within each stripe (0 to 1)
+ * - u_shift (float): Texture shift in direction opposite to the grid, needs distortion > 0 (-1 to 1)
+ * - u_stretch (float): Extra distortion along the grid lines (0 to 1)
+ * - u_blur (float): One-directional blur over the image and extra blur around edges (0 to 1)
+ * - u_edges (float): Glass distortion and softness on the image edges (0 to 1)
+ * - u_marginLeft (float): Distance from the left edge to the effect (0 to 1)
+ * - u_marginRight (float): Distance from the right edge to the effect (0 to 1)
+ * - u_marginTop (float): Distance from the top edge to the effect (0 to 1)
+ * - u_marginBottom (float): Distance from the bottom edge to the effect (0 to 1)
+ * - u_grainMixer (float): Strength of grain distortion applied to shape edges, needs distortion > 0 (0 to 1)
+ * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_imageUV (vec2): Image UV coordinates with global sizing (rotation, scale, offset, etc) applied
+ *
+ * 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, over HTML where the effect is anchored (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas, over HTML where the effect is anchored from the top (0 to 1)
+ * - 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.1 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_imageAspectRatio (float): Aspect ratio of the source image
+ *
+ */
+export declare const flutedGlassFragmentShader: string;
+export interface FlutedGlassUniforms extends ShaderSizingUniforms {
+    u_image: HTMLImageElement | string | undefined;
+    u_colorBack: [number, number, number, number];
+    u_colorShadow: [number, number, number, number];
+    u_colorHighlight: [number, number, number, number];
+    u_shadows: number;
+    u_size: number;
+    u_angle: number;
+    u_distortion: number;
+    u_shift: number;
+    u_blur: number;
+    u_edges: number;
+    u_marginLeft: number;
+    u_marginRight: number;
+    u_marginTop: number;
+    u_marginBottom: number;
+    u_stretch: number;
+    u_distortionShape: (typeof GlassDistortionShapes)[GlassDistortionShape];
+    u_highlights: number;
+    u_shape: (typeof GlassGridShapes)[GlassGridShape];
+    u_grainMixer: number;
+    u_grainOverlay: number;
+}
+export interface FlutedGlassParams extends ShaderSizingParams, ShaderMotionParams {
+    image?: HTMLImageElement | string;
+    colorBack?: string;
+    colorShadow?: string;
+    colorHighlight?: string;
+    shadows?: number;
+    size?: number;
+    angle?: number;
+    distortion?: number;
+    shift?: number;
+    blur?: number;
+    edges?: number;
+    margin?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    stretch?: number;
+    distortionShape?: GlassDistortionShape;
+    highlights?: number;
+    shape?: GlassGridShape;
+    grainMixer?: number;
+    grainOverlay?: number;
+}
+export declare const GlassGridShapes: {
+    readonly lines: 1;
+    readonly linesIrregular: 2;
+    readonly wave: 3;
+    readonly zigzag: 4;
+    readonly pattern: 5;
+};
+export declare const GlassDistortionShapes: {
+    readonly prism: 1;
+    readonly lens: 2;
+    readonly contour: 3;
+    readonly cascade: 4;
+    readonly flat: 5;
+};
+export type GlassDistortionShape = keyof typeof GlassDistortionShapes;
+export type GlassGridShape = keyof typeof GlassGridShapes;

package/dist/shaders/fluted-glass.js

@@ -0,0 +1,361 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, rotation2, proceduralHash21 } from "../shader-utils.js";
+const flutedGlassFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorShadow;
+uniform vec4 u_colorHighlight;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+uniform float u_imageIsHtml;
+uniform float u_originX;
+uniform float u_originY;
+
+uniform float u_size;
+uniform float u_shadows;
+uniform float u_angle;
+uniform float u_stretch;
+uniform float u_shape;
+uniform float u_distortion;
+uniform float u_highlights;
+uniform float u_distortionShape;
+uniform float u_shift;
+uniform float u_blur;
+uniform float u_edges;
+uniform float u_marginLeft;
+uniform float u_marginRight;
+uniform float u_marginTop;
+uniform float u_marginBottom;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+
+in vec2 v_imageUV;
+
+float getImageAspectRatio() {
+  return mix(u_imageAspectRatio, u_resolution.x / u_resolution.y, u_imageIsHtml);
+}
+
+out vec4 fragColor;
+
+${declarePI}
+float sizeToPx(float size) {
+  return 1000. / mix(200., 5., size);
+}
+${rotation2}
+${proceduralHash21}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float getUvFrame(vec2 uv, float softness) {
+  float aax = 2. * fwidth(uv.x);
+  float aay = 2. * fwidth(uv.y);
+  float left   = smoothstep(0., aax + softness, uv.x);
+  float right  = 1. - smoothstep(1. - softness - aax, 1., uv.x);
+  float bottom = smoothstep(0., aay + softness, uv.y);
+  float top    = 1. - smoothstep(1. - softness - aay, 1., uv.y);
+  return left * right * bottom * top;
+}
+
+const int MAX_RADIUS = 50;
+vec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) {
+  if (sigma <= .5) return texture(tex, uv);
+  int radius = int(min(float(MAX_RADIUS), ceil(3.0 * sigma)));
+
+  float twoSigma2 = 2.0 * sigma * sigma;
+  float gaussianNorm = 1.0 / sqrt(TWO_PI * sigma * sigma);
+
+  vec4 sum = texture(tex, uv) * gaussianNorm;
+  float weightSum = gaussianNorm;
+
+  for (int i = 1; i <= MAX_RADIUS; i++) {
+    if (i > radius) break;
+
+    float x = float(i);
+    float w = exp(-(x * x) / twoSigma2) * gaussianNorm;
+
+    vec2 offset = dir * texelSize * x;
+    vec4 s1 = texture(tex, uv + offset);
+    vec4 s2 = texture(tex, uv - offset);
+
+    sum += (s1 + s2) * w;
+    weightSum += 2.0 * w;
+  }
+
+  return sum / weightSum;
+}
+
+vec2 rotateAspect(vec2 p, float a, float aspect) {
+  p.x *= aspect;
+  p = rotate(p, a);
+  p.x /= aspect;
+  return p;
+}
+
+float smoothFract(float x) {
+  float f = fract(x);
+  float w = fwidth(x);
+
+  float edge = abs(f - 0.5) - 0.5;
+  float band = smoothstep(-w, w, edge);
+
+  return mix(f, 1.0 - f, band);
+}
+
+void main() {
+
+  float patternRotation = -u_angle * PI / 180.;
+  float patternSize = mix(mix(200., 2., u_size), u_resolution.x / u_pixelRatio / sizeToPx(u_size), u_imageIsHtml);
+  vec2 patternOrigin = mix(vec2(.5), vec2(u_originX, u_originY), u_imageIsHtml);
+
+  vec2 uv = v_imageUV;
+
+  vec2 uvMask = gl_FragCoord.xy / u_resolution.xy;
+  vec2 sw = vec2(.005);
+  vec4 margins = vec4(u_marginLeft, u_marginTop, u_marginRight, u_marginBottom);
+  float mask =
+  smoothstep(margins[0], margins[0] + sw.x, uvMask.x + sw.x) *
+  smoothstep(margins[2], margins[2] + sw.x, 1.0 - uvMask.x + sw.x) *
+  smoothstep(margins[1], margins[1] + sw.y, uvMask.y + sw.y) *
+  smoothstep(margins[3], margins[3] + sw.y, 1.0 - uvMask.y + sw.y);
+  float maskOuter =
+  smoothstep(margins[0] - sw.x, margins[0], uvMask.x + sw.x) *
+  smoothstep(margins[2] - sw.x, margins[2], 1.0 - uvMask.x + sw.x) *
+  smoothstep(margins[1] - sw.y, margins[1], uvMask.y + sw.y) *
+  smoothstep(margins[3] - sw.y, margins[3], 1.0 - uvMask.y + sw.y);
+  float maskStroke = maskOuter - mask;
+  float maskInner =
+  smoothstep(margins[0] - 2. * sw.x, margins[0], uvMask.x) *
+  smoothstep(margins[2] - 2. * sw.x, margins[2], 1.0 - uvMask.x) *
+  smoothstep(margins[1] - 2. * sw.y, margins[1], uvMask.y) *
+  smoothstep(margins[3] - 2. * sw.y, margins[3], 1.0 - uvMask.y);
+  float maskStrokeInner = maskInner - mask;
+
+  uv -= patternOrigin;
+  uv *= patternSize;
+  uv = rotateAspect(uv, patternRotation, getImageAspectRatio());
+
+  float curve = 0.;
+  float patternY = uv.y / getImageAspectRatio();
+  if (u_shape > 4.5) {
+    // pattern
+    curve = .5 + .5 * sin(.5 * PI * uv.x) * cos(.5 * PI * patternY);
+  } else if (u_shape > 3.5) {
+    // zigzag
+    curve = 10. * abs(fract(.1 * patternY) - .5);
+  } else if (u_shape > 2.5) {
+    // wave
+    curve = 4. * sin(.23 * patternY);
+  } else if (u_shape > 1.5) {
+    // lines irregular
+    curve = .5 + .5 * sin(.5 * uv.x) * sin(1.7 * uv.x);
+  } else {
+    // lines
+  }
+
+  vec2 UvToFract = uv + curve;
+  vec2 fractOrigUV = fract(uv);
+  vec2 floorOrigUV = floor(uv);
+
+  float x = smoothFract(UvToFract.x);
+  float xNonSmooth = fract(UvToFract.x) + .0001;
+
+  float highlightsWidth = 2. * max(.001, fwidth(UvToFract.x));
+  highlightsWidth += 2. * maskStrokeInner;
+  float highlights = smoothstep(0., highlightsWidth, xNonSmooth);
+  highlights *= smoothstep(1., 1. - highlightsWidth, xNonSmooth);
+  highlights = 1. - highlights;
+  highlights *= u_highlights;
+  highlights = clamp(highlights, 0., 1.);
+  highlights *= mask;
+
+  float shadows = pow(x, 1.3);
+  float distortion = 0.;
+  float fadeX = 1.;
+  float frameFade = 0.;
+
+  float aa = fwidth(xNonSmooth);
+  aa = max(aa, fwidth(uv.x));
+  aa = max(aa, fwidth(UvToFract.x));
+  aa = max(aa, .0001);
+
+  if (u_distortionShape == 1.) {
+    distortion = -pow(1.5 * x, 3.);
+    distortion += (.5 - u_shift);
+
+    frameFade = pow(1.5 * x, 3.);
+    aa = max(.2, aa);
+    aa += mix(.2, 0., u_size);
+    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
+    distortion = mix(.5, distortion, fadeX);
+  } else if (u_distortionShape == 2.) {
+    distortion = 2. * pow(x, 2.);
+    distortion -= (.5 + u_shift);
+
+    frameFade = pow(abs(x - .5), 4.);
+    aa = max(.2, aa);
+    aa += mix(.2, 0., u_size);
+    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
+    distortion = mix(.5, distortion, fadeX);
+    frameFade = mix(1., frameFade, .5 * fadeX);
+  } else if (u_distortionShape == 3.) {
+    distortion = pow(2. * (xNonSmooth - .5), 6.);
+    distortion -= .25;
+    distortion -= u_shift;
+
+    frameFade = 1. - 2. * pow(abs(x - .4), 2.);
+    aa = .15;
+    aa += mix(.1, 0., u_size);
+    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
+    frameFade = mix(1., frameFade, fadeX);
+
+  } else if (u_distortionShape == 4.) {
+    x = xNonSmooth;
+    distortion = sin((x + .25) * TWO_PI);
+    shadows = .5 + .5 * asin(distortion) / (.5 * PI);
+    distortion *= .5;
+    distortion -= u_shift;
+    frameFade = .5 + .5 * sin(x * TWO_PI);
+  } else if (u_distortionShape == 5.) {
+    distortion -= pow(abs(x), .2) * x;
+    distortion += .33;
+    distortion -= 3. * u_shift;
+    distortion *= .33;
+
+    frameFade = .3 * (smoothstep(.0, 1., x));
+    shadows = pow(x, 2.5);
+
+    aa = max(.1, aa);
+    aa += mix(.1, 0., u_size);
+    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
+    distortion *= fadeX;
+  }
+
+  vec2 dudx = dFdx(v_imageUV);
+  vec2 dudy = dFdy(v_imageUV);
+  vec2 grainUV = v_imageUV - patternOrigin;
+  grainUV *= (.8 / vec2(length(dudx), length(dudy)));
+  grainUV += .5;
+  if (u_grainMixer > 0.) {
+    float grain = valueNoise(grainUV);
+    grain = smoothstep(.4, .7, grain);
+    grain *= u_grainMixer;
+    distortion = mix(distortion, 0., grain);
+  }
+
+  shadows = min(shadows, 1.);
+  shadows += maskStrokeInner;
+  shadows *= mask;
+  shadows = min(shadows, 1.);
+  shadows *= pow(u_shadows, 2.);
+  shadows = clamp(shadows, 0., 1.);
+
+  distortion *= 3. * u_distortion;
+  frameFade *= u_distortion;
+
+  fractOrigUV.x += distortion;
+  floorOrigUV = rotateAspect(floorOrigUV, -patternRotation, getImageAspectRatio());
+  fractOrigUV = rotateAspect(fractOrigUV, -patternRotation, getImageAspectRatio());
+
+  uv = (floorOrigUV + fractOrigUV) / patternSize;
+  uv += pow(maskStroke, 4.);
+
+  uv += patternOrigin;
+
+  uv = mix(v_imageUV, uv, smoothstep(0., .7, mask));
+  float blur = mix(0., 50., u_blur);
+  blur = mix(0., blur, smoothstep(.5, 1., mask));
+
+  float edgeDistortion = mix(.0, .04, u_edges);
+  edgeDistortion += .06 * frameFade * u_edges;
+  edgeDistortion *= mask;
+  float frame = getUvFrame(uv, edgeDistortion);
+
+  float stretch = 1. - smoothstep(0., .5, xNonSmooth) * smoothstep(1., 1. - .5, xNonSmooth);
+  stretch = pow(stretch, 2.);
+  stretch *= mask;
+  stretch *= getUvFrame(uv, .1 + .05 * mask * frameFade);
+  uv.y = mix(uv.y, .5, u_stretch * stretch);
+
+  vec4 image = getBlur(u_image, uv, 1. / u_resolution / u_pixelRatio, vec2(0., 1.), blur);
+  vec4 backColor = u_colorBack;
+  backColor.rgb *= backColor.a;
+  vec4 highlightColor = u_colorHighlight;
+  highlightColor.rgb *= highlightColor.a;
+  vec4 shadowColor = u_colorShadow;
+
+  vec3 color = highlightColor.rgb * highlights;
+  float opacity = highlightColor.a * highlights;
+
+  shadows = mix(shadows * shadowColor.a, 0., highlights);
+  color = mix(color, shadowColor.rgb * shadowColor.a, .5 * shadows);
+  color += .5 * pow(shadows, .5) * shadowColor.rgb;
+  opacity += shadows;
+  color = clamp(color, vec3(0.), vec3(1.));
+  opacity = clamp(opacity, 0., 1.);
+
+  color += image.rgb * (1. - opacity) * frame;
+  opacity += image.a * (1. - opacity) * frame;
+
+  color += backColor.rgb * (1. - opacity);
+  opacity += backColor.a * (1. - opacity);
+
+  if (u_grainOverlay > 0.) {
+    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);
+    grainOverlayStrength *= mask;
+    color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
+
+    opacity += .5 * grainOverlayStrength;
+  }
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+const GlassGridShapes = {
+  lines: 1,
+  linesIrregular: 2,
+  wave: 3,
+  zigzag: 4,
+  pattern: 5
+};
+const GlassDistortionShapes = {
+  prism: 1,
+  lens: 2,
+  contour: 3,
+  cascade: 4,
+  flat: 5
+};
+export {
+  GlassDistortionShapes,
+  GlassGridShapes,
+  flutedGlassFragmentShader
+};
+//# sourceMappingURL=fluted-glass.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/fluted-glass.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { 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_image (sampler2D): Source image texture, premultiplied alpha\n * - u_imageAspectRatio (float): Aspect ratio of the source image; over HTML the canvas aspect from u_resolution is used instead\n * - u_imageIsHtml (float): 1 when u_image is HTML. HTML is drawn 1:1, so the flutes are sized in CSS px to keep their size\n *   over it, size setting the flute width from 5px to 200px, and anchored at originX / originY instead of the center,\n *   0 0 being the top left like CSS. Their distortion follows the flute size; margins and edges stay relative to the frame\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorShadow (vec4): Shadows color in RGBA, needs shadows > 0\n * - u_colorHighlight (vec4): Highlights color in RGBA, needs highlights > 0\n * - u_shadows (float): Color gradient added over image and background, following distortion shape, needs colorShadow alpha > 0 (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, needs distortion > 0 (-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, needs distortion > 0 (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_imageUV (vec2): Image UV coordinates 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, over HTML where the effect is anchored (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas, over HTML where the effect is anchored from the top (0 to 1)\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.1 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_imageAspectRatio (float): Aspect ratio of the source image\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\nuniform vec4 u_colorBack;\nuniform vec4 u_colorShadow;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\nuniform float u_imageIsHtml;\nuniform float u_originX;\nuniform float u_originY;\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\nin vec2 v_imageUV;\n\nfloat getImageAspectRatio() {\n  return mix(u_imageAspectRatio, u_resolution.x / u_resolution.y, u_imageIsHtml);\n}\n\nout vec4 fragColor;\n\n${ declarePI }\nfloat sizeToPx(float size) {\n  return 1000. / mix(200., 5., size);\n}\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 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 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 = texture(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 = texture(tex, uv + offset);\n    vec4 s2 = texture(tex, uv - offset);\n\n    sum += (s1 + s2) * w;\n    weightSum += 2.0 * w;\n  }\n\n  return sum / weightSum;\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  float patternRotation = -u_angle * PI / 180.;\n  float patternSize = mix(mix(200., 2., u_size), u_resolution.x / u_pixelRatio / sizeToPx(u_size), u_imageIsHtml);\n  vec2 patternOrigin = mix(vec2(.5), vec2(u_originX, u_originY), u_imageIsHtml);\n\n  vec2 uv = v_imageUV;\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 -= patternOrigin;\n  uv *= patternSize;\n  uv = rotateAspect(uv, patternRotation, getImageAspectRatio());\n\n  float curve = 0.;\n  float patternY = uv.y / getImageAspectRatio();\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(v_imageUV);\n  vec2 dudy = dFdy(v_imageUV);\n  vec2 grainUV = v_imageUV - patternOrigin;\n  grainUV *= (.8 / vec2(length(dudx), length(dudy)));\n  grainUV += .5;\n  if (u_grainMixer > 0.) {\n    float grain = valueNoise(grainUV);\n    grain = smoothstep(.4, .7, grain);\n    grain *= u_grainMixer;\n    distortion = mix(distortion, 0., grain);\n  }\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, getImageAspectRatio());\n  fractOrigUV = rotateAspect(fractOrigUV, -patternRotation, getImageAspectRatio());\n\n  uv = (floorOrigUV + fractOrigUV) / patternSize;\n  uv += pow(maskStroke, 4.);\n\n  uv += patternOrigin;\n\n  uv = mix(v_imageUV, 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  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  if (u_grainOverlay > 0.) {\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  }\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}\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": ";;;;;AACA,eAAmE;AACnE,SAAS,WAAW,WAAW,wBAAwB;AAqDhD,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0C9C,SAAU;AAAA;AAAA;AAAA;AAAA,EAIV,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiVb,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,MAAM,wBAAwB;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;",
+  "names": []
+}