@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -1,1277 +1,611 @@
-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;
-}
-
+import React, { useMemo, useRef } from 'react';
+import type { AtomixGlassProps, GlassSize } from '../../lib/types/components';
+import { ATOMIX_GLASS } from '../../lib/constants/components';
+import { AtomixGlassContainer } from './AtomixGlassContainer';
+import { useAtomixGlass } from '../../lib/composables/useAtomixGlass';
+
+/**
+ * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
+ *
+ * Features:
+ * - Hardware-accelerated glass effects with SVG filters
+ * - Mouse-responsive liquid distortion
+ * - Dynamic border-radius extraction from children CSS properties
+ * - Automatic light/dark theme detection via overLight prop
+ * - Accessibility and performance optimizations
+ * - Multiple displacement modes (standard, polar, prominent, shader)
+ * - Design token integration for consistent theming
+ * - Focus ring support for keyboard navigation
+ * - Responsive breakpoints for mobile optimization
+ * - Enhanced ARIA attributes for screen readers
+ *
+ * Design System Compliance:
+ * - Uses design tokens for opacity, spacing, and colors
+ * - Follows BEM methodology for class naming
+ * - Implements focus-ring mixin for accessibility
+ * - Supports reduced motion and high contrast preferences
+ *
+ * @example
+ * // Basic usage with dynamic border-radius extraction
+ * <AtomixGlass>
+ *   <div style={{ borderRadius: '12px' }}>Content with 12px radius</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Manual border-radius override
+ * <AtomixGlass cornerRadius={20}>
+ *   <div>Content with 20px glass radius</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Interactive glass with click handler
+ * <AtomixGlass onClick={() => console.log('Clicked')} aria-label="Glass card">
+ *   <div>Clickable content</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Boolean mode (explicit control)
+ * <AtomixGlass overLight={true}>
+ *   <div>Content on light background</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Auto-detection mode
+ * <AtomixGlass overLight="auto">
+ *   <div>Content with auto-detected background</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Object config with custom settings
+ * <AtomixGlass 
+ *   overLight={{
+ *     threshold: 0.8,
+ *     opacity: 0.6,
+ *     contrast: 1.8,
+ *     brightness: 1.0,
+ *     saturationBoost: 1.5
+ *   }}
+ * >
+ *   <div>Content with custom overLight config</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Debug mode for overLight detection
+ * <AtomixGlass overLight="auto" debugOverLight={true}>
+ *   <div>Content with debug logging enabled</div>
+ * </AtomixGlass>
+ */
 export function AtomixGlass({
   children,
-  displacementScale = 15,
-  blurAmount = 0.5,
-  saturation = 120,
-  aberrationIntensity = 1,
-  elasticity = 0.15,
-  cornerRadius = 20,
-  globalMousePos: externalGlobalMousePos,
+  displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE,
+  blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
+  saturation = ATOMIX_GLASS.DEFAULTS.SATURATION,
+  aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY,
+  elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY,
+  cornerRadius,
+  globalMousePosition: externalGlobalMousePosition,
   mouseOffset: externalMouseOffset,
   mouseContainer = null,
   className = '',
-  padding = '0 0',
-  overLight = false,
+  padding = ATOMIX_GLASS.DEFAULTS.PADDING,
+  overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT,
   style = {},
-  mode = 'standard',
+  mode = ATOMIX_GLASS.DEFAULTS.MODE,
   onClick,
-
+  shaderVariant = 'liquidGlass',
   'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedBy,
   role,
   tabIndex,
-
   reducedMotion = false,
   highContrast = false,
   disableEffects = false,
-
+  enableLiquidBlur = false,
+  enableBorderEffect = true,
+  enableOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS,
   enablePerformanceMonitoring = false,
+  debugCornerRadius = false,
+  debugOverLight = 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);
-      }
+  const contentRef = useRef<HTMLDivElement>(null);
 
-      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,
+  // Use composable hook for all state and logic
+  const {
+    isHovered,
+    isActive,
+    glassSize,
+    effectiveCornerRadius,
+    effectiveReducedMotion,
+    effectiveHighContrast,
     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]);
