@paper-design/shaders 0.0.32 → 0.0.34

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.js';\nimport { declarePI, declareSimplexNoise } from '../shader-utils.js';\n\n/**\n * Static grid pattern\n *\n * Uniforms:\n * - u_colorBack, u_colorFill, u_colorStroke (vec4 RGBA)\n * - u_dotSize (px): base shape size\n * - u_sizeRange (0..1): randomizes the size of shape between 0 and u_dotSize\n * - u_strokeWidth (px): the stroke (to be added to u_dotSize)\n * - u_gapX, u_gapY (px): pattern spacing\n * - u_opacityRange (0..1): variety of shape opacity\n * - u_shape (float used as integer):\n *   ---- 1: circle\n *   ---- 2: square\n *   ---- 3: triangle\n *   ---- 4: diamond\n *   ---- 5: cross\n *\n */\n\nexport const dotGridFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gapX;\nuniform float u_gapY;\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_gapX, u_gapY)) + 1e-4;\n  vec2 grid_idx = floor(shape_uv / vec2(u_gapX, u_gapY));\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_gapX, u_gapY);\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 = 1. - p.y;\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, baseSize - edgeWidth, dist - strokeWidth);\n  float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);\n  float stroke = shapeOuter - shapeInner;\n\n  float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);\n  stroke *= dotOpacity;\n  shapeInner *= dotOpacity;\n\n  stroke *= u_colorStroke.a;\n  shapeInner *= u_colorFill.a;\n\n  vec3 color = vec3(0.);\n  color += stroke * u_colorStroke.rgb;\n  color += shapeInner * u_colorFill.rgb;\n  color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;\n\n  float opacity = 0.;\n  opacity += stroke;\n  opacity += shapeInner;\n  opacity += (1. - opacity) * u_colorBack.a;\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_gapX: number;\n  u_gapY: 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  size?: number;\n  gapX?: number;\n  gapY?: 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;AAqBxC,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkGd,MAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;",
+  "names": []
+}

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

