@shohojdhara/atomix 0.4.7 → 0.4.9

package/dist/core.js

@@ -92,7 +92,7 @@ var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
     return "object" == typeof it ? null !== it : isCallable$7(it);
 }, path$3 = {}, path$2 = path$3, globalThis$a = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
     return isCallable$6(variable) ? variable : void 0;
-}, navigator = globalThis_1.navigator, userAgent$1 = navigator && navigator.userAgent, globalThis$8 = globalThis_1, userAgent = userAgent$1 ? String(userAgent$1) : "", process$1 = globalThis$8.process, Deno = globalThis$8.Deno, versions = process$1 && process$1.versions || Deno && Deno.version, v8 = versions && versions.v8;
+}, navigator$1 = globalThis_1.navigator, userAgent$1 = navigator$1 && navigator$1.userAgent, globalThis$8 = globalThis_1, userAgent = userAgent$1 ? String(userAgent$1) : "", process$1 = globalThis$8.process, Deno = globalThis$8.Deno, versions = process$1 && process$1.versions || Deno && Deno.version, v8 = versions && versions.v8;
 
 v8 && (
 // in old Chrome, versions of V8 isn't V8 = Chrome / 10
@@ -554,20 +554,29 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         SHADER: "c-atomix-glass--shader"
     },
     DEFAULTS: {
-        DISPLACEMENT_SCALE: 20,
-        BLUR_AMOUNT: 1,
+        DISPLACEMENT_SCALE: 70,
+        BLUR_AMOUNT: 0,
         SATURATION: 140,
-        ABERRATION_INTENSITY: 2.5,
-        ELASTICITY: .05,
-        CORNER_RADIUS: 16,
+        ABERRATION_INTENSITY: 2,
+        ELASTICITY: .15,
+        CORNER_RADIUS: 20,
         // Default border-radius matching design system
-        PADDING: "0 0",
+        PADDING: "0",
         MODE: "standard",
         OVER_LIGHT: !1,
-        ENABLE_OVER_LIGHT_LAYERS: !0
+        ENABLE_OVER_LIGHT_LAYERS: !0,
+        // Phase 1: Time-Based Animation System defaults
+        WITH_TIME_ANIMATION: !0,
+        ANIMATION_SPEED: 1,
+        // Phase 1: Multi-Layer Distortion System defaults
+        WITH_MULTI_LAYER_DISTORTION: !1,
+        DISTORTION_OCTAVES: 5,
+        DISTORTION_LACUNARITY: 2,
+        DISTORTION_GAIN: .5,
+        DISTORTION_QUALITY: "high"
     },
     CONSTANTS: {
-        ACTIVATION_ZONE: 350,
+        ACTIVATION_ZONE: 200,
         LERP_FACTOR: .08,
         SMOOTHSTEP_POWER: 2.5,
         MIN_BLUR: .1,
@@ -727,6 +736,44 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         // Saturation constants
         SATURATION: {
             HIGH_CONTRAST: 200
+        },
+        // Phase 1: Animation System Constants
+        ANIMATION: {
+            // Breathing effect timing (in milliseconds)
+            BREATHING_CYCLE: 2e3,
+            // 2-second breathing cycle
+            // Flow animation speed
+            FLOW_SPEED_X: .1,
+            // Horizontal flow speed
+            FLOW_SPEED_Y: .15,
+            // Vertical flow speed
+            // Wave propagation
+            WAVE_SPEED: .05,
+            // Radial wave speed
+            WAVE_AMPLITUDE: .02
+        },
+        // Phase 1: Multi-Layer Distortion Quality Presets
+        DISTORTION_QUALITY_PRESETS: {
+            low: {
+                octaves: 2,
+                lacunarity: 2,
+                gain: .5
+            },
+            medium: {
+                octaves: 4,
+                lacunarity: 2,
+                gain: .5
+            },
+            high: {
+                octaves: 5,
+                lacunarity: 2,
+                gain: .5
+            },
+            ultra: {
+                octaves: 7,
+                lacunarity: 2,
+                gain: .5
+            }
         }
     }
 }, {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2) => {
@@ -805,7 +852,7 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         // Silently handle errors
     }
     return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
-}, lerp = (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) => {
+}, 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) => {
     switch (mode) {
       case "standard":
         return displacementMap;
@@ -975,20 +1022,19 @@ let idCounter = 0;
 const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
     x: 0,
     y: 0
-}, globalMousePosition: globalMousePosition = {
-    x: 0,
-    y: 0
-}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isHovered: isHovered = !1, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
+}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
     width: 0,
     height: 0
