@shohojdhara/atomix 0.6.2 → 0.6.4

package/dist/heavy.js

@@ -65,12 +65,23 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
     },
     DEFAULTS: {
         DISPLACEMENT_SCALE: 70,
-        BLUR_AMOUNT: 0,
-        SATURATION: 140,
-        ABERRATION_INTENSITY: 2,
+        get BLUR_AMOUNT() {
+            return .15 * this.DISPLACEMENT_SCALE;
+ // Dynamically computed based on displacement
+                },
+        get SATURATION() {
+            return 100 + .5 * this.DISPLACEMENT_SCALE;
+ // Saturate relative to intensity
+                },
+        get ABERRATION_INTENSITY() {
+            return .03 * this.DISPLACEMENT_SCALE;
+ // Scale aberration with displacement
+                },
         ELASTICITY: .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",
         OVER_LIGHT: !1,
@@ -96,6 +107,11 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
         ELASTICITY_TRANSLATION_FACTOR: .1,
         ELASTICITY_DISTANCE_THRESHOLD: 200,
         ELASTICITY_COMPRESSION_FACTOR: .3,
+        ELASTICITY_STIFFNESS: .1,
+        ELASTICITY_DAMPING: .76,
+        ELASTICITY_VELOCITY_FACTOR: .65,
+        ELASTICITY_STRETCH_RATIO: .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,
@@ -112,84 +128,126 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
             // 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: .3
+                get MULTIPLIER() {
+                    return .009 * this.BASE;
+                }
             },
             BORDER_STOP_2: {
                 MAX: 90,
                 // Maximum percentage for border stop 2
                 BASE: 66,
                 // Base percentage for border stop 2
-                MULTIPLIER: .4
+                get MULTIPLIER() {
+                    return .006 * this.BASE;
+                }
             },
             BORDER_OPACITY: {
                 BASE_1: .12,
                 // Base opacity for border gradient 1
-                BASE_2: .4,
+                get BASE_2() {
+                    return 3.33 * this.BASE_1;
+                },
                 // Base opacity for border gradient 2
-                BASE_3: .32,
+                get BASE_3() {
+                    return 2.66 * this.BASE_1;
+                },
                 // Base opacity for border gradient 3
-                BASE_4: .6,
+                get BASE_4() {
+                    return 5 * this.BASE_1;
+                },
                 // Base opacity for border gradient 4
-                MULTIPLIER_LOW: .008,
+                get MULTIPLIER_LOW() {
+                    return .066 * this.BASE_1;
+                },
                 // Low multiplier for mouse influence on opacity
-                MULTIPLIER_HIGH: .012
+                get MULTIPLIER_HIGH() {
+                    return .1 * this.BASE_1;
+                }
             },
             CENTER_POSITION: 50,
             // Center position percentage (50%)
             HOVER_POSITION: {
                 DIVISOR_1: 2,
                 // Divisor for hover 1 position calculation
-                DIVISOR_2: 1.5,
+                get DIVISOR_2() {
+                    return .75 * this.DIVISOR_1;
+                },
                 // Divisor for hover 2 position calculation
-                MULTIPLIER_3: 1
+                get MULTIPLIER_3() {
+                    return .5 * this.DIVISOR_1;
+                }
             },
