@shohojdhara/atomix 0.2.4 → 0.2.6

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -1,555 +1,8 @@
-import {
-  type CSSProperties,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-  useMemo,
-} from 'react';
-import {
-  ShaderDisplacementGenerator,
-  fragmentShaders,
-  type FragmentShaderType,
-} from './shader-utils';
-import { displacementMap, polarDisplacementMap, prominentDisplacementMap } from './utils';
-
-// Types
-type DisplacementMode = 'standard' | 'polar' | 'prominent' | 'shader';
-type MousePosition = { x: number; y: number };
-type GlassSize = { width: number; height: number };
-type OverLightConfig =
-  | boolean
-  | 'auto'
-  | { threshold?: number; opacity?: number; contrast?: number };
-type OverLightObjectConfig = { threshold?: number; opacity?: number; contrast?: number };
-
-// Constants
-const ACTIVATION_ZONE = 200;
-const MIN_BLUR = 0.1;
-const MOUSE_INFLUENCE_DIVISOR = 100;
-const EDGE_FADE_PIXELS = 2;
-
-// Helper functions with validation
-const calculateDistance = (pos1: MousePosition, pos2: MousePosition): number => {
-  if (
-    !pos1 ||
-    !pos2 ||
-    typeof pos1.x !== 'number' ||
-    typeof pos1.y !== 'number' ||
-    typeof pos2.x !== 'number' ||
-    typeof pos2.y !== 'number'
-  ) {
-    return 0;
-  }
-  const deltaX = pos1.x - pos2.x;
-  const deltaY = pos1.y - pos2.y;
-  return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-};
-
-const calculateElementCenter = (rect: DOMRect | null): MousePosition => {
-  if (!rect) {
-    return { x: 0, y: 0 };
-  }
-  return {
-    x: rect.left + rect.width / 2,
-    y: rect.top + rect.height / 2,
-  };
-};
-
-const calculateMouseInfluence = (mouseOffset: MousePosition): number => {
-  if (!mouseOffset || typeof mouseOffset.x !== 'number' || typeof mouseOffset.y !== 'number') {
-    return 0;
-  }
-  return (
-    Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) /
-    MOUSE_INFLUENCE_DIVISOR
-  );
-};
-
-const clampBlur = (value: number): number => {
-  if (typeof value !== 'number' || isNaN(value)) {
-    return MIN_BLUR;
-  }
-  return Math.max(MIN_BLUR, value);
-};
-
-const validateGlassSize = (size: GlassSize): boolean => {
-  return (
-    size &&
-    typeof size.width === 'number' &&
-    typeof size.height === 'number' &&
-    size.width > 0 &&
-    size.height > 0
-  );
-};
-
-
-const getDisplacementMap = (mode: DisplacementMode, shaderMapUrl?: string): string => {
-  switch (mode) {
-    case 'standard':
-      return displacementMap;
-    case 'polar':
-      return polarDisplacementMap;
-    case 'prominent':
-      return prominentDisplacementMap;
-    case 'shader':
-      return shaderMapUrl || displacementMap;
-    default:
-      console.warn('AtomixGlass: Invalid displacement mode');
-      return displacementMap;
-  }
-};
-
-interface GlassFilterProps {
-  id: string;
-  displacementScale: number;
-  aberrationIntensity: number;
-  mode: DisplacementMode;
-  shaderMapUrl?: string;
-}
-
-const GlassFilter: React.FC<GlassFilterProps> = ({
-  id,
-  displacementScale,
-  aberrationIntensity,
-  mode,
-  shaderMapUrl,
-}) => (
-  <svg
-    style={{
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      inset: 0,
-      visibility: 'hidden',
-      opacity: 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={getDisplacementMap(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>
-);
-
-interface GlassContainerProps {
-  className?: string;
-  style?: React.CSSProperties;
-  displacementScale?: number;
-  blurAmount?: number;
-  saturation?: number;
-  aberrationIntensity?: number;
-  mouseOffset?: MousePosition;
-  globalMousePosition?: MousePosition;
-  onMouseLeave?: () => void;
-  onMouseEnter?: () => void;
-  onMouseDown?: () => void;
-  onMouseUp?: () => void;
-  active?: boolean;
-  isHovered?: boolean;
-  isActive?: boolean;
-  overLight?: boolean;
-  cornerRadius?: number;
-  padding?: string;
-  glassSize?: GlassSize;
-  onClick?: () => void;
-  mode?: DisplacementMode;
-  transform?: string;
-  effectiveDisableEffects?: boolean;
-  effectiveReducedMotion?: boolean;
-  shaderVariant?: FragmentShaderType;
-  enableLiquidBlur?: boolean;
-  elasticity?: number;
-  children?: React.ReactNode;
-}
-
-const GlassContainer = forwardRef<HTMLDivElement, GlassContainerProps>(
-  (
-    {
-      children,
-      className = '',
-      style,
-      displacementScale = 25,
-      blurAmount = 0.0625,
-      saturation = 180,
-      aberrationIntensity = 2,
-      mouseOffset = { x: 0, y: 0 },
-      globalMousePosition = { 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,
-      shaderVariant = 'liquidGlass',
-      enableLiquidBlur = false,
-      elasticity = 0,
-    },
-    ref
-  ) => {
-    const filterId = useId();
-    const [shaderMapUrl, setShaderMapUrl] = useState<string>('');
-    const shaderGeneratorRef = useRef<ShaderDisplacementGenerator | null>(null);
-
-    // Generate initial shader map when mode/size/variant changes
-    useEffect(() => {
-      if (mode === 'shader' && glassSize.width > 0 && glassSize.height > 0) {
-        shaderGeneratorRef.current?.destroy();
-        const selectedShader = fragmentShaders[shaderVariant] || fragmentShaders.liquidGlass;
-        shaderGeneratorRef.current = new ShaderDisplacementGenerator({
-          width: glassSize.width,
-          height: glassSize.height,
-          fragment: selectedShader,
-        });
-        const url = shaderGeneratorRef.current.updateShader();
-        setShaderMapUrl(url);
-      }
-      return () => {
-        shaderGeneratorRef.current?.destroy();
-        shaderGeneratorRef.current = null;
-      };
-    }, [mode, glassSize.width, glassSize.height, shaderVariant]);
-
-    useEffect(() => {
-      if (!ref || typeof ref === 'function') return;
-
-      const element = (ref as React.RefObject<HTMLDivElement>).current;
-      if (!element) return;
-
-      const timeoutId = setTimeout(() => {
-        // Force reflow to ensure proper sizing
-        element.offsetHeight;
-      }, 0);
-
-      return () => clearTimeout(timeoutId);
-    }, [cornerRadius, glassSize.width, glassSize.height]);
-
-    const [rectCache, setRectCache] = useState<DOMRect | null>(null);
-
-    useEffect(() => {
-      if (!ref || typeof ref === 'function') return;
-      const element = (ref as React.RefObject<HTMLDivElement>).current;
-      if (!element) return;
-      setRectCache(element.getBoundingClientRect());
-    }, [ref, glassSize]);
-
-    const liquidBlur = useMemo(() => {
-      const defaultBlur = {
-        baseBlur: blurAmount,
-        edgeBlur: blurAmount * 1.25,
-        centerBlur: blurAmount * 1.1,
-        flowBlur: blurAmount * 1.2,
-      };
-
-      if (!enableLiquidBlur || !rectCache || !globalMousePosition.x || !globalMousePosition.y) {
-        return defaultBlur;
-      }
-
-      const center = calculateElementCenter(rectCache);
-      const distance = calculateDistance(globalMousePosition, center);
-      const maxDistance =
-        Math.sqrt(rectCache.width * rectCache.width + rectCache.height * rectCache.height) / 2;
-      const normalizedDistance = Math.min(distance / maxDistance, 1);
-      const mouseInfluence = calculateMouseInfluence(mouseOffset);
-
-      const 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 deltaX = globalMousePosition.x - center.x;
-      const deltaY = globalMousePosition.y - center.y;
-      const flowDirection = Math.atan2(deltaY, deltaX);
-      const flowIntensity = Math.sin(flowDirection + mouseInfluence * Math.PI) * 0.5 + 0.5;
-      const flowBlur = baseBlur * (0.4 + flowIntensity * 0.6);
-
-      const hoverMultiplier = isHovered ? 1.2 : 1;
-      const activeMultiplier = isActive ? 1.4 : 1;
-      const stateMultiplier = hoverMultiplier * activeMultiplier;
-
-      return {
-        baseBlur: clampBlur(baseBlur * stateMultiplier),
-        edgeBlur: clampBlur(edgeBlur * stateMultiplier),
-        centerBlur: clampBlur(centerBlur * stateMultiplier),
-        flowBlur: clampBlur(flowBlur * stateMultiplier),
-      };
-    }, [enableLiquidBlur, blurAmount, globalMousePosition, mouseOffset, isHovered, isActive, rectCache]);
-
-    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 {
-        backdropFilter: `${blurLayers.join(' ')} saturate(${Math.min(dynamicSaturation, 200)}%) url(#${filterId})`,
-      };
-    }, [filterId, liquidBlur, saturation]);
-
-    const containerVars = useMemo(() => {
-      const mx = mouseOffset?.x || 0;
-      const my = mouseOffset?.y || 0;
-      const scopedId = `gc-${filterId.replace(/:/g, '')}`;
-      
-      return {
-        [`--${scopedId}-padding`]: padding,
-        [`--${scopedId}-radius`]: `${cornerRadius}px`,
-        [`--${scopedId}-backdrop`]: backdropStyle.backdropFilter,
-        [`--${scopedId}-shadow`]: overLight
-          ? [
-              `inset 0 1px 0 rgba(255, 255, 255, ${0.4 + mx * 0.002})`,
-              `inset 0 -1px 0 rgba(0, 0, 0, ${0.2 + Math.abs(my) * 0.001})`,
-              `inset 0 0 20px rgba(0, 0, 0, ${0.08 + Math.abs(mx + my) * 0.001})`,
-              `0 2px 12px rgba(0, 0, 0, ${0.12 + Math.abs(my) * 0.002})`,
-            ].join(', ')
-          : '0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset',
-        [`--${scopedId}-shadow-opacity`]: effectiveDisableEffects ? 0 : 1,
-        [`--${scopedId}-bg`]: overLight
-          ? `linear-gradient(${180 + mx * 0.5}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)`
-          : 'none',
-        [`--${scopedId}-text-shadow`]: overLight
-          ? '0px 1px 3px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.1)'
-          : '0px 2px 12px rgba(0, 0, 0, 0.4)',
-        '--gc-scoped-id': scopedId,
-      } as React.CSSProperties;
-    }, [filterId, padding, cornerRadius, backdropStyle, mouseOffset, overLight, effectiveDisableEffects]);
-
-    const scopedId = `gc-${filterId.replace(/:/g, '')}`;
-
-    return (
-      <div
-        ref={ref}
-        className={` ${className} ${active ? 'active' : ''}`}
-        style={{ ...style, ...containerVars }}
-        onClick={onClick}
-      >
-        <div
-          className="atomix-glass"
-          style={{
-            position: 'relative',
-            padding: `var(--${scopedId}-padding)`,
-            borderRadius: `var(--${scopedId}-radius)`,
-          }}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-          onMouseDown={onMouseDown}
-          onMouseUp={onMouseUp}
-        >
-          <GlassFilter
-            mode={mode}
-            id={filterId}
-            displacementScale={displacementScale}
-            aberrationIntensity={aberrationIntensity}
-            shaderMapUrl={shaderMapUrl}
-          />
-          <span
-            className="atomix-glass__warp"
-            style={{
-              backdropFilter: `var(--${scopedId}-backdrop)`,
-              borderRadius: `var(--${scopedId}-radius)`,
-              position: 'absolute',
-              inset: '0',
-            }}
-          />
-
-          {/* Enhanced Apple Liquid Glass Inner Shadow Layer */}
-          <div
-            style={{
-              position: 'absolute',
-              inset: '1.5px',
-              borderRadius: `var(--${scopedId}-radius)`,
-              pointerEvents: 'none',
-              boxShadow: `var(--${scopedId}-shadow)`,
-              opacity: `var(--${scopedId}-shadow-opacity)`,
-              background: `var(--${scopedId}-bg)`,
-            }}
-          />
-
-          <div
-            style={{
-              position: 'relative',
-              ...(elasticity !== 0 && {
-                zIndex: 4,
-                textShadow: `var(--${scopedId}-text-shadow)`,
-              }),
-            }}
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
-GlassContainer.displayName = 'GlassContainer';
-
-interface AtomixGlassProps {
-  children: React.ReactNode;
-  displacementScale?: number;
-  blurAmount?: number;
-  saturation?: number;
-  aberrationIntensity?: number;
-  elasticity?: number;
-  cornerRadius?: number;
-  globalMousePosition?: MousePosition;
-  mouseOffset?: MousePosition;
-  mouseContainer?: React.RefObject<HTMLElement | null> | null;
-  className?: string;
-  padding?: string;
-  style?: React.CSSProperties;
-  overLight?: OverLightConfig;
-  mode?: DisplacementMode;
-  onClick?: () => void;
-
-  // Shader variant selection
-  shaderVariant?: FragmentShaderType;
-
-  // Accessibility props
-  'aria-label'?: string;
-  'aria-describedby'?: string;
-  role?: string;
-  tabIndex?: number;
-
-  // Performance and accessibility options
-  reducedMotion?: boolean;
-  highContrast?: boolean;
-  disableEffects?: boolean;
-  enableLiquidBlur?: boolean;
-  enableBorderEffect?: boolean;
-  enableOverLightLayers?: 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
@@ -557,647 +10,496 @@ interface AtomixGlassProps {
  * Features:
  * - Hardware-accelerated glass effects with SVG filters
  * - Mouse-responsive liquid distortion
- * - Automatic light/dark theme detection
+ * - 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 = 20,
-  blurAmount = 1,
-  saturation = 140,
-  aberrationIntensity = 2.5,
-  elasticity = 0.05,
-  cornerRadius = 16,
+  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 = false,
-
+  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<GlassSize>({ width: 270, height: 69 });
-  const [internalGlobalMousePosition, setInternalGlobalMousePosition] = useState<MousePosition>({
-    x: 0,
-    y: 0,
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Use composable hook for all state and logic
+  const {
+    isHovered,
+    isActive,
+    glassSize,
+    effectiveCornerRadius,
+    effectiveReducedMotion,
+    effectiveHighContrast,
+    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 [internalMouseOffset, setInternalMouseOffset] = useState<MousePosition>({ x: 0, y: 0 });
 
-  const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(false);
-  const [userPrefersHighContrast, setUserPrefersHighContrast] = useState(false);
-  const [detectedOverLight, setDetectedOverLight] = useState(false);
+  // Use consistent overLight state from hook
+  const isOverLight = overLightConfig.isOverLight;
+  const shouldRenderOverLightLayers = enableOverLightLayers && isOverLight;
 
-  // Memoized derived values for performance
-  const effectiveReducedMotion = useMemo(
-    () => reducedMotion || userPrefersReducedMotion,
-    [reducedMotion, userPrefersReducedMotion]
-  );
-  const effectiveHighContrast = useMemo(
-    () => highContrast || userPrefersHighContrast,
-    [highContrast, userPrefersHighContrast]
+  // Memoize transition duration using design token pattern
+  const transitionDuration = useMemo(
+    () => (effectiveReducedMotion ? 'none' : 'var(--atomix-transition-duration, 0.2s) ease-out'),
+    [effectiveReducedMotion]
   );
-  const effectiveDisableEffects = useMemo(
-    () => disableEffects || effectiveReducedMotion,
-    [disableEffects, effectiveReducedMotion]
-  );
-
-  useEffect(() => {
-    // Enhanced auto-detect light background with multiple sampling points
-    if (overLight === 'auto' && glassRef.current) {
-      try {
-        const element = glassRef.current;
-        const rect = element.getBoundingClientRect();
-
-        let totalLuminance = 0;
-        let validSamples = 0;
-
-        // Check parent elements and computed styles
-        let currentElement = element.parentElement;
-        while (currentElement && validSamples < 3) {
-          const computedStyle = window.getComputedStyle(currentElement);
-          const bgColor = computedStyle.backgroundColor;
-
-          if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
-            const rgb = bgColor.match(/\d+/g);
-            if (rgb && rgb.length >= 3) {
-              const r = Number(rgb[0]) || 0;
-              const g = Number(rgb[1]) || 0;
-              const b = Number(rgb[2]) || 0;
-              const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-              totalLuminance += luminance;
-              validSamples++;
-            }
-          }
-          currentElement = currentElement.parentElement;
-        }
-
-        // Use canvas sampling as fallback for complex backgrounds
-        if (validSamples === 0 && typeof document !== 'undefined') {
-          try {
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d');
-            if (ctx) {
-              canvas.width = 1;
-              canvas.height = 1;
-
-              // Sample the background at element position
-              const imageData = ctx.getImageData(0, 0, 1, 1);
-              const r = imageData.data[0] || 0;
-              const g = imageData.data[1] || 0;
-              const b = imageData.data[2] || 0;
-              const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-              totalLuminance = luminance;
-              validSamples = 1;
-            }
-          } catch (canvasError) {
-            // Canvas sampling failed, use default
-          }
-        }
 
-        if (validSamples > 0) {
-          const avgLuminance = totalLuminance / validSamples;
-          let threshold = 0.7;
-          if (typeof overLight === 'object' && overLight !== null && overLight !== 'auto') {
-            const objConfig = overLight as OverLightObjectConfig;
-            threshold = objConfig.threshold || 0.7;
-          }
-          setDetectedOverLight(avgLuminance > threshold);
-        }
-      } catch (error) {
-        console.warn('AtomixGlass: Error detecting background brightness:', error);
-      }
-    }
-
-    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 () => {
-        try {
-          if (mediaQueryReducedMotion.removeEventListener) {
-            mediaQueryReducedMotion.removeEventListener('change', handleReducedMotionChange);
-            mediaQueryHighContrast.removeEventListener('change', handleHighContrastChange);
-          } else if (mediaQueryReducedMotion.removeListener) {
-            mediaQueryReducedMotion.removeListener(handleReducedMotionChange);
-            mediaQueryHighContrast.removeListener(handleHighContrastChange);
-          }
-        } catch (cleanupError) {
-          console.error('AtomixGlass: Error cleaning up media query listeners:', cleanupError);
-        }
-      };
-    } catch (error) {
-      console.error('AtomixGlass: Error setting up media queries:', error);
-      return undefined;
-    }
-  }, []);
-
-  // Derived values are now memoized above
-
-  const globalMousePosition = useMemo(
-    () => externalGlobalMousePosition || internalGlobalMousePosition,
-    [externalGlobalMousePosition, internalGlobalMousePosition]
-  );
-  const mouseOffset = useMemo(
-    () => externalMouseOffset || internalMouseOffset,
-    [externalMouseOffset, internalMouseOffset]
+  // 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,
+      ...(elasticity !== 0 && !effectiveDisableEffects && {
+        transform: transformStyle,
+        willChange: 'transform',
+      }),
+      // Reset willChange when effects are disabled to allow browser optimization
+      ...(effectiveDisableEffects && {
+        willChange: 'auto',
+      }),
+    }),
+    [style, transformStyle, effectiveDisableEffects, elasticity]
   );
 
-  const getEffectiveOverLight = useCallback(() => {
-    if (typeof overLight === 'boolean') return overLight;
-    if (overLight === 'auto') return detectedOverLight;
-    return detectedOverLight;
-  }, [overLight, detectedOverLight]);
-
-  const overLightConfig = useMemo(() => {
-    const isOverLight = getEffectiveOverLight();
-    const mouseInfluence = calculateMouseInfluence(mouseOffset);
-    const hoverIntensity = isHovered ? 1.3 : 1;
-    const activeIntensity = isActive ? 1.5 : 1;
-
-    const baseConfig = {
-      isOverLight,
-      threshold: 0.7,
-      opacity: 0.4 * hoverIntensity * activeIntensity,
-      contrast: 1.3 + mouseInfluence * 0.2,
-      brightness: 0.9 + mouseInfluence * 0.1,
-      saturationBoost: 1.2 + mouseInfluence * 0.3,
-      shadowIntensity: 0.8 + mouseInfluence * 0.4,
-      borderOpacity: 0.6 + mouseInfluence * 0.2,
-    };
-
-    if (typeof overLight === 'object' && overLight !== null) {
-      const objConfig = overLight as OverLightObjectConfig;
-      return {
-        ...baseConfig,
-        threshold: objConfig.threshold || baseConfig.threshold,
-        opacity: (objConfig.opacity || 0.4) * hoverIntensity * activeIntensity,
-        contrast: (objConfig.contrast || 1.3) + mouseInfluence * 0.2,
-      };
-    }
-
-    return baseConfig;
-  }, [overLight, getEffectiveOverLight, mouseOffset, isHovered, isActive]);
-
-  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;
-          }
-
-          const startTime = enablePerformanceMonitoring ? performance.now() : 0;
-
-          const rect = container.getBoundingClientRect();
-          if (rect.width === 0 || rect.height === 0) {
-            mouseMoveThrottleRef.current = null;
-            return;
-          }
-
-          const center = calculateElementCenter(rect);
-
-          setInternalMouseOffset({
-            x: ((event.clientX - center.x) / rect.width) * 100,
-            y: ((event.clientY - center.y) / rect.height) * 100,
-          });
-
-          setInternalGlobalMousePosition({
-            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`);
-            }
-          }
-
-          mouseMoveThrottleRef.current = null;
-        });
-      }
-    },
-    [mouseContainer, enablePerformanceMonitoring]
+  // 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]
   );
 
-  useEffect(() => {
-    if (externalGlobalMousePosition && externalMouseOffset) {
-      return;
-    }
-
-    if (effectiveDisableEffects) {
-      return;
-    }
-
-    const container = mouseContainer?.current || glassRef.current;
-    if (!container) {
-      return;
-    }
+  // 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;
 
-    container.addEventListener('mousemove', handleMouseMove, { passive: true });
-
-    return () => {
-      container.removeEventListener('mousemove', handleMouseMove);
-      if (mouseMoveThrottleRef.current) {
-        cancelAnimationFrame(mouseMoveThrottleRef.current);
-        mouseMoveThrottleRef.current = null;
-      }
-    };
-  }, [
-    handleMouseMove,
-    mouseContainer,
-    externalGlobalMousePosition,
-    externalMouseOffset,
-    effectiveDisableEffects,
-  ]);
-
-  const calculateDirectionalScale = useCallback(() => {
-    if (
-      !globalMousePosition.x ||
-      !globalMousePosition.y ||
-      !glassRef.current ||
-      !validateGlassSize(glassSize)
-    ) {
-      return 'scale(1)';
-    }
-
-    const rect = glassRef.current.getBoundingClientRect();
-    const center = calculateElementCenter(rect);
-    const deltaX = globalMousePosition.x - center.x;
-    const deltaY = globalMousePosition.y - center.y;
-
-    const edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2);
-    const edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2);
-    const edgeDistance = calculateDistance({ x: edgeDistanceX, y: edgeDistanceY }, { x: 0, y: 0 });
-
-    if (edgeDistance > ACTIVATION_ZONE) {
-      return 'scale(1)';
-    }
-
-    const fadeInFactor = 1 - edgeDistance / ACTIVATION_ZONE;
-    const centerDistance = calculateDistance(globalMousePosition, center);
+  const positionStyles = useMemo(
+    () => ({
+      position: (baseStylePosition || 'absolute') as React.CSSProperties['position'],
+      top: baseStyleTop || 0,
+      left: baseStyleLeft || 0,
+    }),
+    [baseStylePosition, baseStyleTop, baseStyleLeft]
+  );
 
-    if (centerDistance === 0) {
-      return 'scale(1)';
-    }
+  // Optimize: only depend on specific baseStyle properties used
+  const baseStyleWidth = baseStyle.width;
+  const baseStyleHeight = baseStyle.height;
+  const glassSizeWidth = glassSize.width;
+  const glassSizeHeight = glassSize.height;
 
-    const normalizedX = deltaX / centerDistance;
-    const normalizedY = deltaY / centerDistance;
-    const stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor;
+  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 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)})`;
-  }, [globalMousePosition, elasticity, glassSize]);
 
-  const calculateFadeInFactor = useCallback(() => {
-    if (
-      !globalMousePosition.x ||
-      !globalMousePosition.y ||
-      !glassRef.current ||
-      !validateGlassSize(glassSize)
-    ) {
-      return 0;
-    }
+  // Memoize gradient calculations separately for better performance
+  // Extract mouse position values for dependency optimization
+  const mouseOffsetX = mouseOffset.x;
+  const mouseOffsetY = mouseOffset.y;
 
-    const rect = glassRef.current.getBoundingClientRect();
-    const center = calculateElementCenter(rect);
+  const gradientCalculations = useMemo(() => {
+    const mx = mouseOffsetX;
+    const my = mouseOffsetY;
+    const { GRADIENT } = ATOMIX_GLASS.CONSTANTS;
 
-    const edgeDistanceX = Math.max(
-      0,
-      Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2
+    // 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 edgeDistanceY = Math.max(
-      0,
-      Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2
+    const borderStop2 = Math.min(
+      GRADIENT.BORDER_STOP_2.MAX,
+      GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER
     );
-    const edgeDistance = calculateDistance({ x: edgeDistanceX, y: edgeDistanceY }, { x: 0, y: 0 });
-
-    return edgeDistance > ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ACTIVATION_ZONE;
-  }, [globalMousePosition, glassSize]);
-
-  const calculateElasticTranslation = useCallback(() => {
-    if (!glassRef.current) {
-      return { x: 0, y: 0 };
-    }
-
-    const fadeInFactor = calculateFadeInFactor();
-    const rect = glassRef.current.getBoundingClientRect();
-    const center = calculateElementCenter(rect);
+    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;
 
     return {
-      x: (globalMousePosition.x - center.x) * elasticity * 0.1 * fadeInFactor,
-      y: (globalMousePosition.y - center.y) * elasticity * 0.1 * fadeInFactor,
-    };
-  }, [globalMousePosition, elasticity, calculateFadeInFactor]);
-
-  useEffect(() => {
-    const isValidElement = (element: HTMLElement | null): element is HTMLElement =>
-      element !== null && element instanceof HTMLElement && element.isConnected;
-
-    const validateSize = (size: GlassSize): boolean =>
-      validateGlassSize(size) && size.width <= 4096 && size.height <= 4096;
-
-    let rafId: number | null = null;
-    let lastSize = { width: 0, height: 0 };
-    let lastCornerRadius = cornerRadius;
-
-    const updateGlassSize = (forceUpdate = false): void => {
-      if (rafId !== null) cancelAnimationFrame(rafId);
-
-      rafId = requestAnimationFrame(() => {
-        if (!isValidElement(glassRef.current)) return;
-
-        const rect = glassRef.current.getBoundingClientRect();
-        if (rect.width <= 0 || rect.height <= 0) return;
-
-        const cornerRadiusOffset = Math.max(0, cornerRadius * 0.1);
-        const newSize: GlassSize = {
-          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) && validateSize(newSize)) {
-          lastSize = newSize;
-          lastCornerRadius = cornerRadius;
-          setGlassSize(newSize);
-        }
-
-        rafId = null;
-      });
-    };
-
-    let resizeTimeoutId: NodeJS.Timeout | null = null;
-    const debouncedResizeHandler = (): void => {
-      if (resizeTimeoutId) clearTimeout(resizeTimeoutId);
-      resizeTimeoutId = setTimeout(updateGlassSize, 16);
+      isOverLight,
+      mx,
+      my,
+      borderGradientAngle,
+      borderStop1,
+      borderStop2,
+      borderOpacity1,
+      borderOpacity2,
+      borderOpacity3,
+      borderOpacity4,
+      hover1X,
+      hover1Y,
+      hover2X,
+      hover2Y,
+      hover3X,
+      hover3Y,
+      baseX,
+      baseY,
     };
-
-    updateGlassSize(true);
-
-    let resizeObserver: ResizeObserver | null = null;
-    let fallbackInterval: NodeJS.Timeout | null = null;
-
-    const hasResizeObserver = typeof ResizeObserver !== 'undefined';
-
-    if (hasResizeObserver && isValidElement(glassRef.current)) {
+  }, [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 {
-        resizeObserver = new ResizeObserver(entries => {
-          for (const entry of entries) {
-            if (entry.target === glassRef.current) {
-              updateGlassSize();
-              break;
-            }
-          }
-        });
-        resizeObserver.observe(glassRef.current);
-      } catch {
-        fallbackInterval = setInterval(
-          () => isValidElement(glassRef.current) && updateGlassSize(),
-          100
-        );
+        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
       }
-    } else {
-      fallbackInterval = setInterval(
-        () => isValidElement(glassRef.current) && updateGlassSize(),
-        100
-      );
     }
 
-    window.addEventListener('resize', debouncedResizeHandler, { passive: true });
-
-    return () => {
-      if (rafId !== null) cancelAnimationFrame(rafId);
-      if (resizeTimeoutId) clearTimeout(resizeTimeoutId);
-      if (fallbackInterval) clearInterval(fallbackInterval);
-      window.removeEventListener('resize', debouncedResizeHandler);
-      resizeObserver?.disconnect();
+    const BASE_OVER_LIGHT_OPACITY = opacity40; // Uses design token
+    const OVER_OPACITY_MULTIPLIER = 1.1; // Dynamic multiplier for overlay
+    
+    return {
+      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,
     };
-  }, [cornerRadius, enablePerformanceMonitoring]);
-
-  useEffect(() => {
-    if (!glassRef.current) return;
-
-    const timeoutId = setTimeout(() => {
-      if (!glassRef.current) return;
-
-      const rect = glassRef.current.getBoundingClientRect();
-      if (rect.width > 0 && rect.height > 0) {
-        const cornerRadiusOffset = Math.max(0, cornerRadius * 0.1);
-        setGlassSize({
-          width: Math.round(rect.width + cornerRadiusOffset),
-          height: Math.round(rect.height + cornerRadiusOffset),
-        });
-      }
-    }, 0);
-
-    return () => clearTimeout(timeoutId);
-  }, [cornerRadius]);
-
-  const elasticTranslation = useMemo(() => {
-    if (effectiveDisableEffects) {
-      return { x: 0, y: 0 };
-    }
-    return calculateElasticTranslation();
-  }, [calculateElasticTranslation, effectiveDisableEffects]);
+  }, [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 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,
-      ...(elasticity !== 0 && {
-        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, elasticity]
-  );
-
-  const positionStyles = useMemo(
-    () => ({
-      position: (baseStyle.position || 'absolute') as React.CSSProperties['position'],
-      top: baseStyle.top || 0,
-      left: baseStyle.left || 0,
-    }),
-    [baseStyle]
-  );
-
-  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),
-  };
-
-  const glassId = useId();
   const glassVars = useMemo(() => {
-    const isOverLight = overLightConfig?.isOverLight ?? false;
-    const mx = mouseOffset.x;
-    const my = mouseOffset.y;
-    const scopedId = `ag-${glassId.replace(/:/g, '')}`;
-    
+    // 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
+
     return {
-      [`--${scopedId}-pos`]: positionStyles.position,
-      [`--${scopedId}-top`]: positionStyles.top !== 'fixed' ? `${positionStyles.top}px` : '0',
-      [`--${scopedId}-left`]: positionStyles.left !== 'fixed' ? `${positionStyles.left}px` : '0',
-      [`--${scopedId}-w`]: baseStyle.position !== 'fixed' ? adjustedSize.width : `${adjustedSize.width}px`,
-      [`--${scopedId}-h`]: baseStyle.position !== 'fixed' ? adjustedSize.height : `${adjustedSize.height}px`,
-      [`--${scopedId}-r`]: `${cornerRadius}px`,
-      [`--${scopedId}-t`]: baseStyle.transform,
-      [`--${scopedId}-tr`]: effectiveReducedMotion ? 'none' : baseStyle.transition,
-      [`--${scopedId}-blend`]: isOverLight ? 'multiply' : 'overlay',
-      [`--${scopedId}-b1`]: `linear-gradient(${135 + mx * 1.2}deg, rgba(255,255,255,0) 0%, rgba(255,255,255,${0.12 + Math.abs(mx) * 0.008}) ${Math.max(10, 33 + my * 0.3)}%, rgba(255,255,255,${0.4 + Math.abs(mx) * 0.012}) ${Math.min(90, 66 + my * 0.4)}%, rgba(255,255,255,0) 100%)`,
-      [`--${scopedId}-b2`]: `linear-gradient(${135 + mx * 1.2}deg, rgba(255,255,255,0) 0%, rgba(255,255,255,${0.32 + Math.abs(mx) * 0.008}) ${Math.max(10, 33 + my * 0.3)}%, rgba(255,255,255,${0.6 + Math.abs(mx) * 0.012}) ${Math.min(90, 66 + my * 0.4)}%, rgba(255,255,255,0) 100%)`,
-      [`--${scopedId}-h1-o`]: (isHovered || isActive) ? (isOverLight ? 0.3 : 0.5) : 0,
-      [`--${scopedId}-h1`]: isOverLight ? `radial-gradient(circle at ${50 + mx / 2}% ${50 + my / 2}%, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0) 60%)` : `radial-gradient(circle at ${50 + mx / 2}% ${50 + my / 2}%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%)`,
-      [`--${scopedId}-h2-o`]: isActive ? (isOverLight ? 0.4 : 0.5) : 0,
-      [`--${scopedId}-h2`]: isOverLight ? `radial-gradient(circle at ${50 + mx / 1.5}% ${50 + my / 1.5}%, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0) 80%)` : `radial-gradient(circle at ${50 + mx / 1.5}% ${50 + my / 1.5}%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%)`,
-      [`--${scopedId}-h3-o`]: isHovered ? (isOverLight ? 0.25 : 0.4) : isActive ? (isOverLight ? 0.5 : 0.8) : 0,
-      [`--${scopedId}-h3`]: isOverLight ? `radial-gradient(circle at ${50 + mx}% ${50 + my}%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%)` : `radial-gradient(circle at ${50 + mx}% ${50 + my}%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)`,
-      [`--${scopedId}-base-o`]: isOverLight ? overLightConfig.opacity : 0,
-      [`--${scopedId}-base`]: isOverLight ? `linear-gradient(135deg, rgba(0,0,0,${0.12 + mx * 0.002}) 0%, rgba(0,0,0,${0.08 + my * 0.001}) 50%, rgba(0,0,0,${0.15 + Math.abs(mx) * 0.003}) 100%)` : 'rgba(255,255,255,0.1)',
-      [`--${scopedId}-over-o`]: isOverLight ? overLightConfig.opacity * 0.9 : 0,
-      [`--${scopedId}-over`]: isOverLight ? `radial-gradient(circle at ${50 + mx * 0.5}% ${50 + my * 0.5}%, rgba(0,0,0,${0.08 + Math.abs(mx) * 0.002}) 0%, rgba(0,0,0,0.04) 40%, rgba(0,0,0,${0.12 + Math.abs(my) * 0.002}) 100%)` : 'rgba(255,255,255,0.05)',
-      '--ag-scoped-id': scopedId,
+      // 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;
-  }, [glassId, positionStyles, adjustedSize, cornerRadius, baseStyle, effectiveReducedMotion, mouseOffset, isHovered, isActive, overLightConfig]);
-
-  const scopedId = `ag-${glassId.replace(/:/g, '')}`;
+  }, [
+    // 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
-      className="atomix-glass"
-      style={{ ...positionStyles, position: 'relative', ...glassVars }}
+      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}
     >
-      <GlassContainer
+      
+
+      <AtomixGlassContainer
         ref={glassRef}
+        contentRef={contentRef}
         className={className}
         style={baseStyle}
-        cornerRadius={cornerRadius}
+        cornerRadius={effectiveCornerRadius}
         displacementScale={
           effectiveDisableEffects
             ? 0
             : mode === 'shader'
-              ? displacementScale * 0.8
+              ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT
               : overLightConfig.isOverLight
-                ? displacementScale * 0.6
+                ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT
                 : displacementScale
         }
         blurAmount={effectiveDisableEffects ? 0 : blurAmount}
         saturation={
           effectiveHighContrast
-            ? 200
+            ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST
             : overLightConfig.isOverLight
               ? saturation * overLightConfig.saturationBoost
               : saturation
@@ -1206,21 +508,21 @@ export function AtomixGlass({
           effectiveDisableEffects
             ? 0
             : mode === 'shader'
-              ? aberrationIntensity * 0.7
+              ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION
               : aberrationIntensity
         }
         glassSize={glassSize}
         padding={padding}
         mouseOffset={effectiveDisableEffects ? { x: 0, y: 0 } : mouseOffset}
         globalMousePosition={effectiveDisableEffects ? { x: 0, y: 0 } : globalMousePosition}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-        onMouseDown={() => setIsActive(true)}
-        onMouseUp={() => setIsActive(false)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
         active={isActive}
         isHovered={isHovered}
         isActive={isActive}
-        overLight={overLightConfig?.isOverLight || false}
+        overLight={overLightConfig.isOverLight}
         onClick={onClick}
         mode={mode}
         transform={baseStyle.transform}
@@ -1231,109 +533,77 @@ export function AtomixGlass({
         enableLiquidBlur={enableLiquidBlur}
       >
         {children}
-      </GlassContainer>
-      {enableBorderEffect && (
+      </AtomixGlassContainer>
+      {Boolean(onClick) && (
         <>
-          <span
-            className="atomix-glass__border-1"
-            style={{
-              position: `var(--${scopedId}-pos)` as any,
-              top: `var(--${scopedId}-top)`,
-              left: `var(--${scopedId}-left)`,
-              width: `var(--${scopedId}-w)`,
-              height: `var(--${scopedId}-h)`,
-              borderRadius: `var(--${scopedId}-r)`,
-              transform: `var(--${scopedId}-t)`,
-              transition: `var(--${scopedId}-tr)`,
-              background: `var(--${scopedId}-b1)`,
-            }}
-          />
-          <span
-            className="atomix-glass__border-2"
-            style={{
-              position: `var(--${scopedId}-pos)` as any,
-              top: `var(--${scopedId}-top)`,
-              left: `var(--${scopedId}-left)`,
-              width: `var(--${scopedId}-w)`,
-              height: `var(--${scopedId}-h)`,
-              borderRadius: `var(--${scopedId}-r)`,
-              transform: `var(--${scopedId}-t)`,
-              transition: `var(--${scopedId}-tr)`,
-              mixBlendMode: `var(--${scopedId}-blend)` as any,
-              background: `var(--${scopedId}-b2)`,
-            }}
-          />
+          {/* 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} />
         </>
       )}
-      {Boolean(onClick) && (
+
+      {/* 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,
+        }}
+      />
+      <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,
+        }}
+      />
+      {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__hover-1"
-            style={{
-              position: 'absolute',
-              inset: 0,
-              borderRadius: `var(--${scopedId}-r)`,
-              transform: `var(--${scopedId}-t)`,
-              transition: `var(--${scopedId}-tr)`,
-              mixBlendMode: `var(--${scopedId}-blend)` as any,
-              opacity: `var(--${scopedId}-h1-o)`,
-              background: `var(--${scopedId}-h1)`,
-            }}
-          />
-          <div
-            className="atomix-glass__hover-2"
-            style={{
-              position: 'absolute',
-              inset: 0,
-              borderRadius: `var(--${scopedId}-r)`,
-              transform: `var(--${scopedId}-t)`,
-              transition: `var(--${scopedId}-tr)`,
-              mixBlendMode: `var(--${scopedId}-blend)` as any,
-              opacity: `var(--${scopedId}-h2-o)`,
-              background: `var(--${scopedId}-h2)`,
-            }}
-          />
-          <div
-            className="atomix-glass__hover-3"
+            className={ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS}
             style={{
-              position: 'absolute',
-              inset: 0,
-              borderRadius: `var(--${scopedId}-r)`,
-              transform: `var(--${scopedId}-t)`,
-              transition: `var(--${scopedId}-tr)`,
-              mixBlendMode: `var(--${scopedId}-blend)` as any,
-              opacity: `var(--${scopedId}-h3-o)`,
-              background: `var(--${scopedId}-h3)`,
+              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}%)`,
             }}
           />
         </>
       )}
-      {enableOverLightLayers && (
+      {enableBorderEffect && (
         <>
-          <div
-            className="atomix-glass__base"
-            style={{
-              position: 'absolute',
-              inset: 0,
-              borderRadius: `var(--${scopedId}-r)`,
-              transform: `var(--${scopedId}-t)`,
-              transition: `var(--${scopedId}-tr)`,
-              opacity: `var(--${scopedId}-base-o)`,
-              background: `var(--${scopedId}-base)`,
-            }}
-          />
-          <div
-            className="atomix-glass__overlay"
-            style={{
-              position: 'absolute',
-              inset: 0,
-              borderRadius: `var(--${scopedId}-r)`,
-              transform: `var(--${scopedId}-t)`,
-              transition: `var(--${scopedId}-tr)`,
-              opacity: `var(--${scopedId}-over-o)`,
-              background: `var(--${scopedId}-over)`,
-            }}
-          />
+          {/* 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>