@@ -1,24 +1,24 @@
-import type { vec4 } from '../types';
-import type { ShaderMotionParams } from '../shader-mount';
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 export declare const dotOrbitMeta: {
     readonly maxColorCount: 10;
 };
 /**
- * Dot Pattern with dot moving around their grid position
- * The artwork by Ksenia Kondrashova
- * Renders a dot pattern with dot placed in the center of each cell of animated Voronoi diagram
+ * Animated dot pattern with dots orbiting around their grid positions
+ *
+ * Uniforms:
+ * - u_colorBack (RGBA)
+ * - u_colors (vec4[]), u_colorsCount (float used as integer)
+ * - u_stepsPerColor: discrete color steps between u_colors
+ * - u_size (0..1): dot radius (relative to cell size)
+ * - u_sizeRange (0..1): randomizes dot radius between 0 and u_size
+ * - u_spreading (0..1): max orbit distance of each dot around the cell center
  *
- * Uniforms include:
- * - 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_size (float, 0 .. 1): Base dot radius (relative to cell size)
- * - u_sizeRange (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: string;
 export interface DotOrbitUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
     u_colors: vec4[];
     u_colorsCount: number;
     u_size: number;
@@ -27,6 +27,7 @@ export interface DotOrbitUniforms extends ShaderSizingUniforms {
     u_stepsPerColor: number;
 }
 export interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
     colors?: string[];
     size?: number;
     sizeRange?: number;

package/dist/shaders/dot-orbit.js

@@ -0,0 +1,124 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, declareRandom, declareRotate } from "../shader-utils.js";
+const dotOrbitMeta = {
+  maxColorCount: 10
+};
+const dotOrbitFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+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;
+
+${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_size, 0., 1.) - .5 * clamp(u_sizeRange, 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);
+  }
+
+  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 { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, declareRandom, declareRotate } from '../shader-utils.js';\n\nexport const dotOrbitMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Animated dot pattern with dots orbiting around their grid positions\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_stepsPerColor: discrete color steps between u_colors\n * - u_size (0..1): dot radius (relative to cell size)\n * - u_sizeRange (0..1): randomizes dot radius between 0 and u_size\n * - u_spreading (0..1): max orbit distance of each dot around the cell center\n *\n */\n\nexport const dotOrbitFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\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\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_size, 0., 1.) - .5 * clamp(u_sizeRange, 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  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}\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,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,qBAAqB;AAEjD,MAAM,eAAe;AAAA,EAC1B,eAAe;AACjB;AAeO,MAAM,yBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMtB,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;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -1,44 +1,43 @@
-import type { vec4 } from '../types';
-import type { ShaderMotionParams } from '../shader-mount';
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 export declare const godRaysMeta: {
     readonly maxColorCount: 5;
 };
 /**
- * GodRays pattern
- * The artwork by Ksenia Kondrashova
- * Renders a number of circular shapes with gooey effect applied
+ * Radial rays animated from center
  *
- * Uniforms include:
+ * 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
  *
- * - 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: string;
 export interface GodRaysUniforms extends ShaderSizingUniforms {
     u_colorBack: [number, number, number, number];
+    u_colorBloom: [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;
+    u_intensity: number;
+    u_bloom: number;
 }
 export interface GodRaysParams extends ShaderSizingParams, ShaderMotionParams {
     colorBack?: string;
+    colorBloom?: string;
     colors?: string[];
     spotty?: number;
     midSize?: number;
     midIntensity?: number;
-    frequency?: number;
     density?: number;
-    blending?: number;
+    intensity?: number;
+    bloom?: number;
 }

package/dist/shaders/god-rays.js

@@ -0,0 +1,118 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, declareRandom, declareRotate, declareValueNoise, colorBandingFix } from "../shader-utils.js";
+const godRaysMeta = {
+  maxColorCount: 5
+};
+const godRaysFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorBloom;
+uniform vec4 u_colors[${godRaysMeta.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_density;
+uniform float u_spotty;
+uniform float u_midSize;
+uniform float u_midIntensity;
+uniform float u_intensity;
+uniform float u_bloom;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareRandom}
+${declareRotate}
+${declareValueNoise}
+
+float hash(float n) {
+  return fract(sin(n * 43758.5453123) * 43758.5453123);
+}
+
+float raysShape(vec2 uv, float r, float freq, float intensity, 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), intensity);
+  float n_right = pow(valueNoise(right), intensity);
+  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 intensity = 4. - 3. * clamp(u_intensity, 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_density;
+
+    float ray = raysShape(rotatedUV, r1, 5.0 * f, intensity, radius);
+    ray *= raysShape(rotatedUV, r2, 4.0 * f, intensity, 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_bloom);
+    accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_bloom);
+  }
+
+  float overlayAlpha = u_colorBloom.a;
+  vec3 overlayColor = u_colorBloom.rgb * overlayAlpha;
+
+  vec3 colorWithOverlay = accumColor + accumAlpha * overlayColor;
+  accumColor = mix(accumColor, colorWithOverlay, u_bloom);
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+
+  vec3 color = accumColor + (1. - accumAlpha) * bgColor;
+  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;
+  color = clamp(color, 0., 1.);
+  opacity = clamp(opacity, 0., 1.);
+
+  ${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.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, declareRandom, declareRotate, declareValueNoise, colorBandingFix } 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 */\n\nexport const godRaysFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\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${declareRandom}\n${declareRotate}\n${declareValueNoise}\n\nfloat hash(float n) {\n  return fract(sin(n * 43758.5453123) * 43758.5453123);\n}\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(mod(a, 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 = 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 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_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}\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,eAAe,eAAe,mBAAmB,uBAAuB;AAErF,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAgBO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOrB,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,EACb,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAkCK,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,IAwC7C,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -1,14 +1,33 @@
-import type { vec4 } from '../types';
-import type { ShaderMotionParams } from '../shader-mount';
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 export declare const grainGradientMeta: {
     readonly maxColorCount: 7;
 };
 /**
- * Grainy Gradient Ksenia Kondrashova
+ * Multi-color gradient with noise & grain over animated abstract shapes
+ *
+ * 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
+ *
  */
 export declare const grainGradientFragmentShader: string;
 export interface GrainGradientUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
     u_colors: vec4[];
     u_colorsCount: number;
     u_softness: number;
@@ -17,6 +36,7 @@ export interface GrainGradientUniforms extends ShaderSizingUniforms {
     u_shape: (typeof GrainGradientShapes)[GrainGradientShape];
 }
 export interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
     colors?: string[];
     softness?: number;
     intensity?: number;

package/dist/shaders/grain-gradient.js

@@ -0,0 +1,226 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declareSimplexNoise, declarePI, declareRandom, declareValueNoise, colorBandingFix } from "../shader-utils.js";
+const grainGradientMeta = {
+  maxColorCount: 7
+};
+const grainGradientFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${grainGradientMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_softness;
+uniform float u_intensity;
+uniform float u_noise;
+uniform float u_shape;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareSimplexNoise}
+${declareRandom}
+${declareValueNoise}
+
+
+float rand(vec2 n) {
+  return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+}
+float noise(vec2 n) {
+  const vec2 d = vec2(0.0, 1.0);
+  vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
+  return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
+}
+float fbm_4(vec2 n) {
+  float total = 0.0, amplitude = .2;
+  for (int i = 0; i < 4; i++) {
+    total += noise(n) * amplitude;
+    n += n;
+    amplitude *= 0.6;
+  }
+  return total;
+}
+
+
+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;
+}
+
+void main() {
+
+  float t = .1 * u_time;
+
+  vec2 grain_uv = (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;
+  vec2 shape_uv = v_objectUV;
+  if (u_shape < 3.5) {
+    shape_uv = v_patternUV * .005;
+  }
+
+
+  float shape = 0.;
+
+  if (u_shape < 1.5) {
+    // Sine wave
+
+    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));
+    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);
+
+  } else if (u_shape < 2.5) {
+    // Grid (dots)
+
+    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);
+    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);
+
+    float speed = sign(rand - .5) * ceil(2. + rand);
+    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);
+    shape = pow(shape, 4.);
+
+  } else if (u_shape < 3.5) {
+    // Truchet pattern
+    
+    float n2 = valueNoise(shape_uv * .4 - 2.5 * t);
+    shape_uv.x += 10.;
+    shape_uv *= .6;
+
+    vec2 tile = truchet(fract(shape_uv), random(floor(shape_uv)));
+
+    float distance1 = length(tile);
+    float distance2 = length(tile - vec2(1.));
+
+    n2 -= .5;
+    n2 *= .1;
+    shape = smoothstep(.2, .55, distance1 + n2) * smoothstep(.8, .45, distance1 - n2);
+    shape += smoothstep(.2, .55, distance2 + n2) * smoothstep(.8, .45, distance2 - n2);
+
+    shape = pow(shape, 1.5);
+
+  } else if (u_shape < 4.5) {
+    // Corners
+
+    shape_uv *= .6;
+    vec2 outer = vec2(.5);
+
+    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * sin(3. * t)));
+    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);
+    shape = 1. - bl.x * bl.y * tr.x * tr.y;
+
+    shape_uv = -shape_uv;
+    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * cos(3. * t)));
+    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);
+    shape -= bl.x * bl.y * tr.x * tr.y;
+
+    shape = 1. - smoothstep(0., 1., shape);
+
+  } else if (u_shape < 5.5) {
+    // Ripple
+
+    shape_uv *= 2.;
+    float dist = length(.4 * shape_uv);
+    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;
+    shape = waves;
+
+  } else if (u_shape < 6.5) {
+    // Blob
+
+    t *= 2.;
+
+    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));
+    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));
+    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));
+    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));
+
+    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);
+    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);
+    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);
+    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);
+
+    shape = smoothstep(.0, .9, shape);
+    float edge = smoothstep(.25, .3, shape);
+    shape = mix(.0, shape, edge);
+
+  } else {
+    // Sphere
+
+    shape_uv *= 2.;
+    float d = length(shape_uv);
+    float z = sqrt(1.0 - clamp(pow(d, 2.0), 0.0, 1.0));
+    vec3 pos = vec3(shape_uv, z);
+    vec3 lightPos = normalize(vec3(cos(3. * t), 0.8, sin(2.5 * t)));
+    float lighting = dot(lightPos, pos);
+    float edge = smoothstep(1., .97, d);
+    shape = mix(.1, .5 + .5 * lighting, edge);
+  }
+
+  float snoise05 = snoise(grain_uv * .5);
+  float grainDist = snoise(grain_uv * .2) * snoise05 - fbm_4(.002 * grain_uv + 10.) - fbm_4(.003 * grain_uv);
+  float noise = clamp(.6 * snoise05 - fbm_4(.4 * grain_uv) - fbm_4(.001 * grain_uv), 0., 1.);
+
+  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);
+  shape += u_noise * 10. / u_colorsCount * noise;
+
+  float edge_w = fwidth(shape);
+
+  float mixer = shape * (u_colorsCount + 1.) / u_colorsCount;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+
+  for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {
+      if (i > int(u_colorsCount) - 1) break;
+
+      vec2 borders = vec2(float(i + 1) - u_softness - edge_w, float(i + 1) + u_softness + edge_w) / u_colorsCount;
+      float localT = smoothstep(borders[0], borders[1], mixer);
+      vec4 c = u_colors[i];
+      c.rgb *= c.a;
+      gradient = mix(gradient, c, localT);
+  }
+
+  vec2 borders = vec2(2. / (u_colorsCount - 1.));
+  borders = vec2(borders[0] - u_softness - edge_w, borders[1] + u_softness + edge_w) / u_colorsCount;
+  borders[0] = max(0., borders[0]);
+  float gradientShape = smoothstep(borders[0], borders[1], mixer);
+
+  vec3 color = gradient.rgb * gradientShape;
+  float opacity = gradient.a * gradientShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+const GrainGradientShapes = {
+  wave: 1,
+  dots: 2,
+  truchet: 3,
+  corners: 4,
+  ripple: 5,
+  blob: 6,
+  sphere: 7
+};
+export {
+  GrainGradientShapes,
+  grainGradientFragmentShader,
+  grainGradientMeta
+};
+//# sourceMappingURL=grain-gradient.js.map