@flikk/ui 1.0.0-beta.3 → 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.d.ts

@@ -5,4 +5,4 @@ import { GlassSurfaceProps } from "./GlassSurface.types";
  * Creates a realistic chromatic aberration glass effect using SVG filters.
  * Works as a wrapper for any content.
  */
-export declare const GlassSurface: React.FC<GlassSurfaceProps>;
+export declare const GlassSurface: React.ForwardRefExoticComponent<GlassSurfaceProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,29 +1,15 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId, useState, useRef, useMemo, useEffect } from 'react';
+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.
  * Works as a wrapper for any content.
  */
-const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth = 0.07, brightness = 50, opacity = 0.93, blur = 11, displace = 0.7, backgroundOpacity = 0.1, backgroundColor, saturation = 1.8, distortionScale = -180, redOffset = 0, greenOffset = 10, blueOffset = 20, xChannel = "R", yChannel = "G", mixBlendMode = "difference", frosted = false, className = "", style = {}, }) => {
+const GlassSurface = React__default.forwardRef(({ children, width, height, borderRadius = 20, borderWidth = 0.07, brightness: brightnessProp, opacity: opacityProp, blur: blurProp, displace: displaceProp, backgroundOpacity: backgroundOpacityProp, backgroundColor, saturation: saturationProp, distortionScale: distortionScaleProp, redOffset = 0, greenOffset = 10, blueOffset = 20, xChannel = "R", yChannel = "G", mixBlendMode: mixBlendModeProp, colorScheme = "auto", backdropBrightness = 1, frosted = false, className = "", style = {}, }, forwardedRef) => {
     const uniqueId = useId().replace(/:/g, "-");
     const filterId = `glass-filter-${uniqueId}`;
     const redGradId = `red-grad-${uniqueId}`;
@@ -37,6 +23,19 @@ const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth
     const blueChannelRef = useRef(null);
     const gaussianBlurRef = useRef(null);
     const isDarkMode = useDarkMode();
+    const resolvedDark = colorScheme === "auto" ? isDarkMode : colorScheme === "dark";
+    // Theme-aware defaults: user-provided props always win
+    // Note: brightness/opacity control the displacement map center fill, NOT visual brightness.
+    // brightness=50 + opacity=1 = neutral center (no displacement), only edges refract.
+    // On light backgrounds, high displacement pulls in black out-of-bounds pixels → gray artifacts.
+    const brightness = brightnessProp !== null && brightnessProp !== void 0 ? brightnessProp : 50;
+    const opacity = opacityProp !== null && opacityProp !== void 0 ? opacityProp : (resolvedDark ? 0.93 : 1);
+    const blur = blurProp !== null && blurProp !== void 0 ? blurProp : 11;
+    const displace = displaceProp !== null && displaceProp !== void 0 ? displaceProp : 0.7;
+    const backgroundOpacity = backgroundOpacityProp !== null && backgroundOpacityProp !== void 0 ? backgroundOpacityProp : (resolvedDark ? 0.1 : 0);
+    const saturation = saturationProp !== null && saturationProp !== void 0 ? saturationProp : (resolvedDark ? 1.8 : 1.4);
+    const distortionScale = distortionScaleProp !== null && distortionScaleProp !== void 0 ? distortionScaleProp : (resolvedDark ? -180 : -40);
+    const mixBlendMode = mixBlendModeProp !== null && mixBlendModeProp !== void 0 ? mixBlendModeProp : (resolvedDark ? "difference" : "multiply");
     /**
      * Generates the SVG displacement map as a Data URI
      */
@@ -53,11 +52,11 @@ const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth
       <svg viewBox="0 0 ${actualWidth} ${actualHeight}" xmlns="http://www.w3.org/2000/svg">
         <defs>
           <linearGradient id="${redGradId}" x1="100%" y1="0%" x2="0%" y2="0%">
-            <stop offset="0%" stop-color="#0000"/>
+            <stop offset="0%" stop-color="#000"/>
             <stop offset="100%" stop-color="red"/>
           </linearGradient>
           <linearGradient id="${blueGradId}" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stop-color="#0000"/>
+            <stop offset="0%" stop-color="#000"/>
             <stop offset="100%" stop-color="blue"/>
           </linearGradient>
         </defs>
@@ -157,7 +156,7 @@ const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth
         const frostedBlur = frosted ? "blur(12px)" : "";
         if (svgSupported) {
             // Determine background color: use prop if provided, otherwise auto-detect based on theme
-            const bgColor = backgroundColor || (isDarkMode ? "hsl(0 0% 0%)" : "hsl(0 0% 100%)");
+            const bgColor = backgroundColor || (resolvedDark ? "hsl(0 0% 0%)" : "hsl(0 0% 100%)");
             // Convert color to rgba if needed to apply opacity
             const getBackgroundWithOpacity = () => {
                 // If backgroundOpacity is 0, return transparent
@@ -173,21 +172,20 @@ const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth
             return {
                 ...baseStyles,
                 background: getBackgroundWithOpacity(),
-                backdropFilter: `url(#${filterId}) ${frostedBlur} saturate(${saturation})`,
-                WebkitBackdropFilter: `url(#${filterId}) ${frostedBlur} saturate(${saturation})`,
+                backdropFilter: `url(#${filterId}) ${frostedBlur} brightness(${backdropBrightness}) saturate(${saturation})`,
+                WebkitBackdropFilter: `url(#${filterId}) ${frostedBlur} brightness(${backdropBrightness}) saturate(${saturation})`,
+                ...(!resolvedDark && { border: "1px solid rgba(0, 0, 0, 0.06)" }),
                 ...(hasCustomShadow
                     ? {}
                     : {
-                        boxShadow: isDarkMode
+                        boxShadow: resolvedDark
                             ? `0 0 2px 1px color-mix(in oklch, white, transparent 65%) inset,
                0 0 10px 4px color-mix(in oklch, white, transparent 85%) inset,
                0px 4px 16px rgba(17, 17, 26, 0.05),
                0px 8px 24px rgba(17, 17, 26, 0.05),
                0px 16px 56px rgba(17, 17, 26, 0.05)`
-                            : `0 0 1px 1px color-mix(in oklch, white, transparent 40%) inset,
-               0 0 12px 1px color-mix(in oklch, white, transparent 70%) inset,
-               0 8px 24px -12px rgba(0, 0, 0, 0.08),
-               0 4px 12px -4px rgba(0, 0, 0, 0.03)`,
+                            : `0 8px 24px -12px rgba(0, 0, 0, 0.08),
+               0 4px 12px -4px rgba(0, 0, 0, 0.04)`,
                     }),
             };
         }
@@ -197,9 +195,9 @@ const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth
             // Increase blur significantly for frosted mode in fallback
             const effectiveBlur = frosted ? "20px" : baseBlur;
             const fallbackSaturate = "1.8";
-            const fallbackBrightness = isDarkMode ? "1.2" : "1.1";
+            const fallbackBrightness = resolvedDark ? "1.2" : "1.1";
             const filterStr = `blur(${effectiveBlur}) saturate(${fallbackSaturate}) brightness(${fallbackBrightness})`;
-            if (isDarkMode) {
+            if (resolvedDark) {
                 return {
                     ...baseStyles,
                     background: supportsBackdrop
@@ -234,11 +232,19 @@ const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth
                 };
             }
         }
-    }, [style, width, height, borderRadius, frosted, svgSupported, backgroundColor, isDarkMode, backgroundOpacity, filterId, saturation, hasCustomShadow, supportsBackdrop]);
-    const focusVisibleClasses = isDarkMode
+    }, [style, width, height, borderRadius, frosted, svgSupported, backgroundColor, resolvedDark, backgroundOpacity, filterId, backdropBrightness, saturation, hasCustomShadow, supportsBackdrop]);
+    const focusVisibleClasses = resolvedDark
         ? "focus-visible:outline-2 focus-visible:outline-[#0A84FF] focus-visible:outline-offset-2"
         : "focus-visible:outline-2 focus-visible:outline-[#007AFF] focus-visible:outline-offset-2";
