@flikk/ui 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/components/effects/GradientMesh/GradientMesh.shaders.js

@@ -0,0 +1,127 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslRotate2, glslHashFloat } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * GradientMesh fragment shader — adapted from paper-design/shaders' `mesh-gradient.ts`
+ * (https://github.com/paper-design/shaders, Apache License 2.0). Renamed from
+ * paper-design's "Mesh Gradient" to avoid a naming collision with this
+ * library's existing `MeshGradient` (an unrelated SVG-based deterministic
+ * seed→blob avatar generator).
+ *
+ * Simplified from the original: plain centered/aspect-corrected UV
+ * (gl_FragCoord/iResolution) instead of paper-design's ShaderSizingParams
+ * fit/scale/rotation engine; pure-hash GLSL (see shared/shaderNoise.glsl.ts)
+ * instead of pre-generated noise-texture sampling. This shader's own UV
+ * convention already matched a roughly unit-scale range, so its magic
+ * numbers (grain UV *1000, distance^3.5, etc.) port over unchanged.
+ */
+const gradientMeshFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colors[10];
+uniform float u_colorsCount;
+uniform float u_distortion;
+uniform float u_swirl;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+uniform float u_speed;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslRotate2}
+${glslHashFloat}
+
+float hash21(vec2 p) {
+  return randomR(p);
+}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float noise(vec2 n, vec2 seedOffset) {
+  return valueNoise(n + seedOffset);
+}
+
+vec2 getPosition(int i, float t) {
+  float a = float(i) * .37;
+  float b = .6 + fract(float(i) / 3.) * .9;
+  float c = .8 + fract(float(i + 1) / 4.);
+  float x = sin(t * b + a);
+  float y = cos(t * c + a * 1.5);
+  return .5 + .5 * vec2(x, y);
+}
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+  uv += .5;
+  vec2 grainUV = uv * 1000.;
+
+  float grain = noise(grainUV, vec2(0.));
+  float mixerGrain = .4 * u_grainMixer * (grain - .5);
+
+  const float firstFrameOffset = 41.5;
+  float t = .5 * u_speed * iTime + firstFrameOffset;
+
+  float radius = smoothstep(0., 1., length(uv - .5));
+  float center = 1. - radius;
+  for (float i = 1.; i <= 2.; i++) {
+    uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., uv.y));
+    uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., uv.x));
+  }
+
+  vec2 uvRotated = uv;
+  uvRotated -= vec2(.5);
+  float angle = 3. * u_swirl * radius;
+  uvRotated = rotate(uvRotated, -angle);
+  uvRotated += vec2(.5);
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+  float totalWeight = 0.;
+
+  for (int i = 0; i < 10; i++) {
+    if (i >= int(u_colorsCount)) break;
+    vec2 pos = getPosition(i, t) + mixerGrain;
+    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;
+    float opacityFraction = u_colors[i].a;
+    float dist = length(uvRotated - pos);
+    dist = pow(dist, 3.5);
+    float weight = 1. / (dist + 1e-3);
+    color += colorFraction * weight;
+    opacity += opacityFraction * weight;
+    totalWeight += weight;
+  }
+  color /= max(1e-4, totalWeight);
+  opacity /= max(1e-4, totalWeight);
+
+  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
+  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
+  grainOverlay = pow(grainOverlay, 1.3);
+  float grainOverlayV = grainOverlay * 2. - 1.;
+  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
+  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
+  grainOverlayStrength = pow(grainOverlayStrength, .8);
+  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
+  opacity += .5 * grainOverlayStrength;
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { gradientMeshFragmentShader };

package/dist/components/effects/GradientMesh/GradientMesh.types.d.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+export declare const GRADIENT_MESH_MAX_COLORS = 10;
+export interface GradientMeshProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Blob colors (hex, rgb(), named, or var(--...)), up to 10. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** Domain-warp strength, 0-1+. Default: 0.4. */
+    distortion?: number;
+    /** Swirl/rotation strength, 0-1+. Default: 0.3. */
+    swirl?: number;
+    /** Grain influence on blob positions, 0-1. Default: 0.2. */
+    grainMixer?: number;
+    /** Post-composite grain overlay strength, 0-1. Default: 0.1. */
+    grainOverlay?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

package/dist/components/effects/GradientMesh/GradientMesh.types.js

@@ -0,0 +1,3 @@
+const GRADIENT_MESH_MAX_COLORS = 10;
+
+export { GRADIENT_MESH_MAX_COLORS };

