@paper-design/shaders 0.0.26 → 0.0.27

package/dist/shaders/dot-grid.d.ts

@@ -1,22 +1,4 @@
-/** Possible values for the shape uniform */
-export declare const DotGridShapes: {
-    readonly Circle: 0;
-    readonly Diamond: 1;
-    readonly Square: 2;
-    readonly Triangle: 3;
-};
-export type DotGridShape = (typeof DotGridShapes)[keyof typeof DotGridShapes];
-export type DotGridUniforms = {
-    u_colorFill: [number, number, number, number];
-    u_colorStroke: [number, number, number, number];
-    u_dotSize: number;
-    u_gridSpacingX: number;
-    u_gridSpacingY: number;
-    u_strokeWidth: number;
-    u_sizeRange: number;
-    u_opacityRange: number;
-    u_shape: DotGridShape;
-};
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
 /**
  * Dot Grid Pattern
  * (the size parameters are set in pixels)
@@ -33,4 +15,35 @@ export type DotGridUniforms = {
  * u_opacityRange(0 .. 1) - variety of dot opacity to be applied equally to fill and stroke
  * u_shape - shape code (0 - circle, 1 - diamond, 2 - square, 3 - triangle)
  */
-export declare const dotGridFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gridSpacingX;\nuniform float u_gridSpacingY;\nuniform float u_strokeWidth;\nuniform float u_sizeRange;\nuniform float u_opacityRange;\nuniform float u_shape;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nfloat hash(vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\n\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\nfloat polygon(vec2 p, float N, float rot) {\n  float a = atan(p.x, p.y) + rot;\n  float r = TWO_PI / float(N);\n\n  return cos(floor(.5 + a / r) * r - a) * length(p);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy;\n  uv.y = u_resolution.y - uv.y;\n\n  uv /= u_pixelRatio;\n\n  vec2 grid = fract(uv / vec2(u_gridSpacingX, u_gridSpacingY)) + 1e-4;\n  vec2 grid_idx = floor(uv / vec2(u_gridSpacingX, u_gridSpacingY));\n  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\n  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\n\n  vec2 center = vec2(0.5) - 1e-3;\n  vec2 p = (grid - center) * vec2(u_gridSpacingX, u_gridSpacingY);\n\n  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);\n  float strokeWidth = u_strokeWidth;\n\n  float dist;\n  if (u_shape < 0.5) {\n    // Circle\n    dist = length(p);\n  } else if (u_shape < 1.5) {\n    // Diamond\n    strokeWidth *= 1.5;\n    dist = polygon(1.5 * p, 4., .25 * PI);\n  } else if (u_shape < 2.5) {\n    // Square\n    dist = polygon(1.03 * p, 4., 1e-3);\n  } else {\n    // Triangle\n    strokeWidth *= 1.5;\n    p = p * 2. - 1.;\n    p *= .9;\n    p.y -= .75 * baseSize;\n    dist = polygon(p, 3., 1e-3);\n  }\n\n  float edgeWidth = fwidth(dist);\n  float shapeOuter = smoothstep(baseSize + edgeWidth + strokeWidth, baseSize - edgeWidth + strokeWidth, dist);\n  float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);\n  float stroke = clamp(shapeOuter - shapeInner, 0., 1.);\n\n  float dot_opacity = max(0., 1. - opacity_randomizer * u_opacityRange);\n\n  vec3 color = u_colorFill.rgb * u_colorFill.a * dot_opacity * shapeInner;\n  color = mix(color, u_colorStroke.rgb, u_colorStroke.a * dot_opacity * stroke);\n\n  float opacity = u_colorFill.a * shapeInner * dot_opacity;\n  opacity += u_colorStroke.a * stroke * dot_opacity;\n\n  fragColor = vec4(color, opacity);\n}\n";
+export declare const dotGridFragmentShader: string;
+export interface DotGridUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
+    u_colorFill: [number, number, number, number];
+    u_colorStroke: [number, number, number, number];
+    u_dotSize: number;
+    u_gridSpacingX: number;
+    u_gridSpacingY: number;
+    u_strokeWidth: number;
+    u_sizeRange: number;
+    u_opacityRange: number;
+    u_shape: (typeof DotGridShapes)[DotGridShape];
+}
+export interface DotGridParams extends ShaderSizingParams {
+    colorBack?: string;
+    colorFill?: string;
+    colorStroke?: string;
+    dotSize?: number;
+    gridSpacingX?: number;
+    gridSpacingY?: number;
+    strokeWidth?: number;
+    sizeRange?: number;
+    opacityRange?: number;
+    shape?: DotGridShape;
+}
+export declare const DotGridShapes: {
+    readonly circle: 0;
+    readonly diamond: 1;
+    readonly square: 2;
+    readonly triangle: 3;
+};
+export type DotGridShape = keyof typeof DotGridShapes;

package/dist/shaders/dot-grid.js

@@ -0,0 +1,100 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing";
+import { declarePI, declareSimplexNoise } from "../shader-utils";
+const dotGridFragmentShader = `#version 300 es
+precision highp float;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorFill;
+uniform vec4 u_colorStroke;
+uniform float u_dotSize;
+uniform float u_gridSpacingX;
+uniform float u_gridSpacingY;
+uniform float u_strokeWidth;
+uniform float u_sizeRange;
+uniform float u_opacityRange;
+uniform float u_shape;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareSimplexNoise}
+
+float polygon(vec2 p, float N, float rot) {
+  float a = atan(p.x, p.y) + rot;
+  float r = TWO_PI / float(N);
+
+  return cos(floor(.5 + a / r) * r - a) * length(p);
+}
+
+void main() {
+  
+  vec2 shape_uv = v_patternUV;
+  shape_uv += .5;
+
+  vec2 grid = fract(shape_uv / vec2(u_gridSpacingX, u_gridSpacingY)) + 1e-4;
+  vec2 grid_idx = floor(shape_uv / vec2(u_gridSpacingX, u_gridSpacingY));
+  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));
+  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));
+
+  vec2 center = vec2(0.5) - 1e-3;
+  vec2 p = (grid - center) * vec2(u_gridSpacingX, u_gridSpacingY);
+
+  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
+  float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);
+
+  float dist;
+  if (u_shape < 0.5) {
+    // Circle
+    dist = length(p);
+  } else if (u_shape < 1.5) {
+    // Diamond
+    strokeWidth *= 1.5;
+    dist = polygon(1.5 * p, 4., .25 * PI);
+  } else if (u_shape < 2.5) {
+    // Square
+    dist = polygon(1.03 * p, 4., 1e-3);
+  } else {
+    // Triangle
+    strokeWidth *= 1.5;
+    p = p * 2. - 1.;
+    p *= .9;
+    p.y -= .75 * baseSize;
+    dist = polygon(p, 3., 1e-3);
+  }
+
+  float edgeWidth = fwidth(dist);
+  float shapeOuter = smoothstep(baseSize + edgeWidth + strokeWidth, baseSize - edgeWidth + strokeWidth, dist);
+  float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);
+  float stroke = clamp(shapeOuter - shapeInner, 0., 1.);
+
+  float dot_opacity = max(0., 1. - opacity_randomizer * u_opacityRange);
+
+  vec3 color = u_colorBack.rgb * u_colorBack.a;
+  color = mix(color, u_colorFill.rgb, u_colorFill.a * dot_opacity * shapeInner);
+  color = mix(color, u_colorStroke.rgb, u_colorStroke.a * dot_opacity * stroke);
+
+  float opacity = u_colorBack.a;
+  opacity += u_colorFill.a * shapeInner * dot_opacity;
+  opacity += u_colorStroke.a * stroke * dot_opacity;
+
+  fragColor = vec4(color, opacity);
+}
+`;
+const DotGridShapes = {
+  circle: 0,
+  diamond: 1,
+  square: 2,
+  triangle: 3
+};
+export {
+  DotGridShapes,
+  dotGridFragmentShader
+};
+//# sourceMappingURL=dot-grid.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/dot-grid.ts"],
+  "sourcesContent": ["import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareSimplexNoise } from '../shader-utils';\n\n/**\n * Dot Grid Pattern\n * (the size parameters are set in pixels)\n *\n * Uniforms include:\n * u_colorBack - the background color\n * u_colorFill - the fill color\n * u_colorStroke - the stroke color\n * u_dotSize (px) - the base dot radius\n * u_strokeWidth (px) - the stroke (to be subtracted from u_dotSize)\n * u_gridSpacingX (px) - horizontal grid spacing\n * u_gridSpacingY (px) - xertical grid spacing\n * u_sizeRange (0 .. 1) - variety of dot size\n * u_opacityRange(0 .. 1) - variety of dot opacity to be applied equally to fill and stroke\n * u_shape - shape code (0 - circle, 1 - diamond, 2 - square, 3 - triangle)\n */\nexport const dotGridFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gridSpacingX;\nuniform float u_gridSpacingY;\nuniform float u_strokeWidth;\nuniform float u_sizeRange;\nuniform float u_opacityRange;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n\nfloat polygon(vec2 p, float N, float rot) {\n  float a = atan(p.x, p.y) + rot;\n  float r = TWO_PI / float(N);\n\n  return cos(floor(.5 + a / r) * r - a) * length(p);\n}\n\nvoid main() {\n  \n  vec2 shape_uv = v_patternUV;\n  shape_uv += .5;\n\n  vec2 grid = fract(shape_uv / vec2(u_gridSpacingX, u_gridSpacingY)) + 1e-4;\n  vec2 grid_idx = floor(shape_uv / vec2(u_gridSpacingX, u_gridSpacingY));\n  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\n  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\n\n  vec2 center = vec2(0.5) - 1e-3;\n  vec2 p = (grid - center) * vec2(u_gridSpacingX, u_gridSpacingY);\n\n  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);\n  float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);\n\n  float dist;\n  if (u_shape < 0.5) {\n    // Circle\n    dist = length(p);\n  } else if (u_shape < 1.5) {\n    // Diamond\n    strokeWidth *= 1.5;\n    dist = polygon(1.5 * p, 4., .25 * PI);\n  } else if (u_shape < 2.5) {\n    // Square\n    dist = polygon(1.03 * p, 4., 1e-3);\n  } else {\n    // Triangle\n    strokeWidth *= 1.5;\n    p = p * 2. - 1.;\n    p *= .9;\n    p.y -= .75 * baseSize;\n    dist = polygon(p, 3., 1e-3);\n  }\n\n  float edgeWidth = fwidth(dist);\n  float shapeOuter = smoothstep(baseSize + edgeWidth + strokeWidth, baseSize - edgeWidth + strokeWidth, dist);\n  float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);\n  float stroke = clamp(shapeOuter - shapeInner, 0., 1.);\n\n  float dot_opacity = max(0., 1. - opacity_randomizer * u_opacityRange);\n\n  vec3 color = u_colorBack.rgb * u_colorBack.a;\n  color = mix(color, u_colorFill.rgb, u_colorFill.a * dot_opacity * shapeInner);\n  color = mix(color, u_colorStroke.rgb, u_colorStroke.a * dot_opacity * stroke);\n\n  float opacity = u_colorBack.a;\n  opacity += u_colorFill.a * shapeInner * dot_opacity;\n  opacity += u_colorStroke.a * stroke * dot_opacity;\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotGridUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFill: [number, number, number, number];\n  u_colorStroke: [number, number, number, number];\n  u_dotSize: number;\n  u_gridSpacingX: number;\n  u_gridSpacingY: number;\n  u_strokeWidth: number;\n  u_sizeRange: number;\n  u_opacityRange: number;\n  u_shape: (typeof DotGridShapes)[DotGridShape];\n}\n\nexport interface DotGridParams extends ShaderSizingParams {\n  colorBack?: string;\n  colorFill?: string;\n  colorStroke?: string;\n  dotSize?: number;\n  gridSpacingX?: number;\n  gridSpacingY?: number;\n  strokeWidth?: number;\n  sizeRange?: number;\n  opacityRange?: number;\n  shape?: DotGridShape;\n}\n\nexport const DotGridShapes = {\n  circle: 0,\n  diamond: 1,\n  square: 2,\n  triangle: 3,\n} as const;\n\nexport type DotGridShape = keyof typeof DotGridShapes;\n"],
+  "mappings": ";;;;;AAAA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,2BAA2B;AAkBxC,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc3C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Fd,MAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;",
+  "names": []
+}