-}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, contentRef: contentRef}, ref) => {
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, 
+// Phase 1: Animation System props
+shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", contentRef: contentRef}, ref) => {
     // Generate a stable, deterministic ID for SSR compatibility
     // Use a module-level counter that's consistent across server and client
-    const filterId = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
+    const filterId = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null), shaderUpdateTimeoutRef = useRef(null), animationFrameRef = useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     useEffect((() => {
         "shader" === mode ? 
-        // Dynamic import shader utilities
+        // Dynamic import shader utilities with animation support
         Promise.resolve().then((() => shaderUtils)).then((shaderUtils => {
             shaderUtilsRef.current = {
                 ShaderDisplacementGenerator: shaderUtils.ShaderDisplacementGenerator,
@@ -1003,7 +1049,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
     // Generate shader map with debouncing and caching
     useEffect((() => {
         // Enhanced validation for shader mode
-        if ("shader" === mode && glassSize && validateGlassSize(glassSize) && shaderUtilsRef.current) {
+        if ("shader" === mode && glassSize && validateGlassSize(glassSize)) {
             // Create cache key from size and variant
             const cacheKey = `${glassSize.width}x${glassSize.height}-${shaderVariant}`, cachedUrl = (key => {
                 const entry = sharedShaderCache.get(key);
@@ -1025,11 +1071,9 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                         width: glassSize.width,
                         height: glassSize.height,
                         fragment: selectedShader
-                    }), 
-                    // Defer shader generation with longer delay to avoid blocking
-                    setTimeout((() => {
+                    }), shaderUpdateTimeoutRef.current = setTimeout((() => {
                         const url = shaderGeneratorRef.current?.updateShader() || "";
-                        ((key, url) => {
+                        url && ((key, url) => {
                             // Evict oldest entries if at capacity
                             if (sharedShaderCache.size >= 15) {
                                 const entries = Array.from(sharedShaderCache.entries());
@@ -1061,7 +1105,8 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
         // Cleanup function with error handling
                 return () => {
             shaderDebounceTimeoutRef.current && (clearTimeout(shaderDebounceTimeoutRef.current), 
-            shaderDebounceTimeoutRef.current = null);
+            shaderDebounceTimeoutRef.current = null), shaderUpdateTimeoutRef.current && (clearTimeout(shaderUpdateTimeoutRef.current), 
+            shaderUpdateTimeoutRef.current = null);
             try {
                 shaderGeneratorRef.current?.destroy();
             } catch (error) {
@@ -1070,7 +1115,37 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 shaderGeneratorRef.current = null;
             }
         };
-    }), [ mode, glassSize, shaderVariant ]);
+    }), [ mode, glassSize, shaderVariant ]), 
+    // Phase 1: Time-Based Animation Loop - Continuous shader regeneration
+    useEffect((() => {
+        // Only run animations in shader mode with time animation enabled
+        if ("shader" !== mode || !withTimeAnimation || effectiveReducedMotion || effectiveWithoutEffects) 
+        // Cancel any existing animation frame
+        return void (null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
+        animationFrameRef.current = null));
+        const baseFps = "ultra" === distortionQuality ? 60 : "high" === distortionQuality ? 30 : "medium" === distortionQuality ? 24 : 20, effectiveSpeed = Math.max(.5, Math.min(2, animationSpeed || 1)), complexity = withMultiLayerDistortion ? Math.max(1, (distortionOctaves || 3) / 3 + .25 * Math.max(0, (distortionLacunarity || 2) - 2) + Math.max(0, (distortionGain || .5) - .5)) : 1, frameInterval = 1e3 / Math.max(12, Math.min(60, Math.round(baseFps * effectiveSpeed / complexity)));
+        let lastUpdate = 0, isCancelled = !1;
+        const animate = currentTime => {
+            if (!isCancelled) {
+                if (currentTime - lastUpdate >= frameInterval && shaderGeneratorRef.current) {
+                    lastUpdate = currentTime;
+                    try {
+                        const animatedShaderUrl = shaderGeneratorRef.current.updateShader();
+                        animatedShaderUrl && setShaderMapUrl(animatedShaderUrl);
+                    } catch (error) {
+                        console.warn("AtomixGlassContainer: Error in animation loop", error);
+                    }
+                }
+                animationFrameRef.current = requestAnimationFrame(animate);
+            }
+        };
+        // Start animation loop
+                // Cleanup animation on unmount or dependency change
+        return animationFrameRef.current = requestAnimationFrame(animate), () => {
+            isCancelled = !0, null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
+            animationFrameRef.current = null);
+        };
+    }), [ mode, withTimeAnimation, animationSpeed, displacementScale, withMultiLayerDistortion, distortionOctaves, distortionLacunarity, distortionGain, distortionQuality, effectiveReducedMotion, effectiveWithoutEffects, glassSize ]);
     // Removed forced reflow to avoid layout thrash and potential feedback sizing loops
     const [rectCache, setRectCache] = useState(null);
     useEffect((() => {
@@ -1122,21 +1197,18 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 backdropFilter: `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`
             };
         }
-    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveWithoutEffects, withLiquidBlur ]), containerVars = useMemo((() => {
+    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveWithoutEffects, withLiquidBlur, overLightConfig ]), containerVars = useMemo((() => {
         try {
             // Safe extraction of mouse offset values
             const mx = mouseOffset && "number" == typeof mouseOffset.x && !isNaN(mouseOffset.x) ? mouseOffset.x : 0, my = mouseOffset && "number" == typeof mouseOffset.y && !isNaN(mouseOffset.y) ? mouseOffset.y : 0;
             return {
-                "--atomix-glass-container-width": `${glassSize?.width}`,
-                "--atomix-glass-container-height": `${glassSize?.height}`,
-                "--atomix-glass-container-padding": padding || "0 0",
                 "--atomix-glass-container-radius": `${"number" != typeof borderRadius || isNaN(borderRadius) ? 0 : borderRadius}px`,
                 "--atomix-glass-container-backdrop": backdropStyle?.backdropFilter || "none",
                 "--atomix-glass-container-shadow": overLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig?.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (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-container-shadow-opacity": effectiveWithoutEffects ? 0 : 1,
                 // Background and shadow values use design token-aligned RGB values
                 "--atomix-glass-container-bg": overLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none",
-                "--atomix-glass-container-text-shadow": overLight ? "0px 2px 12px rgba(0, 0, 0, 0)" : "0px 2px 12px rgba(0, 0, 0, 0.4)",
+                "--atomix-glass-container-text-shadow": overLight ? "0px 1px 2px rgba(255, 255, 255, 0.15)" : "0px 2px 12px rgba(0, 0, 0, 0.4)",
                 "--atomix-glass-container-box-shadow": overLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)"
             };
         } catch (error) {
@@ -1151,7 +1223,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-text-shadow": "none"
             };
         }
-    }), [ glassSize, padding, borderRadius, backdropStyle, mouseOffset, overLight, effectiveWithoutEffects ]);
+    }), [ borderRadius, backdropStyle, mouseOffset, overLight, effectiveWithoutEffects, overLightConfig ]);
     return jsx("div", {
         ref: el => {
             // Apply force no-transition
@@ -1180,10 +1252,6 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                     aberrationIntensity: "number" != typeof aberrationIntensity || isNaN(aberrationIntensity) ? 0 : aberrationIntensity,
                     shaderMapUrl: shaderMapUrl
                 }), jsx("div", {
-                    ref: el => {
-                        el && (el.style.setProperty("transition-duration", "0s", "important"), el.style.setProperty("animation-duration", "0s", "important"), 
-                        el.style.setProperty("transition-delay", "0s", "important"));
-                    },
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
                     style: {
                         filter: `url(#${filterId})`
@@ -1288,7 +1356,7 @@ 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} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
+    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 = {
         opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
         contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
         brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
@@ -1378,7 +1446,7 @@ class {
     }
     // Update Container Styles (containerVars)
         if (containerElement) {
-        const mx = mouseOffset.x, my = mouseOffset.y, EDGE_BLUR_MULTIPLIER = 1.25, CENTER_BLUR_MULTIPLIER = 1.1, FLOW_BLUR_MULTIPLIER = 1.2, MOUSE_INFLUENCE_BLUR_FACTOR = .15, EDGE_INTENSITY_MOUSE_FACTOR = .15, CENTER_INTENSITY_MOUSE_FACTOR = .1, MAX_BLUR_RELATIVE = 2, rect = containerElement.getBoundingClientRect();
+        const mx = mouseOffset.x, my = mouseOffset.y, EDGE_BLUR_MULTIPLIER = .5, CENTER_BLUR_MULTIPLIER = .2, FLOW_BLUR_MULTIPLIER = .3, MOUSE_INFLUENCE_BLUR_FACTOR = .4, EDGE_INTENSITY_MOUSE_FACTOR = .15, CENTER_INTENSITY_MOUSE_FACTOR = .1, MAX_BLUR_RELATIVE = 2, rect = containerElement.getBoundingClientRect();
         let liquidBlur = {
             baseBlur: blurAmount,
             edgeBlur: blurAmount * EDGE_BLUR_MULTIPLIER,
@@ -1400,22 +1468,155 @@ class {
         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})`;
         // Container variables
                 const style = containerElement.style;
-        style.setProperty("--atomix-glass-container-width", `${glassSize.width}`), style.setProperty("--atomix-glass-container-height", `${glassSize.height}`), 
+        style.setProperty("--atomix-glass-container-width", isFixedOrSticky ? `${glassSize.width}` : "100%"), 
+        style.setProperty("--atomix-glass-container-height", isFixedOrSticky ? `${glassSize.height}` : "100%"), 
         style.setProperty("--atomix-glass-container-padding", padding), style.setProperty("--atomix-glass-container-radius", `${effectiveBorderRadius}px`), 
         style.setProperty("--atomix-glass-container-backdrop", backdropFilterString), 
         // Shadows
         style.setProperty("--atomix-glass-container-shadow", isOverLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})` ].join(", ") : "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-bg", isOverLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none"), 
-        style.setProperty("--atomix-glass-container-text-shadow", isOverLight ? "0px 2px 12px rgba(0, 0, 0, 0)" : "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)");
     }
-}, {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
+};
 
 /**
  * Updates the styles of the AtomixGlass wrapper and container elements imperatively
  * to avoid React re-renders on mouse movement.
- */ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
+ */
+/**
+ * Animation System for AtomixGlass Component
+ *
+ * Implements Phase 1 features from the AtomixGlass Feature Implementation Roadmap:
+ * - Feature 1.1: Time-Based Animation System
+ * - Feature 1.2: Multi-Layer Distortion System (FBM)
+ *
+ * @packageDocumentation
+ */
+// ============================================================================
+// Noise Functions for FBM (Feature 1.2)
+// ============================================================================
+/**
+ * Perlin noise implementation for smooth gradient noise
+ *
+ * @param x - X coordinate
+ * @param y - Y coordinate
+ * @returns Noise value in range [0, 1]
+ */
+function perlinNoise(x, y) {
+    // Simplified Perlin noise using pseudo-random gradients
+    const X = 255 & Math.floor(x), Y = 255 & Math.floor(y), xf = x - Math.floor(x), yf = y - Math.floor(y), u = fade(xf), v = fade(yf), A = p[X] + Y & 255, B = p[X + 1] + Y & 255, ga = grad(p[A], xf, yf), gb = grad(p[B], xf - 1, yf), gc = grad(p[A + 1 & 255], xf, yf - 1), gd = grad(p[B + 1 & 255], xf - 1, yf - 1), lerpX1 = lerp(ga, gb, u), lerpX2 = lerp(gc, gd, u);
+    // Scale to [0, 1] range
+    return (lerp(lerpX1, lerpX2, v) + 1) / 2;
+}
+
+// ============================================================================
+// Fractal Brownian Motion (FBM) Engine (Feature 1.2)
+// ============================================================================
+/**
+ * Creates an FBM engine with configurable parameters
+ *
+ * @param config - FBM configuration (octaves, lacunarity, gain)
+ * @returns Object with fbm function
+ *
+ * @example
+ * ```typescript
+ * const fbmEngine = createFBMEngine({ octaves: 5, lacunarity: 2, gain: 0.5 });
+ *
+ * // Generate noise at position (0.5, 0.5) with time animation
+ * const noiseValue = fbmEngine.fbm(0.5, 0.5, Date.now());
+ * ```
+ */ function createFBMEngine(config) {
+    /**
+   * Fractal Brownian Motion function
+   * Combines multiple octaves of noise for complex, natural patterns
+   *
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param time - Optional time value for animation
+   * @returns FBM noise value in range [0, 1]
+   */
+    const fbm = (x, y, time = 0) => {
+        let value = 0, amplitude = .5, frequency = 1, phase = .001 * time;
+        // Convert to seconds for reasonable animation speed
+        for (let i = 0; i < config.octaves; i++) 
+        // Apply time-based phase shift to all octaves
+        value += perlinNoise(x * frequency + phase, y * frequency + phase) * amplitude, 
+        frequency *= config.lacunarity, // Increase frequency
+        amplitude *= config.gain;
+        return value;
+    };
+    /**
+   * Get FBM with simple time factor
+   */    return {
+        fbm: fbm,
+        fbmWithTime: (x, y, time) => fbm(x, y, time)
+    };
+}
+
+/**
+ * Gets optimal FBM config based on quality preset
+ *
+ * @param quality - Quality preset level
+ * @returns FBM configuration for the quality level
+ */ const fbmEngineCache = new Map;
+
+// ============================================================================
+// Shader Utility Functions for Time-Based Effects
+// ============================================================================
+/**
+ * Liquid glass distortion with time-based animation
+ * Uses FBM to create organic, flowing liquid effects
+ *
+ * @param uv - UV coordinates (normalized 0-1)
+ * @param time - Elapsed time in milliseconds
+ * @param config - FBM configuration
+ * @returns Distorted UV coordinates
+ */ function liquidGlassWithTime(uv, time, config) {
+    const configKey = `${config.octaves}-${config.lacunarity}-${config.gain}`;
+    let fbmEngine = fbmEngineCache.get(configKey);
+    fbmEngine || (fbmEngine = createFBMEngine(config), fbmEngineCache.set(configKey, fbmEngine));
+    // Animate noise with time
+        const animatedNoise = fbmEngine.fbmWithTime(2 * uv.x + 1e-4 * time, 2 * uv.y + 15e-5 * time, time);
+    return {
+        x: uv.x + .04 * (animatedNoise - .5),
+        y: uv.y + .04 * (animatedNoise - .5)
+    };
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+/**
+ * Fade curve for smooth interpolation (Perlin's fade function)
+ */ function fade(t) {
+    return t * t * t * (t * (6 * t - 15) + 10);
+}
+
+/**
+ * Linear interpolation
+ */ function lerp(a, b, t) {
+    return a + t * (b - a);
+}
+
+/**
+ * Gradient calculation for Perlin noise
+ */ function grad(hash, x, y) {
+    const h = 15 & hash, u = h < 8 ? x : y, v = h < 4 ? y : 12 === h || 14 === h ? x : 0;
+    return (1 & h ? -u : u) + (2 & h ? -v : v);
+}
+
+/**
+ * Permutation table for Perlin noise
+ */ const p = (() => {
+    const permutation = [];
+    for (let i = 0; i < 256; i++) permutation[i] = Math.floor(256 * Math.random());
+    // Duplicate for overflow handling
+        return [ ...permutation, ...permutation ];
+})(), {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
+
+const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
     parentElement && backgroundDetectionCache.set(parentElement, {
         result: result,
         timestamp: Date.now(),
@@ -1428,7 +1629,9 @@ class {
  * Composable hook for AtomixGlass component logic
  * Manages all state, calculations, and event handlers
  */
-function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, debugPerformance: debugPerformance = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur}) {
+function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, withTimeAnimation: 
+// Phase 1: Animation System Props
+withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED, withMultiLayerDistortion: withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION, distortionOctaves: distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES, distortionLacunarity: distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY, distortionGain: distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN, distortionQuality: distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY}) {
     // State
     const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), cachedRectRef = useRef(null), internalGlobalMousePositionRef = useRef({
         x: 0,
@@ -1442,7 +1645,47 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     }), 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), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
+    }), 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((() => {
+        // 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
+                var quality;
+        return {
+            octaves: distortionOctaves ?? preset.octaves,
+            lacunarity: distortionLacunarity ?? preset.lacunarity,
+            gain: distortionGain ?? preset.gain
+        };
+    }), [ distortionQuality, distortionOctaves, distortionLacunarity, distortionGain ]), fbmEngine = useMemo((() => withMultiLayerDistortion ? createFBMEngine(fbmConfig) : null), [ withMultiLayerDistortion, fbmConfig ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveWithTimeAnimation = useMemo((() => withTimeAnimation && !effectiveReducedMotion), [ withTimeAnimation, effectiveReducedMotion ]);
+    /**
+   * Animation loop for time-based effects
+   */
+    useEffect((() => {
+        if (!effectiveWithTimeAnimation || "undefined" == typeof window) return;
+        let lastFrameTime = performance.now();
+        /**
+     * Animation frame handler
+     */        const animate = currentTime => {
+            // Calculate delta time
+            const deltaTime = currentTime - lastFrameTime;
+            lastFrameTime = currentTime;
+            // Apply animation speed multiplier
+            const scaledDelta = deltaTime * animationSpeed;
+            elapsedTimeRef.current += scaledDelta, shaderTimeRef.current = elapsedTimeRef.current, 
+            // Continue animation loop
+            animationFrameIdRef.current = requestAnimationFrame(animate);
+        };
+        // Start animation
+                // Cleanup
+        return animationStartTimeRef.current = performance.now(), animationFrameIdRef.current = requestAnimationFrame(animate), 
+        () => {
+            null !== animationFrameIdRef.current && (cancelAnimationFrame(animationFrameIdRef.current), 
+            animationFrameIdRef.current = null);
+        };
+    }), [ effectiveWithTimeAnimation, animationSpeed ]);
+    /**
+   * Get current shader time for animations
+   */
+    const getShaderTime = useCallback((() => shaderTimeRef.current), []), applyTimeBasedDistortion = useCallback((uv => effectiveWithTimeAnimation && fbmEngine ? liquidGlassWithTime(uv, shaderTimeRef.current, fbmConfig) : uv), [ effectiveWithTimeAnimation, fbmEngine, fbmConfig ]), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
         const [glassSize, setGlassSize] = useState({
             width: 270,
             height: 69
@@ -1501,7 +1744,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         glassRef: glassRef,
         effectiveBorderRadius: effectiveBorderRadius,
         cachedRectRef: cachedRectRef
-    }), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
+    }), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
+    /**
+   * Apply time-based distortion to UV coordinates
+   */    
     // Extract border-radius from children
     useEffect((() => {
         const extractRadius = () => {
@@ -1704,6 +1950,8 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         lerpActiveRef.current = !0;
         const LERP_T = CONSTANTS.LERP_FACTOR, tick = () => {
             if (!lerpActiveRef.current) return;
+            // Add ref validity check to prevent memory leaks
+                        if (!glassRef.current || !wrapperRef?.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) < .05 && Math.abs(dy) < .05) internalMouseOffsetRef.current = {
@@ -1712,17 +1960,17 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 ...targetGlobalMousePositionRef.current
             }; else {
                 internalMouseOffsetRef.current = {
-                    x: lerp(cur.x, tgt.x, LERP_T),
-                    y: lerp(cur.y, tgt.y, LERP_T)
+                    x: lerp$1(cur.x, tgt.x, LERP_T),
+                    y: lerp$1(cur.y, tgt.y, LERP_T)
                 };
                 const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
                 internalGlobalMousePositionRef.current = {
-                    x: lerp(curG.x, tgtG.x, LERP_T),
-                    y: lerp(curG.y, tgtG.y, LERP_T)
+                    x: lerp$1(curG.x, tgtG.x, LERP_T),
+                    y: lerp$1(curG.y, tgtG.y, LERP_T)
                 };
             }
             // Imperative style update with the smoothed values
-                        updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
+                        updateAtomixGlassStyles(wrapperRef.current, glassRef.current, {
                 mouseOffset: internalMouseOffsetRef.current,
                 globalMousePosition: internalGlobalMousePositionRef.current,
                 glassSize: glassSize,
@@ -1739,12 +1987,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 withLiquidBlur: withLiquidBlur,
                 blurAmount: blurAmount,
                 saturation: saturation,
-                padding: padding
+                padding: padding,
+                isFixedOrSticky: isFixedOrSticky
             }), lerpRafRef.current = requestAnimationFrame(tick);
         };
  // 0.08 – lower = more viscous
                 lerpRafRef.current = requestAnimationFrame(tick);
-    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding ]), stopLerpLoop = useCallback((() => {
+    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding, isFixedOrSticky ]), stopLerpLoop = useCallback((() => {
         lerpActiveRef.current = !1, null !== lerpRafRef.current && (cancelAnimationFrame(lerpRafRef.current), 
         lerpRafRef.current = null);
     }), []);
@@ -1812,6 +2061,8 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         // This is now static (refs or props) unless prop changes
         overLightConfig: overLightConfig,
         transformStyle: transformStyle,
+        getShaderTime: getShaderTime,
+        applyTimeBasedDistortion: applyTimeBasedDistortion,
         handleMouseEnter: handleMouseEnter,
         handleMouseLeave: handleMouseLeave,
         handleMouseDown: handleMouseDown,
@@ -1820,6 +2071,358 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     };
 }
 
+/**
+ * Default responsive breakpoints configuration
+ *
+ * These breakpoints are optimized for glass effect performance across device classes:
+ * - Mobile: Reduced complexity for 60 FPS target
+ * - Tablet: Balanced quality and performance
+ * - Desktop: Full fidelity effects
+ */ const DEFAULT_BREAKPOINTS = {
+    mobile: {
+        maxWidth: 640,
+        params: {
+            distortionOctaves: 3,
+            displacementScale: .7,
+            blurAmount: .8,
+            animationSpeed: .8,
+            chromaticIntensity: .5
+        }
+    },
+    tablet: {
+        minWidth: 641,
+        maxWidth: 1024,
+        params: {
+            distortionOctaves: 4,
+            displacementScale: .85,
+            blurAmount: .9,
+            animationSpeed: .9,
+            chromaticIntensity: .75
+        }
+    },
+    desktop: {
+        minWidth: 1025,
+        params: {
+            distortionOctaves: 5,
+            displacementScale: 1,
+            blurAmount: 1,
+            animationSpeed: 1,
+            chromaticIntensity: 1
+        }
+    }
+};
+
+/**
+ * Device performance tier detection
+ *
+ * Uses Device Memory API and Hardware Concurrency API to classify devices
+ * into performance tiers for automatic quality adjustment.
+ *
+ * @returns Performance tier classification
+ */
+/**
+ * PerformanceDashboard - Real-time performance monitoring overlay
+ *
+ * Displays:
+ * - Current FPS with color coding
+ * - Frame time statistics
+ * - Quality level indicator
+ * - GPU memory usage (if available)
+ * - Auto-scaling status
+ */
+const PerformanceDashboard = ({metrics: metrics, isVisible: isVisible = !0, onClose: onClose}) => {
+    // Get color for FPS display
+    const getFpsColor = fps => fps >= 58 ? "#4ade80" : // Green - good
+    fps >= 45 ? "#fbbf24" : "#ef4444" // Red - critical
+    , dashboardStyle = useMemo((() => ({
+        position: "fixed",
+        top: "16px",
+        right: "16px",
+        padding: "12px 16px",
+        backgroundColor: "rgba(17, 24, 39, 0.95)",
+        borderRadius: "8px",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+        fontFamily: "monospace",
+        fontSize: "12px",
+        color: "#fff",
+        zIndex: 9999,
+        minWidth: "200px",
+        backdropFilter: "blur(8px)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        transition: "opacity 0.3s ease",
+        opacity: isVisible ? 1 : 0,
+        pointerEvents: isVisible ? "auto" : "none"
+    })), [ isVisible ]), headerStyle = useMemo((() => ({
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: "8px",
+        paddingBottom: "8px",
+        borderBottom: "1px solid rgba(255, 255, 255, 0.1)"
+    })), []), titleStyle = useMemo((() => ({
+        fontWeight: "bold",
+        fontSize: "13px",
+        color: "#fff"
+    })), []), closeButtonStyle = useMemo((() => ({
+        background: "transparent",
+        border: "none",
+        color: "#9ca3af",
+        cursor: "pointer",
+        fontSize: "16px",
+        padding: "0",
+        lineHeight: "1"
+    })), []), metricRowStyle = useMemo((() => ({
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: "6px"
+    })), []), labelStyle = useMemo((() => ({
+        color: "#9ca3af",
+        marginRight: "12px"
+    })), []), valueStyle = useMemo((() => ({
+        fontWeight: "bold"
+    })), []);
+    // Get quality level badge color
+        return isVisible ? jsxs("div", {
+        style: dashboardStyle,
+        children: [ jsxs("div", {
+            style: headerStyle,
+            children: [ jsx("span", {
+                style: titleStyle,
+                children: "Performance Monitor"
+            }), onClose && jsx("button", {
+                style: closeButtonStyle,
+                onClick: onClose,
+                "aria-label": "Close performance dashboard",
+                children: "×"
+            }) ]
+        }), jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsx("span", {
+                style: labelStyle,
+                children: "FPS"
+            }), jsx("span", {
+                style: {
+                    ...valueStyle,
+                    color: getFpsColor(metrics.fps)
+                },
+                children: Math.round(metrics.fps)
+            }) ]
+        }), jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsx("span", {
+                style: labelStyle,
+                children: "Frame Time"
+            }), jsxs("span", {
+                style: valueStyle,
+                children: [ metrics.frameTime.toFixed(2), "ms" ]
+            }) ]
+        }), jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsx("span", {
+                style: labelStyle,
+                children: "Quality"
+            }), jsx("span", {
+                style: {
+                    ...valueStyle,
+                    color: (quality => {
+                        switch (quality) {
+                          case "high":
+                            return "#4ade80";
+
+                          case "medium":
+                            return "#fbbf24";
+
+                          case "low":
+                            return "#ef4444";
+
+                          default:
+                            return "#9ca3af";
+                        }
+                    })(metrics.qualityLevel),
+                    textTransform: "uppercase",
+                    fontSize: "11px"
+                },
+                children: metrics.qualityLevel
+            }) ]
+        }), metrics.gpuMemory && jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsx("span", {
+                style: labelStyle,
+                children: "GPU Memory"
+            }), jsxs("span", {
+                style: valueStyle,
+                children: [ "~", Math.round(metrics.gpuMemory / 1024), "MB" ]
+            }) ]
+        }), metrics.isAutoScaling && jsx("div", {
+            style: {
+                marginTop: "8px",
+                paddingTop: "8px",
+                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+                fontSize: "10px",
+                color: "#6b7280",
+                textAlign: "center"
+            },
+            children: "Auto-scaling active"
+        }), jsxs("div", {
+            style: {
+                marginTop: "8px",
+                paddingTop: "8px",
+                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+                display: "flex",
+                alignItems: "center",
+                gap: "6px"
+            },
+            children: [ jsx("div", {
+                style: {
+                    width: "8px",
+                    height: "8px",
+                    borderRadius: "50%",
+                    backgroundColor: getFpsColor(metrics.fps),
+                    animation: metrics.fps < 45 ? "pulse 1s infinite" : "none"
+                }
+            }), jsx("span", {
+                style: {
+                    fontSize: "10px",
+                    color: metrics.fps >= 58 ? "#4ade80" : metrics.fps >= 45 ? "#fbbf24" : "#ef4444"
+                },
+                children: metrics.fps >= 58 ? "Optimal" : metrics.fps >= 45 ? "Warning" : "Critical"
+            }) ]
+        }) ]
+    }) : null;
+};
+
+// Add pulse animation for critical FPS
+if ("undefined" != typeof document) {
+    const styleSheet = document.createElement("style");
+    styleSheet.textContent = "\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n  ", 
+    document.head.appendChild(styleSheet);
+}
+
+/**
+ * Mobile optimization presets
+ *
+ * These presets adjust glass effect parameters based on device performance tier
+ * to ensure smooth animations and responsive interactions.
+ */
+/**
+ * Performance preset - Maximum FPS, reduced quality
+ * Best for low-end devices or when battery saving is priority
+ */ const PERFORMANCE_PRESET = {
+    distortionOctaves: 2,
+    // Minimal FBM layers
+    displacementScale: 50,
+    // Subtle displacement
+    blurAmount: 5,
+    // Light blur
+    saturation: 80,
+    // Reduced saturation
+    aberrationIntensity: .3,
+    // Minimal chromatic aberration
+    animationSpeed: .8,
+    // Slightly slower for performance
+    chromaticIntensity: .3,
+    // Low chromatic effect
+    distortionLacunarity: 1.5,
+    // Simpler noise pattern
+    distortionGain: .3
+}, BALANCED_PRESET = {
+    distortionOctaves: 3,
+    // Moderate FBM layers
+    displacementScale: 75,
+    // Medium displacement
+    blurAmount: 8,
+    // Moderate blur
+    saturation: 90,
+    // Near-full saturation
+    aberrationIntensity: .5,
+    // Moderate chromatic aberration
+    animationSpeed: 1,
+    // Normal speed
+    chromaticIntensity: .5,
+    // Moderate chromatic effect
+    distortionLacunarity: 2,
+    // Standard noise pattern
+    distortionGain: .4
+}, QUALITY_PRESET = {
+    distortionOctaves: 4,
+    // More FBM layers for detail
+    displacementScale: 100,
+    // Stronger displacement
+    blurAmount: 12,
+    // Smoother blur
+    saturation: 100,
+    // Full saturation
+    aberrationIntensity: .7,
+    // Pronounced chromatic aberration
+    animationSpeed: 1.2,
+    // Slightly faster for drama
+    chromaticIntensity: .7,
+    // Strong chromatic effect
+    distortionLacunarity: 2.2,
+    // Richer noise pattern
+    distortionGain: .5
+}, MOBILE_OPTIMIZED_BREAKPOINTS = {
+    /** Desktop - Full quality */
+    desktop: {
+        minWidth: 1024,
+        params: {
+            distortionOctaves: 6,
+            displacementScale: 150,
+            blurAmount: 15,
+            saturation: 100,
+            aberrationIntensity: 1,
+            animationSpeed: 1,
+            chromaticIntensity: 1,
+            distortionLacunarity: 2.5,
+            distortionGain: .6
+        }
+    },
+    /** Laptop - High quality */
+    laptop: {
+        minWidth: 768,
+        params: {
+            ...QUALITY_PRESET,
+            distortionOctaves: 5,
+            displacementScale: 120
+        }
+    },
+    /** Tablet - Balanced quality */
+    tablet: {
+        minWidth: 640,
+        params: {
+            ...BALANCED_PRESET,
+            distortionOctaves: 4,
+            displacementScale: 90
+        }
+    },
+    /** Mobile - Performance optimized */
+    mobile: {
+        maxWidth: 639,
+        params: {
+            ...PERFORMANCE_PRESET,
+            distortionOctaves: 3,
+            displacementScale: 75,
+            blurAmount: 6
+        }
+    },
+    /** Small mobile - Maximum performance */
+    mobileSmall: {
+        maxWidth: 375,
+        params: {
+            ...PERFORMANCE_PRESET,
+            distortionOctaves: 2,
+            displacementScale: 50,
+            blurAmount: 4,
+            saturation: 70
+        }
+    }
+};
+
+/**
+ * Balanced preset - Good quality with reasonable performance
+ * Default preset for most mobile devices
+ */
 /**
  * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
  *
@@ -1834,6 +2437,8 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
  * - Focus ring support for keyboard navigation
  * - Responsive breakpoints for mobile optimization
  * - Enhanced ARIA attributes for screen readers
+ * - Time-based animation system with FBM distortion
+ * - Device preset optimization for performance/quality balance
  *
  * Design System Compliance:
  * - Uses design tokens for opacity, spacing, and colors
@@ -1890,8 +2495,15 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
  * <AtomixGlass overLight="auto" debugOverLight={true}>
  *   <div>Content with debug logging enabled</div>
  * </AtomixGlass>
- */ function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, height: height, width: width, ...rest}) {
-    const glassRef = useRef(null), contentRef = useRef(null), {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
+ *
+ * @example
+ * // Performance-optimized for mobile devices
+ * <AtomixGlass devicePreset="performance" disableResponsiveBreakpoints={false}>
+ *   <div>Mobile-optimized glass effect</div>
+ * </AtomixGlass>
+ */
+function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugOverLight: debugOverLight = !1, height: height, width: width, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", devicePreset: devicePreset = "balanced", disableResponsiveBreakpoints: disableResponsiveBreakpoints = !1, ...rest}) {
+    const glassRef = useRef(null), contentRef = useRef(null), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, getShaderTime: getShaderTime, applyTimeBasedDistortion: applyTimeBasedDistortion, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
         borderRadius: borderRadius,
@@ -1904,7 +2516,6 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         withoutEffects: withoutEffects,
         elasticity: elasticity,
         onClick: onClick,
-        debugBorderRadius: debugBorderRadius,
         debugOverLight: debugOverLight,
         debugPerformance: debugPerformance,
         children: children,
@@ -1912,8 +2523,390 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         saturation: saturation,
         withLiquidBlur: withLiquidBlur,
         padding: padding,
-        style: style
-    }), isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, rootLayoutStyle = useMemo((() => {
+        style: style,
+        isFixedOrSticky: isFixedOrSticky,
+        // Phase 1: Animation System props
+        withTimeAnimation: withTimeAnimation,
+        animationSpeed: animationSpeed,
+        withMultiLayerDistortion: withMultiLayerDistortion,
+        distortionOctaves: distortionOctaves,
+        distortionLacunarity: distortionLacunarity,
+        distortionGain: distortionGain,
+        distortionQuality: distortionQuality
+    });
+    // Re-calculate only when devicePreset changes
+    // Responsive breakpoint system - automatically adjusts parameters based on viewport
+    !
+    /**
+ * Responsive Glass Parameters Hook
+ *
+ * Automatically adjusts glass effect parameters based on:
+ * 1. Screen size (mobile/tablet/desktop breakpoints)
+ * 2. Device performance (RAM and CPU detection)
+ * 3. Custom breakpoint configuration
+ *
+ * Features:
+ * - Debounced resize handling
+ * - Performance-based quality adjustment
+ * - Smooth parameter transitions
+ * - Debug mode for development
+ *
+ * @example
+ * ```typescript
+ * const { responsiveParams, currentBreakpoint } = useResponsiveGlass({
+ *   baseParams: {
+ *     distortionOctaves: 5,
+ *     displacementScale: 20,
+ *     blurAmount: 10,
+ *   },
+ *   debug: true,
+ * });
+ * ```
+ *
+ * @param options Hook configuration options
+ * @returns Responsive parameters and metadata
+ */
+    function({baseParams: baseParams, breakpoints: breakpoints = DEFAULT_BREAKPOINTS, enabled: enabled = !0, enablePerformanceAdjustment: enablePerformanceAdjustment = !0, debug: debug = !1}) {
+        const [responsiveParams, setResponsiveParams] = useState(baseParams), [currentBreakpoint, setCurrentBreakpoint] = useState("desktop"), [performanceTier, setPerformanceTier] = useState("high"), [isActive, setIsActive] = useState(enabled), baseParamsRef = useRef(baseParams), breakpointsRef = useRef(breakpoints);
+        // Update refs when props change
+        baseParamsRef.current = baseParams, breakpointsRef.current = breakpoints;
+        /**
+   * Calculate and apply responsive parameters
+   */
+        const calculateParams = useCallback((() => {
+            if (!enabled || "undefined" == typeof window) return setIsActive(!1), setResponsiveParams(baseParamsRef.current), 
+            void setCurrentBreakpoint("disabled");
+            setIsActive(!0);
+            // Get current screen width
+            const width = window.innerWidth, {name: name, params: breakpointParams} = ((width, breakpoints) => {
+                // Convert breakpoints to array and sort by minWidth descending
+                const sortedBreakpoints = Object.entries(breakpoints).filter((([_, bp]) => void 0 !== bp.minWidth)).sort(((a, b) => (b[1].minWidth || 0) - (a[1].minWidth || 0)));
+                // Find first breakpoint where width >= minWidth
+                                for (const [name, bp] of sortedBreakpoints) if (width >= (bp.minWidth || 0)) return {
+                    name: name,
+                    params: bp.params
+                };
+                // If no minWidth matched, check maxWidth breakpoints
+                                const maxWidthBreakpoints = Object.entries(breakpoints).filter((([_, bp]) => void 0 !== bp.maxWidth)).sort(((a, b) => (a[1].maxWidth || 1 / 0) - (b[1].maxWidth || 1 / 0)));
+                for (const [name, bp] of maxWidthBreakpoints) if (width <= (bp.maxWidth || 1 / 0)) return {
+                    name: name,
+                    params: bp.params
+                };
+                // Fallback to first available breakpoint
+                                const entries = Object.entries(breakpoints);
+                if (0 === entries.length) 
+                // Ultimate fallback - return sensible defaults
+                return {
+                    name: "desktop",
+                    params: {
+                        distortionOctaves: 5,
+                        displacementScale: 1,
+                        blurAmount: 1
+                    }
+                };
+                const firstEntry = entries[0];
+                if (!firstEntry) return {
+                    name: "desktop",
+                    params: {
+                        distortionOctaves: 5,
+                        displacementScale: 1,
+                        blurAmount: 1
+                    }
+                };
+                const [fallbackName, fallbackBreakpoint] = firstEntry;
+                return {
+                    name: fallbackName,
+                    params: fallbackBreakpoint.params
+                };
+            })(width, breakpointsRef.current);
+            // Determine current breakpoint
+                        setCurrentBreakpoint(name);
+            // Merge base params with breakpoint params
+            let mergedParams = ((baseParams, breakpointParams) => {
+                const result = {
+                    ...baseParams
+                }, scaleProperties = [ "displacementScale", "blurAmount", "saturation", "aberrationIntensity", "animationSpeed", "chromaticIntensity" ];
+                // Apply scaling for specific properties
+                                for (const prop of scaleProperties) void 0 !== breakpointParams[prop] && void 0 !== baseParams[prop] && (result[prop] = baseParams[prop] * breakpointParams[prop]);
+                // Override properties that should be set directly (not scaled)
+                                const overrideProperties = [ "distortionOctaves", "distortionLacunarity", "distortionGain" ];
+                for (const prop of overrideProperties) void 0 !== breakpointParams[prop] && (result[prop] = breakpointParams[prop]);
+                return result;
+            })(baseParamsRef.current, breakpointParams);
+            // Apply performance adjustments if enabled
+                        if (enablePerformanceAdjustment) {
+                const tier = (() => {
+                    // Check if we're in a browser environment
+                    if ("undefined" == typeof window || "undefined" == typeof navigator) return "high"; // Default to high for SSR
+                    // Device Memory API (Chrome, Edge, Opera)
+                    // Returns RAM in GB: 0.25, 0.5, 1, 2, 4, 8
+                                        const deviceMemory = navigator.deviceMemory || 4, hardwareConcurrency = navigator.hardwareConcurrency || 4;
+                    // Hardware Concurrency API (logical CPU cores)
+                                        // Low-end: ≤2GB RAM OR ≤2 CPU cores
+                    return deviceMemory <= 2 || hardwareConcurrency <= 2 ? "low" : 
+                    // High-end: ≥4GB RAM AND ≥4 CPU cores
+                    deviceMemory >= 4 && hardwareConcurrency >= 4 ? "high" : "medium";
+                })();
+                setPerformanceTier(tier), mergedParams = ((baseParams, performanceTier) => {
+                    if ("high" === performanceTier) return baseParams;
+ // No adjustment needed
+                                        const multiplier = "low" === performanceTier ? .7 : .85;
+                    return {
+                        ...baseParams,
+                        distortionOctaves: Math.max(2, Math.round((baseParams.distortionOctaves || 5) * multiplier)),
+                        displacementScale: (baseParams.displacementScale || 1) * multiplier,
+                        blurAmount: (baseParams.blurAmount || 1) * multiplier,
+                        animationSpeed: (baseParams.animationSpeed || 1) * multiplier,
+                        chromaticIntensity: (baseParams.chromaticIntensity || 1) * multiplier
+                    };
+                })(mergedParams, tier);
+            }
+            setResponsiveParams(mergedParams);
+        }), [ enabled, enablePerformanceAdjustment, debug ]), debouncedCalculate = (func => {
+            const timeoutRef = useRef(null);
+            return useEffect((() => () => {
+                timeoutRef.current && clearTimeout(timeoutRef.current);
+            }), []), useCallback(((...args) => {
+                timeoutRef.current && clearTimeout(timeoutRef.current), timeoutRef.current = setTimeout((() => {
+                    func(...args);
+                }), 200);
+            }), [ func, 200 ]);
+        })(calculateParams);
+        /**
+   * Debounced parameter calculation for resize events
+   */        
+        /**
+   * Handle window resize
+   */
+        useEffect((() => {
+            if (enabled) 
+            // Cleanup
+            // Initial calculation
+            return calculateParams(), 
+            // Listen for resize events
+            window.addEventListener("resize", debouncedCalculate), () => {
+                window.removeEventListener("resize", debouncedCalculate);
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+                }), [ enabled ]), useCallback((() => {
+            calculateParams();
+        }), [ calculateParams ]);
+    }
+    /**
+ * Get GPU memory info if available (Chrome DevTools only)
+ */ ({
+        baseParams: {
+            ...useMemo((() => 
+            /**
+ * Get preset by name
+ */
+            function(presetName) {
+                switch (presetName) {
+                  case "performance":
+                    return PERFORMANCE_PRESET;
+
+                  case "balanced":
+                  default:
+                    return BALANCED_PRESET;
+
+                  case "quality":
+                    return QUALITY_PRESET;
+                }
+            }
+            /**
+ * Mobile-optimized responsive breakpoints
+ * Automatically applies appropriate presets based on viewport size
+ */ (devicePreset)), [ devicePreset ]),
+            distortionOctaves: Math.round((displacementScale || ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE) / 25),
+            displacementScale: displacementScale || ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE,
+            blurAmount: blurAmount || ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
+            saturation: saturation || ATOMIX_GLASS.DEFAULTS.SATURATION,
+            aberrationIntensity: aberrationIntensity || ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY,
+            animationSpeed: 1,
+            chromaticIntensity: aberrationIntensity || ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY
+        },
+        breakpoints: MOBILE_OPTIMIZED_BREAKPOINTS,
+        enabled: !disableResponsiveBreakpoints && "undefined" != typeof window,
+        // Enable unless disabled
+        debug: !1
+    });
+    // Performance monitoring - tracks FPS, frame time, memory usage
+    const {metrics: performanceMetrics, recommendedQuality: recommendedQuality, isUnderperforming: isUnderperforming, setQualityLevel: setQualityLevel, toggleMonitoring: toggleMonitoring} = 
+    /**
+ * Performance Monitor Hook
+ *
+ * Real-time performance tracking with automatic quality scaling.
+ * Monitors FPS, frame time, and GPU memory to optimize glass effects.
+ *
+ * Features:
+ * - Real-time FPS measurement
+ * - Frame timing analysis
+ * - Automatic quality scaling
+ * - Debug overlay option
+ * - Manual override capability
+ *
+ * @example
+ * ```typescript
+ * const { metrics, recommendedQuality, setQualityLevel } = usePerformanceMonitor({
+ *   targetFps: 60,
+ *   minFps: 45,
+ *   debug: true,
+ * });
+ * ```
+ *
+ * @param config Monitor configuration
+ * @returns Performance metrics and controls
+ */
+    function(config = {}) {
+        const {enabled: enabled = !0, targetFps: targetFps = 60, minFps: minFps = 45, scaleUpThreshold: scaleUpThreshold = 58, lowFpsFrames: lowFpsFrames = 3, highFpsFrames: highFpsFrames = 10, debug: debug = !1, showOverlay: showOverlay = !1} = config, [metrics, setMetrics] = useState({
+            fps: 0,
+            frameTime: 0,
+            gpuMemory: null,
+            qualityLevel: "medium",
+            timestamp: 0,
+            isAutoScaling: !0,
+            lowFpsCount: 0
+        }), [manualOverride, setManualOverride] = useState(!1), [isEnabled, setIsEnabled] = useState(enabled), frameCountRef = useRef(0), lastFpsUpdateRef = useRef(0), lastFrameTimeRef = useRef(0), animationFrameRef = useRef(null), lowFpsCountRef = useRef(0), highFpsCountRef = useRef(0), qualityLevelRef = useRef("medium"), updateMetrics = useCallback((newMetrics => {
+            setMetrics((prev => ({
+                ...prev,
+                ...newMetrics,
+                timestamp: performance.now()
+            })));
+        }), []), applyAutoScaling = useCallback((currentFps => {
+            if (manualOverride) return;
+            const currentQuality = qualityLevelRef.current;
+            // Check for low FPS
+                        if (currentFps < minFps) lowFpsCountRef.current++, highFpsCountRef.current = 0, 
+            // Scale down after N consecutive low-FPS frames
+            lowFpsCountRef.current >= lowFpsFrames && "low" !== currentQuality && (qualityLevelRef.current = "low", 
+            updateMetrics({
+                qualityLevel: "low",
+                lowFpsCount: lowFpsCountRef.current
+            })); else if (currentFps >= scaleUpThreshold) {
+                // Scale up after N consecutive high-FPS frames
+                if (highFpsCountRef.current++, lowFpsCountRef.current = 0, highFpsCountRef.current >= highFpsFrames) {
+                    const newQuality = "low" === currentQuality ? "medium" : "high";
+                    qualityLevelRef.current = newQuality, updateMetrics({
+                        qualityLevel: newQuality,
+                        lowFpsCount: 0
+                    }), highFpsCountRef.current = 0;
+                }
+            } else 
+            // FPS in normal range, reset counters
+            lowFpsCountRef.current = 0, highFpsCountRef.current = 0;
+        }), [ manualOverride, minFps, scaleUpThreshold, lowFpsFrames, highFpsFrames, debug, updateMetrics ]), measureFrame = useCallback((currentTime => {
+            if (!isEnabled) return;
+            frameCountRef.current++;
+            // Calculate frame time
+            const frameTime = currentTime - lastFrameTimeRef.current;
+            // Update FPS every 100ms for responsiveness
+            if (lastFrameTimeRef.current = currentTime, currentTime - lastFpsUpdateRef.current >= 100) {
+                const elapsed = currentTime - lastFpsUpdateRef.current, fps = Math.round(1e3 * frameCountRef.current / elapsed);
+                // Apply auto-scaling
+                applyAutoScaling(fps), updateMetrics({
+                    fps: fps,
+                    frameTime: frameTime,
+                    qualityLevel: qualityLevelRef.current,
+                    lowFpsCount: lowFpsCountRef.current
+                }), 
+                // Reset for next measurement period
+                frameCountRef.current = 0, lastFpsUpdateRef.current = currentTime;
+            }
+            // Continue measurement loop
+                        animationFrameRef.current = requestAnimationFrame(measureFrame);
+        }), [ isEnabled, applyAutoScaling, updateMetrics ]);
+        /**
+   * Initialize GPU memory tracking
+   */
+        useEffect((() => {
+            if (!isEnabled || "undefined" == typeof window) return;
+            let mounted = !0;
+            return (async () => {
+                const memory = await new Promise((resolve => {
+                    // Check for WebGL debug renderer info
+                    if ("undefined" != typeof window && "undefined" != typeof document) try {
+                        const canvas = document.createElement("canvas"), gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+                        if (gl) {
+                            const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
+                            if (debugInfo) {
+                                var _context, _context2, _context3;
+                                // Note: Actual memory info is not directly available via WebGL
+                                // We estimate based on renderer
+                                                                const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+                                // Rough estimation based on renderer type
+                                return void ((null == (_context = renderer) ? void 0 : Function.call.bind(_includesInstanceProperty(_context), _context))?.("Integrated") ? resolve(256) : (null == (_context2 = renderer) ? void 0 : Function.call.bind(_includesInstanceProperty(_context2), _context2))?.("AMD") || (null == (_context3 = renderer) ? void 0 : Function.call.bind(_includesInstanceProperty(_context3), _context3))?.("NVIDIA") ? resolve(512) : resolve(null));
+                            }
+                        }
+                    } catch (e) {
+                        // WebGL not available or error occurred
+                    }
+                    resolve(null);
+                }));
+                mounted && updateMetrics({
+                    gpuMemory: memory
+                });
+            })(), () => {
+                mounted = !1;
+            };
+        }), [ isEnabled, updateMetrics ]), 
+        /**
+   * Start/stop monitoring based on enabled state
+   */
+        useEffect((() => {
+            if (isEnabled) 
+            // Cleanup
+            // Initialize
+            return lastFpsUpdateRef.current = performance.now(), lastFrameTimeRef.current = performance.now(), 
+            animationFrameRef.current = requestAnimationFrame(measureFrame), () => {
+                null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
+                animationFrameRef.current = null);
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+                        null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
+            animationFrameRef.current = null);
+        }), [ isEnabled ]);
+        // measureFrame is stable via useCallback, avoid re-creating RAF loop
+        /**
+   * Manually set quality level (disables auto-scaling)
+   */
+        const setQualityLevel = useCallback((level => {
+            setManualOverride(!0), qualityLevelRef.current = level, updateMetrics({
+                qualityLevel: level,
+                isAutoScaling: !1
+            });
+        }), [ updateMetrics, debug ]), resetAutoScaling = useCallback((() => {
+            setManualOverride(!1), lowFpsCountRef.current = 0, highFpsCountRef.current = 0, 
+            updateMetrics({
+                isAutoScaling: !0,
+                lowFpsCount: 0
+            });
+        }), [ updateMetrics, debug ]), toggleMonitoring = useCallback((() => {
+            setIsEnabled((prev => !prev));
+        }), []);
+        /**
+   * Reset to auto-scaling mode
+   */        var fps, currentQuality;
+        return {
+            metrics: metrics,
+            recommendedQuality: (fps = metrics.fps, currentQuality = metrics.qualityLevel, fps >= 58 ? "high" : fps >= 45 ? "high" === currentQuality ? "high" : "medium" : "low"),
+            isUnderperforming: metrics.fps < minFps,
+            setQualityLevel: setQualityLevel,
+            resetAutoScaling: resetAutoScaling,
+            toggleMonitoring: toggleMonitoring
+        };
+    }({
+        enabled: !1,
+        // We'll toggle manually based on prop
+        debug: !1,
+        showOverlay: !1
+    });
+    // Auto-start performance monitoring if enabled (only in development)
+        React.useEffect((() => {
+        "development" === process.env.NODE_ENV && window?.enablePerformanceMonitoring && toggleMonitoring();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }), []);
+    // Only run once on mount
+    const isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = useMemo((() => {
         if (!isFixedOrSticky) return {};
         const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
         return {
@@ -1933,7 +2926,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 bottom: b
             }
         };
-    }), [ isFixedOrSticky, restStyle ]), baseStyle = useMemo((() => {
+    }), [ isFixedOrSticky, restStyle ]);
+    // Calculate base style with transforms
+    // When layout is hoisted to the root, strip those props from the container
+    useMemo((() => {
         if (isFixedOrSticky) {
             const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
             return {
@@ -1949,18 +2945,20 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 transform: transformStyle
             }
         };
-    }), [ isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle ]), componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
+    }), [ isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle ]);
+    // Build className with state modifiers
+    const componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
         position: isFixedOrSticky ? "absolute" : restStyle.position || "absolute",
         top: isFixedOrSticky ? 0 : restStyle.top || 0,
         left: isFixedOrSticky ? 0 : restStyle.left || 0
     })), [ isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left ]), adjustedSize = useMemo((() => {
-        const resolveSize = (propValue, styleValue, measuredSize) => {
-            const explicitSize = propValue ?? styleValue;
-            return void 0 !== explicitSize ? "number" == typeof explicitSize ? `${explicitSize}px` : explicitSize : "fixed" === positionStyles.position ? `${Math.max(measuredSize, 0)}px` : "100%";
-        };
+        // Keep a reference to positionStyles to avoid unused-variable lint,
+        // but sizing is driven by explicit width/height or measured size.
+        positionStyles.position;
+        const resolveLength = (value, measured) => void 0 !== value ? "number" == typeof value ? `${value}px` : value : measured > 0 ? `${measured}px` : "100%", effectiveWidth = width ?? restStyle.width, effectiveHeight = height ?? restStyle.height;
         return {
-            width: resolveSize(width, restStyle.width, glassSize.width),
-            height: resolveSize(height, restStyle.height, glassSize.height)
+            width: resolveLength(effectiveWidth, glassSize.width),
+            height: resolveLength(effectiveHeight, glassSize.height)
         };
     }), [ width, height, restStyle.width, restStyle.height, positionStyles.position, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
         const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
@@ -2009,9 +3007,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             },
             "--atomix-glass-radius": `${effectiveBorderRadius}px`,
             "--atomix-glass-transform": transformStyle || "none",
-            "--atomix-glass-position": positionStyles.position,
-            "--atomix-glass-top": "fixed" !== positionStyles.top ? `${positionStyles.top}px` : "0",
-            "--atomix-glass-left": "fixed" !== positionStyles.left ? `${positionStyles.left}px` : "0",
+            // Internal decorative layers are positioned relative to the root;
+            "--atomix-glass-position": rootLayoutStyle.position,
+            "--atomix-glass-top": `${isFixedOrSticky ? rootLayoutStyle.top : 0}px`,
+            "--atomix-glass-left": `${isFixedOrSticky ? rootLayoutStyle.left : 0}px`,
             "--atomix-glass-width": adjustedSize.width,
             "--atomix-glass-height": adjustedSize.height,
             "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
@@ -2031,10 +3030,12 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             "--atomix-glass-overlay-highlight-opacity": opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
             "--atomix-glass-overlay-highlight-bg": `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`
         };
