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

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

@@ -0,0 +1,181 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslRotate2 } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * GemSmoke fragment shader — adapted from paper-design/shaders'
+ * `gem-smoke.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.
+ *
+ * Image-input mode omitted: paper-design's `u_isImage` path expects a
+ * specially pre-processed texture (red channel = edge mask, green channel =
+ * alpha, read through a 9x9 Gaussian blur) rather than an ordinary photo —
+ * that pre-processing step is out of scope for this port. This ships the
+ * generative-shape modes only (none/circle/daisy/diamond/metaballs);
+ * image-driven logo mode may be added later alongside a documented
+ * preprocessing story.
+ */
+const gemSmokeFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colors[6];
+uniform float u_colorsCount;
+uniform vec4 u_colorBack;
+uniform vec4 u_colorInner;
+
+uniform float u_innerDistortion;
+uniform float u_outerDistortion;
+uniform float u_outerGlow;
+uniform float u_innerGlow;
+uniform float u_offset;
+uniform float u_angle;
+uniform float u_size;
+uniform float u_shape;
+uniform float u_speed;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslRotate2}
+
+float sst(float a, float b, float x) {
+  return smoothstep(a, b, x);
+}
+
+void main() {
+  float time = u_speed * iTime;
+
+  vec2 objectUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+  vec2 uv = objectUV + .5;
+  uv.y = 1. - uv.y;
+  float edge = 0.;
+
+  if (u_shape < 1.) {
+    vec2 borderUV = objectUV + .5;
+    vec2 mask = min(borderUV, 1. - borderUV);
+    vec2 pixel_thickness = min(250. / iResolution.xy, vec2(.5));
+    float maskX = pow(smoothstep(0.0, pixel_thickness.x, mask.x), .25);
+    float maskY = pow(smoothstep(0.0, pixel_thickness.y, mask.y), .25);
+    edge = clamp(1. - maskX * maskY, 0., 1.);
+  } else if (u_shape < 2.) {
+    vec2 shapeUV = (uv - .5) * .67;
+    edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);
+  } else if (u_shape < 3.) {
+    vec2 shapeUV = (uv - .5) * 1.68;
+    float r = length(shapeUV) * 2.;
+    float a = atan(shapeUV.y, shapeUV.x) + .2;
+    r *= (1. + .05 * sin(3. * a + 2. * time));
+    float f = abs(cos(a * 3.));
+    edge = smoothstep(f, f + .7, r);
+    edge *= edge;
+  } else if (u_shape < 4.) {
+    vec2 shapeUV = uv - .5;
+    shapeUV = rotate(shapeUV, .25 * PI);
+    shapeUV *= 1.42;
+    shapeUV += .5;
+    vec2 mask = min(shapeUV, 1. - shapeUV);
+    vec2 pixel_thickness = vec2(.15);
+    float maskX = pow(smoothstep(0.0, pixel_thickness.x, mask.x), .25);
+    float maskY = pow(smoothstep(0.0, pixel_thickness.y, mask.y), .25);
+    edge = clamp(1. - maskX * maskY, 0., 1.);
+  } else {
+    vec2 shapeUV = (uv - .5) * 1.3;
+    edge = 0.;
+    for (int i = 0; i < 5; i++) {
+      float fi = float(i);
+      float speed = 1.5 + 2. / 3. * sin(fi * 12.345);
+      float angle = -fi * 1.5;
+      vec2 dir1 = vec2(cos(angle), sin(angle));
+      vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));
+      vec2 traj = .4 * (dir1 * sin(time * speed + fi * 1.23) + dir2 * cos(time * (speed * 0.7) + fi * 2.17));
+      float d = length(shapeUV + traj);
+      edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);
+    }
+    edge = 1. - smoothstep(.65, .9, edge);
+    edge = pow(edge, 4.);
+  }
+
+  float imgAlpha = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge);
+  float roundness = 1. - edge;
+
+  vec2 smokeUV = objectUV;
+  smokeUV = rotate(smokeUV, u_angle * PI / 180.);
+  smokeUV *= mix(4., 1., u_size);
+
+  vec2 innerUV = smokeUV;
+  vec2 outerUV = smokeUV;
+
+  innerUV.y += u_innerDistortion * (1. - sst(0., 1., length(.4 * innerUV)));
+  innerUV.y -= .4 * u_innerDistortion;
+  innerUV.y += .7 * u_offset * roundness;
+
+  outerUV.y += u_outerDistortion * (1. - sst(0., 1., length(.4 * outerUV)));
+  outerUV.y -= .4 * u_outerDistortion;
+
+  float innerSwirl = u_innerDistortion * roundness;
+  float outerSwirl = u_outerDistortion;
+
+  for (int i = 1; i < 5; i++) {
+    float fi = float(i);
+
+    float stretchIn = max(length(dFdx(innerUV)), length(dFdy(innerUV)));
+    float dampenIn = 1. / (1. + stretchIn * 8.);
+    float sIn = innerSwirl * dampenIn;
+    innerUV.x += sIn / fi * cos(time + fi * 2.9 * innerUV.y);
+    innerUV.y += sIn / fi * cos(time + fi * 1.5 * innerUV.x);
+
+    float stretchOut = max(length(dFdx(outerUV)), length(dFdy(outerUV)));
+    float dampenOut = 1. / (1. + stretchOut * 8.);
+    float sOut = outerSwirl * dampenOut;
+    outerUV.x += sOut / fi * cos(time + fi * 2.9 * outerUV.y);
+    outerUV.y += sOut / fi * cos(time + fi * 1.5 * outerUV.x);
+  }
+
+  float innerShape = exp(-1.5 * dot(innerUV, innerUV));
+  float outerShape = exp(-1.5 * dot(outerUV, outerUV));
+
+  float outerMask = pow(u_outerGlow, 2.) * (1. - imgAlpha);
+  float innerMask = (.01 + .99 * u_innerGlow) * imgAlpha;
+
+  innerShape *= innerMask;
+  outerShape *= outerMask;
+
+  float mixer = (innerShape + outerShape) * u_colorsCount;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+
+  float smokeMask = 0.;
+  int cntStop = int(u_colorsCount);
+  for (int i = 1; i < 7; i++) {
+    if (i > cntStop) break;
+    float m = sst(0., 1., clamp(mixer - float(i - 1), 0., 1.));
+    if (i == 1) smokeMask = m;
+    vec4 c = u_colors[i - 1];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, m);
+  }
+
+  vec3 color = gradient.rgb * smokeMask;
+  float opacity = gradient.a * smokeMask;
+
+  float innerOpacity = u_colorInner.a * imgAlpha;
+  vec3 innerColor = u_colorInner.rgb * innerOpacity;
+  color += innerColor * (1.0 - opacity);
+  opacity += innerOpacity * (1.0 - opacity);
+
+  vec3 backColor = u_colorBack.rgb * u_colorBack.a;
+  color += backColor * (1.0 - opacity);
+  opacity += u_colorBack.a * (1.0 - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { gemSmokeFragmentShader };

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

@@ -0,0 +1,37 @@
+import type React from "react";
+export declare const GEM_SMOKE_MAX_COLORS = 6;
+export declare const GEM_SMOKE_SHAPES: {
+    readonly none: 0;
+    readonly circle: 1;
+    readonly daisy: 2;
+    readonly diamond: 3;
+    readonly metaballs: 4;
+};
+export type GemSmokeShape = keyof typeof GEM_SMOKE_SHAPES;
+export interface GemSmokeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Smoke color ramp, up to 6. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** Color of the inner core glow. Default: 'var(--color-primary-50)'. */
+    colorInner?: string;
+    /** Shape the inner glow is masked into. Default: 'circle'. */
+    shape?: GemSmokeShape;
+    /** Inner swirl distortion strength, 0-1+. Default: 0.5. */
+    innerDistortion?: number;
+    /** Outer swirl distortion strength, 0-1+. Default: 0.3. */
+    outerDistortion?: number;
+    /** Outer ambient glow strength, 0-1. Default: 0.5. */
+    outerGlow?: number;
+    /** Inner core glow strength, 0-1. Default: 0.8. */
+    innerGlow?: number;
+    /** Vertical offset of the inner glow. Default: 0. */
+    offset?: number;
+    /** Smoke field rotation, degrees. Default: 0. */
+    angle?: number;
+    /** Overall smoke scale. Default: 0.5. */
+    size?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

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

@@ -0,0 +1,10 @@
+const GEM_SMOKE_MAX_COLORS = 6;
+const GEM_SMOKE_SHAPES = {
+    none: 0,
+    circle: 1,
+    daisy: 2,
+    diamond: 3,
+    metaballs: 4,
+};
+
+export { GEM_SMOKE_MAX_COLORS, GEM_SMOKE_SHAPES };

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

@@ -0,0 +1,3 @@
+export { GemSmoke } from "./GemSmoke";
+export type { GemSmokeProps, GemSmokeShape } from "./GemSmoke.types";
+export { GEM_SMOKE_SHAPES } from "./GemSmoke.types";

package/dist/components/effects/GlassEffect/GlassEffect.js

@@ -22,7 +22,7 @@ const GlassEffect = ({ rounded = 'inherit', blendModeOuter = 'normal', blendMode
     // Default gradients with visible contrast on light backgrounds
     const defaultGradientOuter = 'linear-gradient(to bottom, #ffffff 0%, #e5e7eb 40%,  #ffffff 100%)';
     const defaultGradientInner = 'linear-gradient(to bottom, #edeff0 0%, #ffffff 100%)';
-    return (jsx("div", { className: cn("absolute inset-0 p-[1.5px] border-[1px] border-[var(--color-border)]", "pointer-events-none", // Don't block clicks
+    return (jsx("div", { "aria-hidden": "true", className: cn("absolute inset-0 p-[1.5px] border-[1px] border-[var(--color-border)]", "pointer-events-none", // Don't block clicks
         classNameOuter), style: {
             borderRadius: rounded,
             zIndex,

package/dist/components/effects/GlassSurface/GlassSurface.js

@@ -1,23 +1,9 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useId, useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 
-/**
- * Hook to detect dark mode preference
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof window === "undefined")
-            return;
-        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-        setIsDark(mediaQuery.matches);
-        const handler = (e) => setIsDark(e.matches);
-        mediaQuery.addEventListener("change", handler);
-        return () => mediaQuery.removeEventListener("change", handler);
-    }, []);
-    return isDark;
-};
 /**
  * GlassSurface Component
  * Creates a realistic chromatic aberration glass effect using SVG filters.

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

@@ -0,0 +1,8 @@
+import React from "react";
+import type { GodRaysProps } from "./GodRays.types";
+/**
+ * Animated volumetric light-ray burst radiating from center. WebGL2-
+ * powered; falls back to a static CSS conic-style gradient when WebGL2 is
+ * unavailable or the user prefers reduced motion.
+ */
+export declare const GodRays: React.FC<GodRaysProps>;

package/dist/components/effects/GodRays/GodRays.js

@@ -0,0 +1,68 @@
+"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 { godRaysFragmentShader } from './GodRays.shaders.js';
+import { GOD_RAYS_MAX_COLORS } from './GodRays.types.js';
+
+const DEFAULT_COLORS = ["var(--color-primary-300)", "var(--color-primary)", "var(--color-primary-700)"];
+const DEFAULT_COLOR_BACK = "var(--color-background)";
+const DEFAULT_COLOR_BLOOM = "var(--color-primary-100)";
+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 volumetric light-ray burst radiating from center. WebGL2-
+ * powered; falls back to a static CSS conic-style gradient when WebGL2 is
+ * unavailable or the user prefers reduced motion.
+ */
+const GodRays = ({ colorBack = DEFAULT_COLOR_BACK, colorBloom = DEFAULT_COLOR_BLOOM, colors = DEFAULT_COLORS, spotty = 0.3, midSize = 0.4, midIntensity = 0.5, density = 0.5, intensity = 0.5, bloom = 0.5, speed = 1, className, style, ...props }) => {
+    var _a, _b, _c;
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
+    const safeColors = colors.length > 0 ? colors.slice(0, GOD_RAYS_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 resolvedBloom = useMemo(() => resolveShaderColor(colorBloom), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorBloom, isDark]);
+    const uniformsRef = useRef({});
+    for (let i = 0; i < GOD_RAYS_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_colorBloom = resolvedBloom;
+    uniformsRef.current.u_spotty = spotty;
+    uniformsRef.current.u_midSize = midSize;
+    uniformsRef.current.u_midIntensity = midIntensity;
+    uniformsRef.current.u_density = density;
+    uniformsRef.current.u_intensity = intensity;
+    uniformsRef.current.u_bloom = bloom;
+    uniformsRef.current.u_speed = speed;
+    const fallbackGradient = `radial-gradient(circle, ${(_c = safeColors[safeColors.length - 1]) !== null && _c !== void 0 ? _c : "var(--color-primary)"}, ${colorBack} 70%)`;
+    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: godRaysFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
+};
+
+export { GodRays };

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

@@ -0,0 +1,10 @@
+/**
+ * GodRays fragment shader — adapted from paper-design/shaders' `god-rays.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.
+ */
+export declare const godRaysFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorBloom;\nuniform vec4 u_colors[5];\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;\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\nfloat hash11(float p) {\n  return randomR(vec2(p, p * 0.7919));\n}\n\nfloat valueNoise(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\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(fract(a / TWO_PI) * 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 = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n\n  float t = .2 * u_speed * iTime;\n  float radius = length(shape_uv);\n  float spots = 6.5 * abs(u_spotty);\n  float intensity = 4. - 3. * clamp(u_intensity, 0., 1.);\n\n  float midSize = 10. * abs(u_midSize);\n  float ms_lo = 0.02 * midSize;\n  float ms_hi = max(midSize, 1e-6);\n  float middleShape = pow(u_midIntensity, 0.3) * (1. - smoothstep(ms_lo, ms_hi, 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 < 5; 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 density = 6. * u_density + step(.5, u_density) * pow(4.5 * (u_density - .5), 4.);\n    float f = mix(1.0, 3.0 + 0.5 * float(i), hash11(float(i) * 15.)) * 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  fragColor = vec4(color, opacity);\n}\n";

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

@@ -0,0 +1,128 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslRotate2, glslHashFloat } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * GodRays fragment shader — adapted from paper-design/shaders' `god-rays.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.
+ */
+const godRaysFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorBloom;
+uniform vec4 u_colors[5];
+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;
+uniform float u_speed;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslRotate2}
+${glslHashFloat}
+
+float hash11(float p) {
+  return randomR(vec2(p, p * 0.7919));
+}
+
+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);
+}
+
+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 = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+
+  float t = .2 * u_speed * iTime;
+  float radius = length(shape_uv);
+  float spots = 6.5 * abs(u_spotty);
+  float intensity = 4. - 3. * clamp(u_intensity, 0., 1.);
+
+  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 < 5; 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.);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { godRaysFragmentShader };

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

