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

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

@@ -0,0 +1,49 @@
+import React from "react";
+/** Visual style of the shimmer. */
+export type ShimmerVariant = "text" | "surface";
+export interface ShimmerProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Element or component to render as. Lets Shimmer *be* the element instead of
+     * wrapping it (e.g. `as="h1"`).
+     * @default "span" for `variant="text"`, "div" for `variant="surface"`
+     */
+    as?: React.ElementType;
+    /**
+     * - `text` — muted glyphs with a brighter highlight band sweeping across
+     *   (the "AI thinking" look). Shimmers the text itself.
+     * - `surface` — a highlight band sweeps across the box; supply the placeholder
+     *   background via `className`.
+     * @default "text"
+     */
+    variant?: ShimmerVariant;
+    /**
+     * When `false`, renders the static base color with no sweep — useful to
+     * start/stop a "thinking" state without unmounting.
+     * @default true
+     */
+    active?: boolean;
+    /**
+     * Animation duration in seconds.
+     * @default 2
+     */
+    duration?: number;
+    /**
+     * Width of the highlight band, `0`–`100`. Lower = tighter, brighter streak.
+     * Only affects `variant="text"`.
+     * @default 20
+     */
+    spread?: number;
+    /**
+     * Base / dim color. Any CSS color or variable. Maps to `--shimmer-color`.
+     * @default var(--color-text-muted)
+     */
+    color?: string;
+    /**
+     * Sweep highlight color. Maps to `--shimmer-highlight` (text) or
+     * `--shimmer-surface-highlight` (surface).
+     */
+    highlightColor?: string;
+    /** Additional className for style overrides (shadcn pattern, wins). */
+    className?: string;
+    children?: React.ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { Shimmer } from "./Shimmer";
+export type { ShimmerProps, ShimmerVariant } from "./Shimmer.types";

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

@@ -0,0 +1,8 @@
+import React from "react";
+import type { SmokeRingProps } from "./SmokeRing.types";
+/**
+ * Animated turbulent smoke ring — a noise-distorted ring gradient. WebGL2-
+ * powered; falls back to a static CSS ring approximation when WebGL2 is
+ * unavailable or the user prefers reduced motion.
+ */
+export declare const SmokeRing: React.FC<SmokeRingProps>;