package/dist/components/effects/GradientMesh/index.d.ts

@@ -0,0 +1,2 @@
+export { GradientMesh } from "./GradientMesh";
+export type { GradientMeshProps } from "./GradientMesh.types";

package/dist/components/effects/GrainGradient/GrainGradient.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { GrainGradientProps } from "./GrainGradient.types";
+/**
+ * Animated grainy color-band gradient — a shaped mask (corners/ripple/blob/
+ * sphere) blended through a colored ramp with a film-grain distortion.
+ * WebGL2-powered; falls back to a static CSS gradient when WebGL2 is
+ * unavailable or the user prefers reduced motion.
+ */
+export declare const GrainGradient: React.FC<GrainGradientProps>;

package/dist/components/effects/GrainGradient/GrainGradient.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useRef } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { cn } from '../../../utils/cn.js';
+import { ShaderCanvas } from '../shared/ShaderCanvas/ShaderCanvas.js';
+import { resolveShaderColors, resolveShaderColor } from '../shared/resolveShaderColor.js';
+import { grainGradientFragmentShader } from './GrainGradient.shaders.js';
+import { GRAIN_GRADIENT_MAX_COLORS, GRAIN_GRADIENT_SHAPES } from './GrainGradient.types.js';
+
+const DEFAULT_COLORS = ["var(--color-primary-300)", "var(--color-primary)", "var(--color-primary-700)"];
+const DEFAULT_COLOR_BACK = "var(--color-background)";
+function useWebgl2Supported(disabled) {
+    return useMemo(() => {
+        if (disabled || typeof document === "undefined")
+            return false;
+        try {
+            return !!document.createElement("canvas").getContext("webgl2");
+        }
+        catch (_a) {
+            return false;
+        }
+    }, [disabled]);
+}
+/**
+ * Animated grainy color-band gradient — a shaped mask (corners/ripple/blob/
+ * sphere) blended through a colored ramp with a film-grain distortion.
+ * WebGL2-powered; falls back to a static CSS gradient when WebGL2 is
+ * unavailable or the user prefers reduced motion.
+ */
+const GrainGradient = ({ colorBack = DEFAULT_COLOR_BACK, colors = DEFAULT_COLORS, shape = "blob", softness = 0.4, intensity = 0.3, noise = 0.15, speed = 1, className, style, ...props }) => {
+    var _a, _b;
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
+    const safeColors = colors.length > 0 ? colors.slice(0, GRAIN_GRADIENT_MAX_COLORS) : DEFAULT_COLORS;
+    const resolvedColors = useMemo(() => resolveShaderColors(safeColors), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [safeColors.join("|"), isDark]);
+    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorBack, isDark]);
+    const uniformsRef = useRef({});
+    for (let i = 0; i < GRAIN_GRADIENT_MAX_COLORS; i++) {
+        uniformsRef.current[`u_colors[${i}]`] =
+            (_b = (_a = resolvedColors[i]) !== null && _a !== void 0 ? _a : resolvedColors[resolvedColors.length - 1]) !== null && _b !== void 0 ? _b : [0, 0, 0, 0];
+    }
+    uniformsRef.current.u_colorsCount = resolvedColors.length;
+    uniformsRef.current.u_colorBack = resolvedBack;
+    uniformsRef.current.u_shape = GRAIN_GRADIENT_SHAPES[shape];
+    uniformsRef.current.u_softness = softness;
+    uniformsRef.current.u_intensity = intensity;
+    uniformsRef.current.u_noise = noise;
+    uniformsRef.current.u_speed = speed;
+    const fallbackGradient = `linear-gradient(135deg, ${safeColors.join(", ")}, ${colorBack})`;
+    return (jsx("div", { className: cn("absolute inset-0 overflow-hidden pointer-events-none select-none", className), style: style, "aria-hidden": "true", ...props, children: isClient && webglSupported ? (jsx(ShaderCanvas, { fragmentShader: grainGradientFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
+};
+
+export { GrainGradient };

package/dist/components/effects/GrainGradient/GrainGradient.shaders.d.ts

@@ -0,0 +1,17 @@
+/**
+ * GrainGradient fragment shader — adapted from paper-design/shaders'
+ * `grain-gradient.ts` (https://github.com/paper-design/shaders, Apache
+ * License 2.0).
+ *
+ * Simplified from the original: plain centered/aspect-corrected UV
+ * (gl_FragCoord/iResolution) instead of paper-design's ShaderSizingParams
+ * fit/scale/rotation engine; pure-hash GLSL (see shared/shaderNoise.glsl.ts)
+ * instead of pre-generated noise-texture sampling.
+ *
+ * Shape variants trimmed for v1: the original ships 7 (wave, dots, truchet,
+ * corners, ripple, blob, sphere) — this port ships 4 (corners, ripple, blob,
+ * sphere), the ones whose shape-space UV mapping is simplest to port onto a
+ * plain object-space UV without paper-design's separate pattern-tiling fit
+ * engine. wave/dots/truchet may be added later as a follow-up.
+ */
+export declare const grainGradientFragmentShader = "#version 300 es\nprecision lowp float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[7];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\nuniform float u_speed;\n\nout vec4 fragColor;\n\n\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n\n\nvec2 rotate(vec2 v, float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c) * v;\n}\n\n\nfloat randomR(vec2 st) {\n  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\n\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec3 permute(vec3 x) { return mod289(((x * 34.0) + 1.0) * x); }\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\n  vec2 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\n  i = mod289(i);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));\n\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n\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\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n\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}\n\n\nfloat valueNoiseR(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nvec4 fbmR(vec2 n0, vec2 n1, vec2 n2, vec2 n3) {\n  float amplitude = 0.2;\n  vec4 total = vec4(0.);\n  for (int i = 0; i < 3; i++) {\n    n0 = rotate(n0, 0.3);\n    n1 = rotate(n1, 0.3);\n    n2 = rotate(n2, 0.3);\n    n3 = rotate(n3, 0.3);\n    total.x += valueNoiseR(n0) * amplitude;\n    total.y += valueNoiseR(n1) * amplitude;\n    total.z += valueNoiseR(n2) * amplitude;\n    total.w += valueNoiseR(n3) * amplitude;\n    n0 *= 1.99;\n    n1 *= 1.99;\n    n2 *= 1.99;\n    n3 *= 1.99;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\nvoid main() {\n  const float firstFrameOffset = 7.;\n  float t = .1 * u_speed * iTime + firstFrameOffset;\n\n  vec2 shape_uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n  vec2 grain_uv = shape_uv * .7;\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // corners\n    shape_uv *= .6;\n    vec2 outer = vec2(.5);\n    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * sin(5.25 * t)));\n    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape = 1. - bl.x * bl.y * tr.x * tr.y;\n    shape_uv = -shape_uv;\n    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * cos(5.25 * t)));\n    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape -= bl.x * bl.y * tr.x * tr.y;\n    shape = 1. - smoothstep(0., 1., shape);\n  } else if (u_shape < 2.5) {\n    // ripple\n    shape_uv *= 2.;\n    float dist = length(.4 * shape_uv);\n    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n    shape = waves;\n  } else if (u_shape < 3.5) {\n    // blob\n    float t2 = t * 2.;\n    vec2 f1_traj = .25 * vec2(1.3 * sin(t2), .2 + 1.3 * cos(.6 * t2 + 4.));\n    vec2 f2_traj = .2 * vec2(1.2 * sin(-t2), 1.3 * sin(1.6 * t2));\n    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t2), cos(-1.6 * t2));\n    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t2), 1.2 * sin(-.6 * t2 - 3.));\n    shape = .5 * pow(1. - clamp(length(shape_uv + f1_traj), 0., 1.), 5.);\n    shape += .5 * pow(1. - clamp(length(shape_uv + f2_traj), 0., 1.), 5.);\n    shape += .5 * pow(1. - clamp(length(shape_uv + f3_traj), 0., 1.), 5.);\n    shape += .5 * pow(1. - clamp(length(shape_uv + f4_traj), 0., 1.), 5.);\n    shape = smoothstep(.0, .9, shape);\n    float edge = smoothstep(.25, .3, shape);\n    shape = mix(.0, shape, edge);\n  } else {\n    // sphere\n    shape_uv *= 2.;\n    float d = 1. - pow(length(shape_uv), 2.);\n    vec3 pos = vec3(shape_uv, sqrt(max(d, 0.)));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n    shape *= step(0., d);\n  }\n\n  float baseNoise = snoise(grain_uv * .5);\n  vec4 fbmVals = fbmR(\n    .002 * grain_uv + 10.,\n    .003 * grain_uv,\n    .001 * grain_uv,\n    rotate(.4 * grain_uv, 2.)\n  );\n  float grainDist = baseNoise * snoise(grain_uv * .2) - fbmVals.x - fbmVals.y;\n  float rawNoise = .75 * baseNoise - fbmVals.w - fbmVals.z;\n  float noiseVal = clamp(rawNoise, 0., 1.);\n\n  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n  shape += u_noise * 10. / u_colorsCount * noiseVal;\n\n  float aa = fwidth(shape);\n  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);\n  float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));\n  float mixer = shape * (u_colorsCount - 1.);\n\n  int cntStop = int(u_colorsCount) - 1;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < 7; i++) {\n    if (i > cntStop) break;\n    float localT = clamp(mixer - float(i - 1), 0., 1.);\n    localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * totalShape;\n  float opacity = gradient.a * totalShape;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/components/effects/GrainGradient/GrainGradient.shaders.js

@@ -0,0 +1,168 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslRotate2, glslHashFloat, glslSimplexNoise2D } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * GrainGradient fragment shader — adapted from paper-design/shaders'
+ * `grain-gradient.ts` (https://github.com/paper-design/shaders, Apache
+ * License 2.0).
+ *
+ * Simplified from the original: plain centered/aspect-corrected UV
+ * (gl_FragCoord/iResolution) instead of paper-design's ShaderSizingParams
+ * fit/scale/rotation engine; pure-hash GLSL (see shared/shaderNoise.glsl.ts)
+ * instead of pre-generated noise-texture sampling.
+ *
+ * Shape variants trimmed for v1: the original ships 7 (wave, dots, truchet,
+ * corners, ripple, blob, sphere) — this port ships 4 (corners, ripple, blob,
+ * sphere), the ones whose shape-space UV mapping is simplest to port onto a
+ * plain object-space UV without paper-design's separate pattern-tiling fit
+ * engine. wave/dots/truchet may be added later as a follow-up.
+ */
+const grainGradientFragmentShader = `#version 300 es
+precision lowp float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[7];
+uniform float u_colorsCount;
+uniform float u_softness;
+uniform float u_intensity;
+uniform float u_noise;
+uniform float u_shape;
+uniform float u_speed;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslRotate2}
+${glslHashFloat}
+${glslSimplexNoise2D}
+
+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.w += valueNoiseR(n3) * amplitude;
+    n0 *= 1.99;
+    n1 *= 1.99;
+    n2 *= 1.99;
+    n3 *= 1.99;
+    amplitude *= 0.6;
+  }
+  return total;
+}
+
+void main() {
+  const float firstFrameOffset = 7.;
+  float t = .1 * u_speed * iTime + firstFrameOffset;
+
+  vec2 shape_uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+  vec2 grain_uv = shape_uv * .7;
+
+  float shape = 0.;
+  if (u_shape < 1.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 < 2.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 < 3.5) {
+    // blob
+    float t2 = t * 2.;
+    vec2 f1_traj = .25 * vec2(1.3 * sin(t2), .2 + 1.3 * cos(.6 * t2 + 4.));
+    vec2 f2_traj = .2 * vec2(1.2 * sin(-t2), 1.3 * sin(1.6 * t2));
+    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t2), cos(-1.6 * t2));
+    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t2), 1.2 * sin(-.6 * t2 - 3.));
+    shape = .5 * pow(1. - clamp(length(shape_uv + f1_traj), 0., 1.), 5.);
+    shape += .5 * pow(1. - clamp(length(shape_uv + f2_traj), 0., 1.), 5.);
+    shape += .5 * pow(1. - clamp(length(shape_uv + f3_traj), 0., 1.), 5.);
+    shape += .5 * pow(1. - clamp(length(shape_uv + f4_traj), 0., 1.), 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 noiseVal = clamp(rawNoise, 0., 1.);
+
+  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);
+  shape += u_noise * 10. / u_colorsCount * noiseVal;
+
+  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 < 7; 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);
+}
+`;
+
+export { grainGradientFragmentShader };

package/dist/components/effects/GrainGradient/GrainGradient.types.d.ts

@@ -0,0 +1,26 @@
+import type React from "react";
+export declare const GRAIN_GRADIENT_MAX_COLORS = 7;
+export declare const GRAIN_GRADIENT_SHAPES: {
+    readonly corners: 1;
+    readonly ripple: 2;
+    readonly blob: 3;
+    readonly sphere: 4;
+};
+export type GrainGradientShape = keyof typeof GRAIN_GRADIENT_SHAPES;
+export interface GrainGradientProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Gradient ramp colors, up to 7. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** Underlying animated shape mask. Default: 'blob'. */
+    shape?: GrainGradientShape;
+    /** Blend softness between color stops, 0-1. Default: 0.4. */
+    softness?: number;
+    /** Grain-driven color-band distortion, 0-1+. Default: 0.3. */
+    intensity?: number;
+    /** Fine grain texture strength, 0-1. Default: 0.15. */
+    noise?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

package/dist/components/effects/GrainGradient/GrainGradient.types.js

@@ -0,0 +1,9 @@
+const GRAIN_GRADIENT_MAX_COLORS = 7;
+const GRAIN_GRADIENT_SHAPES = {
+    corners: 1,
+    ripple: 2,
+    blob: 3,
+    sphere: 4,
+};
+
+export { GRAIN_GRADIENT_MAX_COLORS, GRAIN_GRADIENT_SHAPES };

package/dist/components/effects/GrainGradient/index.d.ts

@@ -0,0 +1,3 @@
+export { GrainGradient } from "./GrainGradient";
+export type { GrainGradientProps, GrainGradientShape } from "./GrainGradient.types";
+export { GRAIN_GRADIENT_SHAPES } from "./GrainGradient.types";

package/dist/components/effects/GridPattern/GridPattern.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useId, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';

package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { HalftoneCmykProps } from "./HalftoneCmyk.types";
+/**
+ * CMYK halftone image filter — separates a source image into 4 classic
+ * print-screen-angled ink dot layers (cyan/magenta/yellow/black). WebGL2-
+ * powered; falls back to the plain source image (via `object-fit: cover`)
+ * when WebGL2 is unavailable. The most GPU-expensive effect in this
+ * library — avoid using it as a full-page background at low `size` values.
+ */
+export declare const HalftoneCmyk: React.FC<HalftoneCmykProps>;

package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useRef, useCallback } from 'react';
+import { useIsClient } from '../../../hooks/useIsClient.js';
+import 'motion/react';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { cn } from '../../../utils/cn.js';
+import { ShaderCanvas } from '../shared/ShaderCanvas/ShaderCanvas.js';
+import { resolveShaderColor } from '../shared/resolveShaderColor.js';
+import { halftoneCmykFragmentShader } from './HalftoneCmyk.shaders.js';
+
+const DEFAULT_COLOR_BACK = "var(--color-background)";
+const DEFAULT_COLOR_C = "#00b7eb";
+const DEFAULT_COLOR_M = "#e4007c";
+const DEFAULT_COLOR_Y = "#ffe800";
+const DEFAULT_COLOR_K = "var(--color-text-primary)";
+function useWebgl2Supported() {
+    return useMemo(() => {
+        if (typeof document === "undefined")
+            return false;
+        try {
+            return !!document.createElement("canvas").getContext("webgl2");
+        }
+        catch (_a) {
+            return false;
+        }
+    }, []);
+}
+/**
+ * CMYK halftone image filter — separates a source image into 4 classic
+ * print-screen-angled ink dot layers (cyan/magenta/yellow/black). WebGL2-
+ * powered; falls back to the plain source image (via `object-fit: cover`)
+ * when WebGL2 is unavailable. The most GPU-expensive effect in this
+ * library — avoid using it as a full-page background at low `size` values.
+ */
+const HalftoneCmyk = ({ image, colorBack = DEFAULT_COLOR_BACK, colorC = DEFAULT_COLOR_C, colorM = DEFAULT_COLOR_M, colorY = DEFAULT_COLOR_Y, colorK = DEFAULT_COLOR_K, size = 0.6, contrast = 1, softness = 0.3, gridNoise = 0.1, grainSize = 0.5, grainMixer = 0, grainOverlay = 0, floodC = 0, floodM = 0, floodY = 0, floodK = 0, gainC = 0, gainM = 0, gainY = 0, gainK = 0, className, style, ...props }) => {
+    const isClient = useIsClient();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported();
+    const [imageAspectRatio, setImageAspectRatio] = useState(16 / 9);
+    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), [colorBack, isDark]); // eslint-disable-line react-hooks/exhaustive-deps
+    const resolvedC = useMemo(() => resolveShaderColor(colorC), [colorC, isDark]); // eslint-disable-line react-hooks/exhaustive-deps
+    const resolvedM = useMemo(() => resolveShaderColor(colorM), [colorM, isDark]); // eslint-disable-line react-hooks/exhaustive-deps
+    const resolvedY = useMemo(() => resolveShaderColor(colorY), [colorY, isDark]); // eslint-disable-line react-hooks/exhaustive-deps
+    const resolvedK = useMemo(() => resolveShaderColor(colorK), [colorK, isDark]); // eslint-disable-line react-hooks/exhaustive-deps
+    const texturesRef = useRef({ u_image: image });
+    texturesRef.current.u_image = image;
+    const handleTextureLoad = useCallback((name, aspectRatio) => {
+        if (name === "u_image")
+            setImageAspectRatio(aspectRatio);
+    }, []);
+    const uniformsRef = useRef({});
+    uniformsRef.current.u_colorBack = resolvedBack;
+    uniformsRef.current.u_colorC = resolvedC;
+    uniformsRef.current.u_colorM = resolvedM;
+    uniformsRef.current.u_colorY = resolvedY;
+    uniformsRef.current.u_colorK = resolvedK;
+    uniformsRef.current.u_imageAspectRatio = imageAspectRatio;
+    uniformsRef.current.u_size = size;
+    uniformsRef.current.u_contrast = contrast;
+    uniformsRef.current.u_softness = softness;
+    uniformsRef.current.u_gridNoise = gridNoise;
+    uniformsRef.current.u_grainSize = grainSize;
+    uniformsRef.current.u_grainMixer = grainMixer;
+    uniformsRef.current.u_grainOverlay = grainOverlay;
+    uniformsRef.current.u_floodC = floodC;
+    uniformsRef.current.u_floodM = floodM;
+    uniformsRef.current.u_floodY = floodY;
+    uniformsRef.current.u_floodK = floodK;
+    uniformsRef.current.u_gainC = gainC;
+    uniformsRef.current.u_gainM = gainM;
+    uniformsRef.current.u_gainY = gainY;
+    uniformsRef.current.u_gainK = gainK;
+    const imageSrc = typeof image === "string" ? image : image.src;
+    return (jsx("div", { className: cn("absolute inset-0 overflow-hidden pointer-events-none select-none", className), style: style, "aria-hidden": "true", ...props, children: isClient && webglSupported ? (jsx(ShaderCanvas, { fragmentShader: halftoneCmykFragmentShader, uniformsRef: uniformsRef, texturesRef: texturesRef, onTextureLoad: handleTextureLoad })) : (jsx("img", { src: imageSrc, alt: "", className: "absolute inset-0 w-full h-full object-cover" })) }));
+};
+
+export { HalftoneCmyk };

package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.shaders.d.ts

@@ -0,0 +1,22 @@
+/**
+ * HalftoneCmyk fragment shader — adapted from paper-design/shaders'
+ * `halftone-cmyk.ts` (https://github.com/paper-design/shaders, Apache
+ * License 2.0). An image filter: separates a source image into 4
+ * classic-print-screen-angled CMYK halftone dot layers.
+ *
+ * Highest-complexity/cost effect in this port (up to ~36 texture reads per
+ * pixel across 4 channels × a 3×3 cell neighborhood) — build/verify last,
+ * most scrutiny, and keep the default `size` conservative.
+ *
+ * Trimmed for v1: paper-design's `ink`/`sharp` modes are omitted — this
+ * ships the `dots` mode only (separate, discrete halftone dots; the
+ * classic print look), which also lets this port drop the entire
+ * single-pixel-sample "sharp" code path and its `RGBAtoCMYK`/contrast
+ * machinery, cutting real per-pixel cost, not just API surface.
+ *
+ * Simplified from the original: image UV computed via the shared
+ * `getImageCoverUV` cover-fit helper (see shared/imageUV.glsl.ts) instead of
+ * paper-design's ShaderSizingParams fit engine; pure-hash GLSL instead of
+ * pre-generated noise-texture sampling.
+ */
+export declare const halftoneCmykFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform vec2 iResolution;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorC;\nuniform vec4 u_colorM;\nuniform vec4 u_colorY;\nuniform vec4 u_colorK;\nuniform float u_size;\nuniform float u_contrast;\nuniform float u_grainSize;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\nuniform float u_gridNoise;\nuniform float u_softness;\nuniform float u_floodC;\nuniform float u_floodM;\nuniform float u_floodY;\nuniform float u_floodK;\nuniform float u_gainC;\nuniform float u_gainM;\nuniform float u_gainY;\nuniform float u_gainK;\n\nout vec4 fragColor;\n\nconst float shiftC = -.5;\nconst float shiftM = -.25;\nconst float shiftY = .2;\nconst float shiftK = 0.;\n\nconst float cosC = 0.9659258;\nconst float sinC = 0.2588190;\nconst float cosM = 0.2588190;\nconst float sinM = 0.9659258;\nconst float cosY = 1.0;\nconst float sinY = 0.0;\nconst float cosK = 0.7071068;\nconst float sinK = 0.7071068;\n\n\nvec2 randomGB(vec2 st) {\n  return vec2(\n    fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123),\n    fract(sin(dot(st, vec2(93.9898, 67.345))) * 24634.6345123)\n  );\n}\n\n\nvec2 getImageCoverUV(vec2 fragUV, vec2 resolution, float imageAspectRatio) {\n  float containerAspect = resolution.x / resolution.y;\n  // Container wider (relative to its height) than the image: sample a\n  // narrower vertical slice of the image (crop top/bottom) so it fills the\n  // container width with no letterboxing. Container narrower/taller than\n  // the image: sample a narrower horizontal slice (crop left/right) instead.\n  vec2 scale = containerAspect > imageAspectRatio\n    ? vec2(1.0, imageAspectRatio / containerAspect)\n    : vec2(containerAspect / imageAspectRatio, 1.0);\n  return (fragUV - 0.5) * scale + 0.5;\n}\n\n\nvec3 hash23(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.3183099, 0.3678794, 0.3141592)) + 0.1;\n  p3 += dot(p3, p3.yzx + 19.19);\n  return fract(vec3(p3.x * p3.y, p3.y * p3.z, p3.z * p3.x));\n}\n\nfloat sst(float edge0, float edge1, float x) {\n  return smoothstep(edge0, edge1, x);\n}\n\nvec3 valueNoise3(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  vec3 a = hash23(i);\n  vec3 b = hash23(i + vec2(1.0, 0.0));\n  vec3 c = hash23(i + vec2(0.0, 1.0));\n  vec3 d = hash23(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  vec3 x1 = mix(a, b, u.x);\n  vec3 x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat getUvFrame(vec2 uv, vec2 pad) {\n  float left = smoothstep(-pad.x, 0., uv.x);\n  float right = smoothstep(1. + pad.x, 1., uv.x);\n  float bottom = smoothstep(-pad.y, 0., uv.y);\n  float top = smoothstep(1. + pad.y, 1., uv.y);\n  return left * right * bottom * top;\n}\n\nfloat getCyan(vec4 rgba) {\n  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\n  float maxRGB = max(max(c.r, c.g), c.b);\n  return (maxRGB > 1e-5 ? (maxRGB - c.r) / maxRGB : 0.) * rgba.a;\n}\nfloat getMagenta(vec4 rgba) {\n  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\n  float maxRGB = max(max(c.r, c.g), c.b);\n  return (maxRGB > 1e-5 ? (maxRGB - c.g) / maxRGB : 0.) * rgba.a;\n}\nfloat getYellow(vec4 rgba) {\n  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\n  float maxRGB = max(max(c.r, c.g), c.b);\n  return (maxRGB > 1e-5 ? (maxRGB - c.b) / maxRGB : 0.) * rgba.a;\n}\nfloat getBlack(vec4 rgba) {\n  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\n  return (1. - max(max(c.r, c.g), c.b)) * rgba.a;\n}\n\nvec2 cellCenterPos(vec2 uv, vec2 cellOffset, float channelIdx) {\n  vec2 cellCenter = floor(uv) + .5 + cellOffset;\n  return cellCenter + (randomGB(cellCenter + channelIdx * 50.) - .5) * u_gridNoise;\n}\n\nvec2 gridToImageUV(vec2 cellCenter, float cosA, float sinA, float shift, vec2 pad) {\n  vec2 uvGridToImage = mat2(cosA, -sinA, sinA, cosA) * (cellCenter - shift);\n  return uvGridToImage * pad + 0.5;\n}\n\nvoid colorMask(vec2 pos, vec2 cellCenter, float rad, float transparency, float grain, float channelAddon, float channelgain, float generalComp, inout float outMask) {\n  float dist = length(pos - cellCenter);\n\n  float radius = rad;\n  radius *= (1. + generalComp);\n  radius += (.15 + channelgain * radius);\n  radius = max(0., radius);\n  radius = mix(0., radius, transparency);\n  radius += channelAddon;\n  radius *= (1. - grain);\n\n  float mask = 1. - sst(0., radius, dist);\n  mask = sst(.5 - .5 * u_softness, .51 + .49 * u_softness, mask);\n  mask *= mix(1., mix(.5, 1., 1.5 * radius), u_softness);\n  outMask += mask;\n}\n\nvec3 applyInk(vec3 paper, vec3 inkColor, float cov) {\n  vec3 inkEffect = mix(vec3(1.0), inkColor, clamp(cov, 0.0, 1.0));\n  return paper * inkEffect;\n}\n\nvoid main() {\n  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;\n  vec2 uv = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);\n\n  float cellsPerSide = mix(400.0, 7.0, pow(u_size, 0.7));\n  float cellSizeY = 1.0 / cellsPerSide;\n  vec2 pad = cellSizeY * vec2(1.0 / u_imageAspectRatio, 1.0);\n  vec2 uvGrid = (uv - .5) / pad;\n  float insideImageBox = getUvFrame(uv, pad);\n\n  float generalComp = .1 * u_softness + .1 * u_gridNoise + .15;\n\n  vec2 uvC = mat2(cosC, sinC, -sinC, cosC) * uvGrid + shiftC;\n  vec2 uvM = mat2(cosM, sinM, -sinM, cosM) * uvGrid + shiftM;\n  vec2 uvY = mat2(cosY, sinY, -sinY, cosY) * uvGrid + shiftY;\n  vec2 uvK = mat2(cosK, sinK, -sinK, cosK) * uvGrid + shiftK;\n\n  vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);\n  vec2 grainUV = (fragUV - .5) * grainSize + .5;\n  vec3 noiseValues = valueNoise3(grainUV);\n  float grain = sst(.55, 1., noiseValues.r);\n  grain *= u_grainMixer;\n\n  vec4 outMask = vec4(0.);\n\n  for (int dy = -1; dy <= 1; dy++) {\n    for (int dx = -1; dx <= 1; dx++) {\n      vec2 cellOffset = vec2(float(dx), float(dy));\n\n      vec2 cellCenterC = cellCenterPos(uvC, cellOffset, 0.);\n      vec4 texC = texture(u_image, gridToImageUV(cellCenterC, cosC, sinC, shiftC, pad));\n      colorMask(uvC, cellCenterC, getCyan(texC), insideImageBox * texC.a, grain, u_floodC, u_gainC, generalComp, outMask[0]);\n\n      vec2 cellCenterM = cellCenterPos(uvM, cellOffset, 1.);\n      vec4 texM = texture(u_image, gridToImageUV(cellCenterM, cosM, sinM, shiftM, pad));\n      colorMask(uvM, cellCenterM, getMagenta(texM), insideImageBox * texM.a, grain, u_floodM, u_gainM, generalComp, outMask[1]);\n\n      vec2 cellCenterY = cellCenterPos(uvY, cellOffset, 2.);\n      vec4 texY = texture(u_image, gridToImageUV(cellCenterY, cosY, sinY, shiftY, pad));\n      colorMask(uvY, cellCenterY, getYellow(texY), insideImageBox * texY.a, grain, u_floodY, u_gainY, generalComp, outMask[2]);\n\n      vec2 cellCenterK = cellCenterPos(uvK, cellOffset, 3.);\n      vec4 texK = texture(u_image, gridToImageUV(cellCenterK, cosK, sinK, shiftK, pad));\n      colorMask(uvK, cellCenterK, getBlack(texK), insideImageBox * texK.a, grain, u_floodK, u_gainK, generalComp, outMask[3]);\n    }\n  }\n\n  float C = outMask[0] * u_colorC.a;\n  float M = outMask[1] * u_colorM.a;\n  float Y = outMask[2] * u_colorY.a;\n  float K = outMask[3] * u_colorK.a;\n\n  vec3 ink = vec3(1.);\n  ink = applyInk(ink, u_colorK.rgb, K);\n  ink = applyInk(ink, u_colorC.rgb, C);\n  ink = applyInk(ink, u_colorM.rgb, M);\n  ink = applyInk(ink, u_colorY.rgb, Y);\n\n  float shape = clamp(max(max(C, M), max(Y, K)), 0., 1.);\n\n  vec3 color = u_colorBack.rgb * u_colorBack.a;\n  float opacity = u_colorBack.a;\n  color = mix(color, ink, shape);\n  opacity += shape;\n  opacity = clamp(opacity, 0., 1.);\n\n  float grainOverlay = mix(noiseValues.g, noiseValues.b, .5);\n  grainOverlay = pow(grainOverlay, 1.3);\n  float grainOverlayV = grainOverlay * 2. - 1.;\n  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));\n  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);\n  grainOverlayStrength = pow(grainOverlayStrength, .8);\n  color = mix(color, grainOverlayColor, .5 * grainOverlayStrength);\n\n  opacity += .5 * grainOverlayStrength;\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n";