-            BASE_LAYER_MULTIPLIER: .5
+            get BASE_LAYER_MULTIPLIER() {
+                return .5;
+            }
         },
         // Gradient opacity values for hover effects
         GRADIENT_OPACITY: {
             HOVER_1: {
                 BLACK_START: .3,
                 // Start opacity for black hover 1
-                BLACK_MID: .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,
+                get BLACK_END() {
+                    return 2 * this.BLACK_STOP;
+                },
                 // End percentage for black hover 1
                 WHITE_START: .5,
                 // Start opacity for white hover 1
-                WHITE_STOP: 50
+                get WHITE_STOP() {
+                    return this.BLACK_END - 10;
+                }
             },
             HOVER_2: {
                 BLACK_START: .4,
                 // Start opacity for black hover 2
-                BLACK_MID: .15,
+                get BLACK_MID() {
+                    return .375 * this.BLACK_START;
+                },
                 // Mid opacity for black hover 2
                 BLACK_STOP: 40,
                 // Stop percentage for black hover 2
-                BLACK_END: 80,
+                get BLACK_END() {
+                    return 2 * this.BLACK_STOP;
+                },
                 // End percentage for black hover 2
                 WHITE_START: 1,
                 // Start opacity for white hover 2
-                WHITE_STOP: 80
+                get WHITE_STOP() {
+                    return this.BLACK_END;
+                }
             },
             HOVER_3: {
                 BLACK_START: .5,
                 // Start opacity for black hover 3
-                BLACK_MID: .2,
+                get BLACK_MID() {
+                    return .4 * this.BLACK_START;
+                },
                 // Mid opacity for black hover 3
                 BLACK_STOP: 50,
                 // Stop percentage for black hover 3
-                BLACK_END: 100,
+                get BLACK_END() {
+                    return 2 * this.BLACK_STOP;
+                },
                 // End percentage for black hover 3
                 WHITE_START: 1,
                 // Start opacity for white hover 3
-                WHITE_STOP: 100
+                get WHITE_STOP() {
+                    return this.BLACK_END;
+                }
             }
         },
         // Base and overlay gradient constants
@@ -198,34 +256,54 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
             // Gradient angle in degrees
             BLACK_START_BASE: .15,
             // Base start opacity for black
-            BLACK_START_MULTIPLIER: .003,
+            get BLACK_START_MULTIPLIER() {
+                return .02 * this.BLACK_START_BASE;
+            },
             // Multiplier for mouse X influence on start
             BLACK_MID_BASE: .1,
             // Base mid opacity for black
-            BLACK_MID_MULTIPLIER: .002,
+            get BLACK_MID_MULTIPLIER() {
+                return .02 * this.BLACK_MID_BASE;
+            },
             // Multiplier for mouse Y influence on mid
             BLACK_MID_STOP: 50,
             // Mid stop percentage
-            BLACK_END_BASE: .18,
+            get BLACK_END_BASE() {
+                return 1.2 * this.BLACK_START_BASE;
+            },
             // Base end opacity for black
-            BLACK_END_MULTIPLIER: .004,
+            get BLACK_END_MULTIPLIER() {
+                return .022 * this.BLACK_END_BASE;
+            },
             // Multiplier for mouse X influence on end
-            WHITE_OPACITY: .1
+            get WHITE_OPACITY() {
+                return .666 * this.BLACK_START_BASE;
+            }
         },
         OVERLAY_GRADIENT: {
             BLACK_START_BASE: .12,
             // Base start opacity for black overlay
-            BLACK_START_MULTIPLIER: .003,
+            get BLACK_START_MULTIPLIER() {
+                return .025 * this.BLACK_START_BASE;
+            },
             // Multiplier for mouse X influence on start
-            BLACK_MID: .06,
+            get BLACK_MID() {
+                return .5 * this.BLACK_START_BASE;
+            },
             // Mid opacity for black overlay
             BLACK_MID_STOP: 40,
             // Mid stop percentage
-            BLACK_END_BASE: .15,
+            get BLACK_END_BASE() {
+                return 1.25 * this.BLACK_START_BASE;
+            },
             // Base end opacity for black overlay
-            BLACK_END_MULTIPLIER: .003,
+            get BLACK_END_MULTIPLIER() {
+                return .02 * this.BLACK_END_BASE;
+            },
             // Multiplier for mouse Y influence on end
-            WHITE_OPACITY: .05
+            get WHITE_OPACITY() {
+                return .416 * this.BLACK_START_BASE;
+            }
         },
         // Overlay highlight constants
         OVERLAY_HIGHLIGHT: {
@@ -235,9 +313,13 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
             // Y position percentage
             WHITE_OPACITY: .4,
             // White opacity in gradient
-            STOP: 60,
+            get STOP() {
+                return 150 * this.WHITE_OPACITY;
+            },
             // Stop percentage
-            OPACITY_MULTIPLIER: .7
+            get OPACITY_MULTIPLIER() {
+                return 1.75 * this.WHITE_OPACITY;
+            }
         },
         // Displacement and aberration multipliers
         MULTIPLIERS: {
@@ -290,11 +372,7 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
             }
         }
     }
