@shohojdhara/atomix 0.6.2 → 0.6.3

package/src/lib/composables/useAtomixGlassStyles.ts

@@ -1,5 +1,12 @@
 import { ATOMIX_GLASS } from '../constants/components';
-import { calculateDistance, calculateElementCenter, calculateMouseInfluence, validateGlassSize, clampBlur, smoothstep, softClamp } from '../../components/AtomixGlass/glass-utils';
+import {
+  calculateDistance,
+  calculateMouseInfluence,
+  validateGlassSize,
+  clampBlur,
+  smoothstep,
+  softClamp,
+} from '../../components/AtomixGlass/glass-utils';
 import type { GlassSize, MousePosition, OverLightObjectConfig } from '../types/components';
 
 /**
@@ -28,7 +35,11 @@ export const updateAtomixGlassStyles = (
     effectiveWithoutEffects: boolean;
     effectiveReducedMotion: boolean;
     elasticity: number;
-    directionalScale: string;
+    elasticTranslation: MousePosition;
+    directionalScale: { x: number; y: number };
+    elasticVelocity: MousePosition;
+    mouseVelocity: MousePosition;
+    scaleBase: number;
     onClick?: () => void;
     withLiquidBlur?: boolean;
     blurAmount?: number;
@@ -38,7 +49,7 @@ export const updateAtomixGlassStyles = (
   }
 ) => {
   if (!wrapperElement && !containerElement) return;
-
+  if (!validateGlassSize(params.glassSize)) return;
   const {
     mouseOffset,
     globalMousePosition,
@@ -51,7 +62,11 @@ export const updateAtomixGlassStyles = (
     effectiveWithoutEffects,
     effectiveReducedMotion,
     elasticity,
+    elasticTranslation,
+    elasticVelocity,
+    mouseVelocity,
     directionalScale,
+    scaleBase,
     onClick,
     withLiquidBlur,
     blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
@@ -67,61 +82,34 @@ export const updateAtomixGlassStyles = (
 
   // Calculate dynamic OverLight config
   const overLightConfig = {
-      opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
-      contrast: Math.min(1.6, baseOverLightConfig.contrast + mouseInfluence * 0.1),
-      brightness: Math.min(1.1, baseOverLightConfig.brightness + mouseInfluence * 0.05),
-      shadowIntensity: Math.min(1.2, Math.max(0.5, baseOverLightConfig.shadowIntensity + mouseInfluence * 0.2)),
-      borderOpacity: Math.min(1.0, Math.max(0.3, baseOverLightConfig.borderOpacity + mouseInfluence * 0.1)),
-      saturationBoost: baseOverLightConfig.saturationBoost
+    opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
+    contrast: Math.min(1.6, baseOverLightConfig.contrast + mouseInfluence * 0.1),
+    brightness: Math.min(1.1, baseOverLightConfig.brightness + mouseInfluence * 0.05),
+    shadowIntensity: Math.min(
+      1.2,
+      Math.max(0.5, baseOverLightConfig.shadowIntensity + mouseInfluence * 0.2)
+    ),
+    borderOpacity: Math.min(
+      1.0,
+      Math.max(0.3, baseOverLightConfig.borderOpacity + mouseInfluence * 0.1)
+    ),
+    saturationBoost: baseOverLightConfig.saturationBoost,
   };
 
-    let computedDirectionalScale = directionalScale;
-
-    // Calculate elastic translation and directional scale
-    let elasticTranslation = { x: 0, y: 0 };
-    if (!effectiveWithoutEffects && wrapperElement) {
-      const rect = wrapperElement.getBoundingClientRect();
-      const center = calculateElementCenter(rect);
-
-      // Mouse presence and edge distance logic
-      if (globalMousePosition.x && globalMousePosition.y && validateGlassSize(glassSize)) {
-        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 });
-        
-        // Elastic translation
-        const rawT = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE;
-        const fadeInFactor = smoothstep(rawT);
-        elasticTranslation = {
-            x: deltaX * elasticity * 0.1 * fadeInFactor,
-            y: deltaY * elasticity * 0.1 * fadeInFactor,
-        };
-
-        // Directional scale
-        if (!isOverLight && edgeDistance <= ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE) {
-          const centerDistance = calculateDistance(globalMousePosition, center);
-          if (centerDistance > 0) {
-            const normalizedX = deltaX / centerDistance;
-            const normalizedY = deltaY / centerDistance;
-            const stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * rawT;
-            
-            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;
-            
-            const softScaleX = 1 - softClamp(Math.max(0, 1 - scaleX), 0.2);
-            const softScaleY = 1 - softClamp(Math.max(0, 1 - scaleY), 0.2);
-            
-            computedDirectionalScale = `scaleX(${Math.max(0.85, softScaleX)}) scaleY(${Math.max(0.85, softScaleY)})`;
-          }
-        }
-      }
-    }
+  const scaleX = directionalScale.x * scaleBase;
+  const scaleY = directionalScale.y * scaleBase;
+
+  const transformStyle = effectiveWithoutEffects
+    ? `scale(${scaleBase})`
+    : `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 transformStyle = effectiveWithoutEffects
-        ? isActive && Boolean(onClick) ? 'scale(0.98)' : 'scale(1)'
-        : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? 'scale(0.96)' : computedDirectionalScale}`;
+  // Subtle lighting boost on stretch
+  const lightingContrast = Math.min(1.8, overLightConfig.contrast + tensionFactor * 0.2);
+  const lightingBrightness = Math.min(1.2, overLightConfig.brightness + tensionFactor * 0.1);
 
   // Update Wrapper Styles (glassVars)
   if (wrapperElement) {
@@ -131,7 +119,18 @@ export const updateAtomixGlassStyles = (
     const absMy = Math.abs(my);
     const GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
 
-    const borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER;
+    // ── 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
@@ -140,11 +139,18 @@ export const updateAtomixGlassStyles = (
       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,
-      GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH,
-      GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW,
-      GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH,
+      (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;
@@ -152,61 +158,93 @@ export const updateAtomixGlassStyles = (
     const blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK;
 
     const hoverPositions = {
-        hover1: {
-          x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
-          y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1,
-        },
-        hover2: {
-          x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
-          y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2,
-        },
-        hover3: {
-          x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
-          y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
-        },
-      };
+      hover1: {
+        x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
+        y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1,
+      },
+      hover2: {
+        x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
+        y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2,
+      },
+      hover3: {
+        x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
+        y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
+      },
+    };
 
     const basePosition = {
-        x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
-        y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER,
+      x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
+      y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER,
     };
 
     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,
+      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,
     };
 
     const style = wrapperElement.style;
-
     style.setProperty('--atomix-glass-transform', transformStyle || 'none');
 
-    // Gradients
-    style.setProperty('--atomix-glass-border-gradient-1', `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`);
-    style.setProperty('--atomix-glass-border-gradient-2', `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`);
+    // Parallax for content (liquid refraction feel)
+    const parallaxFactor = 0.38 + tensionFactor * 0.12;
+    style.setProperty(
+      '--atomix-glass-child-parallax',
+      `translate(${elasticTranslation.x * -parallaxFactor}px, ${elasticTranslation.y * -parallaxFactor}px)`
+    );
+
+    style.setProperty('--atomix-glass-contrast', lightingContrast.toString());
+    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%)`
+    );
 
     // Hover gradients
-    style.setProperty('--atomix-glass-hover-1-gradient', isOverLight
+    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(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}%)`
+    );
 
-    style.setProperty('--atomix-glass-hover-2-gradient', isOverLight
+    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(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}%)`
+    );
 
-    style.setProperty('--atomix-glass-hover-3-gradient', isOverLight
+    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}%)`);
+        : `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}%)`
+    );
 
-    style.setProperty('--atomix-glass-base-gradient', isOverLight
+    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})`);
+        : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`
+    );
 
-    style.setProperty('--atomix-glass-overlay-gradient', isOverLight
+    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})`);
+        : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
+    );
 
     // Opacities
     style.setProperty('--atomix-glass-hover-1-opacity', opacityValues.hover1.toString());
@@ -214,7 +252,10 @@ export const updateAtomixGlassStyles = (
     style.setProperty('--atomix-glass-hover-3-opacity', opacityValues.hover3.toString());
     style.setProperty('--atomix-glass-base-opacity', opacityValues.base.toString());
     style.setProperty('--atomix-glass-overlay-opacity', opacityValues.over.toString());
-    style.setProperty('--atomix-glass-overlay-highlight-opacity', (opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER).toString());
+    style.setProperty(
+      '--atomix-glass-overlay-highlight-opacity',
+      (opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER).toString()
+    );
 
     // Other
     style.setProperty('--atomix-glass-blend-mode', isOverLight ? 'multiply' : 'overlay');
@@ -238,61 +279,61 @@ export const updateAtomixGlassStyles = (
     const rect = containerElement.getBoundingClientRect();
 
     let liquidBlur = {
-        baseBlur: blurAmount,
-        edgeBlur: blurAmount * EDGE_BLUR_MULTIPLIER,
-        centerBlur: blurAmount * CENTER_BLUR_MULTIPLIER,
-        flowBlur: blurAmount * FLOW_BLUR_MULTIPLIER,
+      baseBlur: blurAmount,
+      edgeBlur: blurAmount * EDGE_BLUR_MULTIPLIER,
+      centerBlur: blurAmount * CENTER_BLUR_MULTIPLIER,
+      flowBlur: blurAmount * FLOW_BLUR_MULTIPLIER,
     };
 
     if (withLiquidBlur && rect) {
-        const mouseInfluence = calculateMouseInfluence(mouseOffset);
-        const maxBlur = blurAmount * MAX_BLUR_RELATIVE;
-
-        const baseBlur = Math.min(
-          maxBlur,
-          blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR
-        );
-        const edgeIntensity = mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR;
-        const edgeBlur = Math.min(maxBlur, baseBlur * (0.8 + edgeIntensity * 0.4));
-        const centerIntensity = mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR;
-        const centerBlur = Math.min(maxBlur, baseBlur * (0.3 + centerIntensity * 0.3));
-        const flowBlur = Math.min(maxBlur, baseBlur * FLOW_BLUR_MULTIPLIER);
-
-        liquidBlur = {
-          baseBlur: clampBlur(baseBlur),
-          edgeBlur: clampBlur(edgeBlur),
-          centerBlur: clampBlur(centerBlur),
-          flowBlur: clampBlur(flowBlur),
-        };
+      const mouseInfluence = calculateMouseInfluence(mouseOffset);
+      const maxBlur = blurAmount * MAX_BLUR_RELATIVE;
+
+      const baseBlur = softClamp(
+        blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR,
+        maxBlur
+      );
+      const edgeIntensity = mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR;
+      const edgeBlur = softClamp(baseBlur * (0.8 + edgeIntensity * 0.4), maxBlur);
+      const centerIntensity = mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR;
+      const centerBlur = softClamp(baseBlur * (0.3 + centerIntensity * 0.3), maxBlur);
+      const flowBlur = softClamp(baseBlur * FLOW_BLUR_MULTIPLIER, maxBlur);
+
+      liquidBlur = {
+        baseBlur: clampBlur(baseBlur),
+        edgeBlur: clampBlur(edgeBlur),
+        centerBlur: clampBlur(centerBlur),
+        flowBlur: clampBlur(flowBlur),
+      };
     }
 
     // Backdrop filter
-    let backdropFilterString = `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`;
-
-    const dynamicSaturation = saturation + (liquidBlur.baseBlur || 0) * 20;
+    const tensionSaturation = tensionFactor * 40;
+    const dynamicSaturation = saturation + tensionSaturation + (liquidBlur.baseBlur || 0) * 15;
+    let backdropFilterString = '';
     const area = rect ? rect.width * rect.height : 0;
     const areaIsLarge = area > 180000;
     const devicePrefersPerformance = effectiveReducedMotion || effectiveWithoutEffects;
     const useMultiPass = withLiquidBlur && !devicePrefersPerformance && !areaIsLarge;
 
     if (useMultiPass) {
-        const weightedBlur = clampBlur(
-            liquidBlur.baseBlur * 0.4 +
-            liquidBlur.edgeBlur * 0.25 +
-            liquidBlur.centerBlur * 0.15 +
-            liquidBlur.flowBlur * 0.2
-        );
-        backdropFilterString = `blur(${weightedBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})`;
+      const weightedBlur = clampBlur(
+        liquidBlur.baseBlur * 0.4 +
+          liquidBlur.edgeBlur * 0.25 +
+          liquidBlur.centerBlur * 0.15 +
+          liquidBlur.flowBlur * 0.2
+      );
+      backdropFilterString = `blur(${weightedBlur}px) saturate(${Math.min(dynamicSaturation, 250)}%) contrast(${lightingContrast}) brightness(${lightingBrightness})`;
     } else {
-        const effectiveBlur = clampBlur(
-          Math.max(
-            liquidBlur.baseBlur,
-            liquidBlur.edgeBlur * 0.8,
-            liquidBlur.centerBlur * 1.1,
-            liquidBlur.flowBlur * 0.9
-          )
-        );
-        backdropFilterString = `blur(${effectiveBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})`;
+      const effectiveBlur = clampBlur(
+        Math.max(
+          liquidBlur.baseBlur,
+          liquidBlur.edgeBlur * 0.8,
+          liquidBlur.centerBlur * 1.1,
+          liquidBlur.flowBlur * 0.9
+        )
+      );
+      backdropFilterString = `blur(${effectiveBlur}px) saturate(${Math.min(dynamicSaturation, 250)}%) contrast(${lightingContrast}) brightness(${lightingBrightness})`;
     }
 
     // Container variables
@@ -304,27 +345,38 @@ export const updateAtomixGlassStyles = (
     style.setProperty('--atomix-glass-container-backdrop', backdropFilterString);
 
     // Shadows
-    style.setProperty('--atomix-glass-container-shadow', isOverLight
+    style.setProperty(
+      '--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)})`,
           ].join(', ')
-        : '0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset');
+        : '0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset'
+    );
 
-    style.setProperty('--atomix-glass-container-shadow-opacity', effectiveWithoutEffects ? '0' : '1');
+    style.setProperty(
+      '--atomix-glass-container-shadow-opacity',
+      effectiveWithoutEffects ? '0' : '1'
+    );
 
-    style.setProperty('--atomix-glass-container-bg', isOverLight
+    style.setProperty(
+      '--atomix-glass-container-bg',
+      isOverLight
         ? `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');
+        : 'none'
+    );
 
-    style.setProperty('--atomix-glass-container-text-shadow', isOverLight
-        ? '0px 1px 2px rgba(255, 255, 255, 0.15)'
-        : '0px 2px 12px rgba(0, 0, 0, 0.4)');
+    style.setProperty(
+      '--atomix-glass-container-text-shadow',
+      isOverLight ? '0px 1px 2px rgba(255, 255, 255, 0.15)' : '0px 2px 12px rgba(0, 0, 0, 0.4)'
+    );
 
-    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)');
+    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)'
+    );
   }
-};
+};

package/src/lib/constants/components.ts

@@ -1663,11 +1663,19 @@ export const ATOMIX_GLASS = {
   },
   DEFAULTS: {
     DISPLACEMENT_SCALE: 70,
-    BLUR_AMOUNT: 0,
-    SATURATION: 140,
-    ABERRATION_INTENSITY: 2,
+    get BLUR_AMOUNT() {
+      return this.DISPLACEMENT_SCALE * 0.15; // Dynamically computed based on displacement
+    },
+    get SATURATION() {
+      return 100 + (this.DISPLACEMENT_SCALE * 0.5); // Saturate relative to intensity
+    },
+    get ABERRATION_INTENSITY() {
+      return this.DISPLACEMENT_SCALE * 0.03; // Scale aberration with displacement
+    },
     ELASTICITY: 0.15,
-    CORNER_RADIUS: 20, // Default border-radius matching design system
+    get CORNER_RADIUS() {
+      return 16; // Use 16 to match SCSS design system (was 20)
+    },
     PADDING: '0',
     MODE: 'standard' as const,
     OVER_LIGHT: false as const,
@@ -1693,6 +1701,11 @@ export const ATOMIX_GLASS = {
     ELASTICITY_TRANSLATION_FACTOR: 0.1,
     ELASTICITY_DISTANCE_THRESHOLD: 200,
     ELASTICITY_COMPRESSION_FACTOR: 0.3,
+    ELASTICITY_STIFFNESS: 0.1,
+    ELASTICITY_DAMPING: 0.76,
+    ELASTICITY_VELOCITY_FACTOR: 0.65,
+    ELASTICITY_STRETCH_RATIO: 0.45,
+    ELASTICITY_MAGNIFICATION_BASE: 1.02,
     // Note: This default must match the SCSS variable --atomix-radius-md
     // @see src/styles/01-settings/_settings.global.scss
     DEFAULT_CORNER_RADIUS: 16,
@@ -1708,58 +1721,60 @@ export const ATOMIX_GLASS = {
     GRADIENT: {
       BASE_ANGLE: 135, // Base angle for border gradients (degrees)
       ANGLE_MULTIPLIER: 1.2, // Multiplier for mouse influence on angle
+      VELOCITY_ANGLE_MULTIPLIER: 2.5, // How much velocity affects gradient rotation
+      CHROMATIC_OFFSET: 1.5, // Degree offset for chromatic rim layers
       BORDER_STOP_1: {
         MIN: 10, // Minimum percentage for border stop 1
         BASE: 33, // Base percentage for border stop 1
-        MULTIPLIER: 0.3, // Multiplier for mouse Y influence
+        get MULTIPLIER() { return this.BASE * 0.009; }, // Multiplier for mouse Y influence
       },
       BORDER_STOP_2: {
         MAX: 90, // Maximum percentage for border stop 2
         BASE: 66, // Base percentage for border stop 2
-        MULTIPLIER: 0.4, // Multiplier for mouse Y influence
+        get MULTIPLIER() { return this.BASE * 0.006; }, // Multiplier for mouse Y influence
       },
       BORDER_OPACITY: {
         BASE_1: 0.12, // Base opacity for border gradient 1
-        BASE_2: 0.4, // Base opacity for border gradient 2
-        BASE_3: 0.32, // Base opacity for border gradient 3
-        BASE_4: 0.6, // Base opacity for border gradient 4
-        MULTIPLIER_LOW: 0.008, // Low multiplier for mouse influence on opacity
-        MULTIPLIER_HIGH: 0.012, // High multiplier for mouse influence on opacity
+        get BASE_2() { return this.BASE_1 * 3.33; }, // Base opacity for border gradient 2
+        get BASE_3() { return this.BASE_1 * 2.66; }, // Base opacity for border gradient 3
+        get BASE_4() { return this.BASE_1 * 5; }, // Base opacity for border gradient 4
+        get MULTIPLIER_LOW() { return this.BASE_1 * 0.066; }, // Low multiplier for mouse influence on opacity
+        get MULTIPLIER_HIGH() { return this.BASE_1 * 0.1; }, // High multiplier for mouse influence on opacity
       },
       CENTER_POSITION: 50, // Center position percentage (50%)
       HOVER_POSITION: {
         DIVISOR_1: 2, // Divisor for hover 1 position calculation
-        DIVISOR_2: 1.5, // Divisor for hover 2 position calculation
-        MULTIPLIER_3: 1, // Direct multiplier for hover 3 (no division)
+        get DIVISOR_2() { return this.DIVISOR_1 * 0.75; }, // Divisor for hover 2 position calculation
+        get MULTIPLIER_3() { return this.DIVISOR_1 * 0.5; }, // Direct multiplier for hover 3 (no division)
       },
-      BASE_LAYER_MULTIPLIER: 0.5, // Multiplier for base layer position
+      get BASE_LAYER_MULTIPLIER() { return 0.5; }, // Multiplier for base layer position
     },
 
     // Gradient opacity values for hover effects
     GRADIENT_OPACITY: {
       HOVER_1: {
         BLACK_START: 0.3, // Start opacity for black hover 1
-        BLACK_MID: 0.1, // Mid opacity for black hover 1
+        get BLACK_MID() { return this.BLACK_START / 3; }, // Mid opacity for black hover 1
         BLACK_STOP: 30, // Stop percentage for black hover 1
-        BLACK_END: 60, // End percentage for black hover 1
+        get BLACK_END() { return this.BLACK_STOP * 2; }, // End percentage for black hover 1
         WHITE_START: 0.5, // Start opacity for white hover 1
-        WHITE_STOP: 50, // Stop percentage for white hover 1
+        get WHITE_STOP() { return this.BLACK_END - 10; }, // Stop percentage for white hover 1
       },
       HOVER_2: {
         BLACK_START: 0.4, // Start opacity for black hover 2
-        BLACK_MID: 0.15, // Mid opacity for black hover 2
+        get BLACK_MID() { return this.BLACK_START * 0.375; }, // Mid opacity for black hover 2
         BLACK_STOP: 40, // Stop percentage for black hover 2
-        BLACK_END: 80, // End percentage for black hover 2
+        get BLACK_END() { return this.BLACK_STOP * 2; }, // End percentage for black hover 2
         WHITE_START: 1, // Start opacity for white hover 2
-        WHITE_STOP: 80, // Stop percentage for white hover 2
+        get WHITE_STOP() { return this.BLACK_END; }, // Stop percentage for white hover 2
       },
       HOVER_3: {
         BLACK_START: 0.5, // Start opacity for black hover 3
-        BLACK_MID: 0.2, // Mid opacity for black hover 3
+        get BLACK_MID() { return this.BLACK_START * 0.4; }, // Mid opacity for black hover 3
         BLACK_STOP: 50, // Stop percentage for black hover 3
-        BLACK_END: 100, // End percentage for black hover 3
+        get BLACK_END() { return this.BLACK_STOP * 2; }, // End percentage for black hover 3
         WHITE_START: 1, // Start opacity for white hover 3
-        WHITE_STOP: 100, // Stop percentage for white hover 3
+        get WHITE_STOP() { return this.BLACK_END; }, // Stop percentage for white hover 3
       },
     },
 
@@ -1767,23 +1782,23 @@ export const ATOMIX_GLASS = {
     BASE_GRADIENT: {
       ANGLE: 135, // Gradient angle in degrees
       BLACK_START_BASE: 0.15, // Base start opacity for black
-      BLACK_START_MULTIPLIER: 0.003, // Multiplier for mouse X influence on start
+      get BLACK_START_MULTIPLIER() { return this.BLACK_START_BASE * 0.02; }, // Multiplier for mouse X influence on start
       BLACK_MID_BASE: 0.1, // Base mid opacity for black
-      BLACK_MID_MULTIPLIER: 0.002, // Multiplier for mouse Y influence on mid
+      get BLACK_MID_MULTIPLIER() { return this.BLACK_MID_BASE * 0.02; }, // Multiplier for mouse Y influence on mid
       BLACK_MID_STOP: 50, // Mid stop percentage
-      BLACK_END_BASE: 0.18, // Base end opacity for black
-      BLACK_END_MULTIPLIER: 0.004, // Multiplier for mouse X influence on end
-      WHITE_OPACITY: 0.1, // White opacity for non-overlight mode
+      get BLACK_END_BASE() { return this.BLACK_START_BASE * 1.2; }, // Base end opacity for black
+      get BLACK_END_MULTIPLIER() { return this.BLACK_END_BASE * 0.022; }, // Multiplier for mouse X influence on end
+      get WHITE_OPACITY() { return this.BLACK_START_BASE * 0.666; }, // White opacity for non-overlight mode
     },
 
     OVERLAY_GRADIENT: {
       BLACK_START_BASE: 0.12, // Base start opacity for black overlay
-      BLACK_START_MULTIPLIER: 0.003, // Multiplier for mouse X influence on start
-      BLACK_MID: 0.06, // Mid opacity for black overlay
+      get BLACK_START_MULTIPLIER() { return this.BLACK_START_BASE * 0.025; }, // Multiplier for mouse X influence on start
+      get BLACK_MID() { return this.BLACK_START_BASE * 0.5; }, // Mid opacity for black overlay
       BLACK_MID_STOP: 40, // Mid stop percentage
-      BLACK_END_BASE: 0.15, // Base end opacity for black overlay
-      BLACK_END_MULTIPLIER: 0.003, // Multiplier for mouse Y influence on end
-      WHITE_OPACITY: 0.05, // White opacity for non-overlight mode
+      get BLACK_END_BASE() { return this.BLACK_START_BASE * 1.25; }, // Base end opacity for black overlay
+      get BLACK_END_MULTIPLIER() { return this.BLACK_END_BASE * 0.02; }, // Multiplier for mouse Y influence on end
+      get WHITE_OPACITY() { return this.BLACK_START_BASE * 0.416; }, // White opacity for non-overlight mode
     },
 
     // Overlay highlight constants
@@ -1791,8 +1806,8 @@ export const ATOMIX_GLASS = {
       POSITION_X: 20, // X position percentage
       POSITION_Y: 20, // Y position percentage
       WHITE_OPACITY: 0.4, // White opacity in gradient
-      STOP: 60, // Stop percentage
-      OPACITY_MULTIPLIER: 0.7, // Multiplier for overlay highlight opacity
+      get STOP() { return this.WHITE_OPACITY * 150; }, // Stop percentage
+      get OPACITY_MULTIPLIER() { return this.WHITE_OPACITY * 1.75; }, // Multiplier for overlay highlight opacity
     },
 
     // Displacement and aberration multipliers