@@ -0,0 +1,25 @@
+import type React from "react";
+export declare const GOD_RAYS_MAX_COLORS = 5;
+export interface GodRaysProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Additive highlight/bloom overlay color. Default: 'var(--color-primary-100)'. */
+    colorBloom?: string;
+    /** Ray colors, up to 5. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** How fragmented/spotty the rays look, 0-1+. Default: 0.3. */
+    spotty?: number;
+    /** Central glow size. Default: 0.4. */
+    midSize?: number;
+    /** Central glow intensity, 0-1. Default: 0.5. */
+    midIntensity?: number;
+    /** Ray density. Default: 0.5. */
+    density?: number;
+    /** Ray sharpness, 0-1. Default: 0.5. */
+    intensity?: number;
+    /** Additive-vs-alpha blend for overlapping rays, 0-1. Default: 0.5. */
+    bloom?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

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

@@ -0,0 +1,3 @@
+const GOD_RAYS_MAX_COLORS = 5;
+
+export { GOD_RAYS_MAX_COLORS };

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

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { GradientMeshProps } from "./GradientMesh.types";
+/**
+ * Animated blob mesh gradient — several drifting, weighted color blobs
+ * blended into a soft organic gradient, with subtle grain. WebGL2-powered;
+ * falls back to a static CSS gradient when WebGL2 is unavailable or the
+ * user prefers reduced motion.
+ */
+export declare const GradientMesh: React.FC<GradientMeshProps>;

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