package/dist/shaders/dot-orbit.d.ts

@@ -1,12 +1,8 @@
-export type DotOrbitUniforms = {
-    u_scale: number;
-    u_color1: [number, number, number, number];
-    u_color2: [number, number, number, number];
-    u_color3: [number, number, number, number];
-    u_color4: [number, number, number, number];
-    u_dotSize: number;
-    u_dotSizeRange: number;
-    u_spreading: number;
+import type { vec4 } from '../types';
+import type { ShaderMotionParams } from '../shader-mount';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+export declare const dotOrbitMeta: {
+    readonly maxColorCount: 10;
 };
 /**
  * Dot Pattern with dot moving around their grid position
@@ -14,13 +10,26 @@ export type DotOrbitUniforms = {
  * Renders a dot pattern with dot placed in the center of each cell of animated Voronoi diagram
  *
  * Uniforms include:
- * u_scale - the scale applied to user space
- * u_color1 - the first color
- * u_color2 - the second color
- * u_color3 - the third color
- * u_color4 - the fourth color
- * u_dotSize (0 .. 1) - the base dot radius (relative to cell size)
- * u_dotSizeRange (0 .. 1) - the dot radius to vary between the cells
- * u_spreading (0 .. 1) - the distance each dot can move around the regular grid
+ * - u_colors (vec4[]): Input RGBA colors
+ * - u_colorsCount (float): Number of active colors (`u_colors` length)
+ * - u_stepsPerColor (float): Discretization of the color transition
+ * - u_dotSize (float, 0 .. 1): Base dot radius (relative to cell size)
+ * - u_dotSizeRange (float, 0 .. 1): Dot radius to vary between the cells
+ * - u_spreading (float, 0 .. 1): the distance each dot can move around the regular grid
  */
-export declare const dotOrbitFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\nuniform float u_dotSize;\nuniform float u_dotSizeRange;\nuniform float u_spreading;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n\nfloat random(in vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\nvec2 random2(vec2 p) {\n  return vec2(random(p), random(200. * p));\n}\n\nvec3 get_voronoi_shape(vec2 _uv, float time) {\n  vec2 i_uv = floor(_uv);\n  vec2 f_uv = fract(_uv);\n\n  float min_dist = 1.;\n  vec2 cell_randomizer = vec2(0.);\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tile_offset = vec2(float(x), float(y));\n      vec2 rand = random2(i_uv + tile_offset);\n      vec2 cell_center = .5 + 1e-4 + .25 * clamp(u_spreading, 0., 1.) * sin(time + TWO_PI * rand);\n      float dist = length(tile_offset + cell_center - f_uv);\n      if (dist < min_dist) {\n        min_dist = dist;\n        cell_randomizer = rand;\n      }\n      min_dist = min(min_dist, dist);\n    }\n  }\n\n  return vec3(min_dist, cell_randomizer);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (.02 * (1. - step(1. - scale, 1.) / scale));\n  uv *= u_resolution;\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float t = u_time;\n\n  vec3 voronoi = get_voronoi_shape(uv, t) + 1e-4;\n\n  float radius = .25 * clamp(u_dotSize, 0., 1.) - .5 * clamp(u_dotSizeRange, 0., 1.) * voronoi[2];\n  float dist = voronoi[0];\n  float edge_width = fwidth(dist);\n  float shape = smoothstep(radius + edge_width, radius - edge_width, dist);\n\n  float color_randomizer = voronoi[1];\n\n  float opacity =\n    u_color1.a * step(0.0, color_randomizer) * step(color_randomizer, 0.25) +\n    u_color2.a * step(0.25, color_randomizer) * step(color_randomizer, 0.5) +\n    u_color3.a * step(0.5, color_randomizer) * step(color_randomizer, 0.75) +\n    u_color4.a * step(0.75, color_randomizer) * step(color_randomizer, 1.0);\n\n  opacity *= shape;\n\n  vec3 color =\n    u_color1.rgb * step(0.0, color_randomizer) * step(color_randomizer, 0.25) +\n    u_color2.rgb * step(0.25, color_randomizer) * step(color_randomizer, 0.5) +\n    u_color3.rgb * step(0.5, color_randomizer) * step(color_randomizer, 0.75) +\n    u_color4.rgb * step(0.75, color_randomizer) * step(color_randomizer, 1.0);\n\n  fragColor = vec4(color * opacity, opacity);\n}\n";
+export declare const dotOrbitFragmentShader: string;
+export interface DotOrbitUniforms extends ShaderSizingUniforms {
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_dotSize: number;
+    u_dotSizeRange: number;
+    u_spreading: number;
+    u_stepsPerColor: number;
+}
+export interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {
+    colors?: string[];
+    dotSize?: number;
+    dotSizeRange?: number;
+    spreading?: number;
+    stepsPerColor?: number;
+}

