@shohojdhara/atomix 0.4.7 → 0.4.9

package/src/components/AtomixGlass/PerformanceDashboard.tsx

@@ -0,0 +1,219 @@
+import React, { useMemo } from 'react';
+import type { PerformanceMetrics } from '../../lib/composables/usePerformanceMonitor';
+
+interface PerformanceDashboardProps {
+  metrics: PerformanceMetrics;
+  isVisible?: boolean;
+  onClose?: () => void;
+}
+
+/**
+ * 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
+ */
+export const PerformanceDashboard: React.FC<PerformanceDashboardProps> = ({
+  metrics,
+  isVisible = true,
+  onClose
+}) => {
+  // Get color for FPS display
+  const getFpsColor = (fps: number): string => {
+    if (fps >= 58) return '#4ade80'; // Green - good
+    if (fps >= 45) return '#fbbf24'; // Yellow - warning
+    return '#ef4444'; // Red - critical
+  };
+
+  // Get quality level badge color
+  const getQualityColor = (quality: string): string => {
+    switch (quality) {
+      case 'high': return '#4ade80';
+      case 'medium': return '#fbbf24';
+      case 'low': return '#ef4444';
+      default: return '#9ca3af';
+    }
+  };
+
+  // Dashboard styles
+  const dashboardStyle: React.CSSProperties = 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]);
+
+  const headerStyle: React.CSSProperties = useMemo(() => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '8px',
+    paddingBottom: '8px',
+    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+  }), []);
+
+  const titleStyle: React.CSSProperties = useMemo(() => ({
+    fontWeight: 'bold',
+    fontSize: '13px',
+    color: '#fff',
+  }), []);
+
+  const closeButtonStyle: React.CSSProperties = useMemo(() => ({
+    background: 'transparent',
+    border: 'none',
+    color: '#9ca3af',
+    cursor: 'pointer',
+    fontSize: '16px',
+    padding: '0',
+    lineHeight: '1',
+  }), []);
+
+  const metricRowStyle: React.CSSProperties = useMemo(() => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '6px',
+  }), []);
+
+  const labelStyle: React.CSSProperties = useMemo(() => ({
+    color: '#9ca3af',
+    marginRight: '12px',
+  }), []);
+
+  const valueStyle: React.CSSProperties = useMemo(() => ({
+    fontWeight: 'bold',
+  }), []);
+
+  if (!isVisible) return null;
+
+  return (
+    <div style={dashboardStyle}>
+      {/* Header */}
+      <div style={headerStyle}>
+        <span style={titleStyle}>Performance Monitor</span>
+        {onClose && (
+          <button 
+            style={closeButtonStyle} 
+            onClick={onClose}
+            aria-label="Close performance dashboard"
+          >
+            ×
+          </button>
+        )}
+      </div>
+
+      {/* FPS Display */}
+      <div style={metricRowStyle}>
+        <span style={labelStyle}>FPS</span>
+        <span 
+          style={{
+            ...valueStyle,
+            color: getFpsColor(metrics.fps)
+          }}
+        >
+          {Math.round(metrics.fps)}
+        </span>
+      </div>
+
+      {/* Frame Time */}
+      <div style={metricRowStyle}>
+        <span style={labelStyle}>Frame Time</span>
+        <span style={valueStyle}>
+          {metrics.frameTime.toFixed(2)}ms
+        </span>
+      </div>
+
+      {/* Quality Level */}
+      <div style={metricRowStyle}>
+        <span style={labelStyle}>Quality</span>
+        <span 
+          style={{
+            ...valueStyle,
+            color: getQualityColor(metrics.qualityLevel),
+            textTransform: 'uppercase',
+            fontSize: '11px',
+          }}
+        >
+          {metrics.qualityLevel}
+        </span>
+      </div>
+
+      {/* GPU Memory (if available) */}
+      {metrics.gpuMemory && (
+        <div style={metricRowStyle}>
+          <span style={labelStyle}>GPU Memory</span>
+          <span style={valueStyle}>
+            ~{Math.round(metrics.gpuMemory / 1024)}MB
+          </span>
+        </div>
+      )}
+
+      {/* Auto-scaling Status */}
+      {metrics.isAutoScaling && (
+        <div style={{
+          marginTop: '8px',
+          paddingTop: '8px',
+          borderTop: '1px solid rgba(255, 255, 255, 0.1)',
+          fontSize: '10px',
+          color: '#6b7280',
+          textAlign: 'center',
+        }}>
+          Auto-scaling active
+        </div>
+      )}
+
+      {/* Performance Status Indicator */}
+      <div style={{
+        marginTop: '8px',
+        paddingTop: '8px',
+        borderTop: '1px solid rgba(255, 255, 255, 0.1)',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+      }}>
+        <div style={{
+          width: '8px',
+          height: '8px',
+          borderRadius: '50%',
+          backgroundColor: getFpsColor(metrics.fps),
+          animation: metrics.fps < 45 ? 'pulse 1s infinite' : 'none',
+        }} />
+        <span style={{
+          fontSize: '10px',
+          color: metrics.fps >= 58 ? '#4ade80' : metrics.fps >= 45 ? '#fbbf24' : '#ef4444',
+        }}>
+          {metrics.fps >= 58 ? 'Optimal' : metrics.fps >= 45 ? 'Warning' : 'Critical'}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+// Add pulse animation for critical FPS
+if (typeof document !== 'undefined') {
+  const styleSheet = document.createElement('style');
+  styleSheet.textContent = `
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+  `;
+  document.head.appendChild(styleSheet);
+}

package/src/components/AtomixGlass/README.md

@@ -40,25 +40,38 @@ function MyComponent() {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `children` | ReactNode | - | Content to be rendered inside the glass container |
-| `displacementScale` | number | 20 | Controls the intensity of the displacement effect |
-| `blurAmount` | number | 10 | Controls the intensity of the blur effect |
-| `saturation` | number | 150 | Controls the color saturation (100 is normal) |
-| `aberrationIntensity` | number | 1.5 | Controls the chromatic aberration effect intensity |
-| `elasticity` | number | 0.5 | Controls how responsive the glass is to mouse movement |
+| `displacementScale` | number | 70 | Controls the intensity of the displacement effect |
+| `blurAmount` | number | 0 | Controls the intensity of the blur effect |
+| `saturation` | number | 140 | Controls the color saturation (100 is normal) |
+| `aberrationIntensity` | number | 2 | Controls the chromatic aberration effect intensity |
+| `elasticity` | number | 0.15 | Controls how responsive the glass is to mouse movement |
 | `borderRadius` | number | 15 | Border radius of the glass container |
 | `globalMousePos` | boolean | false | Whether to use global mouse position instead of local |
 | `mouseOffset` | { x: number, y: number } | { x: 0, y: 0 } | Offset for mouse position calculation |
 | `mouseContainer` | RefObject<HTMLElement> | null | Container to use for mouse position calculation |
-| `padding` | number | 0 | Additional padding around the content |
+| `padding` | string | '0' | Additional padding around the content |
+| `height` | string \| number | undefined | Height of the glass component |
+| `width` | string \| number | undefined | Width of the glass component |
 | `style` | CSSProperties | {} | Additional CSS styles |
 | `overLight` | boolean \| 'auto' \| OverLightObjectConfig | 'auto' | OverLight configuration. See [OverLight Configuration](#overlight-configuration) section for details |
 | `withOverLightLayers` | boolean | true | Whether to render additional overlay layers for overLight mode |
 | `debugOverLight` | boolean | false | Enable debug logging for overLight detection and configuration |
 | `mode` | 'standard' \| 'polar' \| 'prominent' \| 'shader' | 'standard' | The glass effect mode |
 | `onClick` | function | undefined | Click handler |
-| `showBorderEffects` | boolean | true | Whether to show border effects |
-| `showHoverEffects` | boolean | true | Whether to show hover effects |
-| `active` | boolean | false | Whether the glass is in active state |
+| `withBorder` | boolean | true | Whether to show border effects |
+| `withLiquidBlur` | boolean | false | Whether to enable liquid blur effects |
+| `withoutEffects` | boolean | false | Whether to disable all visual effects |
+| `reducedMotion` | boolean | false | Force reduced motion preference |
+| `highContrast` | boolean | false | Force high contrast mode |
+| `withTimeAnimation` | boolean | true | Enable time-based animation (Phase 1) |
+| `animationSpeed` | number | 1.0 | Animation speed multiplier (Phase 1) |
+| `withMultiLayerDistortion` | boolean | false | Enable multi-layer distortion using FBM (Phase 1) |
+| `distortionOctaves` | number | 5 | Number of octaves for FBM (Phase 1) |
+| `distortionLacunarity` | number | 2.0 | Lacunarity for FBM (Phase 1) |
+| `distortionGain` | number | 0.5 | Gain for FBM (Phase 1) |
+| `distortionQuality` | 'low' \| 'medium' \| 'high' \| 'ultra' | 'high' | Quality preset for FBM (Phase 1) |
+| `debugPerformance` | boolean | false | Enable performance monitoring dashboard (development only) |
+| `debugBorderRadius` | boolean | false | Debug mode for corner radius extraction |
 
 ## Glass Effect Modes
 
@@ -80,8 +93,10 @@ The AtomixGlass component uses several advanced CSS features and SVG filters tha
 
 1. Use sparingly on pages with many instances
 2. Consider disabling effects on lower-end devices
-3. Use the `showBorderEffects` and `showHoverEffects` props to disable non-essential effects when needed
+3. Use the `withoutEffects` prop to disable non-essential effects when needed
 4. Avoid using very high values for `displacementScale` and `blurAmount`
+5. Use `reducedMotion` for users with vestibular disorders
+6. Consider using lower `distortionQuality` presets on mobile devices
 
 ## Accessibility
 

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

@@ -0,0 +1,216 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+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%);"
+  >
+    <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;"
+    >
+      <div
+        class="c-atomix-glass__inner"
+      >
+        <div
+          class="c-atomix-glass__filter"
+        >
+          <svg
+            aria-hidden="true"
+            style="position: absolute; width: 100%; height: 100%; inset: 0;"
+          >
+            <defs>
+              <radialgradient
+                cx="50%"
+                cy="50%"
+                id="atomix-glass-filter-16-edge-mask"
+                r="50%"
+              >
+                <stop
+                  offset="0%"
+                  stop-color="black"
+                  stop-opacity="0"
+                />
+                <stop
+                  offset="76%"
+                  stop-color="black"
+                  stop-opacity="0"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="white"
+                  stop-opacity="1"
+                />
+              </radialgradient>
+              <filter
+                color-interpolation-filters="sRGB"
+                height="170%"
+                id="atomix-glass-filter-16"
+                width="170%"
+                x="-35%"
+                y="-35%"
+              >
+                <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"
+                  preserveAspectRatio="xMidYMid slice"
+                  result="DISPLACEMENT_MAP"
+                  width="100%"
+                  x="0"
+                  y="0"
+                />
+                <fecolormatrix
+                  in="DISPLACEMENT_MAP"
+                  result="EDGE_INTENSITY"
+                  type="matrix"
+                  values="0.3 0.3 0.3 0 0
+                 0.3 0.3 0.3 0 0
+                 0.3 0.3 0.3 0 0
+                 0 0 0 1 0"
+                />
+                <fecomponenttransfer
+                  in="EDGE_INTENSITY"
+                  result="EDGE_MASK"
+                >
+                  <fefunca
+                    tableValues="0 0.1 1"
+                    type="discrete"
+                  />
+                </fecomponenttransfer>
+                <feoffset
+                  dx="0"
+                  dy="0"
+                  in="SourceGraphic"
+                  result="CENTER_ORIGINAL"
+                />
+                <fedisplacementmap
+                  in="SourceGraphic"
+                  in2="DISPLACEMENT_MAP"
+                  result="RED_DISPLACED"
+                  scale="-70"
+                  xChannelSelector="R"
+                  yChannelSelector="B"
+                />
+                <fecolormatrix
+                  in="RED_DISPLACED"
+                  result="RED_CHANNEL"
+                  type="matrix"
+                  values="1 0 0 0 0
+                 0 0 0 0 0
+                 0 0 0 0 0
+                 0 0 0 1 0"
+                />
+                <fedisplacementmap
+                  in="SourceGraphic"
+                  in2="DISPLACEMENT_MAP"
+                  result="GREEN_DISPLACED"
+                  scale="-72.8"
+                  xChannelSelector="R"
+                  yChannelSelector="B"
+                />
+                <fecolormatrix
+                  in="GREEN_DISPLACED"
+                  result="GREEN_CHANNEL"
+                  type="matrix"
+                  values="0 0 0 0 0
+                 0 1 0 0 0
+                 0 0 0 0 0
+                 0 0 0 1 0"
+                />
+                <fedisplacementmap
+                  in="SourceGraphic"
+                  in2="DISPLACEMENT_MAP"
+                  result="BLUE_DISPLACED"
+                  scale="-74.2"
+                  xChannelSelector="R"
+                  yChannelSelector="B"
+                />
+                <fecolormatrix
+                  in="BLUE_DISPLACED"
+                  result="BLUE_CHANNEL"
+                  type="matrix"
+                  values="0 0 0 0 0
+                 0 0 0 0 0
+                 0 0 1 0 0
+                 0 0 0 1 0"
+                />
+                <feblend
+                  in="GREEN_CHANNEL"
+                  in2="BLUE_CHANNEL"
+                  mode="screen"
+                  result="GB_COMBINED"
+                />
+                <feblend
+                  in="RED_CHANNEL"
+                  in2="GB_COMBINED"
+                  mode="screen"
+                  result="RGB_COMBINED"
+                />
+                <fegaussianblur
+                  in="RGB_COMBINED"
+                  result="ABERRATED_BLURRED"
+                  stdDeviation="0"
+                />
+                <fecomposite
+                  in="ABERRATED_BLURRED"
+                  in2="EDGE_MASK"
+                  operator="in"
+                  result="EDGE_ABERRATION"
+                />
+                <fecomponenttransfer
+                  in="EDGE_MASK"
+                  result="INVERTED_MASK"
+                >
+                  <fefunca
+                    tableValues="1 0"
+                    type="table"
+                  />
+                </fecomponenttransfer>
+                <fecomposite
+                  in="CENTER_ORIGINAL"
+                  in2="INVERTED_MASK"
+                  operator="in"
+                  result="CENTER_CLEAN"
+                />
+                <fecomposite
+                  in="EDGE_ABERRATION"
+                  in2="CENTER_CLEAN"
+                  operator="over"
+                />
+              </filter>
+            </defs>
+          </svg>
+          <div
+            class="c-atomix-glass__filter-overlay"
+            style="filter: url(#atomix-glass-filter-16);"
+          />
+          <div
+            class="c-atomix-glass__filter-shadow"
+          />
+        </div>
+        <div
+          class="c-atomix-glass__content"
+        >
+          <div>
+            Default Glass
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="c-atomix-glass__background-layer c-atomix-glass__background-layer--dark c-atomix-glass__background-layer--hidden"
+    />
+    <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-1"
+    />
+    <span
+      class="c-atomix-glass__border-2"
+    />
+  </div>
+</div>
+`;