-}, {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2) => {
-    if (!pos1 || !pos2 || "number" != typeof pos1.x || "number" != typeof pos1.y || "number" != typeof pos2.x || "number" != typeof pos2.y) return 0;
-    const deltaX = pos1.x - pos2.x, deltaY = pos1.y - pos2.y;
-    return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-}, calculateElementCenter = rect => rect ? {
+}, {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect => rect ? {
     x: rect.left + rect.width / 2,
     y: rect.top + rect.height / 2
 } : {
@@ -366,7 +444,16 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
         // Silently handle errors
     }
     return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
-}, lerp$1 = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
+}, smoothstep = t => {
+    const clamped = Math.max(0, Math.min(1, t));
+    return clamped * clamped * (3 - 2 * clamped);
+}, lerp$1 = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), calculateSpring = (current, target, velocity, stiffness = .1, damping = .8) => {
+    const newVelocity = (velocity + (target - current) * stiffness) * damping;
+    return {
+        value: current + newVelocity,
+        velocity: newVelocity
+    };
+}, getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
     switch (mode) {
       case "standard":
         return displacementMap;
@@ -755,6 +842,9 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
             }), jsx("div", {
                 ref: contentRef,
                 className: ATOMIX_GLASS.CONTENT_CLASS,
+                style: {
+                    transform: "var(--atomix-glass-child-parallax, none)"
+                },
                 children: children
             }) ]
         })
