@shohojdhara/atomix 0.2.2 → 0.2.3

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -0,0 +1,1281 @@
+import {
+  type CSSProperties,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  useMemo,
+} from 'react';
+import { ShaderDisplacementGenerator, fragmentShaders } from './shader-utils';
+import { displacementMap, polarDisplacementMap, prominentDisplacementMap } from './utils';
+
+const generateShaderDisplacementMap = (width: number, height: number): string => {
+  try {
+    const generator = new ShaderDisplacementGenerator({
+      width,
+      height,
+      fragment: fragmentShaders.liquidGlass,
+    });
+
+    const dataUrl = generator.updateShader();
+    generator.destroy();
+
+    return dataUrl;
+  } catch (error) {
+    return displacementMap;
+  }
+};
+
+const getMap = (mode: 'standard' | 'polar' | 'prominent' | 'shader', shaderMapUrl?: string) => {
+  switch (mode) {
+    case 'standard':
+      return displacementMap;
+    case 'polar':
+      return polarDisplacementMap;
+    case 'prominent':
+      return prominentDisplacementMap;
+    case 'shader':
+      return shaderMapUrl || displacementMap;
+    default:
+      throw new Error(`Invalid mode: ${mode}`);
+  }
+};
+
+const GlassFilter: React.FC<{
+  id: string;
+  displacementScale: number;
+  aberrationIntensity: number;
+  mode: 'standard' | 'polar' | 'prominent' | 'shader';
+  shaderMapUrl?: string;
+}> = ({ id, displacementScale, aberrationIntensity, mode, shaderMapUrl }) => (
+  <svg style={{ position: 'absolute', width: '100%', height: '100%', inset: 0 }} aria-hidden="true">
+    <defs>
+      <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)}%`}
+          stopColor="black"
+          stopOpacity="0"
+        />
+        <stop offset="100%" stopColor="white" stopOpacity="1" />
+      </radialGradient>
+      <filter id={id} x="-35%" y="-35%" width="170%" height="170%" colorInterpolationFilters="sRGB">
+        <feImage
+          id="feimage"
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          result="DISPLACEMENT_MAP"
+          href={getMap(mode, shaderMapUrl)}
+          preserveAspectRatio="xMidYMid slice"
+        />
+
+        <feColorMatrix
+          in="DISPLACEMENT_MAP"
+          type="matrix"
+          values="0.3 0.3 0.3 0 0
+                 0.3 0.3 0.3 0 0
+                 0.3 0.3 0.3 0 0
+                 0 0 0 1 0"
+          result="EDGE_INTENSITY"
+        />
+        <feComponentTransfer in="EDGE_INTENSITY" result="EDGE_MASK">
+          <feFuncA type="discrete" tableValues={`0 ${aberrationIntensity * 0.05} 1`} />
+        </feComponentTransfer>
+
+        <feOffset in="SourceGraphic" dx="0" dy="0" result="CENTER_ORIGINAL" />
+
+        <feDisplacementMap
+          in="SourceGraphic"
+          in2="DISPLACEMENT_MAP"
+          scale={displacementScale * (mode === 'shader' ? 1 : -1)}
+          xChannelSelector="R"
+          yChannelSelector="B"
+          result="RED_DISPLACED"
+        />
+        <feColorMatrix
+          in="RED_DISPLACED"
+          type="matrix"
+          values="1 0 0 0 0
+                 0 0 0 0 0
+                 0 0 0 0 0
+                 0 0 0 1 0"
+          result="RED_CHANNEL"
+        />
+
+        <feDisplacementMap
+          in="SourceGraphic"
+          in2="DISPLACEMENT_MAP"
+          scale={displacementScale * ((mode === 'shader' ? 1 : -1) - aberrationIntensity * 0.02)}
+          xChannelSelector="R"
+          yChannelSelector="B"
+          result="GREEN_DISPLACED"
+        />
+        <feColorMatrix
+          in="GREEN_DISPLACED"
+          type="matrix"
+          values="0 0 0 0 0
+                 0 1 0 0 0
+                 0 0 0 0 0
+                 0 0 0 1 0"
+          result="GREEN_CHANNEL"
+        />
+
+        <feDisplacementMap
+          in="SourceGraphic"
+          in2="DISPLACEMENT_MAP"
+          scale={displacementScale * ((mode === 'shader' ? 1 : -1) - aberrationIntensity * 0.03)}
+          xChannelSelector="R"
+          yChannelSelector="B"
+          result="BLUE_DISPLACED"
+        />
+        <feColorMatrix
+          in="BLUE_DISPLACED"
+          type="matrix"
+          values="0 0 0 0 0
+                 0 0 0 0 0
+                 0 0 1 0 0
+                 0 0 0 1 0"
+          result="BLUE_CHANNEL"
+        />
+
+        <feBlend in="GREEN_CHANNEL" in2="BLUE_CHANNEL" mode="screen" result="GB_COMBINED" />
+        <feBlend in="RED_CHANNEL" in2="GB_COMBINED" mode="screen" result="RGB_COMBINED" />
+
+        <feGaussianBlur
+          in="RGB_COMBINED"
+          stdDeviation={Math.max(0.1, 0.5 - aberrationIntensity * 0.1)}
+          result="ABERRATED_BLURRED"
+        />
+
+        <feComposite
+          in="ABERRATED_BLURRED"
+          in2="EDGE_MASK"
+          operator="in"
+          result="EDGE_ABERRATION"
+        />
+
+        <feComponentTransfer in="EDGE_MASK" result="INVERTED_MASK">
+          <feFuncA type="table" tableValues="1 0" />
+        </feComponentTransfer>
+        <feComposite in="CENTER_ORIGINAL" in2="INVERTED_MASK" operator="in" result="CENTER_CLEAN" />
+
+        <feComposite in="EDGE_ABERRATION" in2="CENTER_CLEAN" operator="over" />
+      </filter>
+    </defs>
+  </svg>
+);
+
+const GlassContainer = forwardRef<
+  HTMLDivElement,
+  React.PropsWithChildren<{
+    className?: string;
+    style?: React.CSSProperties;
+    displacementScale?: number;
+    blurAmount?: number;
+    saturation?: number;
+    aberrationIntensity?: number;
+    mouseOffset?: { x: number; y: number };
+    globalMousePos?: { x: number; y: number };
+    onMouseLeave?: () => void;
+    onMouseEnter?: () => void;
+    onMouseDown?: () => void;
+    onMouseUp?: () => void;
+    active?: boolean;
+    isHovered?: boolean;
+    isActive?: boolean;
+    overLight?: boolean;
+    cornerRadius?: number;
+    padding?: string;
+    glassSize?: { width: number; height: number };
+
+    onClick?: () => void;
+    mode?: 'standard' | 'polar' | 'prominent' | 'shader';
+    transform?: string;
+    effectiveDisableEffects?: boolean;
+    effectiveReducedMotion?: boolean;
+  }>
+>(
+  (
+    {
+      children,
+      className = '',
+      style,
+      displacementScale = 25,
+      blurAmount = 0.0625,
+      saturation = 180,
+      aberrationIntensity = 2,
+      mouseOffset = { x: 0, y: 0 },
+      globalMousePos = { x: 0, y: 0 },
+      onMouseEnter,
+      onMouseLeave,
+      onMouseDown,
+      onMouseUp,
+      active = false,
+      isHovered = false,
+      isActive = false,
+      overLight = false,
+      cornerRadius = 0,
+      padding = '0 0',
+      glassSize = { width: 0, height: 0 },
+      onClick,
+      mode = 'standard',
+      transform = 'none',
+      effectiveDisableEffects = false,
+      effectiveReducedMotion = false,
+    },
+    ref
+  ) => {
+    const filterId = useId();
+    const [shaderMapUrl, setShaderMapUrl] = useState<string>('');
+
+    const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
+
+    useEffect(() => {
+      if (mode === 'shader' && glassSize.width > 0 && glassSize.height > 0) {
+        try {
+          const url = generateShaderDisplacementMap(glassSize.width, glassSize.height);
+          setShaderMapUrl(url);
+        } catch (error) {
+          console.warn('Failed to generate shader displacement map:', error);
+        }
+      }
+    }, [mode, glassSize.width, glassSize.height]);
+
+    useEffect(() => {
+      if (!ref || typeof ref === 'function') return;
+
+      const element = (ref as React.RefObject<HTMLDivElement>).current;
+      if (!element) return;
+
+      const timeoutId = setTimeout(() => {
+        try {
+          element.offsetHeight;
+        } catch (error) {
+          console.warn('AtomixGlass: Error in GlassContainer size sync:', error);
+        }
+      }, 0);
+
+      return () => clearTimeout(timeoutId);
+    }, [cornerRadius, glassSize.width, glassSize.height]);
+
+    const liquidBlur = useMemo(() => {
+      if (!ref || !globalMousePos.x || !globalMousePos.y) {
+        return {
+          baseBlur: blurAmount,
+          edgeBlur: blurAmount * 0.5,
+          centerBlur: blurAmount * 0.2,
+          flowBlur: blurAmount * 0.3,
+        };
+      }
+
+      const rect = (ref as React.RefObject<HTMLDivElement>).current?.getBoundingClientRect();
+      if (!rect) {
+        return {
+          baseBlur: blurAmount,
+          edgeBlur: blurAmount * 0.5,
+          centerBlur: blurAmount * 0.2,
+          flowBlur: blurAmount * 0.3,
+        };
+      }
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+
+      const deltaX = globalMousePos.x - centerX;
+      const deltaY = globalMousePos.y - centerY;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+      const maxDistance = Math.sqrt(rect.width * rect.width + rect.height * rect.height) / 2;
+      const normalizedDistance = Math.min(distance / maxDistance, 1);
+
+      const mouseInfluence =
+        Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / 100;
+
+      const baseBlur = blurAmount + mouseInfluence * blurAmount * 0.4;
+
+      const edgeIntensity = normalizedDistance * 1.5 + mouseInfluence * 0.3;
+      const edgeBlur = baseBlur * (0.8 + edgeIntensity * 0.6);
+
+      const centerIntensity = (1 - normalizedDistance) * 0.3 + mouseInfluence * 0.2;
+      const centerBlur = baseBlur * (0.3 + centerIntensity * 0.4);
+
+      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;
+
+      return {
+        baseBlur: Math.max(0.1, baseBlur * stateMultiplier),
+        edgeBlur: Math.max(0.1, edgeBlur * stateMultiplier),
+        centerBlur: Math.max(0.1, centerBlur * stateMultiplier),
+        flowBlur: Math.max(0.1, flowBlur * stateMultiplier),
+      };
+    }, [blurAmount, globalMousePos, mouseOffset, isHovered, isActive, ref]);
+
+    const backdropStyle = useMemo(() => {
+      const dynamicSaturation = saturation + liquidBlur.baseBlur * 20;
+
+      const blurLayers = [
+        `blur(${liquidBlur.baseBlur}px)`,
+        // `blur(${liquidBlur.edgeBlur}px)`,
+        // `blur(${liquidBlur.centerBlur}px)`,
+        `blur(${liquidBlur.flowBlur}px)`,
+      ];
+
+      return {
+        filter: `url(#${filterId})`,
+        backdropFilter: `${blurLayers.join(' ')} saturate(${Math.min(dynamicSaturation, 200)}%)`,
+      };
+    }, [filterId, liquidBlur, saturation]);
+
+    return (
+      <div
+        ref={ref}
+        className={` ${className} ${active ? 'active' : ''}`}
+        style={style}
+        onClick={onClick}
+      >
+        <div
+          className="glass"
+          style={{
+            position: 'relative',
+            padding,
+            borderRadius: `${cornerRadius}px`,
+            transition: 'all 0.2s ease-out',
+    
+          }}
+         onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onMouseDown={onMouseDown}
+          onMouseUp={onMouseUp}
+        >
+          <GlassFilter
+            mode={mode}
+            id={filterId}
+            displacementScale={displacementScale}
+            aberrationIntensity={aberrationIntensity}
+            shaderMapUrl={shaderMapUrl}
+          />
+          <span
+            className="glass__warp"
+            style={
+              {
+                ...backdropStyle,
+                borderRadius: `${cornerRadius}px`,
+                position: 'absolute',
+                inset: '0',
+              } as CSSProperties
+            }
+          />
+
+          {/* Apple Liquid Glass Inner Shadow Layer */}
+          <div
+            style={{
+              position: 'absolute',
+              inset: '1px',
+              borderRadius: `${cornerRadius}px`,
+              pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
+              zIndex: 20,
+              boxShadow: [
+                '0 0 20px rgba(0, 0, 0, 0.15) inset',
+                '0 4px 8px rgba(0, 0, 0, 0.08) inset',
+              ].join(', '),
+              opacity: effectiveDisableEffects ? 0 : 1,
+              transition: effectiveReducedMotion ? 'none' : 'opacity 0.2s ease-out',
+            }}
+          />
+
+          <div
+            style={{
+              position: 'relative',
+              zIndex: 1,
+              textShadow: overLight
+                ? '0px 2px 12px rgba(0, 0, 0, 0)'
+                : '0px 2px 12px rgba(0, 0, 0, 0.4)',
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+GlassContainer.displayName = 'GlassContainer';
+
+interface AtomixGlassProps {
+  children: React.ReactNode;
+  displacementScale?: number;
+  blurAmount?: number;
+  saturation?: number;
+  aberrationIntensity?: number;
+  elasticity?: number;
+  cornerRadius?: number;
+  globalMousePos?: { x: number; y: number };
+  mouseOffset?: { x: number; y: number };
+  mouseContainer?: React.RefObject<HTMLElement | null> | null;
+  className?: string;
+  padding?: string;
+  style?: React.CSSProperties;
+  overLight?: boolean;
+  mode?: 'standard' | 'polar' | 'prominent' | 'shader';
+  onClick?: () => void;
+
+  /**
+   * Accessibility props
+   */
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  role?: string;
+  tabIndex?: number;
+
+  /**
+   * Performance and accessibility options
+   */
+  reducedMotion?: boolean;
+  highContrast?: boolean;
+  disableEffects?: boolean;
+
+  /**
+   * Performance monitoring
+   */
+  enablePerformanceMonitoring?: boolean;
+}
+
+export function AtomixGlass({
+  children,
+  displacementScale = 15,
+  blurAmount = 0.5,
+  saturation = 120,
+  aberrationIntensity = 1,
+  elasticity = 0.15,
+  cornerRadius = 20,
+  globalMousePos: externalGlobalMousePos,
+  mouseOffset: externalMouseOffset,
+  mouseContainer = null,
+  className = '',
+  padding = '0 0',
+  overLight = false,
+  style = {},
+  mode = 'standard',
+  onClick,
+
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+  role,
+  tabIndex,
+
+  reducedMotion = false,
+  highContrast = false,
+  disableEffects = false,
+
+  enablePerformanceMonitoring = false,
+}: AtomixGlassProps) {
+  const glassRef = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isActive, setIsActive] = useState(false);
+  const [glassSize, setGlassSize] = useState({ width: 270, height: 69 });
+  const [internalGlobalMousePos, setInternalGlobalMousePos] = useState({ x: 0, y: 0 });
+  const [internalMouseOffset, setInternalMouseOffset] = useState({ x: 0, y: 0 });
+
+  const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(false);
+  const [userPrefersHighContrast, setUserPrefersHighContrast] = useState(false);
+
+  useEffect(() => {
+    if (typeof window.matchMedia !== 'function') {
+      console.warn('AtomixGlass: matchMedia not supported, using default preferences');
+      return;
+    }
+
+    try {
+      const mediaQueryReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+      const mediaQueryHighContrast = window.matchMedia('(prefers-contrast: high)');
+
+      setUserPrefersReducedMotion(mediaQueryReducedMotion.matches);
+      setUserPrefersHighContrast(mediaQueryHighContrast.matches);
+
+      const handleReducedMotionChange = (e: MediaQueryListEvent) => {
+        setUserPrefersReducedMotion(e.matches);
+      };
+
+      const handleHighContrastChange = (e: MediaQueryListEvent) => {
+        setUserPrefersHighContrast(e.matches);
+      };
+
+      if (mediaQueryReducedMotion.addEventListener) {
+        mediaQueryReducedMotion.addEventListener('change', handleReducedMotionChange);
+        mediaQueryHighContrast.addEventListener('change', handleHighContrastChange);
+      } else if (mediaQueryReducedMotion.addListener) {
+        mediaQueryReducedMotion.addListener(handleReducedMotionChange);
+        mediaQueryHighContrast.addListener(handleHighContrastChange);
+      }
+
+      return () => {
+        if (mediaQueryReducedMotion.removeEventListener) {
+          mediaQueryReducedMotion.removeEventListener('change', handleReducedMotionChange);
+          mediaQueryHighContrast.removeEventListener('change', handleHighContrastChange);
+        } else if (mediaQueryReducedMotion.removeListener) {
+          mediaQueryReducedMotion.removeListener(handleReducedMotionChange);
+          mediaQueryHighContrast.removeListener(handleHighContrastChange);
+        }
+      };
+    } catch (error) {
+      console.warn('AtomixGlass: Error setting up media queries:', error);
+    }
+  }, []);
+
+  const effectiveReducedMotion = reducedMotion || userPrefersReducedMotion;
+  const effectiveHighContrast = highContrast || userPrefersHighContrast;
+  const effectiveDisableEffects = disableEffects || effectiveReducedMotion;
+
+  const globalMousePos = externalGlobalMousePos || internalGlobalMousePos;
+  const mouseOffset = externalMouseOffset || internalMouseOffset;
+
+  const mouseMoveThrottleRef = useRef<number | null>(null);
+  const lastMouseEventRef = useRef<MouseEvent | null>(null);
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      lastMouseEventRef.current = e;
+
+      if (mouseMoveThrottleRef.current === null) {
+        mouseMoveThrottleRef.current = requestAnimationFrame(() => {
+          const event = lastMouseEventRef.current;
+          if (!event) {
+            mouseMoveThrottleRef.current = null;
+            return;
+          }
+
+          const container = mouseContainer?.current || glassRef.current;
+          if (!container) {
+            mouseMoveThrottleRef.current = null;
+            return;
+          }
+
+          try {
+            const startTime = enablePerformanceMonitoring ? performance.now() : 0;
+
+            const rect = container.getBoundingClientRect();
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+
+            setInternalMouseOffset({
+              x: ((event.clientX - centerX) / rect.width) * 100,
+              y: ((event.clientY - centerY) / rect.height) * 100,
+            });
+
+            setInternalGlobalMousePos({
+              x: event.clientX,
+              y: event.clientY,
+            });
+
+            if (enablePerformanceMonitoring) {
+              const endTime = performance.now();
+              const duration = endTime - startTime;
+              if (duration > 5) {
+                console.warn(`AtomixGlass: Mouse tracking took ${duration.toFixed(2)}ms`);
+              }
+            }
+          } catch (error) {
+            console.warn('AtomixGlass: Error in mouse tracking:', error);
+          } finally {
+            mouseMoveThrottleRef.current = null;
+          }
+        });
+      }
+    },
+    [mouseContainer]
+  );
+
+  useEffect(() => {
+    if (externalGlobalMousePos && externalMouseOffset) {
+      return;
+    }
+
+    if (effectiveDisableEffects) {
+      return;
+    }
+
+    const container = mouseContainer?.current || glassRef.current;
+    if (!container) {
+      return;
+    }
+
+    container.addEventListener('mousemove', handleMouseMove, { passive: true });
+
+    return () => {
+      container.removeEventListener('mousemove', handleMouseMove);
+      if (mouseMoveThrottleRef.current) {
+        cancelAnimationFrame(mouseMoveThrottleRef.current);
+        mouseMoveThrottleRef.current = null;
+      }
+    };
+  }, [
+    handleMouseMove,
+    mouseContainer,
+    externalGlobalMousePos,
+    externalMouseOffset,
+    effectiveDisableEffects,
+  ]);
+
+  const calculateDirectionalScale = useCallback(() => {
+    if (!globalMousePos.x || !globalMousePos.y || !glassRef.current) {
+      return 'scale(1)';
+    }
+
+    const rect = glassRef.current.getBoundingClientRect();
+    const pillCenterX = rect.left + rect.width / 2;
+    const pillCenterY = rect.top + rect.height / 2;
+    const pillWidth = glassSize.width;
+    const pillHeight = glassSize.height;
+
+    const deltaX = globalMousePos.x - pillCenterX;
+    const deltaY = globalMousePos.y - pillCenterY;
+
+    const edgeDistanceX = Math.max(0, Math.abs(deltaX) - pillWidth / 2);
+    const edgeDistanceY = Math.max(0, Math.abs(deltaY) - pillHeight / 2);
+    const edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);
+
+    const activationZone = 200;
+
+    if (edgeDistance > activationZone) {
+      return 'scale(1)';
+    }
+
+    const fadeInFactor = 1 - edgeDistance / activationZone;
+
+    const centerDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    if (centerDistance === 0) {
+      return 'scale(1)';
+    }
+
+    const normalizedX = deltaX / centerDistance;
+    const normalizedY = deltaY / centerDistance;
+
+    const stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor;
+
+    const scaleX =
+      1 +
+      Math.abs(normalizedX) * stretchIntensity * 0.3 -
+      Math.abs(normalizedY) * stretchIntensity * 0.15;
+
+    const scaleY =
+      1 +
+      Math.abs(normalizedY) * stretchIntensity * 0.3 -
+      Math.abs(normalizedX) * stretchIntensity * 0.15;
+
+    return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
+  }, [globalMousePos, elasticity, glassSize]);
+
+  const calculateFadeInFactor = useCallback(() => {
+    if (!globalMousePos.x || !globalMousePos.y || !glassRef.current) {
+      return 0;
+    }
+
+    const rect = glassRef.current.getBoundingClientRect();
+    const pillCenterX = rect.left + rect.width / 2;
+    const pillCenterY = rect.top + rect.height / 2;
+    const pillWidth = glassSize.width;
+    const pillHeight = glassSize.height;
+
+    const edgeDistanceX = Math.max(0, Math.abs(globalMousePos.x - pillCenterX) - pillWidth / 2);
+    const edgeDistanceY = Math.max(0, Math.abs(globalMousePos.y - pillCenterY) - pillHeight / 2);
+    const edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);
+
+    const activationZone = 200;
+    return edgeDistance > activationZone ? 0 : 1 - edgeDistance / activationZone;
+  }, [globalMousePos, glassSize]);
+
+  const calculateElasticTranslation = useCallback(() => {
+    if (!glassRef.current) {
+      return { x: 0, y: 0 };
+    }
+
+    const fadeInFactor = calculateFadeInFactor();
+    const rect = glassRef.current.getBoundingClientRect();
+    const pillCenterX = rect.left + rect.width / 2;
+    const pillCenterY = rect.top + rect.height / 2;
+
+    return {
+      x: (globalMousePos.x - pillCenterX) * elasticity * 0.1 * fadeInFactor,
+      y: (globalMousePos.y - pillCenterY) * elasticity * 0.1 * fadeInFactor,
+    };
+  }, [globalMousePos, elasticity, calculateFadeInFactor]);
+
+  useEffect(() => {
+    const isValidElement = (element: HTMLElement | null): element is HTMLElement => {
+      return element !== null && element instanceof HTMLElement && element.isConnected;
+    };
+
+    let rafId: number | null = null;
+    let lastSize = { width: 0, height: 0 };
+    let lastCornerRadius = cornerRadius;
+
+    const updateGlassSize = (forceUpdate = false): void => {
+      try {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+
+        rafId = requestAnimationFrame(() => {
+          try {
+            if (!isValidElement(glassRef.current)) {
+              console.warn('AtomixGlass: Element not available for size calculation');
+              return;
+            }
+
+            const rect = glassRef.current.getBoundingClientRect();
+
+            if (rect.width <= 0 || rect.height <= 0) {
+              console.warn('AtomixGlass: Invalid dimensions detected', {
+                width: rect.width,
+                height: rect.height,
+              });
+              return;
+            }
+
+            const cornerRadiusOffset = Math.max(0, cornerRadius * 0.1);
+            const newSize = {
+              width: Math.round(rect.width + cornerRadiusOffset),
+              height: Math.round(rect.height + cornerRadiusOffset),
+            };
+
+            const cornerRadiusChanged = lastCornerRadius !== cornerRadius;
+            const dimensionsChanged =
+              newSize.width !== lastSize.width || newSize.height !== lastSize.height;
+
+            if (forceUpdate || cornerRadiusChanged || dimensionsChanged) {
+              lastSize = newSize;
+              lastCornerRadius = cornerRadius;
+              setGlassSize(newSize);
+
+              if (enablePerformanceMonitoring && (cornerRadiusChanged || dimensionsChanged)) {
+                console.log('AtomixGlass: Size updated', {
+                  newSize,
+                  cornerRadius,
+                  cornerRadiusChanged,
+                  dimensionsChanged,
+                });
+              }
+            }
+          } catch (error) {
+            console.error('AtomixGlass: Error updating glass size:', error);
+          } finally {
+            rafId = null;
+          }
+        });
+      } catch (error) {
+        console.error('AtomixGlass: Error in updateGlassSize:', error);
+      }
+    };
+
+    let resizeTimeoutId: NodeJS.Timeout | null = null;
+    const debouncedResizeHandler = (): void => {
+      if (resizeTimeoutId) {
+        clearTimeout(resizeTimeoutId);
+      }
+      resizeTimeoutId = setTimeout(updateGlassSize, 16);
+    };
+
+    try {
+      updateGlassSize(true);
+    } catch (error) {
+      console.error('AtomixGlass: Error in initial size update:', error);
+    }
+
+    let resizeObserver: ResizeObserver | null = null;
+    let fallbackInterval: NodeJS.Timeout | null = null;
+
+    try {
+      const hasResizeObserver =
+        typeof ResizeObserver !== 'undefined' &&
+        typeof ResizeObserver.prototype.observe === 'function';
+
+      if (hasResizeObserver && isValidElement(glassRef.current)) {
+        try {
+          resizeObserver = new ResizeObserver(entries => {
+            try {
+              for (const entry of entries) {
+                if (entry.target === glassRef.current) {
+                  updateGlassSize();
+                  break;
+                }
+              }
+            } catch (error) {
+              console.error('AtomixGlass: Error in ResizeObserver callback:', error);
+            }
+          });
+
+          resizeObserver.observe(glassRef.current);
+        } catch (resizeObserverError) {
+          console.warn(
+            'AtomixGlass: ResizeObserver creation failed, using fallback:',
+            resizeObserverError
+          );
+          fallbackInterval = setInterval(() => {
+            if (isValidElement(glassRef.current)) {
+              updateGlassSize();
+            }
+          }, 100);
+        }
+      } else {
+        console.warn('AtomixGlass: ResizeObserver not supported, using fallback polling');
+        fallbackInterval = setInterval(() => {
+          if (isValidElement(glassRef.current)) {
+            updateGlassSize();
+          }
+        }, 100);
+      }
+    } catch (error) {
+      console.error('AtomixGlass: Error setting up ResizeObserver:', error);
+      fallbackInterval = setInterval(() => {
+        if (isValidElement(glassRef.current)) {
+          updateGlassSize();
+        }
+      }, 100);
+    }
+
+    window.addEventListener('resize', debouncedResizeHandler, { passive: true });
+
+    return () => {
+      try {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+          rafId = null;
+        }
+
+        if (resizeTimeoutId) {
+          clearTimeout(resizeTimeoutId);
+          resizeTimeoutId = null;
+        }
+
+        window.removeEventListener('resize', debouncedResizeHandler);
+
+        if (resizeObserver) {
+          try {
+            if (isValidElement(glassRef.current)) {
+              resizeObserver.unobserve(glassRef.current);
+            }
+            resizeObserver.disconnect();
+          } catch (error) {
+            console.error('AtomixGlass: Error cleaning up ResizeObserver:', error);
+          }
+          resizeObserver = null;
+        }
+
+        if (fallbackInterval) {
+          clearInterval(fallbackInterval);
+          fallbackInterval = null;
+        }
+      } catch (error) {
+        console.error('AtomixGlass: Error in cleanup:', error);
+      }
+    };
+  }, [cornerRadius, enablePerformanceMonitoring]);
+
+  useEffect(() => {
+    if (!glassRef.current) return;
+
+    const timeoutId = setTimeout(() => {
+      try {
+        const rect = glassRef.current?.getBoundingClientRect();
+        if (rect && rect.width > 0 && rect.height > 0) {
+          const cornerRadiusOffset = Math.max(0, cornerRadius * 0.1);
+          const newSize = {
+            width: Math.round(rect.width + cornerRadiusOffset),
+            height: Math.round(rect.height + cornerRadiusOffset),
+          };
+          setGlassSize(newSize);
+
+          if (enablePerformanceMonitoring) {
+            console.log('AtomixGlass: Corner radius change triggered size update', {
+              cornerRadius,
+              newSize,
+            });
+          }
+        }
+      } catch (error) {
+        console.warn('AtomixGlass: Error in corner radius size update:', error);
+      }
+    }, 0);
+
+    return () => clearTimeout(timeoutId);
+  }, [cornerRadius, enablePerformanceMonitoring]);
+
+  const elasticTranslation = useMemo(() => {
+    if (effectiveDisableEffects) {
+      return { x: 0, y: 0 };
+    }
+    return calculateElasticTranslation();
+  }, [calculateElasticTranslation, effectiveDisableEffects]);
+
+  const directionalScale = useMemo(() => {
+    if (effectiveDisableEffects) {
+      return 'scale(1)';
+    }
+    return calculateDirectionalScale();
+  }, [calculateDirectionalScale, effectiveDisableEffects]);
+
+  const transformStyle = useMemo(() => {
+    if (effectiveDisableEffects) {
+      return isActive && Boolean(onClick) ? 'scale(0.98)' : 'scale(1)';
+    }
+    return `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? 'scale(0.96)' : directionalScale}`;
+  }, [elasticTranslation, isActive, onClick, directionalScale, effectiveDisableEffects]);
+
+  const baseStyle = useMemo(
+    () => ({
+      ...style,
+      transform: transformStyle,
+      transition: effectiveReducedMotion ? 'none' : 'all ease-out 0.2s',
+      willChange: effectiveDisableEffects ? 'auto' : 'transform',
+      ...(effectiveHighContrast && {
+        border: '2px solid currentColor',
+        outline: '2px solid transparent',
+        outlineOffset: '2px',
+      }),
+    }),
+    [style, transformStyle, effectiveReducedMotion, effectiveDisableEffects, effectiveHighContrast]
+  );
+
+  const positionStyles = useMemo(
+    () => ({
+      position: (baseStyle.position || 'absolute') as React.CSSProperties['position'],
+      top: baseStyle.top || 0,
+      left: baseStyle.left || 0,
+    }),
+    [baseStyle]
+  );
+
+  const getCurrentElementSize = useCallback(() => {
+    if (!glassRef.current) {
+      return { width: 0, height: 0 };
+    }
+
+    try {
+      const rect = glassRef.current.getBoundingClientRect();
+      return {
+        width: Math.max(rect.width, 0),
+        height: Math.max(rect.height, 0),
+      };
+    } catch (error) {
+      console.warn('AtomixGlass: Error getting current element size:', error);
+      return { width: 0, height: 0 };
+    }
+  }, []);
+
+  const getTransformedSize = useCallback(() => {
+    const currentSize = getCurrentElementSize();
+
+    if (effectiveDisableEffects || currentSize.width === 0 || currentSize.height === 0) {
+      return currentSize;
+    }
+
+    let scaleX = 1;
+    let scaleY = 1;
+
+    const simpleScaleMatch = directionalScale.match(/scale\(([^)]+)\)/);
+    if (simpleScaleMatch && simpleScaleMatch[1]) {
+      const scaleValue = parseFloat(simpleScaleMatch[1]);
+      scaleX = scaleValue;
+      scaleY = scaleValue;
+    } else {
+      const scaleXMatch = directionalScale.match(/scaleX\(([^)]+)\)/);
+      if (scaleXMatch && scaleXMatch[1]) {
+        scaleX = parseFloat(scaleXMatch[1]);
+      }
+
+      const scaleYMatch = directionalScale.match(/scaleY\(([^)]+)\)/);
+      if (scaleYMatch && scaleYMatch[1]) {
+        scaleY = parseFloat(scaleYMatch[1]);
+      }
+    }
+
+    const transformedSize = {
+      width: currentSize.width * scaleX,
+      height: currentSize.height * scaleY,
+    };
+
+    if (enablePerformanceMonitoring && (scaleX !== 1 || scaleY !== 1)) {
+      console.log('AtomixGlass: Scale transformation detected', {
+        directionalScale,
+        scaleX,
+        scaleY,
+        originalSize: currentSize,
+        transformedSize,
+      });
+    }
+
+    return transformedSize;
+  }, [
+    getCurrentElementSize,
+    directionalScale,
+    effectiveDisableEffects,
+    enablePerformanceMonitoring,
+  ]);
+
+  const borderLayer1Style = useMemo(() => {
+    const borderWidth = 1.5;
+
+    const adjustedSize = {
+      width: baseStyle.position !== 'fixed' ? '100%' : baseStyle.width ? baseStyle.width : Math.max(glassSize.width, 0),
+      height: baseStyle.position !== 'fixed' ? '100%' : baseStyle.height ? baseStyle.height : Math.max(glassSize.height, 0),
+    };
+
+    return {
+      ...positionStyles,
+
+      width: adjustedSize.width,
+      height: adjustedSize.height,
+      borderRadius: `${Math.max(0, cornerRadius)}px`,
+      transform: baseStyle.transform,
+      transition: effectiveReducedMotion ? 'none' : baseStyle.transition,
+      pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
+      mixBlendMode: 'screen' as React.CSSProperties['mixBlendMode'],
+      opacity: 0.2,
+      padding: `${borderWidth}px`,
+      boxSizing: 'border-box' as React.CSSProperties['boxSizing'],
+      zIndex: 5,
+      WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+      WebkitMaskComposite: 'xor',
+      maskComposite: 'exclude',
+      boxShadow:
+        '0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35)',
+      background: `linear-gradient(
+        ${135 + mouseOffset.x * 1.2}deg,
+        rgba(255, 255, 255, 0.0) 0%,
+        rgba(255, 255, 255, ${0.12 + Math.abs(mouseOffset.x) * 0.008}) ${Math.max(10, 33 + mouseOffset.y * 0.3)}%,
+        rgba(255, 255, 255, ${0.4 + Math.abs(mouseOffset.x) * 0.012}) ${Math.min(90, 66 + mouseOffset.y * 0.4)}%,
+        rgba(255, 255, 255, 0.0) 100%
+      )`,
+    };
+  }, [
+    positionStyles,
+    glassSize,
+    cornerRadius,
+    baseStyle,
+    mouseOffset,
+    effectiveReducedMotion,
+  ]);
+
+  const borderLayer2Style = useMemo(() => {
+    const borderWidth = 1.5;
+
+    const adjustedSize = {
+      width: baseStyle.position !== 'fixed' ? '100%' : baseStyle.width ? baseStyle.width : Math.max(glassSize.width, 0),
+      height: baseStyle.position !== 'fixed' ? '100%' : baseStyle.height ? baseStyle.height : Math.max(glassSize.height, 0),
+    };
+
+    return {
+      ...positionStyles,
+      width: adjustedSize.width,
+      height: adjustedSize.height,
+      borderRadius: `${Math.max(0, cornerRadius)}px`,
+      transform: baseStyle.transform,
+      transition: effectiveReducedMotion ? 'none' : baseStyle.transition,
+      overflow: 'hidden',
+      pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
+      zIndex: 6,
+      mixBlendMode: 'overlay' as React.CSSProperties['mixBlendMode'],
+      padding: `${borderWidth}px`,
+      boxSizing: 'border-box' as React.CSSProperties['boxSizing'],
+      WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+      WebkitMaskComposite: 'xor',
+      maskComposite: 'exclude',
+      boxShadow:
+        '0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35)',
+      background: `linear-gradient(
+        ${135 + mouseOffset.x * 1.2}deg,
+        rgba(255, 255, 255, 0.0) 0%,
+        rgba(255, 255, 255, ${0.32 + Math.abs(mouseOffset.x) * 0.008}) ${Math.max(10, 33 + mouseOffset.y * 0.3)}%,
+        rgba(255, 255, 255, ${0.6 + Math.abs(mouseOffset.x) * 0.012}) ${Math.min(90, 66 + mouseOffset.y * 0.4)}%,
+        rgba(255, 255, 255, 0.0) 100%
+      )`,
+    };
+  }, [
+    positionStyles,
+    glassSize,
+    cornerRadius,
+    baseStyle,
+    mouseOffset,
+    effectiveReducedMotion,
+  ]);
+
+  const hoverEffect1Style = useMemo(() => {
+    return {
+      ...positionStyles,
+      position: 'absolute' as React.CSSProperties['position'],
+      inset: '0',
+      borderRadius: `${Math.max(0, cornerRadius)}px`,
+      transform: baseStyle.transform,
+      pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
+      transition: effectiveReducedMotion ? 'none' : 'all 0.2s ease-out',
+      opacity: isHovered || isActive ? 0.5 : 0,
+      background: `radial-gradient(
+        circle at ${50 + mouseOffset.x / 2}% ${50 + mouseOffset.y / 2}%,
+        rgba(255, 255, 255, 0.5) 0%,
+        rgba(255, 255, 255, 0) 50%
+      )`,
+      mixBlendMode: 'overlay' as React.CSSProperties['mixBlendMode'],
+    };
+  }, [
+    positionStyles,
+    cornerRadius,
+    baseStyle,
+    isHovered,
+    isActive,
+    mouseOffset,
+    effectiveReducedMotion,
+  ]);
+
+  const hoverEffect2Style = useMemo(() => {
+    return {
+      ...positionStyles,
+      position: 'absolute' as React.CSSProperties['position'],
+      inset: '0',
+      borderRadius: `${Math.max(0, cornerRadius)}px`,
+      overflow: 'hidden',
+      transform: baseStyle.transform,
+      pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
+      transition: effectiveReducedMotion ? 'none' : 'all 0.2s ease-out',
+      opacity: isActive ? 0.5 : 0,
+      background: `radial-gradient(
+        circle at ${50 + mouseOffset.x / 1.5}% ${50 + mouseOffset.y / 1.5}%,
+        rgba(255, 255, 255, 1) 0%,
+        rgba(255, 255, 255, 0) 80%
+      )`,
+      mixBlendMode: 'overlay' as React.CSSProperties['mixBlendMode'],
+    };
+  }, [positionStyles, cornerRadius, baseStyle, isActive, mouseOffset, effectiveReducedMotion]);
+
+  const hoverEffect3Style = useMemo(() => {
+    return {
+      ...positionStyles,
+      position: 'absolute' as React.CSSProperties['position'],
+      inset: '0',
+      transform: baseStyle.transform,
+      borderRadius: `${Math.max(0, cornerRadius)}px`,
+      pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
+      transition: effectiveReducedMotion ? 'none' : 'all 0.2s ease-out',
+      opacity: isHovered ? 0.4 : isActive ? 0.8 : 0,
+      background: `radial-gradient(
+        circle at ${50 + mouseOffset.x}% ${50 + mouseOffset.y}%,
+        rgba(255, 255, 255, 1) 0%,
+        rgba(255, 255, 255, 0) 100%
+      )`,
+      mixBlendMode: 'overlay' as React.CSSProperties['mixBlendMode'],
+    };
+  }, [
+    positionStyles,
+    cornerRadius,
+    baseStyle,
+    isHovered,
+    isActive,
+    mouseOffset,
+    effectiveReducedMotion,
+  ]);
+
+  return (
+    <div
+      style={{ ...positionStyles, position: 'relative' }}
+      role={role || (onClick ? 'button' : undefined)}
+      tabIndex={onClick ? (tabIndex ?? 0) : tabIndex}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedBy}
+      aria-disabled={onClick ? false : undefined}
+      onKeyDown={
+        onClick
+          ? e => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick();
+              }
+            }
+          : undefined
+      }
+    >
+      <div
+        className={`u-bg-dark ${overLight ? 'u-opacity-50' : 'u-opacity-0'}`}
+        style={{
+          ...positionStyles,
+          height: glassSize.height,
+          width: glassSize.width,
+          borderRadius: `${cornerRadius}px`,
+          transform: baseStyle.transform,
+          transition: baseStyle.transition,
+          willChange: 'transform',
+        }}
+      />
+      <div
+        className={`u-bg-black ${overLight ? 'u-opacity-25' : 'u-opacity-0'}`}
+        style={{
+          ...positionStyles,
+          height: glassSize.height,
+          width: glassSize.width,
+          borderRadius: `${cornerRadius}px`,
+          transform: baseStyle.transform,
+          transition: baseStyle.transition,
+          mixBlendMode: 'overlay',
+          pointerEvents: 'none',
+          willChange: 'transform',
+        }}
+      />
+
+      <GlassContainer
+        ref={glassRef}
+        className={className}
+        style={{
+          ...baseStyle,
+          transform: baseStyle.transform,
+        }}
+        cornerRadius={cornerRadius}
+        displacementScale={
+          effectiveDisableEffects ? 0 : overLight ? displacementScale * 0.5 : displacementScale
+        }
+        blurAmount={effectiveDisableEffects ? 0 : blurAmount}
+        saturation={effectiveHighContrast ? 200 : saturation}
+        aberrationIntensity={effectiveDisableEffects ? 0 : aberrationIntensity}
+        glassSize={glassSize}
+        padding={padding}
+        mouseOffset={effectiveDisableEffects ? { x: 0, y: 0 } : mouseOffset}
+        globalMousePos={effectiveDisableEffects ? { x: 0, y: 0 } : globalMousePos}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onMouseDown={() => setIsActive(true)}
+        onMouseUp={() => setIsActive(false)}
+        active={isActive}
+        isHovered={isHovered}
+        isActive={isActive}
+        overLight={overLight}
+        onClick={onClick}
+        mode={effectiveDisableEffects ? 'standard' : mode}
+        transform={baseStyle.transform}
+        effectiveDisableEffects={effectiveDisableEffects}
+        effectiveReducedMotion={effectiveReducedMotion}
+      >
+        {children}
+      </GlassContainer>
+
+      <span style={borderLayer1Style} />
+
+      <span style={borderLayer2Style} />
+
+      {Boolean(onClick) && (
+        <>
+          <div style={hoverEffect1Style} />
+          <div style={hoverEffect2Style} />
+          <div style={hoverEffect3Style} />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default AtomixGlass;