@shohojdhara/atomix 0.5.0 → 0.5.2

package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap

@@ -4,11 +4,11 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
 <div>
   <div
     class="c-atomix-glass"
-    style="--atomix-glass-radius: 16px; --atomix-glass-transform: scale(1); --atomix-glass-top: 0px; --atomix-glass-left: 0px; --atomix-glass-width: 270px; --atomix-glass-height: 69px; --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem); --atomix-glass-blend-mode: overlay; --atomix-glass-border-gradient-1: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08399999999999999) 33%, rgba(255, 255, 255, 0.27999999999999997) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-border-gradient-2: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22399999999999998) 33%, rgba(255, 255, 255, 0.42) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-1-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%); --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-2-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%); --atomix-glass-hover-3-opacity: 0; --atomix-glass-hover-3-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); --atomix-glass-base-opacity: 0; --atomix-glass-base-gradient: rgba(255, 255, 255, 0.1); --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-gradient: rgba(255, 255, 255, 0.05); --atomix-glass-overlay-highlight-opacity: 0; --atomix-glass-overlay-highlight-bg: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 60%);"
+    style="--atomix-glass-radius: 16px; --atomix-glass-transform: translate(0px, 0px) scale(1); --atomix-glass-container-position: absolute; --atomix-glass-position: absolute; --atomix-glass-top: 0px; --atomix-glass-left: 0px; --atomix-glass-right: auto; --atomix-glass-bottom: auto; --atomix-glass-width: 100%; --atomix-glass-height: 100%; --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.125rem); --atomix-glass-blend-mode: overlay; --atomix-glass-border-gradient-1: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08399999999999999) 33%, rgba(255, 255, 255, 0.27999999999999997) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-border-gradient-2: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22399999999999998) 33%, rgba(255, 255, 255, 0.42) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-1-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%); --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-2-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%); --atomix-glass-hover-3-opacity: 0; --atomix-glass-hover-3-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); --atomix-glass-base-opacity: 0; --atomix-glass-base-gradient: rgba(255, 255, 255, 0.1); --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-gradient: rgba(255, 255, 255, 0.05); --atomix-glass-overlay-highlight-opacity: 0; --atomix-glass-overlay-highlight-bg: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 60%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-3-opacity: 0; --atomix-glass-base-opacity: 0; --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-highlight-opacity: 0;"
   >
     <div
       class="c-atomix-glass__container   "
-      style="position: relative; --atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(0.1px) saturate(140%) contrast(1.4) brightness(0.9); --atomix-glass-container-shadow: 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: 1; --atomix-glass-container-bg: none; --atomix-glass-container-text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4); --atomix-glass-container-box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.25); --atomix-glass-container-width: 100%; --atomix-glass-container-height: 100%; --atomix-glass-container-padding: 0;"
+      style="--atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(0.1px) saturate(140%) contrast(1.4) brightness(0.9); --atomix-glass-container-shadow: 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: 1; --atomix-glass-container-bg: none; --atomix-glass-container-text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4); --atomix-glass-container-box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.25); --atomix-glass-container-padding: 0;"
     >
       <div
         class="c-atomix-glass__inner"
@@ -24,7 +24,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
               <radialgradient
                 cx="50%"
                 cy="50%"
-                id="atomix-glass-filter-16-edge-mask"
+                id="atomix-glass-filter-_r_f_-edge-mask"
                 r="50%"
               >
                 <stop
@@ -46,7 +46,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
               <filter
                 color-interpolation-filters="sRGB"
                 height="170%"
-                id="atomix-glass-filter-16"
+                id="atomix-glass-filter-_r_f_"
                 width="170%"
                 x="-35%"
                 y="-35%"