@@ -0,0 +1,56 @@
+"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 } from '../shared/resolveShaderColor.js';
+import { gradientMeshFragmentShader } from './GradientMesh.shaders.js';
+import { GRADIENT_MESH_MAX_COLORS } from './GradientMesh.types.js';
+
+const DEFAULT_COLORS = ["var(--color-primary-300)", "var(--color-primary)", "var(--color-primary-700)"];
+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 blob mesh gradient — several drifting, weighted color blobs
+ * blended into a soft organic gradient, with subtle grain. WebGL2-powered;
+ * falls back to a static CSS gradient when WebGL2 is unavailable or the
+ * user prefers reduced motion.
+ */
+const GradientMesh = ({ colors = DEFAULT_COLORS, distortion = 0.4, swirl = 0.3, grainMixer = 0.2, grainOverlay = 0.1, 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, GRADIENT_MESH_MAX_COLORS) : DEFAULT_COLORS;
+    const resolvedColors = useMemo(() => resolveShaderColors(safeColors), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [safeColors.join("|"), isDark]);
+    const uniformsRef = useRef({});
+    for (let i = 0; i < GRADIENT_MESH_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_distortion = distortion;
+    uniformsRef.current.u_swirl = swirl;
+    uniformsRef.current.u_grainMixer = grainMixer;
+    uniformsRef.current.u_grainOverlay = grainOverlay;
+    uniformsRef.current.u_speed = speed;
+    const fallbackGradient = `linear-gradient(135deg, ${safeColors.join(", ")})`;
+    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: gradientMeshFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
+};
+
+export { GradientMesh };

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

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+export declare const gradientMeshFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colors[10];\nuniform float u_colorsCount;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\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\nfloat hash21(vec2 p) {\n  return randomR(p);\n}\n\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat noise(vec2 n, vec2 seedOffset) {\n  return valueNoise(n + seedOffset);\n}\n\nvec2 getPosition(int i, float t) {\n  float a = float(i) * .37;\n  float b = .6 + fract(float(i) / 3.) * .9;\n  float c = .8 + fract(float(i + 1) / 4.);\n  float x = sin(t * b + a);\n  float y = cos(t * c + a * 1.5);\n  return .5 + .5 * vec2(x, y);\n}\n\nvoid main() {\n  vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n  uv += .5;\n  vec2 grainUV = uv * 1000.;\n\n  float grain = noise(grainUV, vec2(0.));\n  float mixerGrain = .4 * u_grainMixer * (grain - .5);\n\n  const float firstFrameOffset = 41.5;\n  float t = .5 * u_speed * iTime + firstFrameOffset;\n\n  float radius = smoothstep(0., 1., length(uv - .5));\n  float center = 1. - radius;\n  for (float i = 1.; i <= 2.; i++) {\n    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));\n    uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., uv.x));\n  }\n\n  vec2 uvRotated = uv;\n  uvRotated -= vec2(.5);\n  float angle = 3. * u_swirl * radius;\n  uvRotated = rotate(uvRotated, -angle);\n  uvRotated += vec2(.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n  float totalWeight = 0.;\n\n  for (int i = 0; i < 10; i++) {\n    if (i >= int(u_colorsCount)) break;\n    vec2 pos = getPosition(i, t) + mixerGrain;\n    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;\n    float opacityFraction = u_colors[i].a;\n    float dist = length(uvRotated - pos);\n    dist = pow(dist, 3.5);\n    float weight = 1. / (dist + 1e-3);\n    color += colorFraction * weight;\n    opacity += opacityFraction * weight;\n    totalWeight += weight;\n  }\n  color /= max(1e-4, totalWeight);\n  opacity /= max(1e-4, totalWeight);\n\n  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));\n  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);\n  grainOverlay = pow(grainOverlay, 1.3);\n  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, .35 * grainOverlayStrength);\n  opacity += .5 * grainOverlayStrength;\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n";