@@ -879,51 +969,26 @@ class {
     }
 }, updateAtomixGlassStyles = (wrapperElement, containerElement, params) => {
     if (!wrapperElement && !containerElement) return;
-    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, directionalScale: directionalScale, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, isFixedOrSticky: isFixedOrSticky = !1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
+    if (!validateGlassSize(params.glassSize)) return;
+    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, elasticTranslation: elasticTranslation, elasticVelocity: elasticVelocity, mouseVelocity: mouseVelocity, directionalScale: directionalScale, scaleBase: scaleBase, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, isFixedOrSticky: isFixedOrSticky = !1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
         opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
         contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
         brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
         shadowIntensity: Math.min(1.2, Math.max(.5, baseOverLightConfig.shadowIntensity + .2 * mouseInfluence)),
         borderOpacity: Math.min(1, Math.max(.3, baseOverLightConfig.borderOpacity + .1 * mouseInfluence)),
         saturationBoost: baseOverLightConfig.saturationBoost
-    };
-    // Calculate mouse influence
-        let computedDirectionalScale = directionalScale, elasticTranslation = {
+    }, scaleX = directionalScale.x * scaleBase, scaleY = directionalScale.y * scaleBase, transformStyle = effectiveWithoutEffects ? `scale(${scaleBase})` : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) scaleX(${scaleX}) scaleY(${scaleY})`, stretchMagnitude = ((pos1, pos2) => {
+        if (!pos1 || !pos2 || "number" != typeof pos1.x || "number" != typeof pos1.y || "number" != typeof pos2.x || "number" != typeof pos2.y) return 0;
+        const deltaX = pos1.x - pos2.x, deltaY = pos1.y - pos2.y;
+        return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    })({
         x: 0,
         y: 0
-    };
-    // Calculate elastic translation and directional scale
-        if (!effectiveWithoutEffects && wrapperElement) {
-        const rect = wrapperElement.getBoundingClientRect(), center = calculateElementCenter(rect);
-        // Mouse presence and edge distance logic
-        if (globalMousePosition.x && globalMousePosition.y && validateGlassSize(glassSize)) {
-            const deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2), edgeDistance = calculateDistance({
-                x: edgeDistanceX,
-                y: edgeDistanceY
-            }, {
-                x: 0,
-                y: 0
-            }), rawT = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE, fadeInFactor = (t => {
-                const clamped = Math.max(0, Math.min(1, t));
-                return clamped * clamped * (3 - 2 * clamped);
-            })(rawT);
-            // Directional scale
-            if (elasticTranslation = {
-                x: deltaX * elasticity * .1 * fadeInFactor,
-                y: deltaY * elasticity * .1 * fadeInFactor
-            }, !isOverLight && edgeDistance <= ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE) {
-                const centerDistance = calculateDistance(globalMousePosition, center);
-                if (centerDistance > 0) {
-                    const normalizedX = deltaX / centerDistance, normalizedY = deltaY / centerDistance, stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * rawT, scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * .3 - Math.abs(normalizedY) * stretchIntensity * .15, scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * .3 - Math.abs(normalizedX) * stretchIntensity * .15, softScaleX = 1 - softClamp(Math.max(0, 1 - scaleX), .2), softScaleY = 1 - softClamp(Math.max(0, 1 - scaleY), .2);
-                    computedDirectionalScale = `scaleX(${Math.max(.85, softScaleX)}) scaleY(${Math.max(.85, softScaleY)})`;
-                }
-            }
-        }
-    }
-    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}`;
-    // Update Wrapper Styles (glassVars)
-        if (wrapperElement) {
-        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER, borderStop1 = Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER), borderStop2 = Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER), 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 ], configBorderOpacity = overLightConfig.borderOpacity, whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, hoverPositions = {
+    }, elasticTranslation), tensionFactor = smoothstep(stretchMagnitude / 80), lightingContrast = Math.min(1.8, overLightConfig.contrast + .2 * tensionFactor), lightingBrightness = Math.min(1.2, overLightConfig.brightness + .1 * tensionFactor);
+    // Calculate mouse influence
+        // Update Wrapper Styles (glassVars)
+    if (wrapperElement) {
+        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, velocityRotation = (mouseVelocity.x + elasticVelocity.x) * (GRADIENT.VELOCITY_ANGLE_MULTIPLIER || 2.5), borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER + velocityRotation, chromaticOffset = GRADIENT.CHROMATIC_OFFSET || 1.5, angleR = borderGradientAngle - chromaticOffset, angleB = borderGradientAngle + chromaticOffset, borderStop1 = Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER), borderStop2 = Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER), tensionGlow = 1 + .5 * tensionFactor, 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 ], configBorderOpacity = overLightConfig.borderOpacity, whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, hoverPositions = {
             hover1: {
                 x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
                 y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
@@ -946,10 +1011,16 @@ class {
             base: isOverLight ? overLightConfig.opacity : 0,
             over: isOverLight ? 1.1 * overLightConfig.opacity : 0
         }, 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%)`), 
+        style.setProperty("--atomix-glass-transform", transformStyle || "none");
+        // Parallax for content (liquid refraction feel)
+        const parallaxFactor = .38 + .12 * tensionFactor;
+        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 ? `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}%)`), 
         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}%)`), 
