@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -3,13 +3,7 @@ import type { CSSProperties } from 'react';
 import type { DisplacementMode, MousePosition, GlassSize } from '../../lib/types/components';
 import type { FragmentShaderType } from './shader-utils';
 import { GlassFilter } from './GlassFilter';
-import {
-  calculateElementCenter,
-  calculateDistance,
-  calculateMouseInfluence,
-  clampBlur,
-  validateGlassSize,
-} from './glass-utils';
+import { calculateMouseInfluence, clampBlur, validateGlassSize } from './glass-utils';
 import { ATOMIX_GLASS } from '../../lib/constants/components';
 
 const { CONSTANTS } = ATOMIX_GLASS;
@@ -58,7 +52,9 @@ const setCachedShader = (key: string, url: string): void => {
   // Development mode: log cache size
   if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {
     if (sharedShaderCache.size >= MAX_CACHE_SIZE * 0.8) {
-      console.log(`AtomixGlass: Shader cache size: ${String(sharedShaderCache.size).replace(/[\r\n]/g, '')}/${String(MAX_CACHE_SIZE).replace(/[\r\n]/g, '')}`);
+      console.log(
+        `AtomixGlass: Shader cache size: ${String(sharedShaderCache.size).replace(/[\r\n]/g, '')}/${String(MAX_CACHE_SIZE).replace(/[\r\n]/g, '')}`
+      );
     }
   }
 };