package/dist/shaders/dot-orbit.js

@@ -0,0 +1,120 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing";
+import { declarePI, declareRandom, declareRotate } from "../shader-utils";
+const dotOrbitMeta = {
+  maxColorCount: 10
+};
+const dotOrbitFragmentShader = `#version 300 es
+precision highp float;
+
+uniform float u_time;
+
+uniform vec4 u_colors[${dotOrbitMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_stepsPerColor;
+uniform float u_dotSize;
+uniform float u_dotSizeRange;
+uniform float u_spreading;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareRandom}
+${declareRotate}
+
+vec2 random2(vec2 p) {
+  return vec2(random(p), random(200. * p));
+}
+
+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 = random2(i_uv + tileOffset);
+      vec2 cellCenter = vec2(.5 + 1e-4);
+      cellCenter += spreading * cos(time + TWO_PI * rand);
+      cellCenter -= .5;
+      cellCenter = rotate(cellCenter, random(vec2(rand.x, rand.y)) + .1 * time);
+      cellCenter += .5;
+      float dist = length(tileOffset + cellCenter - f_uv);
+      if (dist < minDist) {
+        minDist = dist;
+        randomizer = rand;
+      }
+      minDist = min(minDist, dist);
+    }
+  }
+
+  return vec3(minDist, randomizer);
+}
+
+void main() {
+  
+  vec2 shape_uv = v_patternUV;
+  shape_uv += .5;
+  shape_uv *= .015;
+  
+  float t = u_time;
+
+  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;
+
+  float radius = .25 * clamp(u_dotSize, 0., 1.) - .5 * clamp(u_dotSizeRange, 0., 1.) * voronoi[2];
+  float dist = voronoi[0];
+  float edgeWidth = fwidth(dist);
+  float dots = 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);
+  }
+
+  gradient *= dots;
+  vec3 color = gradient.rgb;
+  float opacity = gradient.a;
+
+  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';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareRandom, declareRotate } from '../shader-utils';\n\nexport const dotOrbitMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Dot Pattern with dot moving around their grid position\n * The artwork by Ksenia Kondrashova\n * Renders a dot pattern with dot placed in the center of each cell of animated Voronoi diagram\n *\n * Uniforms include:\n * - u_colors (vec4[]): Input RGBA colors\n * - u_colorsCount (float): Number of active colors (`u_colors` length)\n * - u_stepsPerColor (float): Discretization of the color transition\n * - u_dotSize (float, 0 .. 1): Base dot radius (relative to cell size)\n * - u_dotSizeRange (float, 0 .. 1): Dot radius to vary between the cells\n * - u_spreading (float, 0 .. 1): the distance each dot can move around the regular grid\n */\nexport const dotOrbitFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${dotOrbitMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_dotSize;\nuniform float u_dotSizeRange;\nuniform float u_spreading;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRandom}\n${declareRotate}\n\nvec2 random2(vec2 p) {\n  return vec2(random(p), random(200. * p));\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 = random2(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, random(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      minDist = min(minDist, dist);\n    }\n  }\n\n  return vec3(minDist, randomizer);\n}\n\nvoid main() {\n  \n  vec2 shape_uv = v_patternUV;\n  shape_uv += .5;\n  shape_uv *= .015;\n  \n  float t = u_time;\n\n  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;\n\n  float radius = .25 * clamp(u_dotSize, 0., 1.) - .5 * clamp(u_dotSizeRange, 0., 1.) * voronoi[2];\n  float dist = voronoi[0];\n  float edgeWidth = fwidth(dist);\n  float dots = 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  gradient *= dots;\n  vec3 color = gradient.rgb;\n  float opacity = gradient.a;\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotOrbitUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_dotSize: number;\n  u_dotSizeRange: number;\n  u_spreading: number;\n  u_stepsPerColor: number;\n}\n\nexport interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  dotSize?: number;\n  dotSizeRange?: number;\n  spreading?: number;\n  stepsPerColor?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,qBAAqB;AAEjD,MAAM,eAAe;AAAA,EAC1B,eAAe;AACjB;AAeO,MAAM,yBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKtB,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOhD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA,EACb,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA0DS,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA;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/god-rays.d.ts

@@ -1,16 +1,8 @@
-export type GodRaysUniforms = {
-    u_offsetX: number;
-    u_offsetY: number;
-    u_colorBack: [number, number, number, number];
-    u_color1: [number, number, number, number];
-    u_color2: [number, number, number, number];
-    u_color3: [number, number, number, number];
-    u_spotty: number;
-    u_midSize: number;
-    u_midIntensity: number;
-    u_frequency: number;
-    u_density: number;
-    u_blending: number;
+import type { vec4 } from '../types';
+import type { ShaderMotionParams } from '../shader-mount';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+export declare const godRaysMeta: {
+    readonly maxColorCount: 5;
 };
 /**
  * GodRays pattern
@@ -19,17 +11,34 @@ export type GodRaysUniforms = {
  *
  * Uniforms include:
  *
- * u_offsetX - left / right pan
- * u_offsetY - up / down pan
- * u_colorBack - background RGBA color
- * u_color1 - ray color #1 (also main color of middle spot)
- * u_color2 - ray color #2
- * u_color3 - ray color #3
- * u_frequency - the frequency of rays (the number of sectors)
- * u_spotty - the density of spots in the rings (higher = more spots)
- * u_midSize - the size of the central shape within the rings
- * u_midIntensity - the influence of the central shape on the rings
- * u_density (0 .. 1) - the number of visible rays
- * u_blending (0 .. 1) - blending mode (0 for color mix, 1 for additive blending)
+ * - u_colorBack: background RGBA color
+ * - uColors (vec4[]): Input RGBA colors
+ * - u_frequency: the frequency of rays (the number of sectors)
+ * - u_spotty: the density of spots in the rings (higher = more spots)
+ * - u_midSize: the size of the central shape within the rings
+ * - u_midIntensity: the influence of the central shape on the rings
+ * - u_density (0 .. 1): the number of visible rays
+ * - u_blending (0 .. 1): normal / additive blending
  */
-export declare const godRaysFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\n\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform float u_frequency;\nuniform float u_spotty;\nuniform float u_midSize;\nuniform float u_midIntensity;\nuniform float u_density;\nuniform float u_blending;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n\nfloat random(vec2 uv) {\n  return fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nfloat noise(vec2 uv) {\n  vec2 i = floor(uv);\n  vec2 f = fract(uv);\n\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\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 get_noise_shape(vec2 uv, float r, float freq, float density, float time) {\n  uv = rotate(uv, .05 * time);\n  float a = atan(uv.y, uv.x);\n  r -= 3. * time;\n  vec2 left = vec2(a * freq, r);\n  vec2 right = vec2(mod(a, TWO_PI) * freq, r);\n  float n_left = pow(noise(left), density);\n  float n_right = pow(noise(right), density);\n  float shape = mix(n_right, n_left, smoothstep(-.2, .2, uv.x));\n  return shape;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  uv += vec2(-u_offsetX, u_offsetY);\n  uv.x *= ratio;\n\n  float t = .2 * u_time;\n\n  float radius = length(uv);\n  float spots = 4. * abs(u_spotty);\n  float density = 4. - 3. * clamp(u_density, 0., 1.);\n\n  float rays1 = get_noise_shape(uv, radius * spots, 5. * u_frequency, density, t);\n  rays1 *= get_noise_shape(uv, .5 + .75 * radius * spots, 4. * u_frequency, density, -.5 * t);\n  \n  float rays2 = get_noise_shape(uv, 1.5 * radius, 12. * u_frequency, density, t);\n  rays2 *= get_noise_shape(uv, -.5 + 1.1 * radius * spots, 7. * u_frequency, density, .75 * t);\n  \n  float rays3 = get_noise_shape(uv, 2. * radius * spots, 10. * u_frequency, density, t);\n  rays3 *= get_noise_shape(uv, 1.1 * radius, 12. * u_frequency, density, .2 * t);\n\n  float mid_shape = smoothstep(1. * abs(u_midSize), .05 * abs(u_midSize), radius);  \n  rays3 = mix(rays3, 1., (.5 + .5 * rays1) * u_midIntensity * pow(mid_shape, 7.));\n  rays2 = mix(rays2, 1., (.5 + .5 * rays3) * u_midIntensity * pow(mid_shape, 3.));\n  rays1 = mix(rays1, 1., u_midIntensity * pow(mid_shape, 5.));\n  \n  float opacity = rays2 * u_color2.a;\n  opacity += rays3 * u_color3.a;\n  opacity += rays1 * u_color1.a;\n  opacity += u_colorBack.a * (1.0 - rays1 * u_color1.a - rays2 * u_color2.a - rays3 * u_color3.a);\n  opacity = clamp(opacity, 0.0, 1.0);\n\n  vec3 added_color = u_colorBack.rgb * (1. - (rays1 + rays2 + rays3)) * u_colorBack.a;\n  added_color += u_color1.rgb * rays1 * u_color1.a;\n  added_color += u_color2.rgb * rays2 * u_color2.a;\n  added_color += u_color3.rgb * rays3 * u_color3.a;\n\n  added_color += u_colorBack.rgb * rays1 * (1.0 - u_color1.a) * u_colorBack.a;\n  added_color += u_colorBack.rgb * rays2 * (1.0 - u_color2.a) * u_colorBack.a;\n  added_color += u_colorBack.rgb * rays3 * (1.0 - u_color3.a) * u_colorBack.a;\n  \n  vec3 mixed_color = mix(u_colorBack.rgb * u_colorBack.a, u_color2.rgb, rays2 * u_color2.a);\n  mixed_color = mix(mixed_color, u_color3.rgb, rays3 * u_color3.a);\n  mixed_color = mix(mixed_color, u_color1.rgb, rays1 * u_color1.a);\n  \n  vec3 color = mix(mixed_color, added_color, clamp(u_blending, 0., 1.));\n  \n  fragColor = vec4(color, opacity);\n}\n";
+export declare const godRaysFragmentShader: string;
+export interface GodRaysUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_spotty: number;
+    u_midSize: number;
+    u_midIntensity: number;
+    u_frequency: number;
+    u_density: number;
+    u_blending: number;
+}
+export interface GodRaysParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
+    colors?: string[];
+    spotty?: number;
+    midSize?: number;
+    midIntensity?: number;
+    frequency?: number;
+    density?: number;
+    blending?: number;
+}

package/dist/shaders/god-rays.js

@@ -0,0 +1,134 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing";
+import { declarePI, declareRandom, declareRotate, colorBandingFix } from "../shader-utils";
+const godRaysMeta = {
+  maxColorCount: 5
+};
+const godRaysFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${godRaysMeta.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_frequency;
+uniform float u_spotty;
+uniform float u_midSize;
+uniform float u_midIntensity;
+uniform float u_density;
+uniform float u_blending;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareRandom}
+${declareRotate}
+
+float hash(float n) {
+  return fract(sin(n * 43758.5453123) * 43758.5453123);
+}
+
+float valueNoise(vec2 uv) {
+  vec2 i = floor(uv);
+  vec2 f = fract(uv);
+
+  float a = random(i);
+  float b = random(i + vec2(1.0, 0.0));
+  float c = random(i + vec2(0.0, 1.0));
+  float d = random(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 raysShape(vec2 uv, float r, float freq, float density, float radius) {
+  float a = atan(uv.y, uv.x);
+  vec2 left = vec2(a * freq, r);
+  vec2 right = vec2(mod(a, TWO_PI) * freq, r);
+  float n_left = pow(valueNoise(left), density);
+  float n_right = pow(valueNoise(right), density);
+  float shape = mix(n_right, n_left, smoothstep(-.15, .15, uv.x));
+  return shape;
+}
+
+void main() {
+  vec2 shape_uv = v_objectUV;
+
+  float t = .2 * u_time;
+
+  float radius = length(shape_uv);
+  float spots = 5. * abs(u_spotty);
+
+  float density = 4. - 3. * clamp(u_density, 0., 1.);
+
+  float delta = 1. - smoothstep(0., 1., radius);
+
+  float middleShape = pow(u_midIntensity, .3) * smoothstep(abs(u_midSize), 0.02 * abs(u_midSize), 3.0 * radius);
+  middleShape = pow(middleShape, 5.0);
+
+  vec3 accumColor = vec3(0.0);
+  float accumAlpha = 0.0;
+
+  for (int i = 0; i < ${godRaysMeta.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+
+    vec2 rotatedUV = rotate(shape_uv, float(i) + 1.0);
+
+    float r1 = radius * (1.0 + 0.4 * float(i)) - 3.0 * t;
+    float r2 = 0.5 * radius * (1.0 + spots) - 2.0 * t;
+    float f = mix(1.0, 3.0 + 0.5 * float(i), hash(float(i) + 10.0)) * u_frequency;
+
+    float ray = raysShape(rotatedUV, r1, 5.0 * f, density, radius);
+    ray *= raysShape(rotatedUV, r2, 4.0 * f, density, radius);
+    ray += (1. + 4. * ray) * middleShape;
+    ray = clamp(ray, 0.0, 1.0);
+
+    float srcAlpha = u_colors[i].a * ray;
+    vec3 srcColor = u_colors[i].rgb * srcAlpha;
+
+    vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * srcColor;
+    float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * srcAlpha;
+
+    vec3 addBlendColor = accumColor + srcColor;
+    float addBlendAlpha = accumAlpha + srcAlpha;
+
+    accumColor = mix(alphaBlendColor, addBlendColor, u_blending);
+    accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_blending);
+  }
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+
+  vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * bgColor;
+  float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * u_colorBack.a;
+
+  vec3 addBlendColor = accumColor + bgColor;
+  float addBlendAlpha = accumAlpha + u_colorBack.a;
+
+  accumColor = mix(alphaBlendColor, addBlendColor, u_blending);
+  accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_blending);
+
+  vec3 color = clamp(accumColor, 0.0, 1.0);
+  float opacity = clamp(accumAlpha, 0.0, 1.0);
+
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  godRaysFragmentShader,
+  godRaysMeta
+};
+//# sourceMappingURL=god-rays.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/god-rays.ts"],
+  "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareRandom, declareRotate, colorBandingFix } from '../shader-utils';\n\nexport const godRaysMeta = {\n  maxColorCount: 5,\n} as const;\n\n/**\n * GodRays pattern\n * The artwork by Ksenia Kondrashova\n * Renders a number of circular shapes with gooey effect applied\n *\n * Uniforms include:\n *\n * - u_colorBack: background RGBA color\n * - uColors (vec4[]): Input RGBA colors\n * - u_frequency: the frequency of rays (the number of sectors)\n * - u_spotty: the density of spots in the rings (higher = more spots)\n * - u_midSize: the size of the central shape within the rings\n * - u_midIntensity: the influence of the central shape on the rings\n * - u_density (0 .. 1): the number of visible rays\n * - u_blending (0 .. 1): normal / additive blending\n */\nexport const godRaysFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${godRaysMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_frequency;\nuniform float u_spotty;\nuniform float u_midSize;\nuniform float u_midIntensity;\nuniform float u_density;\nuniform float u_blending;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRandom}\n${declareRotate}\n\nfloat hash(float n) {\n  return fract(sin(n * 43758.5453123) * 43758.5453123);\n}\n\nfloat valueNoise(vec2 uv) {\n  vec2 i = floor(uv);\n  vec2 f = fract(uv);\n\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\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 raysShape(vec2 uv, float r, float freq, float density, float radius) {\n  float a = atan(uv.y, uv.x);\n  vec2 left = vec2(a * freq, r);\n  vec2 right = vec2(mod(a, TWO_PI) * freq, r);\n  float n_left = pow(valueNoise(left), density);\n  float n_right = pow(valueNoise(right), density);\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 = 5. * abs(u_spotty);\n\n  float density = 4. - 3. * clamp(u_density, 0., 1.);\n\n  float delta = 1. - smoothstep(0., 1., radius);\n\n  float middleShape = pow(u_midIntensity, .3) * smoothstep(abs(u_midSize), 0.02 * abs(u_midSize), 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 f = mix(1.0, 3.0 + 0.5 * float(i), hash(float(i) + 10.0)) * u_frequency;\n\n    float ray = raysShape(rotatedUV, r1, 5.0 * f, density, radius);\n    ray *= raysShape(rotatedUV, r2, 4.0 * f, density, 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_blending);\n    accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_blending);\n  }\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n\n  vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * bgColor;\n  float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * u_colorBack.a;\n\n  vec3 addBlendColor = accumColor + bgColor;\n  float addBlendAlpha = accumAlpha + u_colorBack.a;\n\n  accumColor = mix(alphaBlendColor, addBlendColor, u_blending);\n  accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_blending);\n\n  vec3 color = clamp(accumColor, 0.0, 1.0);\n  float opacity = clamp(accumAlpha, 0.0, 1.0);\n\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_colors: vec4[];\n  u_colorsCount: number;\n  u_spotty: number;\n  u_midSize: number;\n  u_midIntensity: number;\n  u_frequency: number;\n  u_density: number;\n  u_blending: number;\n}\n\nexport interface GodRaysParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  spotty?: number;\n  midSize?: number;\n  midIntensity?: number;\n  frequency?: number;\n  density?: number;\n  blending?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,eAAe,uBAAuB;AAElE,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAkBO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMrB,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA,EACb,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAkDS,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;AAAA,IA0C7C,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,25 @@
+import type { vec4 } from '../types';
+import type { ShaderMotionParams } from '../shader-mount';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+export declare const grainGradientMeta: {
+    readonly maxColorCount: 7;
+};
+/**
+ * Grainy Gradient Ksenia Kondrashova
+ */
+export declare const grainGradientFragmentShader: string;
+export interface GrainGradientUniforms extends ShaderSizingUniforms {
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_softness: number;
+    u_intensity: number;
+    u_noise: number;
+    u_shape: number;
+}
+export interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {
+    colors?: string[];
+    softness?: number;
+    intensity?: number;
+    noise?: number;
+    shape?: number;
+}