shaders-oneshot 0.0.81-shared.1

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

@@ -0,0 +1,67 @@
+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;
+};
+/**
+ * Animated rays of light radiating from the center, blended with up to 5 colors.
+ *
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_colorBloom (vec4): Color overlay blended with the rays in RGBA, needs bloom > 0
+ * - u_colors (vec4[]): Up to 5 ray colors in RGBA
+ * - u_colorsCount (float): Number of active colors
+ * - u_bloom (float): Strength of the bloom/overlay effect, 0 = alpha blend, 1 = additive blend (0 to 1)
+ * - u_intensity (float): Visibility/strength of the rays (0 to 1)
+ * - u_density (float): The number of rays (0 to 1)
+ * - u_spotty (float): The length of the rays, higher = more spots/shorter rays (0 to 1)
+ * - u_midSize (float): Size of the circular glow shape in the center, needs midIntensity > 0 (0 to 1)
+ * - u_midIntensity (float): Brightness/intensity of the central glow, needs midSize > 0 (0 to 1)
+ * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied
+ *
+ * The rays are adjustable by size, density, brightness and center glow.
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ *
+ */
+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_density: number;
+    u_intensity: number;
+    u_bloom: number;
+    u_noiseTexture?: HTMLImageElement;
+}
+export interface GodRaysParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
+    colorBloom?: string;
+    colors?: string[];
+    spotty?: number;
+    midSize?: number;
+    midIntensity?: number;
+    density?: number;
+    intensity?: number;
+    bloom?: number;
+}

package/dist/shaders/god-rays.js