-    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, positionStyles, adjustedSize, isOverLight, overLightConfig.borderOpacity, customZIndex ]), renderBackgroundLayer = layerType => jsx("div", {
+    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, adjustedSize, isOverLight, overLightConfig.borderOpacity, customZIndex, rootLayoutStyle, isFixedOrSticky ]), renderBackgroundLayer = layerType => jsx("div", {
         className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" ")
     });
-    return jsxs("div", {
+    // Calculate position and size styles for internal layers
+    // When root is fixed/sticky, internal layers use absolute (relative to root)
+        return jsxs("div", {
         ...rest,
         className: componentClassName,
         style: {
@@ -2051,7 +3052,12 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             ref: glassRef,
             contentRef: contentRef,
             className: className,
-            style: rootLayoutStyle,
+            style: {
+                ...restStyle,
+                ...!isFixedOrSticky && {
+                    position: "relative"
+                }
+            },
             borderRadius: effectiveBorderRadius,
             displacementScale: effectiveWithoutEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
             blurAmount: effectiveWithoutEffects ? 0 : blurAmount,
@@ -2082,11 +3088,19 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             },
             onClick: onClick,
             mode: mode,
-            transform: baseStyle.transform,
             effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
             withLiquidBlur: withLiquidBlur,
+            // Phase 1: Animation System props
+            shaderTime: getShaderTime(),
+            withTimeAnimation: withTimeAnimation,
+            animationSpeed: animationSpeed,
+            withMultiLayerDistortion: withMultiLayerDistortion,
+            distortionOctaves: distortionOctaves,
+            distortionLacunarity: distortionLacunarity,
+            distortionGain: distortionGain,
+            distortionQuality: distortionQuality,
             children: children
         }), Boolean(onClick) && jsxs(Fragment, {
             children: [ jsx("div", {
@@ -2110,6 +3124,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             }), jsx("span", {
                 className: ATOMIX_GLASS.BORDER_2_CLASS
             }) ]
+        }), debugPerformance && performanceMetrics && jsx(PerformanceDashboard, {
+            metrics: performanceMetrics,
+            isVisible: !0,
+            onClose: () => {}
         }) ]
     });
 }