+    overLightConfig,
+    globalMousePosition,
+    mouseOffset,
+    transformStyle,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleMouseDown,
+    handleMouseUp,
+    handleKeyDown,
+  } = useAtomixGlass({
+    glassRef,
+    contentRef,
+    cornerRadius,
+    globalMousePosition: externalGlobalMousePosition,
+    mouseOffset: externalMouseOffset,
+    mouseContainer,
+    overLight,
+    reducedMotion,
+    highContrast,
+    disableEffects,
+    elasticity,
+    onClick,
+    debugCornerRadius,
+    debugOverLight,
+    enablePerformanceMonitoring,
+    children,
+  });
 
-  const directionalScale = useMemo(() => {
-    if (effectiveDisableEffects) {
-      return 'scale(1)';
-    }
-    return calculateDirectionalScale();
-  }, [calculateDirectionalScale, effectiveDisableEffects]);
+  // Use consistent overLight state from hook
+  const isOverLight = overLightConfig.isOverLight;
+  const shouldRenderOverLightLayers = enableOverLightLayers && isOverLight;
 
-  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]);
+  // Memoize transition duration using design token pattern
+  const transitionDuration = useMemo(
+    () => (effectiveReducedMotion ? 'none' : 'var(--atomix-transition-duration, 0.2s) ease-out'),
+    [effectiveReducedMotion]
+  );
 
+  // Calculate base style with transforms (only dynamic values)
+  // Performance: willChange is set only when transforms are active and effects are enabled
   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',
+      ...(elasticity !== 0 && !effectiveDisableEffects && {
+        transform: transformStyle,
+        willChange: 'transform',
+      }),
+      // Reset willChange when effects are disabled to allow browser optimization
+      ...(effectiveDisableEffects && {
+        willChange: 'auto',
       }),
     }),
-    [style, transformStyle, effectiveReducedMotion, effectiveDisableEffects, effectiveHighContrast]
+    [style, transformStyle, effectiveDisableEffects, elasticity]
+  );
+
+  // Build className with state modifiers
+  const componentClassName = useMemo(
+    () =>
+      [
+        ATOMIX_GLASS.BASE_CLASS,
+        effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`,
+        effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`,
+        effectiveDisableEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' '),
+    [effectiveReducedMotion, effectiveHighContrast, effectiveDisableEffects, className]
   );
 
+  // Calculate position and size styles
+  // Optimize: only depend on specific baseStyle properties used
+  const baseStylePosition = baseStyle.position;
+  const baseStyleTop = baseStyle.top;
+  const baseStyleLeft = baseStyle.left;
+
   const positionStyles = useMemo(
     () => ({
-      position: (baseStyle.position || 'absolute') as React.CSSProperties['position'],
-      top: baseStyle.top || 0,
-      left: baseStyle.left || 0,
+      position: (baseStylePosition || 'absolute') as React.CSSProperties['position'],
+      top: baseStyleTop || 0,
+      left: baseStyleLeft || 0,
     }),
-    [baseStyle]
+    [baseStylePosition, baseStyleTop, baseStyleLeft]
   );
 
-  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,
-    };
+  // Optimize: only depend on specific baseStyle properties used
+  const baseStyleWidth = baseStyle.width;
+  const baseStyleHeight = baseStyle.height;
+  const glassSizeWidth = glassSize.width;
+  const glassSizeHeight = glassSize.height;
 
-    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 adjustedSize = useMemo(
+    () => ({
+      width:
+        baseStylePosition !== 'fixed'
+          ? '100%'
+          : baseStyleWidth
+            ? baseStyleWidth
+            : Math.max(glassSizeWidth, 0),
+      height:
+        baseStylePosition !== 'fixed'
+          ? '100%'
+          : baseStyleHeight
+            ? baseStyleHeight
+            : Math.max(glassSizeHeight, 0),
+    }),
+    [baseStylePosition, baseStyleWidth, baseStyleHeight, glassSizeWidth, glassSizeHeight]
+  );
 
-  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,
-  ]);
+  // Memoize gradient calculations separately for better performance
+  // Extract mouse position values for dependency optimization
+  const mouseOffsetX = mouseOffset.x;
+  const mouseOffsetY = mouseOffset.y;
 
