@shohojdhara/atomix 0.6.3 → 0.6.5

package/src/components/Popover/Popover.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, forwardRef, createContext } from 'react';
 import { createPortal } from 'react-dom';
-import { POPOVER } from '../../lib/constants/components';
+import { POPOVER, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { usePopover } from '../../lib/composables/usePopover';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import type { PopoverProps, PopoverTriggerProps } from '../../lib/types/components';
@@ -81,14 +81,7 @@ export const Popover: React.FC<PopoverProps> = ({
             {glass ? (
               // Default glass settings for popovers
               (() => {
-                const defaultGlassProps = {
-                  displacementScale: 50,
-                  blurAmount: 1,
-                  saturation: 160,
-                  aberrationIntensity: 0.5,
-                  borderRadius: 8,
-                  mode: 'shader' as const,
-                };
+                const defaultGlassProps = GLASS_DEFAULTS.POPOVER;
 
                 const glassProps =
                   glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

package/src/components/Progress/Progress.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, memo } from 'react';
 import { ProgressProps } from '../../lib/types/components';
 import { useProgress } from '../../lib/composables/useProgress';
-import { PROGRESS } from '../../lib/constants/components';
+import { PROGRESS, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export const Progress = memo(
@@ -43,12 +43,7 @@ export const Progress = memo(
       );
 
       if (glass) {
-        const defaultGlassProps = {
-          displacementScale: 30,
-          blurAmount: 0.5,
-          borderRadius: 8,
-          mode: 'shader' as const,
-        };
+        const defaultGlassProps = GLASS_DEFAULTS.PROGRESS;
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
         return <AtomixGlass {...glassProps}>{progressContent}</AtomixGlass>;
       }

package/src/components/Rating/Rating.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useCallback, forwardRef } from 'react';
-import { THEME_COLORS, SIZES, RATING } from '../../lib/constants/components';
+import { THEME_COLORS, SIZES, RATING, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { useRating } from '../../lib/composables/useRating';
 import type { RatingProps } from '../../lib/types/components';
 import useForkRef from '../../lib/utils/useForkRef';
@@ -275,15 +275,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     );
 
     if (glass) {
-      // Default glass settings for ratings
-      const defaultGlassProps = {
-        displacementScale: 60,
-        blurAmount: 1,
-        saturation: 160,
-        aberrationIntensity: 0.5,
-        borderRadius: 8,
-        mode: 'shader' as const,
-      };
+      const defaultGlassProps = GLASS_DEFAULTS.RATING;
 
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Spinner/Spinner.tsx

@@ -1,7 +1,7 @@
 import React, { memo, forwardRef } from 'react';
 import { SpinnerProps } from '../../lib/types/components';
 import { useSpinner } from '../../lib/composables/useSpinner';
-import { SPINNER } from '../../lib/constants/components';
+import { SPINNER, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export const Spinner = memo(
@@ -51,12 +51,7 @@ export const Spinner = memo(
       );
 
       if (glass) {
-        const defaultGlassProps = {
-          displacementScale: 20,
-          blurAmount: 1,
-          borderRadius: 999,
-          mode: 'shader' as const,
-        };
+        const defaultGlassProps = GLASS_DEFAULTS.SPINNER;
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
         return <AtomixGlass {...glassProps}>{spinnerContent}</AtomixGlass>;
       }

package/src/components/Steps/Steps.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, ReactNode, forwardRef, Children, cloneElement, isValidElement } from 'react';
-import { STEPS } from '../../lib/constants/components';
+import { STEPS, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
 
@@ -225,15 +225,7 @@ const StepsComp: React.FC<StepsProps> = ({
   );
 
   if (glass) {
-    // Default glass settings for steps
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.5,
-      borderRadius: 8,
-      mode: 'shader' as const,
-    };
+    const defaultGlassProps = GLASS_DEFAULTS.STEPS;
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Tabs/Tabs.tsx

@@ -7,7 +7,7 @@ import React, {
   forwardRef,
   ComponentType,
 } from 'react';
-import { TAB } from '../../lib/constants/components';
+import { TAB, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
 
@@ -354,14 +354,7 @@ const TabsComponentBase = ({
 
   if (glass) {
     // Default glass settings for tabs
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.5,
-      borderRadius: 8,
-      mode: 'shader' as const,
-    };
+    const defaultGlassProps = GLASS_DEFAULTS.TABS;
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Toggle/Toggle.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { TOGGLE } from '../../lib/constants/components';
+import { TOGGLE, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps, BaseComponentProps } from '../../lib/types/components';
 
@@ -115,15 +115,7 @@ export const Toggle: React.FC<ToggleProps> = ({
   );
 
   if (glass) {
-    // Default glass settings for toggles
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.5,
-      borderRadius: 8,
-      mode: 'shader' as const,
-    };
+    const defaultGlassProps = GLASS_DEFAULTS.TOGGLE;
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, memo } from 'react';
-import { TOOLTIP } from '../../lib/constants/components';
+import { TOOLTIP, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
 import {
@@ -118,10 +118,7 @@ export const Tooltip: React.FC<TooltipProps> = memo(
       );
 
       if (glass) {
-        const defaultGlassProps = {
-          displacementScale: 100,
-          blurAmount: 3,
-        };
+        const defaultGlassProps = GLASS_DEFAULTS.TOOLTIP;
 
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/lib/composables/useAtomixGlass.ts

@@ -19,6 +19,10 @@ import {
   calculateVelocity,
   smoothstep,
 } from '../../components/AtomixGlass/glass-utils';
+import {
+  normalizeBorderConfig,
+  type ResolvedGlassBorderConfig,
+} from '../../components/AtomixGlass/glass-border-styles';
 import { updateAtomixGlassStyles } from './useAtomixGlassStyles';
 // Phase 1: Time-Based Animation System
 import {
@@ -191,6 +195,9 @@ interface UseAtomixGlassReturn {
   // Transform calculations
   transformStyle: string;
 
+  /** Resolved liquid glass rim configuration */
+  resolvedBorder: ResolvedGlassBorderConfig;
+
   // Phase 1: Animation System - Shader time control
   getShaderTime: () => number;
   applyTimeBasedDistortion: (uv: { x: number; y: number }) => { x: number; y: number };
@@ -221,6 +228,8 @@ export function useAtomixGlass({
   reducedMotion = false,
   highContrast = false,
   withoutEffects = false,
+  border,
+  withBorder = true,
   elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY,
   onClick,
   debugBorderRadius = false,
@@ -228,7 +237,7 @@ export function useAtomixGlass({
   children,
   blurAmount,
   saturation,
-  padding,
+
   withLiquidBlur,
   isFixedOrSticky = false,
   priority = 1, // Default priority
@@ -245,6 +254,11 @@ export function useAtomixGlass({
   const [isHovered, setIsHovered] = useState(false);
   const [isActive, setIsActive] = useState(false);
 
+  const resolvedBorder = useMemo(
+    () => normalizeBorderConfig(border, withBorder),
+    [border, withBorder]
+  );
+
   // Mouse tracking refs
   const cachedRectRef = useRef<DOMRect | null>(null);
   const internalGlobalMousePositionRef = useRef<MousePosition>({ x: 0, y: 0 });
@@ -678,11 +692,14 @@ export function useAtomixGlass({
       isOverLight,
       threshold: 0.7,
       opacity: baseOpacity,
-      contrast: 1.4,
-      brightness: 0.9,
-      saturationBoost: 1.3, // Fixed value — dynamic saturation amplifies perceived displacement
-      shadowIntensity: 0.9,
-      borderOpacity: 0.7,
+      // Dark UI (Apple Music): neutral contrast + slight brightness lift
+      contrast: isOverLight ? 1.4 : 1.02,
+      brightness: isOverLight ? 0.9 : 1.02,
+      saturationBoost: isOverLight ? 1.3 : 1.0,
+      shadowIntensity: isOverLight ? 0.9 : 1.0,
+      borderOpacity: isOverLight
+        ? ATOMIX_GLASS.BORDER.OVER_LIGHT.opacity
+        : ATOMIX_GLASS.BORDER.DARK.opacity,
     };
 
     if (typeof overLight === 'object' && overLight !== null) {
@@ -713,6 +730,12 @@ export function useAtomixGlass({
         3.0,
         baseConfig.saturationBoost
       );
+      const validatedBorderOpacity = validateConfigValue(
+        objConfig.borderOpacity,
+        0.1,
+        1.0,
+        baseConfig.borderOpacity
+      );
 
       const finalConfig = {
         ...baseConfig,
@@ -721,6 +744,7 @@ export function useAtomixGlass({
         contrast: validatedContrast,
         brightness: validatedBrightness,
         saturationBoost: validatedSaturationBoost,
+        borderOpacity: validatedBorderOpacity,
       };
 
       if (
@@ -958,8 +982,10 @@ export function useAtomixGlass({
         withLiquidBlur,
         blurAmount,
         saturation,
-        padding,
+
         isFixedOrSticky,
+        borderAnimated: resolvedBorder.animated,
+        borderOpacityMultiplier: resolvedBorder.opacityMultiplier,
       });
 
       // ── Stop check ──────────────────────────────────────────────────
@@ -1000,8 +1026,10 @@ export function useAtomixGlass({
     withLiquidBlur,
     blurAmount,
     saturation,
-    padding,
+
     isFixedOrSticky,
+    resolvedBorder.animated,
+    resolvedBorder.opacityMultiplier,
     stopLerpLoop,
   ]);
 
@@ -1140,7 +1168,8 @@ export function useAtomixGlass({
       withLiquidBlur,
       blurAmount,
       saturation,
-      padding,
+      borderAnimated: resolvedBorder.animated,
+      borderOpacityMultiplier: resolvedBorder.opacityMultiplier,
     });
   }, [
     isHovered,
@@ -1158,7 +1187,8 @@ export function useAtomixGlass({
     withLiquidBlur,
     blurAmount,
     saturation,
-    padding,
+    resolvedBorder.animated,
+    resolvedBorder.opacityMultiplier,
     onClick,
   ]);
 
@@ -1191,6 +1221,7 @@ export function useAtomixGlass({
     globalMousePosition, // This is now static (refs or props) unless prop changes
     mouseOffset, // This is now static (refs or props) unless prop changes
     overLightConfig,
+    resolvedBorder,
     transformStyle,
     getShaderTime,
     applyTimeBasedDistortion,

package/src/lib/composables/useAtomixGlassStyles.ts

@@ -1,13 +1,16 @@
 import { ATOMIX_GLASS } from '../constants/components';
 import {
-  calculateDistance,
+  buildGlassBorderCssVars,
+  computeBorderTensionFactor,
+} from '../../components/AtomixGlass/glass-border-styles';
+import {
   calculateMouseInfluence,
   validateGlassSize,
   clampBlur,
   smoothstep,
   softClamp,
 } from '../../components/AtomixGlass/glass-utils';
-import type { GlassSize, MousePosition, OverLightObjectConfig } from '../types/components';
+import type { GlassSize, MousePosition } from '../types/components';
 
 /**
  * Updates the styles of the AtomixGlass wrapper and container elements imperatively
@@ -44,8 +47,10 @@ export const updateAtomixGlassStyles = (
     withLiquidBlur?: boolean;
     blurAmount?: number;
     saturation?: number;
-    padding?: string;
+
     isFixedOrSticky?: boolean;
+    borderAnimated?: boolean;
+    borderOpacityMultiplier?: number;
   }
 ) => {
   if (!wrapperElement && !containerElement) return;
@@ -71,8 +76,10 @@ export const updateAtomixGlassStyles = (
     withLiquidBlur,
     blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
     saturation = ATOMIX_GLASS.DEFAULTS.SATURATION,
-    padding = ATOMIX_GLASS.DEFAULTS.PADDING,
+
     isFixedOrSticky = false,
+    borderAnimated = true,
+    borderOpacityMultiplier = 1,
   } = params;
 
   // Calculate mouse influence
@@ -104,8 +111,7 @@ export const updateAtomixGlassStyles = (
     : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) scaleX(${scaleX}) scaleY(${scaleY})`;
 
   // ── Apple Liquid Depth Refinements ───────────────────────────────
-  const stretchMagnitude = calculateDistance({ x: 0, y: 0 }, elasticTranslation);
-  const tensionFactor = smoothstep(stretchMagnitude / 80);
+  const tensionFactor = computeBorderTensionFactor(elasticTranslation);
 
   // Subtle lighting boost on stretch
   const lightingContrast = Math.min(1.8, overLightConfig.contrast + tensionFactor * 0.2);
@@ -118,42 +124,6 @@ export const updateAtomixGlassStyles = (
     const absMx = Math.abs(mx);
     const absMy = Math.abs(my);
     const GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
-
-    // ── Velocity-Based Rotation ─────────────────────────────────────
-    // Combine mouse offset with velocity for dynamic rotation
-    const velocityRotation =
-      (mouseVelocity.x + elasticVelocity.x) * (GRADIENT.VELOCITY_ANGLE_MULTIPLIER || 2.5);
-    const borderGradientAngle =
-      GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER + velocityRotation;
-
-    // Chromatic offsets for depth
-    const chromaticOffset = GRADIENT.CHROMATIC_OFFSET || 1.5;
-    const angleR = borderGradientAngle - chromaticOffset;
-    const angleB = borderGradientAngle + chromaticOffset;
-
-    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
-    );
-
-    // Modulate border opacity by tension (glow on stretch)
-    const tensionGlow = 1 + tensionFactor * 0.5;
-    const borderOpacities = [
-      (GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW) *
-        tensionGlow,
-      (GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH) *
-        tensionGlow,
-      (GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW) *
-        tensionGlow,
-      (GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH) *
-        tensionGlow,
-    ];
-
-    const configBorderOpacity = overLightConfig.borderOpacity;
     const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE;
     const blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK;
 
@@ -177,12 +147,19 @@ export const updateAtomixGlassStyles = (
       y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER,
     };
 
+    // Opacity is either 0 (hidden) or 1 (visible) — actual visual intensity is
+    // encoded in each gradient's rgba alpha.  The typed @property CSS vars
+    // transition these 0→1 values smoothly via CSS (no JS animation needed).
     const opacityValues = {
-      hover1: isHovered || isActive ? 0.5 : 0,
-      hover2: isActive ? 0.5 : 0,
-      hover3: isHovered ? 0.4 : isActive ? 0.8 : 0,
-      base: isOverLight ? overLightConfig.opacity : 0,
-      over: isOverLight ? overLightConfig.opacity * 1.1 : 0,
+      // hover-1: ambient highlight glow — present on hover and during press
+      hover1: isHovered || isActive ? 1 : 0,
+      // hover-2: press depth shadow — only fires on active (mousedown)
+      hover2: isActive ? 1 : 0,
+      // hover-3: global soft-light surface shift — half-strength on hover, full on press
+      hover3: isActive ? 1 : isHovered ? 0.55 : 0,
+      // Dark chrome: faint smoky tint; over-light keeps stronger fill
+      base: isOverLight ? overLightConfig.opacity : 0.14,
+      over: isOverLight ? overLightConfig.opacity * 1.1 : 0.1,
     };
 
     const style = wrapperElement.style;
@@ -199,51 +176,56 @@ export const updateAtomixGlassStyles = (
     style.setProperty('--atomix-glass-brightness', lightingBrightness.toString());
 
     // ── Chromatic Rim Lighting ──────────────────────────────────────
-    // Layer 1: Core White/Blue highlight
-    style.setProperty(
-      '--atomix-glass-border-gradient-1',
-      `linear-gradient(${angleB}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`
-    );
-    // Layer 2: Subtle Red/Warm highlight (offset angle)
-    style.setProperty(
-      '--atomix-glass-border-gradient-2',
-      `linear-gradient(${angleR}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`
-    );
+    const borderVars = ATOMIX_GLASS.BORDER.GRADIENT_CSS_VARS;
+    if (borderAnimated && !effectiveWithoutEffects) {
+      const borderCssVars = buildGlassBorderCssVars({
+        mouseOffset,
+        mouseVelocity,
+        elasticVelocity,
+        borderOpacity: overLightConfig.borderOpacity,
+        opacityMultiplier: borderOpacityMultiplier,
+        tensionFactor,
+      });
+      style.setProperty(borderVars.GRADIENT_1, borderCssVars[borderVars.GRADIENT_1] ?? '');
+      style.setProperty(borderVars.GRADIENT_2, borderCssVars[borderVars.GRADIENT_2] ?? '');
+    } else {
+      style.removeProperty(borderVars.GRADIENT_1);
+      style.removeProperty(borderVars.GRADIENT_2);
+    }
 
-    // Hover gradients
+    // Hover gradients — cursor-relative radial positions for realistic light tracking.
+    // hover-1: white overlay highlight following cursor (works on both dark + light)
     style.setProperty(
       '--atomix-glass-hover-1-gradient',
-      isOverLight
-        ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, 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 ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`
+      `radial-gradient(65% 55% at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, 0.24) 0%, rgba(${whiteColor}, 0.06) 45%, rgba(${whiteColor}, 0) 72%)`
     );
 
+    // hover-2: press depth — darkens at cursor with multiply blend, isOverLight uses stronger black
     style.setProperty(
       '--atomix-glass-hover-2-gradient',
       isOverLight
-        ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, 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 ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`
+        ? `radial-gradient(60% 50% at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, 0.22) 0%, rgba(${blackColor}, 0.06) 50%, rgba(${blackColor}, 0) 72%)`
+        : `radial-gradient(60% 50% at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, 0.18) 0%, rgba(${blackColor}, 0.04) 50%, rgba(${blackColor}, 0) 72%)`
     );
 
+    // hover-3: full-surface soft-light tint; linear gradient angled with cursor X
     style.setProperty(
       '--atomix-glass-hover-3-gradient',
-      isOverLight
-        ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, 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 ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`
+      `linear-gradient(${150 + mx * 0.3}deg, rgba(${whiteColor}, ${isOverLight ? 0.08 : 0.12}) 0%, rgba(${whiteColor}, 0.04) 55%, rgba(${whiteColor}, 0) 100%)`
     );
 
     style.setProperty(
       '--atomix-glass-base-gradient',
       isOverLight
         ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * 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 + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
-        : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`
+        : `linear-gradient(180deg, rgba(${blackColor}, 0.42) 0%, rgba(${blackColor}, 0.22) 55%, rgba(${blackColor}, 0.12) 100%)`
     );
 
     style.setProperty(
       '--atomix-glass-overlay-gradient',
       isOverLight
         ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * 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 + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
-        : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
+        : `radial-gradient(120% 80% at 50% 0%, rgba(${whiteColor}, 0.14) 0%, rgba(${whiteColor}, 0) 55%)`
     );
 
     // Opacities
@@ -339,7 +321,7 @@ export const updateAtomixGlassStyles = (
     // Container variables
     const style = containerElement.style;
 
-    style.setProperty('--atomix-glass-container-padding', padding);
+
     style.setProperty('--atomix-glass-container-radius', `${effectiveBorderRadius}px`);
 
     style.setProperty('--atomix-glass-container-backdrop', backdropFilterString);
@@ -349,12 +331,12 @@ export const updateAtomixGlassStyles = (
       '--atomix-glass-container-shadow',
       isOverLight
         ? [
-            `inset 0 1px 0 rgba(255, 255, 255, ${(0.4 + mx * 0.002) * (overLightConfig.shadowIntensity || 1)})`,
-            `inset 0 -1px 0 rgba(0, 0, 0, ${(0.2 + Math.abs(my) * 0.001) * (overLightConfig.shadowIntensity || 1)})`,
-            `inset 0 0 20px rgba(0, 0, 0, ${(0.08 + Math.abs(mx + my) * 0.001) * (overLightConfig.shadowIntensity || 1)})`,
-            `0 2px 12px rgba(0, 0, 0, ${(0.12 + Math.abs(my) * 0.002) * (overLightConfig.shadowIntensity || 1)})`,
+            `inset 0 1px 0 rgba(255, 255, 255, ${(0.35 + mx * 0.002) * (overLightConfig.shadowIntensity || 1)})`,
+            `inset 0 -1px 0 rgba(0, 0, 0, ${(0.15 + Math.abs(my) * 0.001) * (overLightConfig.shadowIntensity || 1)})`,
+            `inset 0 0 20px rgba(0, 0, 0, ${(0.06 + Math.abs(mx + my) * 0.001) * (overLightConfig.shadowIntensity || 1)})`,
+            `0 2px 12px rgba(0, 0, 0, ${(0.08 + Math.abs(my) * 0.002) * (overLightConfig.shadowIntensity || 1)})`,
           ].join(', ')
-        : '0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset'
+        : ATOMIX_GLASS.CONSTANTS.CONTAINER_SHADOW.LIGHT
     );
 
     style.setProperty(
@@ -376,7 +358,9 @@ export const updateAtomixGlassStyles = (
 
     style.setProperty(
       '--atomix-glass-container-box-shadow',
-      isOverLight ? '0px 16px 70px rgba(0, 0, 0, 0.75)' : '0px 12px 40px rgba(0, 0, 0, 0.25)'
+      isOverLight
+        ? '0px 16px 70px rgba(0, 0, 0, 0.75)'
+        : '0 8px 32px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18)'
     );
   }
 };

package/src/lib/composables/usePerformanceMonitor.ts

@@ -181,6 +181,11 @@ export function usePerformanceMonitor(
   const [manualOverride, setManualOverride] = useState(false);
   const [isEnabled, setIsEnabled] = useState(enabled);
 
+  // Sync external `enabled` prop changes into internal state
+  useEffect(() => {
+    setIsEnabled(enabled ?? true);
+  }, [enabled]);
+
   // Refs for frame tracking
   const frameCountRef = useRef(0);
   const lastFpsUpdateRef = useRef(0);