@@ -2176,7 +3194,7 @@ const AccordionBody =  forwardRef((({children: children, className: className =
 
 AccordionBody.displayName = "AccordionBody";
 
-const AccordionImpl =  memo((({title: title, children: children, defaultOpen: defaultOpen = !1, isOpen: controlledOpen, onOpenChange: onOpenChange, onOpen: onOpen, onClose: onClose, disabled: disabled = !1, iconPosition: iconPosition = "right", icon: icon, className: className = "", style: style, glass: glass}) => {
+const AccordionImpl =  memo((({title: title, children: children, defaultOpen: defaultOpen = !1, isOpen: controlledOpen, onOpenChange: onOpenChange, disabled: disabled = !1, iconPosition: iconPosition = "right", icon: icon, className: className = "", style: style, glass: glass}) => {
     // Generate unique IDs for accessibility
     const instanceId = useId(), buttonId = `accordion-header-${instanceId}`, panelId = `accordion-panel-${instanceId}`, {state: state, toggle: toggle, updatePanelHeight: updatePanelHeight, panelRef: panelRef, contentRef: contentRef, generateClassNames: generateClassNames, generateHeaderClassNames: generateHeaderClassNames} = 
     /**
@@ -2220,9 +3238,7 @@ const AccordionImpl =  memo((({title: title, children: children, defaultOpen: de
             toggle: () => {
                 if (!defaultProps.disabled) {
                     const nextOpen = !isOpen;
-                    isControlled || setInternalOpen(nextOpen), defaultProps.onOpenChange?.(nextOpen), 
-                    // Call legacy handlers
-                    nextOpen ? defaultProps.onOpen?.() : defaultProps.onClose?.();
+                    isControlled || setInternalOpen(nextOpen), defaultProps.onOpenChange?.(nextOpen);
                 }
             },
             updatePanelHeight: updatePanelHeight,
@@ -2236,9 +3252,7 @@ const AccordionImpl =  memo((({title: title, children: children, defaultOpen: de
         disabled: disabled,
         iconPosition: iconPosition,
         isOpen: controlledOpen,
-        onOpenChange: onOpenChange,
-        onOpen: onOpen,
-        onClose: onClose
+        onOpenChange: onOpenChange
     }), headerClassNames = generateHeaderClassNames(), panelClassNames = ACCORDION.SELECTORS.PANEL.replace(".", ""), hasCompoundComponents = React.Children.toArray(children).some((child => {
         var _context;
         
@@ -2762,7 +3776,7 @@ class ThemeNaming {
 ThemeNaming.prefix = "atomix";
 
 const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, linkComponent: linkComponent, ...props}, ref) => {
-    const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = iconName ? jsx(Icon, {
+    const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href), iconElement = iconName ? jsx(Icon, {
         name: iconName,
         size: iconSize
     }) : icon, buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass("btn", variant), "md" !== size ? ThemeNaming.sizeClass("btn", size) : "", iconOnly ? ThemeNaming.stateClass("btn", "icon") : "", rounded ? ThemeNaming.stateClass("btn", "rounded") : "", isDisabled ? ThemeNaming.stateClass("btn", "disabled") : "", glass ? ThemeNaming.stateClass("btn", "glass") : "", loading ? BUTTON.CLASSES.LOADING : "", fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", block ? BUTTON.CLASSES.BLOCK : "", active ? BUTTON.CLASSES.ACTIVE : "", selected ? BUTTON.CLASSES.SELECTED : "", className ].filter(Boolean).join(" "), handleClickEvent = useCallback((event => {
@@ -2818,8 +3832,8 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
             ...buttonProps,
             ref: ref,
             // linkComponent usually forwards ref to anchor
-            href: href,
-            to: href,
+            href: isDisabled ? void 0 : href,
+            to: isDisabled ? void 0 : href,
             target: target,
             rel: "_blank" === target ? "noopener noreferrer" : void 0
         };
@@ -2832,7 +3846,7 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
     content = jsx("a", {
         ...buttonProps,
         ref: ref,
-        href: href,
+        href: isDisabled ? void 0 : href,
         target: target,
         rel: "_blank" === target ? "noopener noreferrer" : void 0,
         children: buttonContent
@@ -2874,7 +3888,7 @@ row: row = !1, flat: flat = !1,
 // States
 active: active = !1, disabled: disabled = !1, loading: loading = !1, selected: selected = !1, interactive: interactive = !1, 
 // Content
-header: header, image: image, imageAlt: imageAlt = "", title: title, text: text, actions: actions, icon: icon, footer: footer, children: children, 
+header: header, image: image, imageAlt: imageAlt = "Card image", title: title, text: text, actions: actions, icon: icon, footer: footer, children: children, 
 // Interaction
 onClick: onClick, onHover: onHover, onFocus: onFocus, href: href, target: target, 
 // Custom Link
@@ -3679,7 +4693,9 @@ const smoothStep = (a, b, t) => {
             return this.canvasDPI;
         }
     },
-    fragmentShaders: fragmentShaders
+    createFBMEngine: createFBMEngine,
+    fragmentShaders: fragmentShaders,
+    liquidGlassWithTime: liquidGlassWithTime
 }, Symbol.toStringTag, {
     value: "Module"
 }));