package/dist/components/effects/SmokeRing/SmokeRing.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 { smokeRingFragmentShader } from './SmokeRing.shaders.js';
+import { SMOKE_RING_MAX_COLORS } from './SmokeRing.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 turbulent smoke ring — a noise-distorted ring gradient. WebGL2-
+ * powered; falls back to a static CSS ring approximation when WebGL2 is
+ * unavailable or the user prefers reduced motion.
+ */
+const SmokeRing = ({ colorBack = DEFAULT_COLOR_BACK, colors = DEFAULT_COLORS, noiseScale = 1, thickness = 0.3, radius = 0.35, innerShape = 0.5, noiseIterations = 4, 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, SMOKE_RING_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 < SMOKE_RING_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_noiseScale = noiseScale;
+    uniformsRef.current.u_thickness = thickness;
+    uniformsRef.current.u_radius = radius;
+    uniformsRef.current.u_innerShape = innerShape;
+    uniformsRef.current.u_noiseIterations = noiseIterations;
+    uniformsRef.current.u_speed = speed;
+    const fallbackGradient = `radial-gradient(circle, transparent 30%, ${(_c = safeColors[Math.floor(safeColors.length / 2)]) !== null && _c !== void 0 ? _c : "var(--color-primary)"} 45%, transparent 60%), ${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: smokeRingFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
+};
+
+export { SmokeRing };

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

@@ -0,0 +1,14 @@
+/**
+ * SmokeRing fragment shader — adapted from paper-design/shaders'
+ * `smoke-ring.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. The color-ramp loop also
+ * adds an explicit `i > idxLast` bounds check so fewer than the maximum 10
+ * colors renders correctly (the unset trailing `u_colors[]` slots are never
+ * blended in).
+ */
+export declare const smokeRingFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[10];\nuniform float u_colorsCount;\n\nuniform float u_thickness;\nuniform float u_radius;\nuniform float u_innerShape;\nuniform float u_noiseScale;\nuniform float u_noiseIterations;\nuniform float u_speed;\n\nout vec4 fragColor;\n\n\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n\n\nfloat randomR(vec2 st) {\n  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);\n}\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\nvec2 fbm(vec2 n0, vec2 n1) {\n  vec2 total = vec2(0.0);\n  float amplitude = .4;\n  for (int i = 0; i < 8; i++) {\n    if (i >= int(u_noiseIterations)) break;\n    total.x += valueNoise(n0) * amplitude;\n    total.y += valueNoise(n1) * amplitude;\n    n0 *= 1.99;\n    n1 *= 1.99;\n    amplitude *= 0.65;\n  }\n  return total;\n}\n\nfloat getNoise(vec2 uv, vec2 pUv, float t) {\n  vec2 pUvLeft = pUv + .03 * t;\n  float period = max(abs(u_noiseScale * TWO_PI), 1e-6);\n  vec2 pUvRight = vec2(fract(pUv.x / period) * period, pUv.y) + .03 * t;\n  vec2 noiseVal = fbm(pUvLeft, pUvRight);\n  return mix(noiseVal.y, noiseVal.x, smoothstep(-.25, .25, uv.x));\n}\n\nfloat getRingShape(vec2 uv) {\n  float radius = u_radius;\n  float thickness = u_thickness;\n  float distance = length(uv);\n  float ringValue = 1. - smoothstep(radius, radius + thickness, distance);\n  ringValue *= smoothstep(radius - pow(u_innerShape, 3.) * thickness, radius, distance);\n  return ringValue;\n}\n\nvoid main() {\n  vec2 shape_uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n\n  float t = u_speed * iTime;\n  float cycleDuration = 3.;\n  float period2 = 2.0 * cycleDuration;\n  float localTime1 = fract((0.1 * t + cycleDuration) / period2) * period2;\n  float localTime2 = fract((0.1 * t) / period2) * period2;\n  float timeBlend = .5 + .5 * sin(.1 * t * PI / cycleDuration - .5 * PI);\n\n  float atg = atan(shape_uv.y, shape_uv.x) + .001;\n  float l = length(shape_uv);\n  float radialOffset = .5 * l - inversesqrt(max(1e-4, l));\n  vec2 polar_uv1 = vec2(atg, localTime1 - radialOffset) * u_noiseScale;\n  vec2 polar_uv2 = vec2(atg, localTime2 - radialOffset) * u_noiseScale;\n\n  float noise1 = getNoise(shape_uv, polar_uv1, t);\n  float noise2 = getNoise(shape_uv, polar_uv2, t);\n  float noiseVal = mix(noise1, noise2, timeBlend);\n\n  shape_uv *= (.8 + 1.2 * noiseVal);\n\n  float ringShape = getRingShape(shape_uv);\n\n  float mixer = ringShape * ringShape * (u_colorsCount - 1.);\n  int idxLast = int(u_colorsCount) - 1;\n  vec4 gradient = u_colors[idxLast];\n  gradient.rgb *= gradient.a;\n  for (int i = 9; i >= 0; i--) {\n    if (i > idxLast) continue;\n    float localT = clamp(mixer - float(idxLast - i - 1), 0., 1.);\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * ringShape;\n  float opacity = gradient.a * ringShape;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n";

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

@@ -0,0 +1,130 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslHashFloat } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * SmokeRing fragment shader — adapted from paper-design/shaders'
+ * `smoke-ring.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. The color-ramp loop also
+ * adds an explicit `i > idxLast` bounds check so fewer than the maximum 10
+ * colors renders correctly (the unset trailing `u_colors[]` slots are never
+ * blended in).
+ */
+const smokeRingFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[10];
+uniform float u_colorsCount;
+
+uniform float u_thickness;
+uniform float u_radius;
+uniform float u_innerShape;
+uniform float u_noiseScale;
+uniform float u_noiseIterations;
+uniform float u_speed;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslHashFloat}
+
+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);
+}
+
+vec2 fbm(vec2 n0, vec2 n1) {
+  vec2 total = vec2(0.0);
+  float amplitude = .4;
+  for (int i = 0; i < 8; i++) {
+    if (i >= int(u_noiseIterations)) break;
+    total.x += valueNoise(n0) * amplitude;
+    total.y += valueNoise(n1) * amplitude;
+    n0 *= 1.99;
+    n1 *= 1.99;
+    amplitude *= 0.65;
+  }
+  return total;
+}
+
+float getNoise(vec2 uv, vec2 pUv, float t) {
+  vec2 pUvLeft = pUv + .03 * t;
+  float period = max(abs(u_noiseScale * TWO_PI), 1e-6);
+  vec2 pUvRight = vec2(fract(pUv.x / period) * period, pUv.y) + .03 * t;
+  vec2 noiseVal = fbm(pUvLeft, pUvRight);
+  return mix(noiseVal.y, noiseVal.x, smoothstep(-.25, .25, uv.x));
+}
+
+float getRingShape(vec2 uv) {
+  float radius = u_radius;
+  float thickness = u_thickness;
+  float distance = length(uv);
+  float ringValue = 1. - smoothstep(radius, radius + thickness, distance);
+  ringValue *= smoothstep(radius - pow(u_innerShape, 3.) * thickness, radius, distance);
+  return ringValue;
+}
+
+void main() {
+  vec2 shape_uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+
+  float t = u_speed * iTime;
+  float cycleDuration = 3.;
+  float period2 = 2.0 * cycleDuration;
+  float localTime1 = fract((0.1 * t + cycleDuration) / period2) * period2;
+  float localTime2 = fract((0.1 * t) / period2) * period2;
+  float timeBlend = .5 + .5 * sin(.1 * t * PI / cycleDuration - .5 * PI);
+
+  float atg = atan(shape_uv.y, shape_uv.x) + .001;
+  float l = length(shape_uv);
+  float radialOffset = .5 * l - inversesqrt(max(1e-4, l));
+  vec2 polar_uv1 = vec2(atg, localTime1 - radialOffset) * u_noiseScale;
+  vec2 polar_uv2 = vec2(atg, localTime2 - radialOffset) * u_noiseScale;
+
+  float noise1 = getNoise(shape_uv, polar_uv1, t);
+  float noise2 = getNoise(shape_uv, polar_uv2, t);
+  float noiseVal = mix(noise1, noise2, timeBlend);
+
+  shape_uv *= (.8 + 1.2 * noiseVal);
+
+  float ringShape = getRingShape(shape_uv);
+
+  float mixer = ringShape * ringShape * (u_colorsCount - 1.);
+  int idxLast = int(u_colorsCount) - 1;
+  vec4 gradient = u_colors[idxLast];
+  gradient.rgb *= gradient.a;
+  for (int i = 9; i >= 0; i--) {
+    if (i > idxLast) continue;
+    float localT = clamp(mixer - float(idxLast - i - 1), 0., 1.);
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, localT);
+  }
+
+  vec3 color = gradient.rgb * ringShape;
+  float opacity = gradient.a * ringShape;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { smokeRingFragmentShader };

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

@@ -0,0 +1,22 @@
+import type React from "react";
+export declare const SMOKE_RING_MAX_COLORS = 10;
+export declare const SMOKE_RING_MAX_NOISE_ITERATIONS = 8;
+export interface SmokeRingProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Ring color ramp, up to 10. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** Turbulence scale of the ring's noise distortion. Default: 1. */
+    noiseScale?: number;
+    /** Ring thickness. Default: 0.3. */
+    thickness?: number;
+    /** Ring radius. Default: 0.35. */
+    radius?: number;
+    /** Inner-edge softness/shape, 0-1. Default: 0.5. */
+    innerShape?: number;
+    /** fbm octave count, 1-8 (higher = more detailed turbulence). Default: 4. */
+    noiseIterations?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

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

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

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

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { StaticGradientMeshProps } from "./StaticGradientMesh.types";
+/**
+ * Non-animated blob mesh gradient — a static arrangement of 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.
+ * Being static, it needs no `prefers-reduced-motion` handling.
+ */
+export declare const StaticGradientMesh: React.FC<StaticGradientMeshProps>;

package/dist/components/effects/StaticGradientMesh/StaticGradientMesh.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useRef } 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 { resolveShaderColors } from '../shared/resolveShaderColor.js';
+import { staticGradientMeshFragmentShader } from './StaticGradientMesh.shaders.js';
+import { STATIC_GRADIENT_MESH_MAX_COLORS } from './StaticGradientMesh.types.js';
+
+const DEFAULT_COLORS = ["var(--color-primary-300)", "var(--color-primary)", "var(--color-primary-700)"];
+function useWebgl2Supported() {
+    return useMemo(() => {
+        if (typeof document === "undefined")
+            return false;
+        try {
+            return !!document.createElement("canvas").getContext("webgl2");
+        }
+        catch (_a) {
+            return false;
+        }
+    }, []);
+}
+/**
+ * Non-animated blob mesh gradient — a static arrangement of 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.
+ * Being static, it needs no `prefers-reduced-motion` handling.
+ */
+const StaticGradientMesh = ({ colors = DEFAULT_COLORS, positions = 0, waveX = 0.3, waveXShift = 0, waveY = 0.3, waveYShift = 0, mixing = 0.5, grainMixer = 0.2, grainOverlay = 0.1, className, style, ...props }) => {
+    var _a, _b;
+    const isClient = useIsClient();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported();
+    const safeColors = colors.length > 0 ? colors.slice(0, STATIC_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 < STATIC_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_positions = positions;
+    uniformsRef.current.u_waveX = waveX;
+    uniformsRef.current.u_waveXShift = waveXShift;
+    uniformsRef.current.u_waveY = waveY;
+    uniformsRef.current.u_waveYShift = waveYShift;
+    uniformsRef.current.u_mixing = mixing;
+    uniformsRef.current.u_grainMixer = grainMixer;
+    uniformsRef.current.u_grainOverlay = grainOverlay;
+    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: staticGradientMeshFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
+};
+
+export { StaticGradientMesh };

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

@@ -0,0 +1,14 @@
+/**
+ * StaticGradientMesh fragment shader — adapted from paper-design/shaders'
+ * `static-mesh-gradient.ts` (https://github.com/paper-design/shaders, Apache
+ * License 2.0). Renamed from paper-design's "Static 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. Non-animated — a fixed
+ * `positions` seed substitutes for time, matching the original's design.
+ */
+export declare const staticGradientMeshFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform vec2 iResolution;\n\nuniform vec4 u_colors[10];\nuniform float u_colorsCount;\nuniform float u_positions;\nuniform float u_waveX;\nuniform float u_waveXShift;\nuniform float u_waveY;\nuniform float u_waveYShift;\nuniform float u_mixing;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\n\nout vec4 fragColor;\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 + mod(float(i), 3.) * .3;\n  float c = .8 + mod(float(i + 1), 4.) * 0.25;\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  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_waveX * center / i * cos(TWO_PI * u_waveXShift + i * 2. * smoothstep(.0, 1., uv.y));\n    uv.y += u_waveY * center / i * cos(TWO_PI * u_waveYShift + i * 2. * smoothstep(.0, 1., uv.x));\n  }\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n  float totalWeight = 0.;\n  float positionSeed = 25. + .33 * u_positions;\n\n  for (int i = 0; i < 10; i++) {\n    if (i >= int(u_colorsCount)) break;\n    vec2 pos = getPosition(i, positionSeed) + mixerGrain;\n    float dist = length(uv - pos);\n    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;\n    float opacityFraction = u_colors[i].a;\n\n    float mixing = pow(u_mixing, .7);\n    float power = mix(2., 1., mixing);\n    dist = pow(dist, power);\n\n    float w = 1. / (dist + 1e-3);\n    float baseSharpness = mix(.0, 8., clamp(w, 0., 1.));\n    float sharpness = mix(baseSharpness, 1., mixing);\n    w = pow(w, sharpness);\n    color += colorFraction * w;\n    opacity += opacityFraction * w;\n    totalWeight += w;\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";

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

@@ -0,0 +1,129 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslRotate2, glslHashFloat } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * StaticGradientMesh fragment shader — adapted from paper-design/shaders'
+ * `static-mesh-gradient.ts` (https://github.com/paper-design/shaders, Apache
+ * License 2.0). Renamed from paper-design's "Static 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. Non-animated — a fixed
+ * `positions` seed substitutes for time, matching the original's design.
+ */
+const staticGradientMeshFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec2 iResolution;
+
+uniform vec4 u_colors[10];
+uniform float u_colorsCount;
+uniform float u_positions;
+uniform float u_waveX;
+uniform float u_waveXShift;
+uniform float u_waveY;
+uniform float u_waveYShift;
+uniform float u_mixing;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+
+out vec4 fragColor;
+
+const float PI = 3.14159265359;
+const float TWO_PI = 6.28318530718;
+
+${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 + mod(float(i), 3.) * .3;
+  float c = .8 + mod(float(i + 1), 4.) * 0.25;
+  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);
+
+  float radius = smoothstep(0., 1., length(uv - .5));
+  float center = 1. - radius;
+  for (float i = 1.; i <= 2.; i++) {
+    uv.x += u_waveX * center / i * cos(TWO_PI * u_waveXShift + i * 2. * smoothstep(.0, 1., uv.y));
+    uv.y += u_waveY * center / i * cos(TWO_PI * u_waveYShift + i * 2. * smoothstep(.0, 1., uv.x));
+  }
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+  float totalWeight = 0.;
+  float positionSeed = 25. + .33 * u_positions;
+
+  for (int i = 0; i < 10; i++) {
+    if (i >= int(u_colorsCount)) break;
+    vec2 pos = getPosition(i, positionSeed) + mixerGrain;
+    float dist = length(uv - pos);
+    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;
+    float opacityFraction = u_colors[i].a;
+
+    float mixing = pow(u_mixing, .7);
+    float power = mix(2., 1., mixing);
+    dist = pow(dist, power);
+
+    float w = 1. / (dist + 1e-3);
+    float baseSharpness = mix(.0, 8., clamp(w, 0., 1.));
+    float sharpness = mix(baseSharpness, 1., mixing);
+    w = pow(w, sharpness);
+    color += colorFraction * w;
+    opacity += opacityFraction * w;
+    totalWeight += w;
+  }
+  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 { staticGradientMeshFragmentShader };

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

@@ -0,0 +1,23 @@
+import type React from "react";
+export declare const STATIC_GRADIENT_MESH_MAX_COLORS = 10;
+export interface StaticGradientMeshProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Blob colors (hex, rgb(), named, or var(--...)), up to 10. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** Seeds the (fixed) blob layout — change to get a different arrangement. Default: 0. */
+    positions?: number;
+    /** Horizontal wave warp strength. Default: 0.3. */
+    waveX?: number;
+    /** Horizontal wave phase shift, 0-1. Default: 0. */
+    waveXShift?: number;
+    /** Vertical wave warp strength. Default: 0.3. */
+    waveY?: number;
+    /** Vertical wave phase shift, 0-1. Default: 0. */
+    waveYShift?: number;
+    /** Blend sharpness between blobs, 0-1 (0 = sharp, 1 = soft). Default: 0.5. */
+    mixing?: 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;
+    className?: string;
+}

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

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

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

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { StaticRadialGradientProps } from "./StaticRadialGradient.types";
+/**
+ * Non-animated radial (conic-influenced) gradient — a soft radial color ramp
+ * with an optional angular light-source distortion and grain. WebGL2-
+ * powered; falls back to a static CSS radial-gradient when WebGL2 is
+ * unavailable. Being static, it needs no `prefers-reduced-motion` handling.
+ */
+export declare const StaticRadialGradient: React.FC<StaticRadialGradientProps>;

package/dist/components/effects/StaticRadialGradient/StaticRadialGradient.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useRef } 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 { resolveShaderColors, resolveShaderColor } from '../shared/resolveShaderColor.js';
+import { staticRadialGradientFragmentShader } from './StaticRadialGradient.shaders.js';
+import { STATIC_RADIAL_GRADIENT_MAX_COLORS } from './StaticRadialGradient.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() {
+    return useMemo(() => {
+        if (typeof document === "undefined")
+            return false;
+        try {
+            return !!document.createElement("canvas").getContext("webgl2");
+        }
+        catch (_a) {
+            return false;
+        }
+    }, []);
+}
+/**
+ * Non-animated radial (conic-influenced) gradient — a soft radial color ramp
+ * with an optional angular light-source distortion and grain. WebGL2-
+ * powered; falls back to a static CSS radial-gradient when WebGL2 is
+ * unavailable. Being static, it needs no `prefers-reduced-motion` handling.
+ */
+const StaticRadialGradient = ({ colorBack = DEFAULT_COLOR_BACK, colors = DEFAULT_COLORS, radius = 0.8, focalDistance = 1, focalAngle = 0, falloff = 0, mixing = 0.3, distortion = 0, distortionShift = 0, distortionFreq = 0, grainMixer = 0.1, grainOverlay = 0.05, className, style, ...props }) => {
+    var _a, _b;
+    const isClient = useIsClient();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported();
+    const safeColors = colors.length > 0 ? colors.slice(0, STATIC_RADIAL_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 < STATIC_RADIAL_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_radius = radius;
+    uniformsRef.current.u_focalDistance = focalDistance;
+    uniformsRef.current.u_focalAngle = focalAngle;
+    uniformsRef.current.u_falloff = falloff;
+    uniformsRef.current.u_mixing = mixing;
+    uniformsRef.current.u_distortion = distortion;
+    uniformsRef.current.u_distortionShift = distortionShift;
+    uniformsRef.current.u_distortionFreq = distortionFreq;
+    uniformsRef.current.u_grainMixer = grainMixer;
+    uniformsRef.current.u_grainOverlay = grainOverlay;
+    const fallbackGradient = `radial-gradient(circle, ${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: staticRadialGradientFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
+};
+
+export { StaticRadialGradient };