@@ -977,7 +1048,7 @@ class {
             flowBlur: blurAmount * FLOW_BLUR_MULTIPLIER
         };
         if (withLiquidBlur && rect) {
-            const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = blurAmount * MAX_BLUR_RELATIVE, baseBlur = Math.min(maxBlur, blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR), edgeIntensity = mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR, edgeBlur = Math.min(maxBlur, baseBlur * (.8 + .4 * edgeIntensity)), centerIntensity = mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR, centerBlur = Math.min(maxBlur, baseBlur * (.3 + .3 * centerIntensity)), flowBlur = Math.min(maxBlur, baseBlur * FLOW_BLUR_MULTIPLIER);
+            const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = blurAmount * MAX_BLUR_RELATIVE, baseBlur = softClamp(blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR, maxBlur), edgeBlur = softClamp(baseBlur * (.8 + mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR * .4), maxBlur), centerBlur = softClamp(baseBlur * (.3 + mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR * .3), maxBlur), flowBlur = softClamp(baseBlur * FLOW_BLUR_MULTIPLIER, maxBlur);
             liquidBlur = {
                 baseBlur: clampBlur(baseBlur),
                 edgeBlur: clampBlur(edgeBlur),
@@ -986,9 +1057,10 @@ class {
             };
         }
         // Backdrop filter
-                let backdropFilterString = `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`;
-        const dynamicSaturation = saturation + 20 * (liquidBlur.baseBlur || 0), area = rect ? rect.width * rect.height : 0;
-        backdropFilterString = !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? `blur(${clampBlur(Math.max(liquidBlur.baseBlur, .8 * liquidBlur.edgeBlur, 1.1 * liquidBlur.centerBlur, .9 * liquidBlur.flowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})` : `blur(${clampBlur(.4 * liquidBlur.baseBlur + .25 * liquidBlur.edgeBlur + .15 * liquidBlur.centerBlur + .2 * liquidBlur.flowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})`;
+                const dynamicSaturation = saturation + 40 * tensionFactor + 15 * (liquidBlur.baseBlur || 0);
+        let backdropFilterString = "";
+        const area = rect ? rect.width * rect.height : 0;
+        backdropFilterString = !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? `blur(${clampBlur(Math.max(liquidBlur.baseBlur, .8 * liquidBlur.edgeBlur, 1.1 * liquidBlur.centerBlur, .9 * liquidBlur.flowBlur))}px) saturate(${Math.min(dynamicSaturation, 250)}%) contrast(${lightingContrast}) brightness(${lightingBrightness})` : `blur(${clampBlur(.4 * liquidBlur.baseBlur + .25 * liquidBlur.edgeBlur + .15 * liquidBlur.centerBlur + .2 * liquidBlur.flowBlur)}px) saturate(${Math.min(dynamicSaturation, 250)}%) contrast(${lightingContrast}) brightness(${lightingBrightness})`;
         // Container variables
                 const style = containerElement.style;
         style.setProperty("--atomix-glass-container-padding", padding), style.setProperty("--atomix-glass-container-radius", `${effectiveBorderRadius}px`), 
@@ -1167,7 +1239,24 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
     }), targetGlobalMousePositionRef = useRef({
         x: 0,
         y: 0
-    }), lerpRafRef = useRef(null), lerpActiveRef = useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), animationFrameIdRef = useRef(null), animationStartTimeRef = useRef(0), elapsedTimeRef = useRef(0), shaderTimeRef = useRef(0), fbmConfig = useMemo((() => {
+    }), lerpRafRef = useRef(null), lerpActiveRef = useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), elasticTranslationRef = useRef({
+        x: 0,
+        y: 0
+    }), elasticVelocityRef = useRef({
+        x: 0,
+        y: 0
+    }), directionalScaleRef = useRef({
+        x: 1,
+        y: 1
+    }), scaleVelocityRef = useRef({
+        x: 0,
+        y: 0
+    });
+    useRef(0);
+    const mouseVelocityRef = useRef({
+        x: 0,
+        y: 0
+    }), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), animationFrameIdRef = useRef(null), animationStartTimeRef = useRef(0), elapsedTimeRef = useRef(0), shaderTimeRef = useRef(0), fbmConfig = useMemo((() => {
         // If quality preset is provided, use it as base
         const preset = (quality = distortionQuality, ATOMIX_GLASS.CONSTANTS.DISTORTION_QUALITY_PRESETS[quality]);
         // Override with custom values if provided
@@ -1452,57 +1541,85 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             return "undefined" == typeof process || process.env, finalConfig;
         }
         return "undefined" == typeof process || process.env, baseConfig;
-    }), [ overLight, getEffectiveOverLight, isHovered, isActive, validateConfigValue, debugOverLight ]), transformStyle = useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = useRef(null), stopLerpLoop = useCallback((() => {
+    }), [ overLight, getEffectiveOverLight, isHovered, isActive, validateConfigValue, debugOverLight ]), transformStyle = useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.99)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = useRef(null), stopLerpLoop = useCallback((() => {
         lerpActiveRef.current = !1, null !== lerpRafRef.current && (cancelAnimationFrame(lerpRafRef.current), 
         lerpRafRef.current = null);
     }), []), startLerpLoop = useCallback((() => {
         if (lerpActiveRef.current) return;
-        lerpActiveRef.current = !0;
-        const LERP_T = CONSTANTS.LERP_FACTOR, tick = () => {
+        lerpActiveRef.current = !0, CONSTANTS.LERP_FACTOR;
+        // 0.08 – lower = more viscous
+        const tick = () => {
             if (!lerpActiveRef.current) return;
             if (!glassRef.current) return void (lerpActiveRef.current = !1);
-            const cur = internalMouseOffsetRef.current, tgt = targetMouseOffsetRef.current, dx = tgt.x - cur.x, dy = tgt.y - cur.y;
-            // If we're close enough, snap and park
-            if (Math.abs(dx) < .01 && Math.abs(dy) < .01) return internalMouseOffsetRef.current = {
-                ...tgt
-            }, internalGlobalMousePositionRef.current = {
-                ...targetGlobalMousePositionRef.current
-            }, 
-            // Final update and stop
-            updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
-                mouseOffset: internalMouseOffsetRef.current,
-                globalMousePosition: internalGlobalMousePositionRef.current,
-                glassSize: glassSize,
-                isHovered: isHovered,
-                isActive: isActive,
-                isOverLight: overLightConfig.isOverLight,
-                baseOverLightConfig: overLightConfig,
-                effectiveBorderRadius: effectiveBorderRadius,
-                effectiveWithoutEffects: effectiveWithoutEffects,
-                effectiveReducedMotion: effectiveReducedMotion,
-                elasticity: elasticity,
-                directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
-                onClick: onClick,
-                withLiquidBlur: withLiquidBlur,
-                blurAmount: blurAmount,
-                saturation: saturation,
-                padding: padding,
-                isFixedOrSticky: isFixedOrSticky
-            }), void stopLerpLoop();
-            // Smooth step
-                        internalMouseOffsetRef.current = {
-                x: lerp$1(cur.x, tgt.x, LERP_T),
-                y: lerp$1(cur.y, tgt.y, LERP_T)
+            const cur = internalMouseOffsetRef.current, tgt = targetMouseOffsetRef.current, springX = calculateSpring(cur.x, tgt.x, mouseVelocityRef.current.x, CONSTANTS.LERP_FACTOR, CONSTANTS.ELASTICITY_DAMPING), springY = calculateSpring(cur.y, tgt.y, mouseVelocityRef.current.y, CONSTANTS.LERP_FACTOR, CONSTANTS.ELASTICITY_DAMPING);
+            internalMouseOffsetRef.current = {
+                x: springX.value,
+                y: springY.value
+            }, mouseVelocityRef.current = {
+                x: springX.velocity,
+                y: springY.velocity
             };
             const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
             internalGlobalMousePositionRef.current = {
-                x: lerp$1(curG.x, tgtG.x, LERP_T),
-                y: lerp$1(curG.y, tgtG.y, LERP_T)
+                x: lerp$1(curG.x, tgtG.x, CONSTANTS.LERP_FACTOR),
+                y: lerp$1(curG.y, tgtG.y, CONSTANTS.LERP_FACTOR)
+            };
+            // ── Calculate Elastic Physics ─────────────────────────────────────
+            let targetElasticTranslation = {
+                x: 0,
+                y: 0
+            }, targetScale = {
+                x: 1,
+                y: 1
+            };
+            if (!effectiveWithoutEffects && glassRef.current) {
+                const rect = cachedRectRef.current || glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), globalPos = internalGlobalMousePositionRef.current;
+                if (globalPos.x && globalPos.y) {
+                    const deltaX = globalPos.x - center.x, deltaY = globalPos.y - center.y, edgeDistanceX = Math.max(0, Math.abs(deltaX) - rect.width / 2), edgeDistanceY = Math.max(0, Math.abs(deltaY) - rect.height / 2), edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY), activationZone = CONSTANTS.ACTIVATION_ZONE, rawT = edgeDistance > activationZone ? 0 : 1 - edgeDistance / activationZone, fadeInFactor = smoothstep(rawT);
+                    // Scale stretch logic (liquid surface tension)
+                    if (targetElasticTranslation = {
+                        x: deltaX * elasticity * CONSTANTS.ELASTICITY_TRANSLATION_FACTOR * fadeInFactor,
+                        y: deltaY * elasticity * CONSTANTS.ELASTICITY_TRANSLATION_FACTOR * fadeInFactor
+                    }, edgeDistance <= activationZone) {
+                        const centerDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+                        if (centerDistance > 0) {
+                            const nx = deltaX / centerDistance, ny = deltaY / centerDistance, stretchIntensity = Math.min(centerDistance / 350, 1) * elasticity * rawT, mag = 1 + .06 * stretchIntensity;
+                            targetScale = {
+                                x: mag + Math.abs(nx) * stretchIntensity * CONSTANTS.ELASTICITY_STRETCH_RATIO,
+                                y: mag + Math.abs(ny) * stretchIntensity * CONSTANTS.ELASTICITY_STRETCH_RATIO
+                            }, 
+                            // Maintain liquid volume by compressing the perpendicular axis
+                            targetScale.x -= Math.abs(ny) * stretchIntensity * .15, targetScale.y -= Math.abs(nx) * stretchIntensity * .15;
+                        }
+                    }
+                }
+            }
+            // Integrate Elastic Translation Spring
+                        const springTX = calculateSpring(elasticTranslationRef.current.x, targetElasticTranslation.x, elasticVelocityRef.current.x, CONSTANTS.ELASTICITY_STIFFNESS, CONSTANTS.ELASTICITY_DAMPING), springTY = calculateSpring(elasticTranslationRef.current.y, targetElasticTranslation.y, elasticVelocityRef.current.y, CONSTANTS.ELASTICITY_STIFFNESS, CONSTANTS.ELASTICITY_DAMPING);
+            elasticTranslationRef.current = {
+                x: springTX.value,
+                y: springTY.value
+            }, elasticVelocityRef.current = {
+                x: springTX.velocity,
+                y: springTY.velocity
+            };
+            // Integrate Scale Spring
+            const springSX = calculateSpring(directionalScaleRef.current.x, targetScale.x, scaleVelocityRef.current.x, CONSTANTS.ELASTICITY_STIFFNESS, CONSTANTS.ELASTICITY_DAMPING), springSY = calculateSpring(directionalScaleRef.current.y, targetScale.y, scaleVelocityRef.current.y, CONSTANTS.ELASTICITY_STIFFNESS, CONSTANTS.ELASTICITY_DAMPING);
+            directionalScaleRef.current = {
+                x: springSX.value,
+                y: springSY.value
+            }, scaleVelocityRef.current = {
+                x: springSX.velocity,
+                y: springSY.velocity
             }, 
             // Imperative style update
             updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
                 mouseOffset: internalMouseOffsetRef.current,
                 globalMousePosition: internalGlobalMousePositionRef.current,
+                elasticTranslation: elasticTranslationRef.current,
+                elasticVelocity: elasticVelocityRef.current,
+                mouseVelocity: mouseVelocityRef.current,
+                directionalScale: directionalScaleRef.current,
                 glassSize: glassSize,
                 isHovered: isHovered,
                 isActive: isActive,
@@ -1512,17 +1629,16 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
                 effectiveWithoutEffects: effectiveWithoutEffects,
                 effectiveReducedMotion: effectiveReducedMotion,
                 elasticity: elasticity,
-                directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
+                scaleBase: isActive && Boolean(onClick) ? .99 : 1,
                 onClick: onClick,
                 withLiquidBlur: withLiquidBlur,
                 blurAmount: blurAmount,
                 saturation: saturation,
                 padding: padding,
                 isFixedOrSticky: isFixedOrSticky
-            }), lerpRafRef.current = requestAnimationFrame(tick);
+            }), Math.abs(mouseVelocityRef.current.x) < .001 && Math.abs(mouseVelocityRef.current.y) < .001 && Math.abs(elasticVelocityRef.current.x) < .001 && Math.abs(elasticVelocityRef.current.y) < .001 && Math.abs(scaleVelocityRef.current.x) < .001 && Math.abs(scaleVelocityRef.current.y) < .001 && Math.abs(internalMouseOffsetRef.current.x - targetMouseOffsetRef.current.x) < .001 && Math.abs(internalMouseOffsetRef.current.y - targetMouseOffsetRef.current.y) < .001 ? stopLerpLoop() : lerpRafRef.current = requestAnimationFrame(tick);
         };