@@ -0,0 +1,133 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, rotation2, textureRandomizerR, colorBandingFix, proceduralHash11 } from "../shader-utils.js";
+const godRaysMeta = {
+  maxColorCount: 5
+};
+const godRaysFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform sampler2D u_noiseTexture;
+
+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;
+
+in vec2 v_objectUV;
+
+out vec4 fragColor;
+
+${declarePI}
+${rotation2}
+${textureRandomizerR}
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomR(i);
+  float b = randomR(i + vec2(1.0, 0.0));
+  float c = randomR(i + vec2(0.0, 1.0));
+  float d = randomR(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);
+}
+
+${proceduralHash11}
+
+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(fract(a / TWO_PI) * 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 = 6.5 * abs(u_spotty);
+
+  float intensity = 4. - 3. * clamp(u_intensity, 0., 1.);
+
+  float delta = 1. - smoothstep(0., 1., radius);
+
+  float midSize = 10. * abs(u_midSize);
+  float ms_lo = 0.02 * midSize;
+  float ms_hi = max(midSize, 1e-6);
+  float middleShape = pow(u_midIntensity, 0.3) * (1. - smoothstep(ms_lo, ms_hi, 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 density = 6. * u_density + step(.5, u_density) * pow(4.5 * (u_density - .5), 4.);
+    float f = mix(1.0, 3.0 + 0.5 * float(i), hash11(float(i) * 15.)) * 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';\r\nimport type { ShaderMotionParams } from '../shader-mount.js';\r\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { declarePI, rotation2, textureRandomizerR, colorBandingFix, proceduralHash11 } from '../shader-utils.js';\r\n\r\nexport const godRaysMeta = {\r\n  maxColorCount: 5,\r\n} as const;\r\n\r\n/**\r\n * Animated rays of light radiating from the center, blended with up to 5 colors.\r\n *\r\n * Fragment shader uniforms:\r\n * - u_time (float): Animation time\r\n * - u_colorBack (vec4): Background color in RGBA\r\n * - u_colorBloom (vec4): Color overlay blended with the rays in RGBA, needs bloom > 0\r\n * - u_colors (vec4[]): Up to 5 ray colors in RGBA\r\n * - u_colorsCount (float): Number of active colors\r\n * - u_bloom (float): Strength of the bloom/overlay effect, 0 = alpha blend, 1 = additive blend (0 to 1)\r\n * - u_intensity (float): Visibility/strength of the rays (0 to 1)\r\n * - u_density (float): The number of rays (0 to 1)\r\n * - u_spotty (float): The length of the rays, higher = more spots/shorter rays (0 to 1)\r\n * - u_midSize (float): Size of the circular glow shape in the center, needs midIntensity > 0 (0 to 1)\r\n * - u_midIntensity (float): Brightness/intensity of the central glow, needs midSize > 0 (0 to 1)\r\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\r\n *\r\n * The rays are adjustable by size, density, brightness and center glow.\r\n *\r\n * Vertex shader uniforms:\r\n * - u_resolution (vec2): Canvas resolution in pixels\r\n * - u_pixelRatio (float): Device pixel ratio\r\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\r\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\r\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\r\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\r\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\r\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\r\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\r\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\r\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\r\n *\r\n */\r\n\r\n// language=GLSL\r\nexport const godRaysFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform float u_time;\r\n\r\nuniform sampler2D u_noiseTexture;\r\n\r\nuniform vec4 u_colorBack;\r\nuniform vec4 u_colorBloom;\r\nuniform vec4 u_colors[${ godRaysMeta.maxColorCount }];\r\nuniform float u_colorsCount;\r\n\r\nuniform float u_density;\r\nuniform float u_spotty;\r\nuniform float u_midSize;\r\nuniform float u_midIntensity;\r\nuniform float u_intensity;\r\nuniform float u_bloom;\r\n\r\nin vec2 v_objectUV;\r\n\r\nout vec4 fragColor;\r\n\r\n${ declarePI }\r\n${ rotation2 }\r\n${ textureRandomizerR }\r\nfloat valueNoise(vec2 st) {\r\n  vec2 i = floor(st);\r\n  vec2 f = fract(st);\r\n  float a = randomR(i);\r\n  float b = randomR(i + vec2(1.0, 0.0));\r\n  float c = randomR(i + vec2(0.0, 1.0));\r\n  float d = randomR(i + vec2(1.0, 1.0));\r\n  vec2 u = f * f * (3.0 - 2.0 * f);\r\n  float x1 = mix(a, b, u.x);\r\n  float x2 = mix(c, d, u.x);\r\n  return mix(x1, x2, u.y);\r\n}\r\n\r\n${ proceduralHash11 }\r\n\r\nfloat raysShape(vec2 uv, float r, float freq, float intensity, float radius) {\r\n  float a = atan(uv.y, uv.x);\r\n  vec2 left = vec2(a * freq, r);\r\n  vec2 right = vec2(fract(a / TWO_PI) * TWO_PI * freq, r);\r\n  float n_left = pow(valueNoise(left), intensity);\r\n  float n_right = pow(valueNoise(right), intensity);\r\n  float shape = mix(n_right, n_left, smoothstep(-.15, .15, uv.x));\r\n  return shape;\r\n}\r\n\r\nvoid main() {\r\n  vec2 shape_uv = v_objectUV;\r\n\r\n  float t = .2 * u_time;\r\n\r\n  float radius = length(shape_uv);\r\n  float spots = 6.5 * abs(u_spotty);\r\n\r\n  float intensity = 4. - 3. * clamp(u_intensity, 0., 1.);\r\n\r\n  float delta = 1. - smoothstep(0., 1., radius);\r\n\r\n  float midSize = 10. * abs(u_midSize);\r\n  float ms_lo = 0.02 * midSize;\r\n  float ms_hi = max(midSize, 1e-6);\r\n  float middleShape = pow(u_midIntensity, 0.3) * (1. - smoothstep(ms_lo, ms_hi, 3.0 * radius));\r\n  middleShape = pow(middleShape, 5.0);\r\n\r\n  vec3 accumColor = vec3(0.0);\r\n  float accumAlpha = 0.0;\r\n\r\n  for (int i = 0; i < ${ godRaysMeta.maxColorCount }; i++) {\r\n    if (i >= int(u_colorsCount)) break;\r\n\r\n    vec2 rotatedUV = rotate(shape_uv, float(i) + 1.0);\r\n\r\n    float r1 = radius * (1.0 + 0.4 * float(i)) - 3.0 * t;\r\n    float r2 = 0.5 * radius * (1.0 + spots) - 2.0 * t;\r\n    float density = 6. * u_density + step(.5, u_density) * pow(4.5 * (u_density - .5), 4.);\r\n    float f = mix(1.0, 3.0 + 0.5 * float(i), hash11(float(i) * 15.)) * density;\r\n\r\n    float ray = raysShape(rotatedUV, r1, 5.0 * f, intensity, radius);\r\n    ray *= raysShape(rotatedUV, r2, 4.0 * f, intensity, radius);\r\n    ray += (1. + 4. * ray) * middleShape;\r\n    ray = clamp(ray, 0.0, 1.0);\r\n\r\n    float srcAlpha = u_colors[i].a * ray;\r\n    vec3 srcColor = u_colors[i].rgb * srcAlpha;\r\n\r\n    vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * srcColor;\r\n    float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * srcAlpha;\r\n\r\n    vec3 addBlendColor = accumColor + srcColor;\r\n    float addBlendAlpha = accumAlpha + srcAlpha;\r\n\r\n    accumColor = mix(alphaBlendColor, addBlendColor, u_bloom);\r\n    accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_bloom);\r\n  }\r\n\r\n  float overlayAlpha = u_colorBloom.a;\r\n  vec3 overlayColor = u_colorBloom.rgb * overlayAlpha;\r\n\r\n  vec3 colorWithOverlay = accumColor + accumAlpha * overlayColor;\r\n  accumColor = mix(accumColor, colorWithOverlay, u_bloom);\r\n\r\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\r\n\r\n  vec3 color = accumColor + (1. - accumAlpha) * bgColor;\r\n  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;\r\n  color = clamp(color, 0., 1.);\r\n  opacity = clamp(opacity, 0., 1.);\r\n\r\n  ${ colorBandingFix }\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface GodRaysUniforms extends ShaderSizingUniforms {\r\n  u_colorBack: [number, number, number, number];\r\n  u_colorBloom: [number, number, number, number];\r\n  u_colors: vec4[];\r\n  u_colorsCount: number;\r\n  u_spotty: number;\r\n  u_midSize: number;\r\n  u_midIntensity: number;\r\n  u_density: number;\r\n  u_intensity: number;\r\n  u_bloom: number;\r\n  u_noiseTexture?: HTMLImageElement;\r\n}\r\n\r\nexport interface GodRaysParams extends ShaderSizingParams, ShaderMotionParams {\r\n  colorBack?: string;\r\n  colorBloom?: string;\r\n  colors?: string[];\r\n  spotty?: number;\r\n  midSize?: number;\r\n  midIntensity?: number;\r\n  density?: number;\r\n  intensity?: number;\r\n  bloom?: number;\r\n}\r\n"],
+  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,WAAW,oBAAoB,iBAAiB,wBAAwB;AAErF,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAwCO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASpB,YAAY,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAchD,SAAU;AAAA,EACV,SAAU;AAAA,EACV,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcnB,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAiCK,YAAY,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAyC9C,eAAgB;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

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

package/dist/shaders/grain-gradient.js

@@ -0,0 +1,301 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {
+} from "../shader-sizing.js";
+import {
+  simplexNoise,
+  declarePI,
+  rotation2,
+  textureRandomizerR,
+  proceduralHash11
+} from "../shader-utils.js";
+const grainGradientMeta = {
+  maxColorCount: 7
+};
+const grainGradientFragmentShader = `#version 300 es
+precision lowp float;
+
+uniform mediump float u_time;
+uniform mediump vec2 u_resolution;
+uniform mediump float u_pixelRatio;
+
+uniform sampler2D u_noiseTexture;
+
+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;
+
+uniform mediump float u_worldWidth;
+uniform mediump float u_worldHeight;
+uniform mediump float u_fit;
+
+uniform mediump float u_scale;
+uniform mediump float u_rotation;
+uniform mediump float u_offsetX;
+uniform mediump float u_offsetY;
+
+in vec2 v_objectUV;
+in vec2 v_patternUV;
+in vec2 v_objectBoxSize;
+in vec2 v_patternBoxSize;
+
+out vec4 fragColor;
+
+${declarePI}
+${simplexNoise}
+${rotation2}
+${textureRandomizerR}
+
+float valueNoiseR(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomR(i);
+  float b = randomR(i + vec2(1.0, 0.0));
+  float c = randomR(i + vec2(0.0, 1.0));
+  float d = randomR(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);
+}
+vec4 fbmR(vec2 n0, vec2 n1, vec2 n2, vec2 n3) {
+  float amplitude = 0.2;
+  vec4 total = vec4(0.);
+  for (int i = 0; i < 3; i++) {
+    n0 = rotate(n0, 0.3);
+    n1 = rotate(n1, 0.3);
+    n2 = rotate(n2, 0.3);
+    n3 = rotate(n3, 0.3);
+    total.x += valueNoiseR(n0) * amplitude;
+    total.y += valueNoiseR(n1) * amplitude;
+    total.z += valueNoiseR(n2) * amplitude;
+    total.z += valueNoiseR(n3) * amplitude;
+    n0 *= 1.99;
+    n1 *= 1.99;
+    n2 *= 1.99;
+    n3 *= 1.99;
+    amplitude *= 0.6;
+  }
+  return total;
+}
+
+${proceduralHash11}
+
+vec2 truchet(vec2 uv, float idx){
+  idx = fract(((idx - .5) * 2.));
+  if (idx > 0.75) {
+    uv = vec2(1.0) - uv;
+  } else if (idx > 0.5) {
+    uv = vec2(1.0 - uv.x, uv.y);
+  } else if (idx > 0.25) {
+    uv = 1.0 - vec2(1.0 - uv.x, uv.y);
+  }
+  return uv;
+}
+
+void main() {
+
+  const float firstFrameOffset = 7.;
+  float t = .1 * (u_time + firstFrameOffset);
+
+  vec2 shape_uv = vec2(0.);
+  vec2 grain_uv = vec2(0.);
+
+  float r = u_rotation * PI / 180.;
+  float cr = cos(r);
+  float sr = sin(r);
+  mat2 graphicRotation = mat2(cr, sr, -sr, cr);
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
+  if (u_shape > 3.5) {
+    shape_uv = v_objectUV;
+    grain_uv = shape_uv;
+
+    // apply inverse transform to grain_uv so it respects the originXY
+    grain_uv = transpose(graphicRotation) * grain_uv;
+    grain_uv *= u_scale;
+    grain_uv -= graphicOffset;
+    grain_uv *= v_objectBoxSize;
+    grain_uv *= .7;
+  } else {
+    shape_uv = .5 * v_patternUV;
+    grain_uv = 100. * v_patternUV;
+
+    // apply inverse transform to grain_uv so it respects the originXY
+    grain_uv = transpose(graphicRotation) * grain_uv;
+    grain_uv *= u_scale;
+    if (u_fit > 0.) {
+      vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
+      givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
+      float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
+      vec2 patternBoxGivenSize = vec2(
+      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+      );
+      patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;
+      float patternBoxNoFitBoxWidth = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);
+      grain_uv /= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);
+    }
+    vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;
+    grain_uv -= graphicOffset / patternBoxScale;
+    grain_uv *= 1.6;
+  }
+
+
+  float shape = 0.;
+
+  if (u_shape < 1.5) {
+    // Sine wave
+
+    float wave = cos(.5 * shape_uv.x - 4. * t) * sin(1.5 * shape_uv.x + 2. * t) * (.75 + .25 * cos(6. * 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 = hash11(stripeIdx * 100.);
+    rand = sign(rand - .5) * pow(4. * abs(rand), .3);
+    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);
+    shape = pow(abs(shape), 4.);
+
+  } else if (u_shape < 3.5) {
+    // Truchet pattern
+
+    float n2 = valueNoiseR(shape_uv * .4 - 3.75 * t);
+    shape_uv.x += 10.;
+    shape_uv *= .6;
+
+    vec2 tile = truchet(fract(shape_uv), randomR(floor(shape_uv)));
+
+    float distance1 = length(tile);
+    float distance2 = length(tile - vec2(1.));
+
+    n2 -= .5;
+    n2 *= .1;
+    shape = smoothstep(.2, .55, distance1 + n2) * (1. - smoothstep(.45, .8, distance1 - n2));
+    shape += smoothstep(.2, .55, distance2 + n2) * (1. - smoothstep(.45, .8, 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(3. * t), .2 - .1 * sin(5.25 * 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(3. * t), .2 - .1 * cos(5.25 * 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 = 1. - pow(length(shape_uv), 2.);
+    vec3 pos = vec3(shape_uv, sqrt(max(d, 0.)));
+    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
+    shape = .5 + .5 * dot(lightPos, pos);
+    shape *= step(0., d);
+  }
+
+  float baseNoise = snoise(grain_uv * .5);
+  vec4 fbmVals = fbmR(
+  .002 * grain_uv + 10.,
+  .003 * grain_uv,
+  .001 * grain_uv,
+  rotate(.4 * grain_uv, 2.)
+  );
+  float grainDist = baseNoise * snoise(grain_uv * .2) - fbmVals.x - fbmVals.y;
+  float rawNoise = .75 * baseNoise - fbmVals.w - fbmVals.z;
+  float noise = clamp(rawNoise, 0., 1.);
+
+  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);
+  shape += u_noise * 10. / u_colorsCount * noise;
+
+  float aa = fwidth(shape);
+
+  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);
+  float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));
+  float mixer = shape * (u_colorsCount - 1.);
+
+  int cntStop = int(u_colorsCount) - 1;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {
+    if (i > cntStop) break;
+
+    float localT = clamp(mixer - float(i - 1), 0., 1.);
+    localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);
+
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, localT);
+  }
+
+  vec3 color = gradient.rgb * totalShape;
+  float opacity = gradient.a * totalShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  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

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

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