-  const borderLayer2Style = useMemo(() => {
-    const borderWidth = 1.5;
+  const gradientCalculations = useMemo(() => {
+    const mx = mouseOffsetX;
+    const my = mouseOffsetY;
+    const { GRADIENT } = ATOMIX_GLASS.CONSTANTS;
 
-    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,
-  ]);
+    // Calculate gradient angles and stops (optimized)
+    const borderGradientAngle =
+      GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER;
+    const borderStop1 = Math.max(
+      GRADIENT.BORDER_STOP_1.MIN,
+      GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER
+    );
+    const borderStop2 = Math.min(
+      GRADIENT.BORDER_STOP_2.MAX,
+      GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER
+    );
+    const borderOpacity1 =
+      GRADIENT.BORDER_OPACITY.BASE_1 +
+      Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW;
+    const borderOpacity2 =
+      GRADIENT.BORDER_OPACITY.BASE_2 +
+      Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH;
+    const borderOpacity3 =
+      GRADIENT.BORDER_OPACITY.BASE_3 +
+      Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW;
+    const borderOpacity4 =
+      GRADIENT.BORDER_OPACITY.BASE_4 +
+      Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH;
+
+    // Hover gradient positions
+    const hover1X = GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1;
+    const hover1Y = GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1;
+    const hover2X = GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2;
+    const hover2Y = GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2;
+    const hover3X = GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3;
+    const hover3Y = GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3;
+
+    // Base layer positions
+    const baseX = GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER;
+    const baseY = GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER;
 
-  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'],
+      isOverLight,
+      mx,
+      my,
+      borderGradientAngle,
+      borderStop1,
+      borderStop2,
+      borderOpacity1,
+      borderOpacity2,
+      borderOpacity3,
+      borderOpacity4,
+      hover1X,
+      hover1Y,
+      hover2X,
+      hover2Y,
+      hover3X,
+      hover3Y,
+      baseX,
+      baseY,
     };
-  }, [
-    positionStyles,
-    cornerRadius,
-    baseStyle,
-    isHovered,
-    isActive,
-    mouseOffset,
-    effectiveReducedMotion,
-  ]);
+  }, [mouseOffsetX, mouseOffsetY, isOverLight]);
+
+  // Memoize opacity values separately - using design token values where applicable
+  // Optimize: extract overLightConfig.opacity to avoid depending on whole object
+  const overLightOpacity = overLightConfig.opacity;
+
+  // Read opacity design tokens from CSS custom properties
+  const opacityValues = useMemo(() => {
+    // Get opacity values from CSS custom properties with fallbacks
+    // These align with design tokens: --atomix-opacity-50, --atomix-opacity-40, etc.
+    let opacity50 = 0.5;
+    let opacity40 = 0.4;
+    let opacity80 = 0.8;
+    let opacity0 = 0;
+
+    // Try to read from CSS custom properties if available (SSR-safe)
+    if (typeof window !== 'undefined' && glassRef.current) {
+      try {
+        const computedStyle = window.getComputedStyle(glassRef.current);
+        const opacity50Value = computedStyle.getPropertyValue('--atomix-opacity-50').trim();
+        const opacity40Value = computedStyle.getPropertyValue('--atomix-opacity-40').trim();
+        const opacity80Value = computedStyle.getPropertyValue('--atomix-opacity-80').trim();
+        const opacity0Value = computedStyle.getPropertyValue('--atomix-opacity-0').trim();
+
+        if (opacity50Value) opacity50 = parseFloat(opacity50Value) || 0.5;
+        if (opacity40Value) opacity40 = parseFloat(opacity40Value) || 0.4;
+        if (opacity80Value) opacity80 = parseFloat(opacity80Value) || 0.8;
+        if (opacity0Value) opacity0 = parseFloat(opacity0Value) || 0;
+      } catch (error) {
+        // Fallback to defaults if reading fails
+      }
+    }
 
-  const hoverEffect2Style = useMemo(() => {
+    const BASE_OVER_LIGHT_OPACITY = opacity40; // Uses design token
+    const OVER_OPACITY_MULTIPLIER = 1.1; // Dynamic multiplier for overlay
+    
     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'],
+      hover1: isHovered || isActive ? opacity50 : opacity0,
+      hover2: isActive ? opacity50 : opacity0,
+      hover3: isHovered ? opacity40 : isActive ? opacity80 : opacity0,
+      base: isOverLight ? overLightOpacity || BASE_OVER_LIGHT_OPACITY : opacity0,
+      over: isOverLight ? (overLightOpacity || BASE_OVER_LIGHT_OPACITY) * OVER_OPACITY_MULTIPLIER : opacity0,
     };
-  }, [positionStyles, cornerRadius, baseStyle, isActive, mouseOffset, effectiveReducedMotion]);
+  }, [isHovered, isActive, isOverLight, overLightOpacity, glassRef]);
+
+  // Generate CSS variables for layers (only dynamic values)
+  // Optimize: extract specific properties from objects to minimize dependencies
+  const gradientIsOverLight = gradientCalculations.isOverLight;
+  const gradientMx = gradientCalculations.mx;
+  const gradientMy = gradientCalculations.my;
+  const gradientBorderGradientAngle = gradientCalculations.borderGradientAngle;
+  const gradientBorderStop1 = gradientCalculations.borderStop1;
+  const gradientBorderStop2 = gradientCalculations.borderStop2;
+  const gradientBorderOpacity1 = gradientCalculations.borderOpacity1;
+  const gradientBorderOpacity2 = gradientCalculations.borderOpacity2;
+  const gradientBorderOpacity3 = gradientCalculations.borderOpacity3;
+  const gradientBorderOpacity4 = gradientCalculations.borderOpacity4;
+  const gradientHover1X = gradientCalculations.hover1X;
+  const gradientHover1Y = gradientCalculations.hover1Y;
+  const gradientHover2X = gradientCalculations.hover2X;
+  const gradientHover2Y = gradientCalculations.hover2Y;
+  const gradientHover3X = gradientCalculations.hover3X;
+  const gradientHover3Y = gradientCalculations.hover3Y;
+  const gradientBaseX = gradientCalculations.baseX;
+  const gradientBaseY = gradientCalculations.baseY;
+
+  const positionStylesPosition = positionStyles.position;
+  const positionStylesTop = positionStyles.top;
+  const positionStylesLeft = positionStyles.left;
+
+  const adjustedSizeWidth = adjustedSize.width;
+  const adjustedSizeHeight = adjustedSize.height;
+
+  const baseStyleTransform = baseStyle.transform;
+  const opacityValuesHover1 = opacityValues.hover1;
+  const opacityValuesHover2 = opacityValues.hover2;
+  const opacityValuesHover3 = opacityValues.hover3;
+  const opacityValuesBase = opacityValues.base;
+  const opacityValuesOver = opacityValues.over;
+
+  const glassVars = useMemo(() => {
+    // RGB color values for rgba() functions
+    // Note: CSS doesn't support rgba(var(--rgb), opacity) syntax, so we use direct values
+    // These values align with design tokens: --atomix-white-rgb and --atomix-black-rgb
+    // The actual RGB values are defined in SCSS and should match these fallbacks
+    // TODO: Consider reading from CSS custom properties if browser support improves
+    const whiteColor = '255, 255, 255'; // Matches --atomix-white-rgb design token
+    const blackColor = '0, 0, 0'; // Matches --atomix-black-rgb design token
 
-  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'],
-    };
+      // Standard CSS custom properties for dynamic values
+      '--atomix-glass-radius': `${effectiveCornerRadius}px`,
+      '--atomix-glass-transform': baseStyleTransform || 'none',
+      '--atomix-glass-transition': effectiveReducedMotion ? 'none' : transitionDuration,
+      '--atomix-glass-position': positionStylesPosition,
+      '--atomix-glass-top': positionStylesTop !== 'fixed' ? `${positionStylesTop}px` : '0',
+      '--atomix-glass-left': positionStylesLeft !== 'fixed' ? `${positionStylesLeft}px` : '0',
+      '--atomix-glass-width':
+        baseStylePosition !== 'fixed' ? adjustedSizeWidth : `${adjustedSizeWidth}px`,
+      '--atomix-glass-height':
+        baseStylePosition !== 'fixed' ? adjustedSizeHeight : `${adjustedSizeHeight}px`,
+      // Border width: Use spacing token for consistency
+      '--atomix-glass-border-width': 'var(--atomix-spacing-0-5, 0.09375rem)',
+      '--atomix-glass-blend-mode': gradientIsOverLight ? 'multiply' : 'overlay',
+      // Dynamic gradients and backgrounds
+      // Note: RGB values use design token-aligned constants (white: 255,255,255; black: 0,0,0)
+      '--atomix-glass-border-gradient-1': `linear-gradient(${gradientBorderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${gradientBorderOpacity1}) ${gradientBorderStop1}%, rgba(${whiteColor}, ${gradientBorderOpacity2}) ${gradientBorderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+      '--atomix-glass-border-gradient-2': `linear-gradient(${gradientBorderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${gradientBorderOpacity3}) ${gradientBorderStop1}%, rgba(${whiteColor}, ${gradientBorderOpacity4}) ${gradientBorderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+      '--atomix-glass-hover-1-opacity': opacityValuesHover1,
+      '--atomix-glass-hover-1-gradient': gradientIsOverLight
+        ? `radial-gradient(circle at ${gradientHover1X}% ${gradientHover1Y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)`
+        : `radial-gradient(circle at ${gradientHover1X}% ${gradientHover1Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
+      '--atomix-glass-hover-2-opacity': opacityValuesHover2,
+      '--atomix-glass-hover-2-gradient': gradientIsOverLight
+        ? `radial-gradient(circle at ${gradientHover2X}% ${gradientHover2Y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)`
+        : `radial-gradient(circle at ${gradientHover2X}% ${gradientHover2Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
+      '--atomix-glass-hover-3-opacity': opacityValuesHover3,
+      '--atomix-glass-hover-3-gradient': gradientIsOverLight
+        ? `radial-gradient(circle at ${gradientHover3X}% ${gradientHover3Y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)`
+        : `radial-gradient(circle at ${gradientHover3X}% ${gradientHover3Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
+      '--atomix-glass-base-opacity': opacityValuesBase,
+      '--atomix-glass-base-gradient': gradientIsOverLight
+        ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + gradientMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + gradientMy * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + Math.abs(gradientMx) * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
+        : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
+      '--atomix-glass-overlay-opacity': opacityValuesOver,
+      '--atomix-glass-overlay-gradient': gradientIsOverLight
+        ? `radial-gradient(circle at ${gradientBaseX}% ${gradientBaseY}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + Math.abs(gradientMx) * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + Math.abs(gradientMy) * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
+        : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`,
+    } as React.CSSProperties;
   }, [
-    positionStyles,
-    cornerRadius,
-    baseStyle,
-    isHovered,
-    isActive,
-    mouseOffset,
+    // Position styles - only specific properties
+    positionStylesPosition,
+    positionStylesTop,
+    positionStylesLeft,
+    // Adjusted size - only specific properties
+    adjustedSizeWidth,
+    adjustedSizeHeight,
+    // Base style - only transform property
+    baseStyleTransform,
+    baseStylePosition,
+    // Other values
+    effectiveCornerRadius,
     effectiveReducedMotion,
+    transitionDuration,
+    // Gradient calculations - extracted properties
+    gradientIsOverLight,
+    gradientMx,
+    gradientMy,
+    gradientBorderGradientAngle,
+    gradientBorderStop1,
+    gradientBorderStop2,
+    gradientBorderOpacity1,
+    gradientBorderOpacity2,
+    gradientBorderOpacity3,
+    gradientBorderOpacity4,
+    gradientHover1X,
+    gradientHover1Y,
+    gradientHover2X,
+    gradientHover2Y,
+    gradientHover3X,
+    gradientHover3Y,
+    gradientBaseX,
+    gradientBaseY,
+    // Opacity values - extracted properties
+    opacityValuesHover1,
+    opacityValuesHover2,
+    opacityValuesHover3,
+    opacityValuesBase,
+    opacityValuesOver,
   ]);
 
   return (
     <div
-      style={{ ...positionStyles, position: 'relative' }}
+      className={componentClassName}
+      style={glassVars}
       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
-      }
+      aria-disabled={onClick && effectiveDisableEffects ? true : onClick ? false : undefined}
+      aria-pressed={onClick && isActive ? true : onClick ? false : undefined}
+      onKeyDown={onClick ? handleKeyDown : 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
+      <AtomixGlassContainer
         ref={glassRef}
+        contentRef={contentRef}
         className={className}
-        style={{
-          ...baseStyle,
-          transform: baseStyle.transform,
-        }}
-        cornerRadius={cornerRadius}
+        style={baseStyle}
+        cornerRadius={effectiveCornerRadius}
         displacementScale={
-          effectiveDisableEffects ? 0 : overLight ? displacementScale * 0.5 : displacementScale
+          effectiveDisableEffects
+            ? 0
+            : mode === 'shader'
+              ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT
+              : overLightConfig.isOverLight
+                ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT
+                : displacementScale
         }
         blurAmount={effectiveDisableEffects ? 0 : blurAmount}
-        saturation={effectiveHighContrast ? 200 : saturation}
-        aberrationIntensity={effectiveDisableEffects ? 0 : aberrationIntensity}
+        saturation={
+          effectiveHighContrast
+            ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST
+            : overLightConfig.isOverLight
+              ? saturation * overLightConfig.saturationBoost
+              : saturation
+        }
+        aberrationIntensity={
+          effectiveDisableEffects
+            ? 0
+            : mode === 'shader'
+              ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION
+              : 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)}
+        globalMousePosition={effectiveDisableEffects ? { x: 0, y: 0 } : globalMousePosition}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
         active={isActive}
         isHovered={isHovered}
         isActive={isActive}
-        overLight={overLight}
+        overLight={overLightConfig.isOverLight}
         onClick={onClick}
-        mode={effectiveDisableEffects ? 'standard' : mode}
+        mode={mode}
         transform={baseStyle.transform}
         effectiveDisableEffects={effectiveDisableEffects}
         effectiveReducedMotion={effectiveReducedMotion}
+        shaderVariant={shaderVariant}
+        elasticity={elasticity}
+        enableLiquidBlur={enableLiquidBlur}
       >
         {children}
-      </GlassContainer>
-
-      <span style={borderLayer1Style} />
-
-      <span style={borderLayer2Style} />
-
+      </AtomixGlassContainer>
       {Boolean(onClick) && (
         <>
-          <div style={hoverEffect1Style} />
-          <div style={hoverEffect2Style} />
-          <div style={hoverEffect3Style} />
+          {/* Hover layers - opacity and background set via CSS variables in SCSS */}
+          <div className={ATOMIX_GLASS.HOVER_1_CLASS} />
+          <div className={ATOMIX_GLASS.HOVER_2_CLASS} />
+          <div className={ATOMIX_GLASS.HOVER_3_CLASS} />
+        </>
+      )}
+
+      {/* Background layers for over-light mode */}
+      {/* Static styles (pointer-events, will-change) are in SCSS */}
+      <div
+        className={[
+          ATOMIX_GLASS.BACKGROUND_LAYER_CLASS,
+          ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS,
+          isOverLight
+            ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS
+            : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        style={{
+          ...positionStyles,
+          height: adjustedSize.height,
+          width: adjustedSize.width,
+          borderRadius: `${effectiveCornerRadius}px`,
+          transform: baseStyle.transform,
+          transition: baseStyle.transition,
+        }}
+      />
+      <div
+        className={[
+          ATOMIX_GLASS.BACKGROUND_LAYER_CLASS,
+          ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS,
+          isOverLight
+            ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS
+            : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        style={{
+          ...positionStyles,
+          height: adjustedSize.height,
+          width: adjustedSize.width,
+          borderRadius: `${effectiveCornerRadius}px`,
+          transform: baseStyle.transform,
+          transition: baseStyle.transition,
+        }}
+      />
+      {shouldRenderOverLightLayers && (
+        <>
+          {/* Base and overlay layers - opacity and background set via CSS variables in SCSS */}
+          <div className={ATOMIX_GLASS.BASE_LAYER_CLASS} />
+          <div className={ATOMIX_GLASS.OVERLAY_LAYER_CLASS} />
+          {/* Overlay highlight - opacity and background are dynamic, calculated inline */}
+          <div
+            className={ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS}
+            style={{
+              opacity:
+                opacityValues.over *
+                ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
+              background: `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`,
+            }}
+          />
+        </>
+      )}
+      {enableBorderEffect && (
+        <>
+          {/* Border elements - all styles (static and dynamic via CSS variables) are in SCSS */}
+          {/* Position, size, transform, transition, border-radius all use CSS variables set in glassVars */}
+          <span className={ATOMIX_GLASS.BORDER_1_CLASS} />
+          <span className={ATOMIX_GLASS.BORDER_2_CLASS} />
         </>
       )}
     </div>