-    return (jsxs("div", { ref: containerRef, className: cn("relative transition-opacity duration-[260ms] ease-out", focusVisibleClasses, className), style: containerStyles, children: [jsx("svg", { className: "w-full h-full pointer-events-none absolute inset-0 opacity-0 -z-10", xmlns: "http://www.w3.org/2000/svg", children: jsxs("defs", { children: [jsxs("filter", { id: filterId, colorInterpolationFilters: "sRGB", x: "0%", y: "0%", width: "100%", height: "100%", children: [jsx("feImage", { ref: feImageRef, x: "0", y: "0", width: "100%", height: "100%", preserveAspectRatio: "none", result: "map" }), jsx("feDisplacementMap", { ref: redChannelRef, in: "SourceGraphic", in2: "map", id: "redchannel", result: "dispRed" }), jsx("feColorMatrix", { in: "dispRed", type: "matrix", values: "1 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "red" }), jsx("feDisplacementMap", { ref: greenChannelRef, in: "SourceGraphic", in2: "map", id: "greenchannel", result: "dispGreen" }), jsx("feColorMatrix", { in: "dispGreen", type: "matrix", values: "0 0 0 0 0\n                      0 1 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "green" }), jsx("feDisplacementMap", { ref: blueChannelRef, in: "SourceGraphic", in2: "map", id: "bluechannel", result: "dispBlue" }), jsx("feColorMatrix", { in: "dispBlue", type: "matrix", values: "0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 1 0 0\n                      0 0 0 1 0", result: "blue" }), jsx("feBlend", { in: "red", in2: "green", mode: "screen", result: "rg" }), jsx("feBlend", { in: "rg", in2: "blue", mode: "screen", result: "output" }), jsx("feGaussianBlur", { ref: gaussianBlurRef, in: "output", stdDeviation: "0.7" })] }), jsx("filter", { id: noiseFilterId, x: "0%", y: "0%", width: "100%", height: "100%", children: jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) })] }) }), jsx("div", { className: "relative z-10 rounded-[inherit]", children: children }), jsx("div", { className: "absolute inset-0 pointer-events-none rounded-[inherit] overflow-hidden z-20", children: frosted && (jsx("div", { className: "absolute inset-0 opacity-10 mix-blend-overlay", style: { filter: `url(#${noiseFilterId})` } })) })] }));
-};
+    const mergedRef = useCallback((node) => {
+        containerRef.current = node;
+        if (typeof forwardedRef === "function")
+            forwardedRef(node);
+        else if (forwardedRef)
+            forwardedRef.current = node;
+    }, [forwardedRef]);
+    return (jsxs("div", { ref: mergedRef, className: cn("relative transition-opacity duration-[260ms] ease-out", focusVisibleClasses, className), style: containerStyles, children: [jsx("svg", { className: "w-full h-full pointer-events-none absolute inset-0 opacity-0 -z-10", xmlns: "http://www.w3.org/2000/svg", children: jsxs("defs", { children: [jsxs("filter", { id: filterId, colorInterpolationFilters: "sRGB", x: "0%", y: "0%", width: "100%", height: "100%", children: [jsx("feImage", { ref: feImageRef, x: "0", y: "0", width: "100%", height: "100%", preserveAspectRatio: "none", result: "map" }), jsx("feDisplacementMap", { ref: redChannelRef, in: "SourceGraphic", in2: "map", result: "dispRed" }), jsx("feColorMatrix", { in: "dispRed", type: "matrix", values: "1 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "red" }), jsx("feDisplacementMap", { ref: greenChannelRef, in: "SourceGraphic", in2: "map", result: "dispGreen" }), jsx("feColorMatrix", { in: "dispGreen", type: "matrix", values: "0 0 0 0 0\n                      0 1 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "green" }), jsx("feDisplacementMap", { ref: blueChannelRef, in: "SourceGraphic", in2: "map", result: "dispBlue" }), jsx("feColorMatrix", { in: "dispBlue", type: "matrix", values: "0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 1 0 0\n                      0 0 0 1 0", result: "blue" }), jsx("feBlend", { in: "red", in2: "green", mode: "screen", result: "rg" }), jsx("feBlend", { in: "rg", in2: "blue", mode: "screen", result: "output" }), jsx("feGaussianBlur", { ref: gaussianBlurRef, in: "output", stdDeviation: "0.7" })] }), jsx("filter", { id: noiseFilterId, x: "0%", y: "0%", width: "100%", height: "100%", children: jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) })] }) }), jsx("div", { className: "relative z-10 h-full rounded-[inherit]", children: children }), jsx("div", { className: "absolute inset-0 pointer-events-none rounded-[inherit] overflow-hidden z-20", children: frosted && (jsx("div", { className: "absolute inset-0 opacity-10 mix-blend-overlay", style: { filter: `url(#${noiseFilterId})` } })) })] }));
+});
+GlassSurface.displayName = "GlassSurface";
 
 export { GlassSurface };

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

@@ -40,6 +40,20 @@ export interface GlassSurfaceProps {
     yChannel?: GlassChannel;
     /** Blend mode for the internal gradient layers */
     mixBlendMode?: GlassMixBlendMode;
+    /**
+     * Color scheme for the glass effect. Controls theme-aware defaults.
+     * - 'auto': detects system preference (default)
+     * - 'dark': force dark mode defaults
+     * - 'light': force light mode defaults
+     * @default 'auto'
+     */
+    colorScheme?: "auto" | "dark" | "light";
+    /**
+     * Brightness multiplier for the backdrop-filter chain.
+     * Values > 1 brighten, < 1 darken. Only applies when SVG filters are supported.
+     * @default 1
+     */
+    backdropBrightness?: number;
     /**
      * Enable frosted glass effect with noise texture
      * @default false

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 };