- // 0.08 – lower = more viscous
-                lerpRafRef.current = requestAnimationFrame(tick);
+        lerpRafRef.current = requestAnimationFrame(tick);
     }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding, isFixedOrSticky, stopLerpLoop ]), handleGlobalMousePosition = useCallback((globalPos => {
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
@@ -1569,6 +1685,11 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
             mouseOffset: externalMouseOffset || internalMouseOffsetRef.current,
             globalMousePosition: externalGlobalMousePosition || internalGlobalMousePositionRef.current,
+            elasticTranslation: elasticTranslationRef.current,
+            elasticVelocity: elasticVelocityRef.current,
+            mouseVelocity: mouseVelocityRef.current,
+            directionalScale: directionalScaleRef.current,
+            scaleBase: isActive && Boolean(onClick) ? .96 : 1,
             glassSize: glassSize,
             isHovered: isHovered,
             isActive: isActive,
@@ -1578,7 +1699,6 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             elasticity: elasticity,
-            directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
             onClick: onClick,
             withLiquidBlur: withLiquidBlur,
             blurAmount: blurAmount,
@@ -2846,7 +2966,7 @@ const PERFORMANCE_PRESET = {
         "aria-label": ariaLabel,
         "aria-describedby": ariaDescribedBy,
         "aria-disabled": !(!onClick || !effectiveWithoutEffects) || !onClick && void 0,
-        "aria-pressed": void 0,
+        "aria-pressed": onClick ? isActive : void 0,
         onKeyDown: onClick ? handleKeyDown : void 0,
         children: [ jsx(AtomixGlassContainer, {
             ref: glassRef,
@@ -4451,10 +4571,10 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
             children: renderSlot(slots?.spinner, {
                 className: ThemeNaming.bemClass("btn", "spinner"),
                 size: spinnerSize,
-                variant: "link" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "error" : variant
+                variant: "link" === variant || "ghost" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "danger" : variant
             }, jsx(Spinner, {
                 size: spinnerSize,
-                variant: "link" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "error" : variant
+                variant: "link" === variant || "ghost" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "danger" : variant
             }))
         }), iconElement && !loading && jsx("span", {
             className: ThemeNaming.bemClass("btn", "icon"),
@@ -4543,8 +4663,7 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         const defaultGlassProps = {
             displacementScale: 20,
             blurAmount: 0,
-            saturation: 200,
-            elasticity: 0
+            saturation: 200
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass