@shohojdhara/atomix 0.4.7 → 0.4.9

package/dist/charts.js

@@ -12,13 +12,13 @@ function getDefaultExportFromCjs(x) {
     return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
 }
 
-var fails$8 = function(exec) {
+var fails$9 = function(exec) {
     try {
         return !!exec();
     } catch (error) {
         return !0;
     }
-}, functionBindNative = !fails$8((function() {
+}, functionBindNative = !fails$9((function() {
     // eslint-disable-next-line es/no-function-prototype-bind -- safe
     var test = function() {/* empty */}.bind();
     // eslint-disable-next-line no-prototype-builtins -- safe
@@ -39,18 +39,18 @@ function() {
     return this;
 }() || Function("return this")(), NATIVE_BIND$2 = functionBindNative, FunctionPrototype = Function.prototype, apply$1 = FunctionPrototype.apply, call$4 = FunctionPrototype.call, functionApply = "object" == typeof Reflect && Reflect.apply || (NATIVE_BIND$2 ? call$4.bind(apply$1) : function() {
     return call$4.apply(apply$1, arguments);
-}), uncurryThis$6 = functionUncurryThis, toString$1 = uncurryThis$6({}.toString), stringSlice = uncurryThis$6("".slice), classofRaw$1 = function(it) {
-    return stringSlice(toString$1(it), 8, -1);
-}, classofRaw = classofRaw$1, uncurryThis$5 = functionUncurryThis, functionUncurryThisClause = function(fn) {
+}), uncurryThis$7 = functionUncurryThis, toString$3 = uncurryThis$7({}.toString), stringSlice = uncurryThis$7("".slice), classofRaw$2 = function(it) {
+    return stringSlice(toString$3(it), 8, -1);
+}, classofRaw$1 = classofRaw$2, uncurryThis$6 = functionUncurryThis, functionUncurryThisClause = function(fn) {
     // Nashorn bug:
     //   https://github.com/zloirock/core-js/issues/1128
     //   https://github.com/zloirock/core-js/issues/1130
-    if ("Function" === classofRaw(fn)) return uncurryThis$5(fn);
-}, documentAll = "object" == typeof document && document.all, isCallable$7 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
+    if ("Function" === classofRaw$1(fn)) return uncurryThis$6(fn);
+}, documentAll = "object" == typeof document && document.all, isCallable$8 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
     return "function" == typeof argument || argument === documentAll;
 } : function(argument) {
     return "function" == typeof argument;
-}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$8((function() {
+}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$9((function() {
     // eslint-disable-next-line es/no-object-defineproperty -- required for testing
     return 7 !== Object.defineProperty({}, 1, {
         get: function() {
@@ -77,22 +77,24 @@ var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
         writable: !(4 & bitmap),
         value: value
     };
-}, fails$5 = fails$8, classof$1 = classofRaw$1, $Object$2 = Object, split = functionUncurryThis("".split), indexedObject = fails$5((function() {
+}, fails$6 = fails$9, classof$4 = classofRaw$2, $Object$3 = Object, split = functionUncurryThis("".split), indexedObject = fails$6((function() {
     // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
     // eslint-disable-next-line no-prototype-builtins -- safe
-    return !$Object$2("z").propertyIsEnumerable(0);
+    return !$Object$3("z").propertyIsEnumerable(0);
 })) ? function(it) {
-    return "String" === classof$1(it) ? split(it, "") : $Object$2(it);
-} : $Object$2, isNullOrUndefined$2 = function(it) {
+    return "String" === classof$4(it) ? split(it, "") : $Object$3(it);
+} : $Object$3, isNullOrUndefined$2 = function(it) {
     return null == it;
-}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$6 = TypeError, requireObjectCoercible$2 = function(it) {
-    if (isNullOrUndefined$1(it)) throw new $TypeError$6("Can't call method on " + it);
+}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$7 = TypeError, requireObjectCoercible$3 = function(it) {
+    if (isNullOrUndefined$1(it)) throw new $TypeError$7("Can't call method on " + it);
     return it;
-}, IndexedObject$1 = indexedObject, requireObjectCoercible$1 = requireObjectCoercible$2, isCallable$6 = isCallable$7, isObject$4 = function(it) {
-    return "object" == typeof it ? null !== it : isCallable$6(it);
-}, path$3 = {}, path$2 = path$3, globalThis$b = globalThis_1, isCallable$5 = isCallable$7, aFunction = function(variable) {
-    return isCallable$5(variable) ? variable : void 0;
-}, navigator = globalThis_1.navigator, userAgent$2 = navigator && navigator.userAgent, environmentUserAgent = userAgent$2 ? String(userAgent$2) : "", globalThis$9 = globalThis_1, userAgent$1 = environmentUserAgent, process$1 = globalThis$9.process, Deno$1 = globalThis$9.Deno, versions = process$1 && process$1.versions || Deno$1 && Deno$1.version, v8 = versions && versions.v8;
+}, IndexedObject$1 = indexedObject, requireObjectCoercible$2 = requireObjectCoercible$3, toIndexedObject$2 = function(it) {
+    return IndexedObject$1(requireObjectCoercible$2(it));
+}, isCallable$7 = isCallable$8, isObject$5 = function(it) {
+    return "object" == typeof it ? null !== it : isCallable$7(it);
+}, path$3 = {}, path$2 = path$3, globalThis$b = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
+    return isCallable$6(variable) ? variable : void 0;
+}, navigator$1 = globalThis_1.navigator, userAgent$2 = navigator$1 && navigator$1.userAgent, environmentUserAgent = userAgent$2 ? String(userAgent$2) : "", globalThis$9 = globalThis_1, userAgent$1 = environmentUserAgent, process$1 = globalThis$9.process, Deno$1 = globalThis$9.Deno, versions = process$1 && process$1.versions || Deno$1 && Deno$1.version, v8 = versions && versions.v8;
 
 v8 && (
 // in old Chrome, versions of V8 isn't V8 = Chrome / 10
@@ -102,32 +104,32 @@ version = (match = v8.split("."))[0] > 0 && match[0] < 4 ? 1 : +(match[0] + matc
 // so check `userAgent` even if `.v8` exists, but 0
 !version && userAgent$1 && (!(match = userAgent$1.match(/Edge\/(\d+)/)) || match[1] >= 74) && (match = userAgent$1.match(/Chrome\/(\d+)/)) && (version = +match[1]);
 
-var environmentV8Version = version, V8_VERSION = environmentV8Version, fails$4 = fails$8, $String$2 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$4((function() {
+var environmentV8Version = version, V8_VERSION = environmentV8Version, fails$5 = fails$9, $String$3 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$5((function() {
     var symbol = Symbol("symbol detection");
     // Chrome 38 Symbol has incorrect toString conversion
     // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
     // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
     // of course, fail.
-        return !$String$2(symbol) || !(Object(symbol) instanceof Symbol) || 
+        return !$String$3(symbol) || !(Object(symbol) instanceof Symbol) || 
     // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
     !Symbol.sham && V8_VERSION && V8_VERSION < 41;
-})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$4 = isCallable$7, isPrototypeOf$1 = objectIsPrototypeOf, $Object$1 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
+})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$5 = isCallable$8, isPrototypeOf$2 = objectIsPrototypeOf, $Object$2 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
     return "symbol" == typeof it;
 } : function(it) {
     var $Symbol = function(namespace, method) {
         return arguments.length < 2 ? aFunction(path$2[namespace]) || aFunction(globalThis$b[namespace]) : path$2[namespace] && path$2[namespace][method] || globalThis$b[namespace] && globalThis$b[namespace][method];
     }("Symbol");
-    return isCallable$4($Symbol) && isPrototypeOf$1($Symbol.prototype, $Object$1(it));
-}, $String$1 = String, isCallable$3 = isCallable$7, $TypeError$5 = TypeError, aCallable$3 = function(argument) {
-    if (isCallable$3(argument)) return argument;
-    throw new $TypeError$5(function(argument) {
+    return isCallable$5($Symbol) && isPrototypeOf$2($Symbol.prototype, $Object$2(it));
+}, $String$2 = String, isCallable$4 = isCallable$8, $TypeError$6 = TypeError, aCallable$3 = function(argument) {
+    if (isCallable$4(argument)) return argument;
+    throw new $TypeError$6(function(argument) {
         try {
-            return $String$1(argument);
+            return $String$2(argument);
         } catch (error) {
             return "Object";
         }
     }(argument) + " is not a function");
-}, aCallable$2 = aCallable$3, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$2 = isCallable$7, isObject$3 = isObject$4, $TypeError$4 = TypeError, sharedStore = {
+}, aCallable$2 = aCallable$3, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$3 = isCallable$8, isObject$4 = isObject$5, $TypeError$5 = TypeError, sharedStore = {
     exports: {}
 }, globalThis$7 = globalThis_1, defineProperty = Object.defineProperty, globalThis$6 = globalThis_1, store$1 = sharedStore.exports = globalThis$6["__core-js_shared__"] || function(key, value) {
     try {
@@ -150,32 +152,34 @@ var environmentV8Version = version, V8_VERSION = environmentV8Version, fails$4 =
     source: "https://github.com/zloirock/core-js"
 });
 
-var name, key, value, store = sharedStore.exports, requireObjectCoercible = requireObjectCoercible$2, $Object = Object, toObject$2 = function(argument) {
-    return $Object(requireObjectCoercible(argument));
+var key, value, store = sharedStore.exports, requireObjectCoercible$1 = requireObjectCoercible$3, $Object$1 = Object, toObject$2 = function(argument) {
+    return $Object$1(requireObjectCoercible$1(argument));
 }, toObject$1 = toObject$2, hasOwnProperty = functionUncurryThis({}.hasOwnProperty), hasOwnProperty_1 = Object.hasOwn || function(it, key) {
     return hasOwnProperty(toObject$1(it), key);
-}, uncurryThis$2 = functionUncurryThis, id = 0, postfix = Math.random(), toString = uncurryThis$2(1.1.toString), hasOwn$2 = hasOwnProperty_1, NATIVE_SYMBOL = symbolConstructorDetection, USE_SYMBOL_AS_UID = useSymbolAsUid, Symbol$1 = globalThis_1.Symbol, WellKnownSymbolsStore = store[key = "wks"] || (store[key] = value || {}), createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1.for || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || function(key) {
-    return "Symbol(" + (void 0 === key ? "" : key) + ")_" + toString(++id + postfix, 36);
-}, call$1 = functionCall, isObject$2 = isObject$4, isSymbol$1 = isSymbol$2, $TypeError$3 = TypeError, TO_PRIMITIVE = (hasOwn$2(WellKnownSymbolsStore, name = "toPrimitive") || (WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$2(Symbol$1, name) ? Symbol$1[name] : createWellKnownSymbol("Symbol." + name)), 
-WellKnownSymbolsStore[name]), toPrimitive = function(input, pref) {
-    if (!isObject$2(input) || isSymbol$1(input)) return input;
+}, uncurryThis$3 = functionUncurryThis, id = 0, postfix = Math.random(), toString$2 = uncurryThis$3(1.1.toString), hasOwn$2 = hasOwnProperty_1, NATIVE_SYMBOL = symbolConstructorDetection, USE_SYMBOL_AS_UID = useSymbolAsUid, Symbol$1 = globalThis_1.Symbol, WellKnownSymbolsStore = store[key = "wks"] || (store[key] = value || {}), createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1.for || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || function(key) {
+    return "Symbol(" + (void 0 === key ? "" : key) + ")_" + toString$2(++id + postfix, 36);
+}, wellKnownSymbol$5 = function(name) {
+    return hasOwn$2(WellKnownSymbolsStore, name) || (WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$2(Symbol$1, name) ? Symbol$1[name] : createWellKnownSymbol("Symbol." + name)), 
+    WellKnownSymbolsStore[name];
+}, call$1 = functionCall, isObject$3 = isObject$5, isSymbol$1 = isSymbol$2, $TypeError$4 = TypeError, TO_PRIMITIVE = wellKnownSymbol$5("toPrimitive"), toPrimitive = function(input, pref) {
+    if (!isObject$3(input) || isSymbol$1(input)) return input;
     var result, func, exoticToPrim = (func = input[TO_PRIMITIVE], isNullOrUndefined(func) ? void 0 : aCallable$2(func));
     if (exoticToPrim) {
         if (void 0 === pref && (pref = "default"), result = call$1(exoticToPrim, input, pref), 
-        !isObject$2(result) || isSymbol$1(result)) return result;
-        throw new $TypeError$3("Can't convert object to primitive value");
+        !isObject$3(result) || isSymbol$1(result)) return result;
+        throw new $TypeError$4("Can't convert object to primitive value");
     }
     return void 0 === pref && (pref = "number"), function(input, pref) {
         var fn, val;
-        if ("string" === pref && isCallable$2(fn = input.toString) && !isObject$3(val = call$2(fn, input))) return val;
-        if (isCallable$2(fn = input.valueOf) && !isObject$3(val = call$2(fn, input))) return val;
-        if ("string" !== pref && isCallable$2(fn = input.toString) && !isObject$3(val = call$2(fn, input))) return val;
-        throw new $TypeError$4("Can't convert object to primitive value");
+        if ("string" === pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
+        if (isCallable$3(fn = input.valueOf) && !isObject$4(val = call$2(fn, input))) return val;
+        if ("string" !== pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
+        throw new $TypeError$5("Can't convert object to primitive value");
     }(input, pref);
 }, isSymbol = isSymbol$2, toPropertyKey$2 = function(argument) {
     var key = toPrimitive(argument, "string");
     return isSymbol(key) ? key : key + "";
-}, isObject$1 = isObject$4, document$1 = globalThis_1.document, EXISTS = isObject$1(document$1) && isObject$1(document$1.createElement), ie8DomDefine = !descriptors && !fails$8((function() {
+}, isObject$2 = isObject$5, document$1 = globalThis_1.document, EXISTS = isObject$2(document$1) && isObject$2(document$1.createElement), ie8DomDefine = !descriptors && !fails$9((function() {
     // eslint-disable-next-line es/no-object-defineproperty -- required for testing
     return 7 !== Object.defineProperty((it = "div", EXISTS ? document$1.createElement(it) : {}), "a", {
         get: function() {
@@ -183,32 +187,32 @@ WellKnownSymbolsStore[name]), toPrimitive = function(input, pref) {
         }
     }).a;
     var it;
-})), DESCRIPTORS$3 = descriptors, call = functionCall, propertyIsEnumerableModule = objectPropertyIsEnumerable, createPropertyDescriptor$1 = createPropertyDescriptor$2, toPropertyKey$1 = toPropertyKey$2, hasOwn$1 = hasOwnProperty_1, IE8_DOM_DEFINE$1 = ie8DomDefine, $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
+})), DESCRIPTORS$3 = descriptors, call = functionCall, propertyIsEnumerableModule = objectPropertyIsEnumerable, createPropertyDescriptor$1 = createPropertyDescriptor$2, toIndexedObject$1 = toIndexedObject$2, toPropertyKey$1 = toPropertyKey$2, hasOwn$1 = hasOwnProperty_1, IE8_DOM_DEFINE$1 = ie8DomDefine, $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
 
 // `Object.getOwnPropertyDescriptor` method
 // https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
 objectGetOwnPropertyDescriptor.f = DESCRIPTORS$3 ? $getOwnPropertyDescriptor$1 : function(O, P) {
-    if (O = IndexedObject$1(requireObjectCoercible$1(O)), P = toPropertyKey$1(P), IE8_DOM_DEFINE$1) try {
+    if (O = toIndexedObject$1(O), P = toPropertyKey$1(P), IE8_DOM_DEFINE$1) try {
         return $getOwnPropertyDescriptor$1(O, P);
     } catch (error) {/* empty */}
     if (hasOwn$1(O, P)) return createPropertyDescriptor$1(!call(propertyIsEnumerableModule.f, O, P), O[P]);
 };
 
-var fails$2 = fails$8, isCallable$1 = isCallable$7, replacement = /#|\.prototype\./, isForced$1 = function(feature, detection) {
+var fails$3 = fails$9, isCallable$2 = isCallable$8, replacement = /#|\.prototype\./, isForced$1 = function(feature, detection) {
     var value = data[normalize(feature)];
-    return value === POLYFILL || value !== NATIVE && (isCallable$1(detection) ? fails$2(detection) : !!detection);
+    return value === POLYFILL || value !== NATIVE && (isCallable$2(detection) ? fails$3(detection) : !!detection);
 }, normalize = isForced$1.normalize = function(string) {
     return String(string).replace(replacement, ".").toLowerCase();
-}, data = isForced$1.data = {}, NATIVE = isForced$1.NATIVE = "N", POLYFILL = isForced$1.POLYFILL = "P", isForced_1 = isForced$1, aCallable$1 = aCallable$3, NATIVE_BIND = functionBindNative, bind$1 = functionUncurryThisClause(functionUncurryThisClause.bind), objectDefineProperty = {}, v8PrototypeDefineBug = descriptors && fails$8((function() {
+}, data = isForced$1.data = {}, NATIVE = isForced$1.NATIVE = "N", POLYFILL = isForced$1.POLYFILL = "P", isForced_1 = isForced$1, aCallable$1 = aCallable$3, NATIVE_BIND = functionBindNative, bind$1 = functionUncurryThisClause(functionUncurryThisClause.bind), objectDefineProperty = {}, v8PrototypeDefineBug = descriptors && fails$9((function() {
     // eslint-disable-next-line es/no-object-defineproperty -- required for testing
     return 42 !== Object.defineProperty((function() {/* empty */}), "prototype", {
         value: 42,
         writable: !1
     }).prototype;
-})), isObject = isObject$4, $String = String, $TypeError$2 = TypeError, DESCRIPTORS$1 = descriptors, IE8_DOM_DEFINE = ie8DomDefine, V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug, anObject = function(argument) {
-    if (isObject(argument)) return argument;
-    throw new $TypeError$2($String(argument) + " is not an object");
-}, toPropertyKey = toPropertyKey$2, $TypeError$1 = TypeError, $defineProperty = Object.defineProperty, $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+})), isObject$1 = isObject$5, $String$1 = String, $TypeError$3 = TypeError, DESCRIPTORS$1 = descriptors, IE8_DOM_DEFINE = ie8DomDefine, V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug, anObject = function(argument) {
+    if (isObject$1(argument)) return argument;
+    throw new $TypeError$3($String$1(argument) + " is not an object");
+}, toPropertyKey = toPropertyKey$2, $TypeError$2 = TypeError, $defineProperty = Object.defineProperty, $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
 
 // `Object.defineProperty` method
 // https://tc39.es/ecma262/#sec-object.defineproperty
@@ -226,7 +230,7 @@ objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P
     if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
         return $defineProperty(O, P, Attributes);
     } catch (error) {/* empty */}
-    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$1("Accessors not supported");
+    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$2("Accessors not supported");
     return "value" in Attributes && (O[P] = Attributes.value), O;
 };
 
@@ -234,7 +238,7 @@ var definePropertyModule = objectDefineProperty, createPropertyDescriptor = crea
     return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
 } : function(object, key, value) {
     return object[key] = value, object;
-}, globalThis$3 = globalThis_1, apply = functionApply, uncurryThis = functionUncurryThisClause, isCallable = isCallable$7, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
+}, globalThis$3 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
     return aCallable$1(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
         return fn.apply(that, arguments);
     };
@@ -256,28 +260,44 @@ var definePropertyModule = objectDefineProperty, createPropertyDescriptor = crea
         return apply(NativeConstructor, this, arguments);
     };
     return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
+}, _export = function(options, source) {
+    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$3 : STATIC ? globalThis$3[TARGET] : globalThis$3[TARGET] && globalThis$3[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
+    for (key in source) 
+    // contains in native
+    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
+    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
+    // export native or implementation
+    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
+    // bind methods to global for calling from export context
+    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$3) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
+    // add a flag to not completely full polyfills
+    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
+    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
+    // export virtual prototype methods
+    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
+    // export real prototype methods
+    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
 }, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
     var n = +x;
     return (n > 0 ? floor : ceil)(n);
-}, min = Math.min, toLength = function(argument) {
-    var len = function(argument) {
-        var number = +argument;
-        // eslint-disable-next-line no-self-compare -- NaN check
-                return number != number || 0 === number ? 0 : trunc(number);
-    }(argument);
-    return len > 0 ? min(len, 9007199254740991) : 0;
- // 2 ** 53 - 1 == 9007199254740991
-}, aCallable = aCallable$3, toObject = toObject$2, IndexedObject = indexedObject, $TypeError = TypeError, REDUCE_EMPTY = "Reduce of empty array with no initial value", createMethod = function(IS_RIGHT) {
+}, toIntegerOrInfinity$2 = function(argument) {
+    var number = +argument;
+    // eslint-disable-next-line no-self-compare -- NaN check
+        return number != number || 0 === number ? 0 : trunc(number);
+}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, min$1 = Math.min, lengthOfArrayLike$2 = function(obj) {
+    return argument = obj.length, (len = toIntegerOrInfinity$1(argument)) > 0 ? min$1(len, 9007199254740991) : 0;
+    var argument, len;
+}, aCallable = aCallable$3, toObject = toObject$2, IndexedObject = indexedObject, lengthOfArrayLike$1 = lengthOfArrayLike$2, $TypeError$1 = TypeError, REDUCE_EMPTY = "Reduce of empty array with no initial value", createMethod$1 = function(IS_RIGHT) {
     return function(that, callbackfn, argumentsLength, memo) {
-        var O = toObject(that), self = IndexedObject(O), length = toLength(O.length);
-        if (aCallable(callbackfn), 0 === length && argumentsLength < 2) throw new $TypeError(REDUCE_EMPTY);
+        var O = toObject(that), self = IndexedObject(O), length = lengthOfArrayLike$1(O);
+        if (aCallable(callbackfn), 0 === length && argumentsLength < 2) throw new $TypeError$1(REDUCE_EMPTY);
         var index = IS_RIGHT ? length - 1 : 0, i = IS_RIGHT ? -1 : 1;
         if (argumentsLength < 2) for (;;) {
             if (index in self) {
                 memo = self[index], index += i;
                 break;
             }
-            if (index += i, IS_RIGHT ? index < 0 : length <= index) throw new $TypeError(REDUCE_EMPTY);
+            if (index += i, IS_RIGHT ? index < 0 : length <= index) throw new $TypeError$1(REDUCE_EMPTY);
         }
         for (;IS_RIGHT ? index >= 0 : length > index; index += i) index in self && (memo = callbackfn(memo, self[index], index, O));
         return memo;
@@ -285,39 +305,22 @@ var definePropertyModule = objectDefineProperty, createPropertyDescriptor = crea
 }, arrayReduce = {
     // `Array.prototype.reduce` method
     // https://tc39.es/ecma262/#sec-array.prototype.reduce
-    left: createMethod(!1),
+    left: createMethod$1(!1),
     // `Array.prototype.reduceRight` method
     // https://tc39.es/ecma262/#sec-array.prototype.reduceright
-    right: createMethod(!0)
-}, fails = fails$8, globalThis$2 = globalThis_1, userAgent = environmentUserAgent, classof = classofRaw$1, userAgentStartsWith = function(string) {
+    right: createMethod$1(!0)
+}, fails$1 = fails$9, globalThis$2 = globalThis_1, userAgent = environmentUserAgent, classof$3 = classofRaw$2, userAgentStartsWith = function(string) {
     return userAgent.slice(0, string.length) === string;
-}, environment = userAgentStartsWith("Bun/") ? "BUN" : userAgentStartsWith("Cloudflare-Workers") ? "CLOUDFLARE" : userAgentStartsWith("Deno/") ? "DENO" : userAgentStartsWith("Node.js/") ? "NODE" : globalThis$2.Bun && "string" == typeof Bun.version ? "BUN" : globalThis$2.Deno && "object" == typeof Deno.version ? "DENO" : "process" === classof(globalThis$2.process) ? "NODE" : globalThis$2.window && globalThis$2.document ? "BROWSER" : "REST", $reduce = arrayReduce.left;
+}, environment = userAgentStartsWith("Bun/") ? "BUN" : userAgentStartsWith("Cloudflare-Workers") ? "CLOUDFLARE" : userAgentStartsWith("Deno/") ? "DENO" : userAgentStartsWith("Node.js/") ? "NODE" : globalThis$2.Bun && "string" == typeof Bun.version ? "BUN" : globalThis$2.Deno && "object" == typeof Deno.version ? "DENO" : "process" === classof$3(globalThis$2.process) ? "NODE" : globalThis$2.window && globalThis$2.document ? "BROWSER" : "REST", $reduce = arrayReduce.left;
 
 // `Array.prototype.reduce` method
 // https://tc39.es/ecma262/#sec-array.prototype.reduce
-!function(options, source) {
-    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$3 : STATIC ? globalThis$3[TARGET] : globalThis$3[TARGET] && globalThis$3[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
-    for (key in source) 
-    // contains in native
-    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
-    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
-    // export native or implementation
-    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
-    // bind methods to global for calling from export context
-    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$3) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable(sourceProperty) ? uncurryThis(sourceProperty) : sourceProperty, 
-    // add a flag to not completely full polyfills
-    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
-    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
-    // export virtual prototype methods
-    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
-    // export real prototype methods
-    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
-}({
+_export({
     target: "Array",
     proto: !0,
     forced: !("NODE" === environment) && environmentV8Version > 79 && environmentV8Version < 83 || !function(METHOD_NAME, argument) {
         var method = [][METHOD_NAME];
-        return !!method && fails((function() {
+        return !!method && fails$1((function() {
             // eslint-disable-next-line no-useless-call -- required for testing
             method.call(null, argument || function() {
                 return 1;
@@ -331,16 +334,16 @@ var definePropertyModule = objectDefineProperty, createPropertyDescriptor = crea
     }
 });
 
-var globalThis$1 = globalThis_1, path = path$3, reduce$3 = function() {
-    var Namespace = path.ArrayPrototype, pureMethod = Namespace && Namespace.reduce;
+var globalThis$1 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$3 = function(CONSTRUCTOR, METHOD) {
+    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
     if (pureMethod) return pureMethod;
-    var NativeConstructor = globalThis$1.Array, NativePrototype = NativeConstructor && NativeConstructor.prototype;
-    return NativePrototype && NativePrototype.reduce;
-}(), isPrototypeOf = objectIsPrototypeOf, method = reduce$3, ArrayPrototype = Array.prototype;
+    var NativeConstructor = globalThis$1[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
+    return NativePrototype && NativePrototype[METHOD];
+}, reduce$3 = getBuiltInPrototypeMethod$3("Array", "reduce"), isPrototypeOf$1 = objectIsPrototypeOf, method = reduce$3, ArrayPrototype$1 = Array.prototype;
 
 const _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
     var own = it.reduce;
-    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.reduce ? method : own;
+    return it === ArrayPrototype$1 || isPrototypeOf$1(ArrayPrototype$1, it) && own === ArrayPrototype$1.reduce ? method : own;
 })), CHART = {
     BASE_CLASS: "c-chart",
     ROOT_CLASS: "c-chart",
@@ -497,20 +500,29 @@ const _reduceInstanceProperty =  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,
@@ -670,6 +682,44 @@ const _reduceInstanceProperty =  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
+            }
         }
     }
 };
@@ -1602,7 +1652,7 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
         // 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;
@@ -1769,20 +1819,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,
@@ -1797,7 +1846,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);
@@ -1819,11 +1868,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());
@@ -1855,7 +1902,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) {
@@ -1864,7 +1912,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((() => {
@@ -1916,21 +1994,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) {
@@ -1945,7 +2020,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
@@ -1974,10 +2049,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})`
@@ -2082,7 +2153,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),
@@ -2172,7 +2243,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,
@@ -2194,22 +2265,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(),
@@ -2222,7 +2426,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,
@@ -2236,7 +2442,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
@@ -2295,7 +2541,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 = () => {
@@ -2498,6 +2747,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 = {
@@ -2506,17 +2757,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,
@@ -2533,12 +2784,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);
     }), []);
@@ -2606,6 +2858,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,
@@ -2614,6 +2868,448 @@ 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
+ */ var toIntegerOrInfinity = toIntegerOrInfinity$2, max = Math.max, min = Math.min, toIndexedObject = toIndexedObject$2, lengthOfArrayLike = lengthOfArrayLike$2, createMethod = function(IS_INCLUDES) {
+    return function($this, el, fromIndex) {
+        var O = toIndexedObject($this), length = lengthOfArrayLike(O);
+        if (0 === length) return !IS_INCLUDES && -1;
+        var value, index = function(index, length) {
+            var integer = toIntegerOrInfinity(index);
+            return integer < 0 ? max(integer + length, 0) : min(integer, length);
+        }(fromIndex, length);
+        // Array#includes uses SameValueZero equality algorithm
+        // eslint-disable-next-line no-self-compare -- NaN check
+        if (IS_INCLUDES && el != el) {
+            for (;length > index; ) 
+            // eslint-disable-next-line no-self-compare -- NaN check
+            if ((value = O[index++]) != value) return !0;
+            // Array#indexOf ignores holes, Array#includes - not
+                } else for (;length > index; index++) if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
+        return !IS_INCLUDES && -1;
+    };
+}, $includes = [ createMethod(!0), createMethod(!1) ][0];
+
+// `Array.prototype.includes` method
+// https://tc39.es/ecma262/#sec-array.prototype.includes
+_export({
+    target: "Array",
+    proto: !0,
+    forced: fails$9((function() {
+        // eslint-disable-next-line es/no-array-prototype-includes -- detection
+        return !Array(1).includes();
+    }))
+}, {
+    includes: function(el /* , fromIndex = 0 */) {
+        return $includes(this, el, arguments.length > 1 ? arguments[1] : void 0);
+    }
+});
+
+var includes$4 = getBuiltInPrototypeMethod$3("Array", "includes"), isObject = isObject$5, classof$2 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError = TypeError, test = {};
+
+test[wellKnownSymbol$5("toStringTag")] = "z";
+
+var TO_STRING_TAG_SUPPORT = "[object z]" === String(test), isCallable = isCallable$8, classofRaw = classofRaw$2, TO_STRING_TAG = wellKnownSymbol$5("toStringTag"), $Object = Object, CORRECT_ARGUMENTS = "Arguments" === classofRaw(function() {
+    return arguments;
+}()), classof = TO_STRING_TAG_SUPPORT ? classofRaw : function(it) {
+    var O, tag, result;
+    return void 0 === it ? "Undefined" : null === it ? "Null" : "string" == typeof (tag = function(it, key) {
+        try {
+            return it[key];
+        } catch (error) {/* empty */}
+    }(O = $Object(it), TO_STRING_TAG)) ? tag : CORRECT_ARGUMENTS ? classofRaw(O) : "Object" === (result = classofRaw(O)) && isCallable(O.callee) ? "Arguments" : result;
+}, $String = String, MATCH = wellKnownSymbol$5("match"), $ = _export, notARegExp = function(it) {
+    if (function(it) {
+        var isRegExp;
+        return isObject(it) && (void 0 !== (isRegExp = it[MATCH$1]) ? !!isRegExp : "RegExp" === classof$2(it));
+    }(it)) throw new $TypeError("The method doesn't accept regular expressions");
+    return it;
+}, requireObjectCoercible = requireObjectCoercible$3, toString = function(argument) {
+    if ("Symbol" === classof(argument)) throw new TypeError("Cannot convert a Symbol value to a string");
+    return $String(argument);
+}, stringIndexOf = functionUncurryThis("".indexOf);
+
+// `String.prototype.includes` method
+// https://tc39.es/ecma262/#sec-string.prototype.includes
+$({
+    target: "String",
+    proto: !0,
+    forced: !function(METHOD_NAME) {
+        var regexp = /./;
+        try {
+            "/./"[METHOD_NAME](regexp);
+        } catch (error1) {
+            try {
+                return regexp[MATCH] = !1, "/./"[METHOD_NAME](regexp);
+            } catch (error2) {/* empty */}
+        }
+        return !1;
+    }("includes")
+}, {
+    includes: function(searchString /* , position = 0 */) {
+        return !!~stringIndexOf(toString(requireObjectCoercible(this)), toString(notARegExp(searchString)), arguments.length > 1 ? arguments[1] : void 0);
+    }
+});
+
+var includes$3 = getBuiltInPrototypeMethod$3("String", "includes"), isPrototypeOf = objectIsPrototypeOf, arrayMethod = includes$4, stringMethod = includes$3, ArrayPrototype = Array.prototype, StringPrototype = String.prototype;
+
+const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
+    var own = it.includes;
+    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.includes ? arrayMethod : "string" == typeof it || it === StringPrototype || isPrototypeOf(StringPrototype, it) && own === StringPrototype.includes ? stringMethod : own;
+}));
+
+/**
+ * Get GPU memory info if available (Chrome DevTools only)
+ */
+/**
+ * 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
  *
@@ -2628,6 +3324,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
@@ -2684,8 +3382,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,
@@ -2698,7 +3403,6 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         withoutEffects: withoutEffects,
         elasticity: elasticity,
         onClick: onClick,
-        debugBorderRadius: debugBorderRadius,
         debugOverLight: debugOverLight,
         debugPerformance: debugPerformance,
         children: children,
@@ -2706,8 +3410,387 @@ 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 ]);
+    }({
+        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 {
@@ -2727,7 +3810,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 {
@@ -2743,18 +3829,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;
@@ -2803,9 +3891,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)",
@@ -2825,10 +3914,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: {
@@ -2845,7 +3936,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,
@@ -2876,11 +3972,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", {
@@ -2904,6 +4008,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: () => {}
         }) ]
     });
 }
@@ -6511,7 +7619,9 @@ const smoothStep = (a, b, t) => {
             return this.canvasDPI;
         }
     },
-    fragmentShaders: fragmentShaders
+    createFBMEngine: createFBMEngine,
+    fragmentShaders: fragmentShaders,
+    liquidGlassWithTime: liquidGlassWithTime
 }, Symbol.toStringTag, {
     value: "Module"
 }));