@@ -54,7 +54,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
                 <feimage
                   height="100%"
                   href="data:image/jpeg;base64,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cUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/10KCSCKESCNiVkViPSLpD0h6I0Q0I0A2IoBWBIJIBKBIJoJIJ2R2J0JWBUJ0JUB0XTv479dFZDYiglYigkhEgjZFQjRFQjRFQjQigFYigHYigmgEgmglYlYnQlQlYlQHQlQnQ9P/kf1yVkNiNCNkNiVENiNiViNEViNkVCVgKCViViViSCViSCVgdCViVCViVCdgVCVCdD1D+U/XBWQ2I0I2Q2JUQ2I0JWQ0I2JUQ2JUI2JUI2J0JWJWJWA2R0BWJ0I2JUJ2BUJUJ0P//EABkQAQEBAQEBAAAAAAAAAAAAAAECABEDEP/aAAgBAQABAgB1atWrVq1atWrVq1atWrVq1atWrVq1atWrVq+OrVq1atWrVq1atWrVq1atWrVq1atWrVq1atXxVppppppdWrVq1atWrVq1NNNNNNNNNNNPVWmmmmms6tWrVq1atWpppppppppppppp6q0000uc51atWrVq1ammmmmmmmmmmmmt1Vpppc5znVq1atWrVqaaaaaaaaaaaaaeqtNLnOc51atWrVq1ammmmmmmmmmmmmnqrS5znOc6tWrVq16222mmmmmmlVppp6tKuc5znOrVq1a9TbbbbTTTTTSq000qtLnOc5zq1atWrW0222200000qqqtKqrnOc5zq1atTbbbbbbbbTTTSqqqqqq5znOc6tTTTbbbbbbbbTTTSqqqqrlVznOctNNNtttttttttNNNNKqqqrqznKqrTTTTbbbbbbbbbTTTSqqqqrqznOc5aaaabbbbbbbbbaaaaVVVVVdWc5znVq1NNttttttttttNNKqqqqudWc5znVq16tbbbbbbbbbbTTSqqqq5XVnOc6tWrVrb1tttttttttNNKqqqqrWrK5VWmmm2230bbbbbbaaaXOc5zlVa1KuVVppptttt9G22222mmlzlVznK6tWVVWmmmm2222222222mlznOc5znLWppVVWmmm22222229bTWrOc5znOcq1qaaVpWmm222222229erVqznOc5znKtatStK0rTbTTbbbberXr1as5znOc5aVpppppWlabaabbbb1ta9WrVnOc5znU0rTTTTTTTTTbTTbbbTWvVq1as5znOdTTStNNNNNNNNNtNNtttN6tWvVq1ZznOrU00rTTTTTTTTTTTTTbTWvVq1atWrOc6tTTTStNNNNNNNNNNtNNtNa9WrVq1Z1Z1NNNNNK1q1NNNNNNNNNNNtNatWrVq1atWrU00000rWrVq1atWrVq1alaaa1atWrVq1NNNammmmla1atWrVq1aterVq16tWrVnVqa1NK1qaaaVX/xAAWEAADAAAAAAAAAAAAAAAAAAAhgJD/2gAIAQEAAz8AaExf/8QAGhEBAQEBAQEBAAAAAAAAAAAAAQISEQADEP/aAAgBAgEBAgDx48ePHjx48ePHjx48ePHjx48ePHjx48ePHj86IiIiIiInjx48ePHjx48IiIiIj0oooooooooRERER73ve60UUUUUUVrWiiiiiihERERER73ve97ooooorRWiiiiihKERERER73ve973RRRRWtFFFFFFCIiIiIiPe973ve60UUVrRRRRRRQiIlCIiI973ve973pRRWiiiiiiiiiiiiiiihEe973ve973RRWtFFFFFFFFFFFFFFFFFFa13ve973WitaKKKKKKKKKKKKKKKKKK1rWtd1rutFa1oooooooooooosssooorWta1rWta1rRRRRRRRRRRZZZZZZZZZWta1rWta1rRRRRRRRRZZZZZZZZZZZZe9a1rWta1rWitaKLLLLLLLLLLLLLLLLL3rWta1rWtFbLLLLLLLLLLLLLLLLLLLL3vWta1rWita1ssssssss+hZZZZZZZZe961rWta0Vre97LLLLLLLLLLLPoWWWWWXrWta1oorWta3ssss+hZZZZ9Cyyyyyyyyiita1orWta1ve9llllllllllllllllFFa0VorWta1ve9llllllllllllllllllFFFaK1rWta1rWiyyyyyyyyyyyyiiiiiiitFFa1rWta1oosoosssssoooosoooorRRRWta1rWta0UUUUUWUUUUUUUUUUUVoooorWta1rWtaKKKKKKmiiiiiiiiiiiiiiitd73ve61oSiiipoqaKKKKKKKKKK0UUUVrve973vREREZoSihEooooorRRRRWtd73ve9EREREREoSiiiiitFllllla73ve9ERERERESiiiiiitH0PoWWWWVrXe96IiIiMoiJRRRRRRWjwlFFllllFFd6IiIiIlCUUUUUUUUUePHjx48ePCIiIiIiIiUUUUUUUUUUUePHjx48ePHjx48ePHjx48IiUUUUUUJRRRX//xAAWEQADAAAAAAAAAAAAAAAAAAABYJD/2gAIAQIBAz8AtEV7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEP/aAAgBAwEBAgCtNNNNNNNNNNNNNNNNNNNNNNNNNNNNNcrTTTTTTTTTTTTTTTTTTTTTTTTTTTTTXKrTTTTTTTU000000000000000000001FVpppppqampqaaaaaaaaaaaaaaaaaaaa5Vaaaaampqampqammmmmmmmmmmlaaaaaaiq0001NTU1NTU1NTTTTTTTTTTSqqtNNNcqtNNSyzU1LNTU1NTTTTTTTTTSqqq001ytNLLLLNTU1NTU1NTbbbTTTTTSqqq001ytNLLLLLNTU1NTU3NttttNNNNNKqq001KrSyyyyyzU1NTU3Nzc02220000qqqqrSqqyyyyyzU1NTU3Nzc3NttttNNNKqqqqqqssssss1NTU3Nzc3NzbbbbTTTSqqqqqqrLLLLLNTU1Nzc3Nzc22220000qqqqqqqqssss1NTU3Nzc3NzbbbbbTTSqqqqqqqqqqzU1NTc3Nzc3Nzbc22000qqqqqqqqqqqtTU3Nzc3Nzc3NtzbTTSqqqqrKqqqqqtNNzc23Nzc3Nzc3NTU1KqqqrKqqqqqtNNNNttzc3Nzc3NzU1NLLLLLKqqqqqqqq0022223Nzc3NzU1NSyyyyyyqqqqqqqrTTbbbbc3Nzc3NTU1LLLLLLKsqqqqqqrTTTTbbbc3Nzc1NTUsssssssqqqqqqrTTTTTbbbTc3NTU1NTUsssssqqqqqqqq0000222023NTU1NTUsssssqqqqqqqq000000003NTU1NTU1LLLLLNKrTSqqqqtNNNNNNtNNTU1NSzUssss00qq0qqqqrTTTTTTTTTU1NTUs1LLLNNNKrTTTSqqq00000000001NTU1LNTU0000qtNNNKqqqtNNNNNNNNTU1NTUs1NNNNNKss1NNNK00qtK0000001NNTU0s000000qq000001NKrStNNNNK1NNNNStNNNNNKqtNNNNNNNK0000000rU0000rTTTTTSq00000rTTTTTTTTTTTTTTTTStNNNNKr/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQM/AAAf/9k="