@@ -76,10 +72,15 @@ interface AtomixGlassContainerProps {
   onMouseEnter?: () => void;
   onMouseDown?: () => void;
   onMouseUp?: () => void;
-  active?: boolean;
   isHovered?: boolean;
   isActive?: boolean;
   overLight?: boolean;
+  overLightConfig?: {
+    contrast?: number;
+    brightness?: number;
+    shadowIntensity?: number;
+    borderOpacity?: number;
+  };
   cornerRadius?: number;
   padding?: string;
   glassSize?: GlassSize;
@@ -115,10 +116,10 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       onMouseLeave,
       onMouseDown,
       onMouseUp,
-      active = false,
       isHovered = false,
       isActive = false,
       overLight = false,
+      overLightConfig = {},
       cornerRadius = 0,
       padding = '0 0',
       glassSize = { width: 0, height: 0 },
@@ -153,14 +154,19 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     useEffect(() => {
       if (mode === 'shader') {
         // Dynamic import shader utilities
-        import('./shader-utils').then((shaderUtils) => {
-          shaderUtilsRef.current = {
-            ShaderDisplacementGenerator: shaderUtils.ShaderDisplacementGenerator,
-            fragmentShaders: shaderUtils.fragmentShaders,
-          };
-        }).catch((error) => {
-          console.warn('AtomixGlassContainer: Error loading shader utilities', String(error).replace(/[\r\n]/g, ''));
-        });
+        import('./shader-utils')
+          .then(shaderUtils => {
+            shaderUtilsRef.current = {
+              ShaderDisplacementGenerator: shaderUtils.ShaderDisplacementGenerator,
+              fragmentShaders: shaderUtils.fragmentShaders,
+            };
+          })
+          .catch(error => {
+            console.warn(
+              'AtomixGlassContainer: Error loading shader utilities',
+              String(error).replace(/[\r\n]/g, '')
+            );
+          });
       } else {
         // Clear shader utils when not in shader mode to free memory
         shaderUtilsRef.current = null;
@@ -170,7 +176,12 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     // Generate shader map with debouncing and caching
     useEffect(() => {
       // Enhanced validation for shader mode
-      if (mode === 'shader' && glassSize && validateGlassSize(glassSize) && shaderUtilsRef.current) {
+      if (
+        mode === 'shader' &&
+        glassSize &&
+        validateGlassSize(glassSize) &&
+        shaderUtilsRef.current
+      ) {
         // Create cache key from size and variant
         const cacheKey = `${glassSize.width}x${glassSize.height}-${shaderVariant}`;
 
@@ -262,11 +273,13 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     const EDGE_BLUR_MULTIPLIER = 1.25;
     const CENTER_BLUR_MULTIPLIER = 1.1;
     const FLOW_BLUR_MULTIPLIER = 1.2;
-    const MOUSE_INFLUENCE_BLUR_FACTOR = 0.4;
+    const MOUSE_INFLUENCE_BLUR_FACTOR = 0.15;
     const EDGE_INTENSITY_MULTIPLIER = 1.5;
-    const EDGE_INTENSITY_MOUSE_FACTOR = 0.3;
+    const EDGE_INTENSITY_MOUSE_FACTOR = 0.15;
     const CENTER_INTENSITY_DISTANCE_FACTOR = 0.3;
-    const CENTER_INTENSITY_MOUSE_FACTOR = 0.2;
+    const CENTER_INTENSITY_MOUSE_FACTOR = 0.1;
+    // Maximum blur multiplier relative to base — prevents runaway blur
+    const MAX_BLUR_RELATIVE = 2;
 
     const liquidBlur = useMemo(() => {
       const defaultBlur = {
@@ -280,60 +293,42 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       if (
         !enableLiquidBlur ||
         !rectCache ||
-        !globalMousePosition ||
-        typeof globalMousePosition.x !== 'number' ||
-        typeof globalMousePosition.y !== 'number' ||
-        isNaN(globalMousePosition.x) ||
-        isNaN(globalMousePosition.y)
+        !mouseOffset ||
+        typeof mouseOffset.x !== 'number' ||
+        typeof mouseOffset.y !== 'number' ||
+        isNaN(mouseOffset.x) ||
+        isNaN(mouseOffset.y)
       ) {
         return defaultBlur;
       }
 
       try {
-        // Cache center and distance calculations
-        const center = calculateElementCenter(rectCache);
-        const distance = calculateDistance(globalMousePosition, center);
-        const maxDistance =
-          Math.sqrt(rectCache.width * rectCache.width + rectCache.height * rectCache.height) / 2;
-        const normalizedDistance = Math.min(distance / maxDistance, 1);
         const mouseInfluence = calculateMouseInfluence(mouseOffset);
+        const maxBlur = blurAmount * MAX_BLUR_RELATIVE;
 
-        const baseBlur = blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR;
-        const edgeIntensity = normalizedDistance * EDGE_INTENSITY_MULTIPLIER + mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR;
-        const edgeBlur = baseBlur * (0.8 + edgeIntensity * 0.6);
-        const centerIntensity = (1 - normalizedDistance) * CENTER_INTENSITY_DISTANCE_FACTOR + mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR;
-        const centerBlur = baseBlur * (0.3 + centerIntensity * 0.4);
-        const deltaX = globalMousePosition.x - center.x;
-        const deltaY = globalMousePosition.y - center.y;
-        const flowDirection = Math.atan2(deltaY, deltaX);
-        const flowIntensity = Math.sin(flowDirection + mouseInfluence * Math.PI) * 0.5 + 0.5;
-        const flowBlur = baseBlur * (0.4 + flowIntensity * 0.6);
-
-        const hoverMultiplier = isHovered ? 1.2 : 1;
-        const activeMultiplier = isActive ? 1.4 : 1;
-        const stateMultiplier = hoverMultiplier * activeMultiplier;
-
+        const baseBlur = Math.min(
+          maxBlur,
+          blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR
+        );
+        const edgeIntensity = mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR;
+        const edgeBlur = Math.min(maxBlur, baseBlur * (0.8 + edgeIntensity * 0.4));
+        const centerIntensity = mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR;
+        const centerBlur = Math.min(maxBlur, baseBlur * (0.3 + centerIntensity * 0.3));
+        const flowBlur = Math.min(maxBlur, baseBlur * FLOW_BLUR_MULTIPLIER);
+
+        // NOTE: hover/active multipliers intentionally omitted here —
+        // they belong on opacity layers, not the blur filter itself.
         return {
-          baseBlur: clampBlur(baseBlur * stateMultiplier),
-          edgeBlur: clampBlur(edgeBlur * stateMultiplier),
-          centerBlur: clampBlur(centerBlur * stateMultiplier),
-          flowBlur: clampBlur(flowBlur * stateMultiplier),
+          baseBlur: clampBlur(baseBlur),
+          edgeBlur: clampBlur(edgeBlur),
+          centerBlur: clampBlur(centerBlur),
+          flowBlur: clampBlur(flowBlur),
         };
       } catch (error) {
         console.warn('AtomixGlassContainer: Error calculating liquid blur', error);
         return defaultBlur;
       }
-    }, [
-      enableLiquidBlur,
-      blurAmount,
-      globalMousePosition,
-      mouseOffset,
-      isHovered,
-      isActive,
-      rectCache,
-      style,
-      glassSize,
-    ]);
+    }, [enableLiquidBlur, blurAmount, mouseOffset, rectCache]);
 
     const backdropStyle = useMemo(() => {
       try {
@@ -364,15 +359,18 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
         const useMultiPass = enableLiquidBlur && !devicePrefersPerformance && !areaIsLarge;
 
         if (useMultiPass) {
-          const blurLayers = [
-            `blur(${validatedBaseBlur}px)`,
-            `blur(${validatedEdgeBlur}px)`,
-            `blur(${validatedCenterBlur}px)`,
-            `blur(${validatedFlowBlur}px)`,
-          ];
+          // Use a single weighted-average blur instead of stacking multiple
+          // blur() calls. CSS blur() is additive — stacking 4 passes
+          // causes the perceived blur to compound far beyond any single value.
+          const weightedBlur = clampBlur(
+            validatedBaseBlur * 0.4 +
+              validatedEdgeBlur * 0.25 +
+              validatedCenterBlur * 0.15 +
+              validatedFlowBlur * 0.2
+          );
 
           return {
-            backdropFilter: `${blurLayers.join(' ')} saturate(${Math.min(dynamicSaturation, 200)}%) contrast(1.05) brightness(1.05)`,
+            backdropFilter: `blur(${weightedBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`,
           };
         }
 
@@ -387,7 +385,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
         );
 
         return {
-          backdropFilter: `blur(${effectiveBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(1.05) brightness(1.05)`,
+          backdropFilter: `blur(${effectiveBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`,
         };
       } catch (error) {
         console.warn('AtomixGlassContainer: Error calculating backdrop style', error);
@@ -424,11 +422,11 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
           '--atomix-glass-container-backdrop': backdropStyle?.backdropFilter || 'none',
           '--atomix-glass-container-shadow': overLight
             ? [
-              `inset 0 1px 0 rgba(255, 255, 255, ${0.4 + mx * 0.002})`,
-              `inset 0 -1px 0 rgba(0, 0, 0, ${0.2 + Math.abs(my) * 0.001})`,
-              `inset 0 0 20px rgba(0, 0, 0, ${0.08 + Math.abs(mx + my) * 0.001})`,
-              `0 2px 12px rgba(0, 0, 0, ${0.12 + Math.abs(my) * 0.002})`,
-            ].join(', ')
+                `inset 0 1px 0 rgba(255, 255, 255, ${(0.4 + mx * 0.002) * (overLightConfig?.shadowIntensity || 1)})`,
+                `inset 0 -1px 0 rgba(0, 0, 0, ${(0.2 + Math.abs(my) * 0.001) * (overLightConfig?.shadowIntensity || 1)})`,
+                `inset 0 0 20px rgba(0, 0, 0, ${(0.08 + Math.abs(mx + my) * 0.001) * (overLightConfig?.shadowIntensity || 1)})`,
+                `0 2px 12px rgba(0, 0, 0, ${(0.12 + Math.abs(my) * 0.002) * (overLightConfig?.shadowIntensity || 1)})`,
+              ].join(', ')
             : '0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset',
           '--atomix-glass-container-shadow-opacity': effectiveDisableEffects ? 0 : 1,
           // Background and shadow values use design token-aligned RGB values
@@ -464,10 +462,29 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       effectiveDisableEffects,
     ]);
 
+    // Helper to force no transition/animation overrides with !important
+    const setForceNoTransition = (el: HTMLElement | null) => {
+      if (el) {
+        el.style.setProperty('transition-duration', '0s', 'important');
+        el.style.setProperty('animation-duration', '0s', 'important');
+        el.style.setProperty('transition-delay', '0s', 'important');
+      }
+    };
+
     return (
       <div
-        ref={ref}
-        className={`${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${active ? ATOMIX_GLASS.CLASSES.ACTIVE : ''} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ''}`}
+        ref={el => {
+          // Apply force no-transition
+          setForceNoTransition(el);
+
+          // Handle forwarded ref
+          if (typeof ref === 'function') {
+            ref(el);
+          } else if (ref) {
+            (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+          }
+        }}
+        className={`${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${isActive ? ATOMIX_GLASS.CLASSES.ACTIVE : ''} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ''}`}
         style={{ ...style, ...containerVars }}
         onClick={onClick}
       >
@@ -484,7 +501,10 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
           onMouseDown={onMouseDown}
           onMouseUp={onMouseUp}
         >
-          <div className={ATOMIX_GLASS.FILTER_CLASS}>
+          <div
+            className={ATOMIX_GLASS.FILTER_CLASS}
+            style={{ zIndex: 1, position: 'absolute', inset: 0 }}
+          >
             <GlassFilter
               blurAmount={blurAmount}
               mode={mode}
@@ -503,6 +523,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             />
             {/* Enhanced Apple Liquid Glass Inner Shadow Layer */}
             <div
+              ref={setForceNoTransition}
               className={ATOMIX_GLASS.FILTER_OVERLAY_CLASS}
               style={
                 {
@@ -532,7 +553,8 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
               {
                 position: 'relative',
                 textShadow: `var(--atomix-glass-container-text-shadow)`,
-                ...(elasticity > 0 ? { zIndex: 100 } : {}),
+                // Ensure content is always above the filter layer (zIndex 1)
+                zIndex: elasticity > 0 ? 100 : 2,
               } as CSSProperties
             }
           >
@@ -544,4 +566,4 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
   }
 );
 
-AtomixGlassContainer.displayName = 'AtomixGlassContainer';
+AtomixGlassContainer.displayName = 'AtomixGlassContainer';

package/src/components/AtomixGlass/GlassFilter.tsx

@@ -35,12 +35,7 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
     aria-hidden="true"
   >
     <defs>
-      <radialGradient
-        id={`${id}-edge-mask`}
-        cx="50%"
-        cy="50%"
-        r="50%"
-      >
+      <radialGradient id={`${id}-edge-mask`} cx="50%" cy="50%" r="50%">
         <stop offset="0%" stopColor="black" stopOpacity="0" />
         <stop
           offset={`${Math.max(30, 80 - aberrationIntensity * 2)}%`}
@@ -49,14 +44,7 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
         />
         <stop offset="100%" stopColor="white" stopOpacity="1" />
       </radialGradient>
-      <filter
-        id={id}
-        x="-35%"
-        y="-35%"
-        width="170%"
-        height="170%"
-        colorInterpolationFilters="sRGB"
-      >
+      <filter id={id} x="-35%" y="-35%" width="170%" height="170%" colorInterpolationFilters="sRGB">
         <feImage
           id={`${id}-image`}
           x="0"
@@ -64,7 +52,13 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
           width="100%"
           height="100%"
           result="DISPLACEMENT_MAP"
-          href={getDisplacementMap(mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl)}
+          href={getDisplacementMap(
+            mode,
+            displacementMap,
+            polarDisplacementMap,
+            prominentDisplacementMap,
+            shaderMapUrl
+          )}
           preserveAspectRatio="xMidYMid slice"
         />
 
@@ -178,4 +172,3 @@ export const GlassFilter = memo(GlassFilterComponent, (prevProps, nextProps) =>
     prevProps.blurAmount === nextProps.blurAmount
   );
 });
-

package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap

@@ -4,11 +4,11 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
 <div>
   <div
     class="c-atomix-glass"
-    style="--atomix-glass-radius: 16px; --atomix-glass-transform: translate(0px, 0px) scale(1); --atomix-glass-position: absolute; --atomix-glass-top: 0px; --atomix-glass-left: 0px; --atomix-glass-width: 100%; --atomix-glass-height: 100%; --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem); --atomix-glass-blend-mode: overlay; --atomix-glass-border-gradient-1: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 33%, rgba(255, 255, 255, 0.4) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-border-gradient-2: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 33%, rgba(255, 255, 255, 0.6) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-1-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%); --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-2-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%); --atomix-glass-hover-3-opacity: 0; --atomix-glass-hover-3-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); --atomix-glass-base-opacity: 0; --atomix-glass-base-gradient: rgba(255, 255, 255, 0.1); --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-gradient: rgba(255, 255, 255, 0.05);"
+    style="--atomix-glass-radius: 16px; --atomix-glass-transform: translate(0px, 0px) scale(1); --atomix-glass-position: absolute; --atomix-glass-top: 0px; --atomix-glass-left: 0px; --atomix-glass-width: 100%; --atomix-glass-height: 100%; --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem); --atomix-glass-blend-mode: overlay; --atomix-glass-border-gradient-1: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08399999999999999) 33%, rgba(255, 255, 255, 0.27999999999999997) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-border-gradient-2: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22399999999999998) 33%, rgba(255, 255, 255, 0.42) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-1-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%); --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-2-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%); --atomix-glass-hover-3-opacity: 0; --atomix-glass-hover-3-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); --atomix-glass-base-opacity: 0; --atomix-glass-base-gradient: rgba(255, 255, 255, 0.1); --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-gradient: rgba(255, 255, 255, 0.05);"
   >
     <div
       class="c-atomix-glass__container   "
-      style="transform: translate(0px, 0px) scale(1); --atomix-glass-container-width: 270; --atomix-glass-container-height: 69; --atomix-glass-container-padding: 0 0; --atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(1.2100000000000002px) saturate(160%) contrast(1.05) brightness(1.05); --atomix-glass-container-shadow: 0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset; --atomix-glass-container-shadow-opacity: 1; --atomix-glass-container-bg: none; --atomix-glass-container-text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4); --atomix-glass-container-box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.25);"
+      style="transform: translate(0px, 0px) scale(1); --atomix-glass-container-width: 270; --atomix-glass-container-height: 69; --atomix-glass-container-padding: 0 0; --atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(1.2100000000000002px) saturate(160%) contrast(1.4) brightness(0.9); --atomix-glass-container-shadow: 0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset; --atomix-glass-container-shadow-opacity: 1; --atomix-glass-container-bg: none; --atomix-glass-container-text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4); --atomix-glass-container-box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.25); transition-duration: 0s !important; animation-duration: 0s !important; transition-delay: 0s;"
     >
       <div
         class="c-atomix-glass__inner"
@@ -16,6 +16,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
       >
         <div
           class="c-atomix-glass__filter"
+          style="z-index: 1; position: absolute; inset: 0;"
         >
           <svg
             aria-hidden="true"
@@ -25,7 +26,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
               <radialgradient
                 cx="50%"
                 cy="50%"
-                id=":rd:-edge-mask"
+                id="atomix-glass-filter-14-edge-mask"
                 r="50%"
               >
                 <stop
@@ -47,7 +48,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
               <filter
                 color-interpolation-filters="sRGB"
                 height="170%"
-                id=":rd:"
+                id="atomix-glass-filter-14"
                 width="170%"
                 x="-35%"
                 y="-35%"
@@ -55,7 +56,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
                 <feimage
                   height="100%"
                   href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/2wCEAAQDAwMDAwQDAwQGBAMEBgcFBAQFBwgHBwcHBwgLCAkJCQkICwsMDAwMDAsNDQ4ODQ0SEhISEhQUFBQUFBQUFBQBBQUFCAgIEAsLEBQODg4UFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFP/CABEIAQABAAMBEQACEQEDEQH/xAAxAAEBAQEBAQAAAAAAAAAAAAADAgQIAQYBAQEBAQEBAQAAAAAAAAAAAAMCBAEACAf/2gAMAwEAAhADEAAAAPjPor6kOgOiKhKgKhKgOhKhOhKxKgKhOgKhKhKgKxOhKhOgKhKhKgKwKhKgKgKwG841nns9J/nn2KVCdCdCVAVCVCVAdCVCdiVAVidCVAVCVAdiVCVCdAVCVCVAVCVAVAViVZxsBrPPY6R/NvsY6E6ErEqAqE6ErAqE6E7E7ErA0ErArAqAqEuiVAXRLol0S6J0JUBWBUI0BXnG88djpH81+xjoToSoSoCoTsSoYQTsTsTQSsCsCsCsCsCoC6A0JeAuiXSLwn0SoioCoCoBsBrPFH0j+a/Yx0J0JUJUJ2BUMIR2MIRoBoJIBXnJAK840BUA0BdAegXhLpF4S8R+IuiVgVANAV546fSH5r9jHRHQFQlYxYnZQgnYwhQokgEgEmckzjecazlYD3OPQHoD0S8JcI/EXiPxF0SoSvONBFF0j+a/YxdI7EqA6KLGEKEKEGFI0AlA0AUzimYbzjecazjWce5w6BdEeCXhPhFwz8R+MuiVgVAdF0j+a/Yp0RUJ0MWUIUWUIUKUIJqBoArnJM4pmBMw3nCsw1mCs4+AegPBLxHwi4Z8KPGXSPojYH0ukfzX7FOiKhiyiylDiylDhBNRNQJAJcwpnBMopmC84XlCswdzj3OPQHwlwS8R8M+HHDPxl0ioDoukfzT7GOhOyiimzmzhDlShBNBNBJc4rmFMwJlBMwXlC82esoVmHucOgXgHxH4j4Zyccg/GfiOiKh6R/NPsY6GLOKObOUObOUI0KEAlEkzimYFygmUEyheXPeULzZ6yhWce5x8BeEuGfCj0HyI5EdM/EdD0h+a/Yx0U0cUflxNnNnCHCCdgSiSZgTMK5c6ZQvLnTLnvJnvKFZgrMHc5dAeiXijhn445E8g/RHTPpdI/mn2KdlFR5RzcTUTZxZwglYGgCmcEzAuUEyZ0y57yZ0yZ7yheUKzh3OPc5dEvEfij0RyI9E+iPGfT6T/NPsQ6OKiKmajy4ijmyOyKwNAFM4JlBMudMmdMue8mdMme8me8wVmGsw0A9A+kfjjxx6J9EememfT6W/MvsMqOamKiamKmKOKM7ErErAUzAmYLyZ0y50yZ0yZkyZ7yBeULzBeYazl0T6R9KPRPYj0T2J9B9Ppj8x+wjo4qY7M9iKmKg6MrIrErALzBeYEyZ0y50yZkyZ7x50yheXPeUbzjWcqA6I+lHYnsT6J7E9iOx0z+YfYBUc1MdmexHZjsHRlRBRDYBecEzZ7yAmXNeTOmTOmPOmXOmULyjeYbzlYnQxRx057E9mexPYij6a/L/r86OOzPpjsR6Y7B9MqIaILDPYZ7zZ0y57y50yZ0x5kyAmXPeUEyjeYUznQnYnRTUTUT2JqJ7EUfTn5d9fFRx2Z9EdmPTHjLsF0h6I2OegzXmzJmzplz3lzJjzpkBMudMoplBM5JnOwOyiimzmomomonsHRdO/l318VFHYj0x6I9McgumXiHpDQ56DPebMmbNebMmXMmQEy50yguQEzCmYkA7GLGEKaObibiaOKOKPp38s+vCsj7EeiPTHIP0Hwx6ReMKDP0M95895syZ815cy5c6ZQTKCZRXMKZiQDQYQYsps5uJs5qIsjounvyz68KyLpx4z9Mcg+GXoLxl4g6IUGes+a8+e82ZM2dMuZMoJmBcwrlJM5IBoMKMoUWc2c3E0cWRUXT/wCV/XQ2R0RdiPQfDPkFwy9BeIOiHQz0Ges+e82dM2ZM2dMwLmBcwpmJc5qBoMIUIUoU2c2cWZ0R0PT/AOV/XQ2RUJdM+wfDL0Hwy5A+EfEHQz0AUGe8+dM2e82dcwJnFcwrnJc5IEKUIMIUoUWc2cWRUJ0PT/5V9dFYjZFRF0z8ZeM+QPDLxD4Q6OfoBQhefPeYEz50ziucUzCoEuclCEKFGUKEKLOLI7E6EqHqD8o+uhsRsisSoi6ZeM+QPiHhj0R8IUIdALALzgmcEzimcVAlzioGomgyhQgwhRZHZFQHQlQ9Qfk/10NiVkNiNiVGXiPxj4x8Q9IfCFCPRCwC84oA3nFQFM5KBKJIMKEIUWRoUUJWJUJ0BUPUH5L9dDZFYigjYjZHRF0x8Q9IvEHRHojQjQhecUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/10KCSCKESCNiVkViPSLpD0h6I0Q0I0A2IoBWBIJIBKBIJoJIJ2R2J0JWBUJ0JUB0XTv479dFZDYiglYigkhEgjZFQjRFQjRFQjQigFYigHYigmgEgmglYlYnQlQlYlQHQlQnQ9P/kf1yVkNiNCNkNiVENiNiViNEViNkVCVgKCViViViSCViSCVgdCViVCViVCdgVCVCdD1D+U/XBWQ2I0I2Q2JUQ2I0JWQ0I2JUQ2JUI2JUI2J0JWJWJWA2R0BWJ0I2JUJ2BUJUJ0P//EABkQAQEBAQEBAAAAAAAAAAAAAAECABEDEP/aAAgBAQABAgB1atWrVq1atWrVq1atWrVq1atWrVq1atWrVq+OrVq1atWrVq1atWrVq1atWrVq1atWrVq1atXxVppppppdWrVq1atWrVq1NNNNNNNNNNNPVWmmmmms6tWrVq1atWpppppppppppppp6q0000uc51atWrVq1ammmmmmmmmmmmmt1Vpppc5znVq1atWrVqaaaaaaaaaaaaaeqtNLnOc51atWrVq1ammmmmmmmmmmmmnqrS5znOc6tWrVq16222mmmmmmlVppp6tKuc5znOrVq1a9TbbbbTTTTTSq000qtLnOc5zq1atWrW0222200000qqqtKqrnOc5zq1atTbbbbbbbbTTTSqqqqqq5znOc6tTTTbbbbbbbbTTTSqqqqrlVznOctNNNtttttttttNNNNKqqqrqznKqrTTTTbbbbbbbbbTTTSqqqqrqznOc5aaaabbbbbbbbbaaaaVVVVVdWc5znVq1NNttttttttttNNKqqqqudWc5znVq16tbbbbbbbbbbTTSqqqq5XVnOc6tWrVrb1tttttttttNNKqqqqrWrK5VWmmm2230bbbbbbaaaXOc5zlVa1KuVVppptttt9G22222mmlzlVznK6tWVVWmmmm2222222222mlznOc5znLWppVVWmmm22222229bTWrOc5znOcq1qaaVpWmm222222229erVqznOc5znKtatStK0rTbTTbbbberXr1as5znOc5aVpppppWlabaabbbb1ta9WrVnOc5znU0rTTTTTTTTTbTTbbbTWvVq1as5znOdTTStNNNNNNNNNtNNtttN6tWvVq1ZznOrU00rTTTTTTTTTTTTTbTWvVq1atWrOc6tTTTStNNNNNNNNNNtNNtNa9WrVq1Z1Z1NNNNNK1q1NNNNNNNNNNNtNatWrVq1atWrU00000rWrVq1atWrVq1alaaa1atWrVq1NNNammmmla1atWrVq1aterVq16tWrVnVqa1NK1qaaaVX/xAAWEAADAAAAAAAAAAAAAAAAAAAhgJD/2gAIAQEAAz8AaExf/8QAGhEBAQEBAQEBAAAAAAAAAAAAAQISEQADEP/aAAgBAgEBAgDx48ePHjx48ePHjx48ePHjx48ePHjx48ePHj86IiIiIiInjx48ePHjx48IiIiIj0oooooooooRERER73ve60UUUUUUVrWiiiiiihERERER73ve97ooooorRWiiiiihKERERER73ve973RRRRWtFFFFFFCIiIiIiPe973ve60UUVrRRRRRRQiIlCIiI973ve973pRRWiiiiiiiiiiiiiiihEe973ve973RRWtFFFFFFFFFFFFFFFFFFa13ve973WitaKKKKKKKKKKKKKKKKKK1rWtd1rutFa1oooooooooooosssooorWta1rWta1rRRRRRRRRRRZZZZZZZZZWta1rWta1rRRRRRRRRZZZZZZZZZZZZe9a1rWta1rWitaKLLLLLLLLLLLLLLLLL3rWta1rWtFbLLLLLLLLLLLLLLLLLLLL3vWta1rWita1ssssssss+hZZZZZZZZe961rWta0Vre97LLLLLLLLLLLPoWWWWWXrWta1oorWta3ssss+hZZZZ9Cyyyyyyyyiita1orWta1ve9llllllllllllllllFFa0VorWta1ve9llllllllllllllllllFFFaK1rWta1rWiyyyyyyyyyyyyiiiiiiitFFa1rWta1oosoosssssoooosoooorRRRWta1rWta0UUUUUWUUUUUUUUUUUVoooorWta1rWtaKKKKKKmiiiiiiiiiiiiiiitd73ve61oSiiipoqaKKKKKKKKKK0UUUVrve973vREREZoSihEooooorRRRRWtd73ve9EREREREoSiiiiitFllllla73ve9ERERERESiiiiiitH0PoWWWWVrXe96IiIiMoiJRRRRRRWjwlFFllllFFd6IiIiIlCUUUUUUUUUePHjx48ePCIiIiIiIiUUUUUUUUUUUePHjx48ePHjx48ePHjx48IiUUUUUUJRRRX//xAAWEQADAAAAAAAAAAAAAAAAAAABYJD/2gAIAQIBAz8AtEV7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEP/aAAgBAwEBAgCtNNNNNNNNNNNNNNNNNNNNNNNNNNNNNcrTTTTTTTTTTTTTTTTTTTTTTTTTTTTTXKrTTTTTTTU000000000000000000001FVpppppqampqaaaaaaaaaaaaaaaaaaaa5Vaaaaampqampqammmmmmmmmmmlaaaaaaiq0001NTU1NTU1NTTTTTTTTTTSqqtNNNcqtNNSyzU1LNTU1NTTTTTTTTTSqqq001ytNLLLLNTU1NTU1NTbbbTTTTTSqqq001ytNLLLLLNTU1NTU3NttttNNNNNKqq001KrSyyyyyzU1NTU3Nzc02220000qqqqrSqqyyyyyzU1NTU3Nzc3NttttNNNKqqqqqqssssss1NTU3Nzc3NzbbbbTTTSqqqqqqrLLLLLNTU1Nzc3Nzc22220000qqqqqqqqssss1NTU3Nzc3NzbbbbbTTSqqqqqqqqqqzU1NTc3Nzc3Nzbc22000qqqqqqqqqqqtTU3Nzc3Nzc3NtzbTTSqqqqrKqqqqqtNNzc23Nzc3Nzc3NTU1KqqqrKqqqqqtNNNNttzc3Nzc3NzU1NLLLLLKqqqqqqqq0022223Nzc3NzU1NSyyyyyyqqqqqqqrTTbbbbc3Nzc3NTU1LLLLLLKsqqqqqqrTTTTbbbc3Nzc1NTUsssssssqqqqqqrTTTTTbbbTc3NTU1NTUsssssqqqqqqqq0000222023NTU1NTUsssssqqqqqqqq000000003NTU1NTU1LLLLLNKrTSqqqqtNNNNNNtNNTU1NSzUssss00qq0qqqqrTTTTTTTTTU1NTUs1LLLNNNKrTTTSqqq00000000001NTU1LNTU0000qtNNNKqqqtNNNNNNNNTU1NTUs1NNNNNKss1NNNK00qtK0000001NNTU0s000000qq000001NKrStNNNNK1NNNNStNNNNNKqtNNNNNNNK0000000rU0000rTTTTTSq00000rTTTTTTTTTTTTTTTTStNNNNKr/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQM/AAAf/9k="
-                  id="feimage"
+                  id="atomix-glass-filter-14-image"
                   preserveAspectRatio="xMidYMid slice"
                   result="DISPLACEMENT_MAP"
                   width="100%"
@@ -185,11 +186,11 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
           </svg>
           <div
             class="c-atomix-glass__filter-overlay"
-            style="filter: url(#:rd:); border-radius: var(--atomix-glass-radius);"
+            style="filter: url(#atomix-glass-filter-14); border-radius: var(--atomix-glass-container-radius); transition-duration: 0s !important; animation-duration: 0s !important; transition-delay: 0s;"
           />
           <div
             class="c-atomix-glass__filter-shadow"
-            style="box-shadow: var(--atomix-glass-container-shadow); border-radius: var(--atomix-glass-radius);"
+            style="box-shadow: var(--atomix-glass-container-shadow); border-radius: var(--atomix-glass-container-radius);"
           />
         </div>
         <div

package/src/components/AtomixGlass/glass-utils.ts

@@ -44,9 +44,11 @@ export const calculateMouseInfluence = (mouseOffset: MousePosition): number => {
   if (!mouseOffset || typeof mouseOffset.x !== 'number' || typeof mouseOffset.y !== 'number') {
     return 0;
   }
-  // More responsive calculation for overlight effects
-  const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS.MOUSE_INFLUENCE_DIVISOR;
-  return Math.min(1.5, influence); // Cap influence for better control
+  // Bounded calculation — keeps the glass effect subtle and stable
+  const influence =
+    Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) /
+    CONSTANTS.MOUSE_INFLUENCE_DIVISOR;
+  return Math.min(0.8, influence); // Tighter cap to prevent blur/filter blow-out
 };
 
 /**
@@ -59,7 +61,7 @@ export const calculateOverLightIntensity = (
   if (!mouseOffset || typeof mouseOffset.x !== 'number' || typeof mouseOffset.y !== 'number') {
     return baseIntensity;
   }
-  
+
   // Calculate additional intensity based on mouse position
   const mouseInfluence = calculateMouseInfluence(mouseOffset);
   return Math.min(1.0, baseIntensity * (1 + mouseInfluence * 0.3));
@@ -260,4 +262,3 @@ export const getDisplacementMap = (
       return displacementMap;
   }
 };
-