-                  id="atomix-glass-filter-16-image"
+                  id="atomix-glass-filter-_r_f_-image"
                   preserveAspectRatio="xMidYMid slice"
                   result="DISPLACEMENT_MAP"
                   width="100%"
@@ -184,7 +184,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
           </svg>
           <div
             class="c-atomix-glass__filter-overlay"
-            style="filter: url(#atomix-glass-filter-16);"
+            style="filter: url(#atomix-glass-filter-_r_f_);"
           />
           <div
             class="c-atomix-glass__filter-shadow"
@@ -205,6 +205,9 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
     <div
       class="c-atomix-glass__background-layer c-atomix-glass__background-layer--black c-atomix-glass__background-layer--hidden"
     />
+    <span
+      class="c-atomix-glass__border-backdrop"
+    />
     <span
       class="c-atomix-glass__border-1"
     />

package/src/components/AtomixGlass/glass-utils.ts

@@ -173,7 +173,7 @@ export const extractBorderRadiusFromDOMElement = (element: HTMLElement | null):
 /**
  * Extract border-radius from React element
  */
-export const extractBorderRadiusFromElement = (element: React.ReactElement): number | null => {
+export const extractBorderRadiusFromElement = (element: React.ReactElement<any>): number | null => {
   if (!element || !element.props) {
     return null;
   }
@@ -275,3 +275,53 @@ export const getDisplacementMap = (
       return displacementMap;
   }
 };
+
+// ─── Shader LRU Cache ──────────────────────────────────────────────────────
+// Shared across all AtomixGlassContainer instances so identical shader
+// configurations (same size + variant) are only generated once.
+
+export const MAX_CACHE_SIZE = 15;
+
+export interface ShaderCacheEntry {
+  url: string;
+  timestamp: number;
+}
+
+/** Module-level LRU cache shared by all container instances. */
+export const sharedShaderCache = new Map<string, ShaderCacheEntry>();
+
+/**
+ * Retrieve a cached shader URL, updating its LRU timestamp.
+ * Returns `null` on a cache miss.
+ */
+export const getCachedShader = (key: string): string | null => {
+  const entry = sharedShaderCache.get(key);
+  if (entry) {
+    entry.timestamp = Date.now();
+    return entry.url;
+  }
+  return null;
+};
+
+/**
+ * Store a shader URL in the LRU cache, evicting the oldest entry when full.
+ */
+export const setCachedShader = (key: string, url: string): void => {
+  if (sharedShaderCache.size >= MAX_CACHE_SIZE) {
+    const entries = Array.from(sharedShaderCache.entries());
+    entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
+    const oldest = entries[0];
+    if (oldest) {
+      sharedShaderCache.delete(oldest[0]);
+    }
+  }
+  sharedShaderCache.set(key, { url, timestamp: Date.now() });
+
+  if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {
+    if (sharedShaderCache.size >= MAX_CACHE_SIZE * 0.8) {
+      console.log(
+        `AtomixGlass: Shader cache size: ${String(sharedShaderCache.size).replace(/[\r\n]/g, '')}/${String(MAX_CACHE_SIZE).replace(/[\r\n]/g, '')}`
+      );
+    }
+  }
+};

package/src/components/AtomixGlass/stories/AnimationFeatures.stories.tsx

@@ -2,7 +2,7 @@
  * Phase 1 Animation Features Stories
  * 
  * Demonstrates the new time-based animation system and multi-layer distortion effects
- * implemented in Phase 1 of the AtomixGlass Feature Implementation Roadmap.
+ * implemented in Phase 1 of the AtomixGlass Feature Implementation roadMap.
  * 
  * Features:
  * - Feature 1.1: Time-Based Animation System
@@ -138,8 +138,9 @@ type Story = StoryObj<typeof meta>;
 export const DefaultAnimation: Story = {
   args: {
     children: (
-      <div style={{ padding: '60px 40px', textAlign: 'center', color: 'white' }}>
+      <div className="u-text-center u-text-white" style={{ padding: '60px 40px' }}>
         <div
+          className="u-mb-6"
           style={{
             fontSize: '64px',
             marginBottom: '24px',
@@ -149,6 +150,7 @@ export const DefaultAnimation: Story = {
           ✨
         </div>
         <h2
+          className="u-mt-0 u-mb-3 u-text-5xl u-font-bold u-text-gradient-primary"
           style={{
             margin: '0 0 12px 0',
             fontSize: '32px',
@@ -160,7 +162,7 @@ export const DefaultAnimation: Story = {
         >
           Time-Based Animation
         </h2>
-        <p style={{ margin: 0, fontSize: '16px', opacity: 0.9 }}>
+        <p className="u-m-0 u-text-base u-opacity-90">
           Organic liquid glass effect with continuous flow
         </p>
       </div>
@@ -193,11 +195,11 @@ export const DefaultAnimation: Story = {
 export const BreathingEffect: Story = {
   args: {
     children: (
-      <div style={{ padding: '40px', textAlign: 'center', color: 'white' }}>
-        <h2 style={{ margin: '0 0 8px 0', fontSize: '24px', fontWeight: 600 }}>
+      <div className="u-text-center u-text-white" style={{ padding: '40px' }}>
+        <h2 className="u-mt-0 u-mb-2 u-text-xl u-font-semibold">
           Breathing Glass
         </h2>
-        <p style={{ margin: 0, fontSize: '14px', opacity: 0.8 }}>
+        <p className="u-m-0 u-text-sm u-opacity-80">
           Subtle pulse animation
         </p>
       </div>
@@ -229,8 +231,9 @@ export const BreathingEffect: Story = {
 export const UltraDistortion: Story = {
   args: {
     children: (
-      <div style={{ padding: '60px 40px', textAlign: 'center', color: 'white' }}>
+      <div className="u-text-center u-text-white" style={{ padding: '60px 40px' }}>
         <div
+          className="u-mx-auto u-mb-6 u-flex u-items-center u-justify-center u-rounded-lg"
           style={{
             width: '80px',
             height: '80px',
@@ -246,10 +249,10 @@ export const UltraDistortion: Story = {
         >
           🌊
         </div>
-        <h2 style={{ margin: '0 0 8px 0', fontSize: '28px', fontWeight: 700 }}>
+        <h2 className="u-mt-0 u-mb-2 u-text-2xl u-font-bold">
           Ultra Distortion
         </h2>
-        <p style={{ margin: 0, fontSize: '14px', opacity: 0.8 }}>
+        <p className="u-m-0 u-text-xs u-opacity-80">
           7 octaves of FBM complexity
         </p>
       </div>
@@ -285,14 +288,15 @@ export const UltraDistortion: Story = {
 export const MobileOptimized: Story = {
   args: {
     children: (
-      <div style={{ padding: '40px 32px', color: 'white' }}>
-        <h3 style={{ margin: '0 0 8px 0', fontSize: '20px', fontWeight: 600 }}>
+      <div className="u-text-white" style={{ padding: '40px 32px' }}>
+        <h3 className="u-mt-0 u-mb-2 u-text-lg u-font-semibold">
           Mobile Optimized
         </h3>
-        <p style={{ margin: 0, fontSize: '13px', opacity: 0.85 }}>
+        <p className="u-m-0 u-text-xs u-opacity-85">
           2 octaves • Low power
         </p>
         <div
+          className="u-mt-4 u-p-3 u-bg-white/10 u-rounded-md u-text-xs"
           style={{
             marginTop: '16px',
             padding: '12px',
@@ -334,8 +338,9 @@ export const MobileOptimized: Story = {
 export const SlowMotion: Story = {
   args: {
     children: (
-      <div style={{ padding: '60px 40px', textAlign: 'center', color: 'white' }}>
+      <div className="u-text-center u-text-white" style={{ padding: '60px 40px' }}>
         <div
+          className="u-text-6xl u-mb-5"
           style={{
             fontSize: '56px',
             marginBottom: '20px',
@@ -343,10 +348,10 @@ export const SlowMotion: Story = {
         >
           🧘
         </div>
-        <h2 style={{ margin: '0 0 12px 0', fontSize: '28px', fontWeight: 600 }}>
+        <h2 className="u-mt-0 u-mb-3 u-text-2xl u-font-semibold">
           Slow Motion
         </h2>
-        <p style={{ margin: 0, fontSize: '15px', opacity: 0.9 }}>
+        <p className="u-m-0 u-text-base u-opacity-90">
           Calming 0.3x speed
         </p>
       </div>
@@ -379,8 +384,9 @@ export const SlowMotion: Story = {
 export const FastFlow: Story = {
   args: {
     children: (
-      <div style={{ padding: '60px 40px', textAlign: 'center', color: 'white' }}>
+      <div className="u-text-center u-text-white" style={{ padding: '60px 40px' }}>
         <div
+          className="u-text-6xl u-mb-5"
           style={{
             fontSize: '56px',
             marginBottom: '20px',
@@ -388,10 +394,10 @@ export const FastFlow: Story = {
         >
           ⚡
         </div>
-        <h2 style={{ margin: '0 0 12px 0', fontSize: '28px', fontWeight: 700 }}>
+        <h2 className="u-mt-0 u-mb-3 u-text-2xl u-font-bold">
           Fast Flow
         </h2>
-        <p style={{ margin: 0, fontSize: '15px', opacity: 0.9 }}>
+        <p className="u-m-0 u-text-base u-opacity-90">
           Energetic 2.5x speed
         </p>
       </div>
@@ -424,11 +430,11 @@ export const FastFlow: Story = {
 export const NoAnimation: Story = {
   args: {
     children: (
-      <div style={{ padding: '40px', textAlign: 'center', color: 'white' }}>
-        <h2 style={{ margin: '0 0 8px 0', fontSize: '24px', fontWeight: 600 }}>
+      <div className="u-text-center u-text-white" style={{ padding: '40px' }}>
+        <h2 className="u-mt-0 u-mb-2 u-text-xl u-font-semibold">
           Static Glass
         </h2>
-        <p style={{ margin: 0, fontSize: '14px', opacity: 0.8 }}>
+        <p className="u-m-0 u-text-sm u-opacity-80">
           Time animations disabled
         </p>
       </div>
@@ -436,7 +442,7 @@ export const NoAnimation: Story = {
     withTimeAnimation: false,
     withMultiLayerDistortion: false,
     mode: 'standard',
-    displacementScale: 50,
+    displacementScale: 40,
     blurAmount: 2,
     saturation: 140,
     borderRadius: 20,
@@ -459,11 +465,11 @@ export const NoAnimation: Story = {
 export const CustomFBMParameters: Story = {
   args: {
     children: (
-      <div style={{ padding: '60px 40px', color: 'white' }}>
-        <h2 style={{ margin: '0 0 12px 0', fontSize: '26px', fontWeight: 700 }}>
+      <div className="u-text-white" style={{ padding: '60px 40px' }}>
+        <h2 className="u-mt-0 u-mb-3 u-text-2xl u-font-bold">
           Custom FBM
         </h2>
-        <div style={{ fontSize: '13px', opacity: 0.85, lineHeight: 1.8 }}>
+        <div className="u-text-sm u-opacity-85 u-leading-relaxed">
           <div>Octaves: 6</div>
           <div>Lacunarity: 2.5</div>
           <div>Gain: 0.65</div>
@@ -501,12 +507,12 @@ export const CustomFBMParameters: Story = {
 export const AccessibilityReducedMotion: Story = {
   args: {
     children: (
-      <div style={{ padding: '40px', textAlign: 'center', color: 'white' }}>
-        <div style={{ fontSize: '48px', marginBottom: '16px' }}>♿</div>
-        <h2 style={{ margin: '0 0 8px 0', fontSize: '22px', fontWeight: 600 }}>
+      <div className="u-text-center u-text-white" style={{ padding: '40px' }}>
+        <div className="u-text-5xl u-mb-4">♿</div>
+        <h2 className="u-mt-0 u-mb-2 u-text-lg u-font-semibold">
           Reduced Motion
         </h2>
-        <p style={{ margin: 0, fontSize: '14px', opacity: 0.8 }}>
+        <p className="u-m-0 u-text-sm u-opacity-80">
           Respects accessibility preferences
         </p>
       </div>
@@ -537,7 +543,7 @@ export const AccessibilityReducedMotion: Story = {
  */
 export const PerformanceComparison: Story = {
   render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '24px', maxWidth: '900px' }}>
+    <div className="u-grid u-gap-6" style={{  gridTemplateColumns: 'repeat(2, 1fr)' }}>
       {/* Low Quality */}
       <div>
         <AtomixGlass
@@ -552,12 +558,12 @@ export const PerformanceComparison: Story = {
           borderRadius={20}
           height={200}
         >
-          <div style={{ padding: '24px', color: 'white', textAlign: 'center' }}>
-            <div style={{ fontSize: '32px', marginBottom: '12px' }}>📱</div>
-            <h3 style={{ margin: '0 0 4px 0', fontSize: '16px', fontWeight: 600 }}>
+          <div className="u-p-6 u-text-center u-text-white" style={{ padding: '24px', color: 'white', textAlign: 'center' }}>
+            <div className="u-text-4xl u-mb-3">📱</div>
+            <h3 className="u-mt-0 u-mb-1 u-text-sm u-font-semibold">
               Low
             </h3>
-            <p style={{ margin: 0, fontSize: '11px', opacity: 0.8 }}>
+            <p className="u-m-0 u-text-xs u-opacity-80">
               2 octaves • Mobile
             </p>
           </div>
@@ -578,12 +584,12 @@ export const PerformanceComparison: Story = {
           borderRadius={20}
           height={200}
         >
-          <div style={{ padding: '24px', color: 'white', textAlign: 'center' }}>
-            <div style={{ fontSize: '32px', marginBottom: '12px' }}>💻</div>
-            <h3 style={{ margin: '0 0 4px 0', fontSize: '16px', fontWeight: 600 }}>
+          <div className="u-p-6 u-text-center u-text-white" style={{ padding: '24px', color: 'white', textAlign: 'center' }}>
+            <div className="u-text-4xl u-mb-3">💻</div>
+            <h3 className="u-mt-0 u-mb-1 u-text-sm u-font-semibold">
               Medium
             </h3>
-            <p style={{ margin: 0, fontSize: '11px', opacity: 0.8 }}>
+            <p className="u-m-0 u-text-xs u-opacity-80">
               4 octaves • Tablet
             </p>
           </div>
@@ -604,12 +610,12 @@ export const PerformanceComparison: Story = {
           borderRadius={20}
           height={200}
         >
-          <div style={{ padding: '24px', color: 'white', textAlign: 'center' }}>
-            <div style={{ fontSize: '32px', marginBottom: '12px' }}>🖥️</div>
-            <h3 style={{ margin: '0 0 4px 0', fontSize: '16px', fontWeight: 600 }}>
+          <div className="u-p-6 u-text-center u-text-white" style={{ padding: '24px', color: 'white', textAlign: 'center' }}>
+            <div className="u-text-4xl u-mb-3">🖥️</div>
+            <h3 className="u-mt-0 u-mb-1 u-text-sm u-font-semibold">
               High
             </h3>
-            <p style={{ margin: 0, fontSize: '11px', opacity: 0.8 }}>
+            <p className="u-m-0 u-text-xs u-opacity-80">
               5 octaves • Desktop
             </p>
           </div>
@@ -630,12 +636,12 @@ export const PerformanceComparison: Story = {
           borderRadius={20}
           height={200}
         >
-          <div style={{ padding: '24px', color: 'white', textAlign: 'center' }}>
-            <div style={{ fontSize: '32px', marginBottom: '12px' }}>🚀</div>
-            <h3 style={{ margin: '0 0 4px 0', fontSize: '16px', fontWeight: 600 }}>
+          <div className="u-p-6 u-text-center u-text-white" style={{ padding: '24px', color: 'white', textAlign: 'center' }}>
+            <div className="u-text-4xl u-mb-3">🚀</div>
+            <h3 className="u-mt-0 u-mb-1 u-text-sm u-font-semibold">
               Ultra
             </h3>
-            <p style={{ margin: 0, fontSize: '11px', opacity: 0.8 }}>
+            <p className="u-m-0 u-text-xs u-opacity-80">
               7 octaves • High-end
             </p>
           </div>