@shohojdhara/atomix 0.4.8 → 0.5.0

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -3,6 +3,11 @@ import type { AtomixGlassProps } from '../../lib/types/components';
 import { ATOMIX_GLASS } from '../../lib/constants/components';
 import { AtomixGlassContainer } from './AtomixGlassContainer';
 import { useAtomixGlass } from '../../lib/composables/useAtomixGlass';
+// Phase 3: Optimization & Adaptation
+import { useResponsiveGlass } from '../../lib/composables/useResponsiveGlass';
+import { usePerformanceMonitor } from '../../lib/composables/usePerformanceMonitor';
+import { PerformanceDashboard } from './PerformanceDashboard';
+import { getDevicePreset, MOBILE_OPTIMIZED_BREAKPOINTS } from '../../lib/composables/useResponsiveGlass.presets';
 
 /**
  * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
@@ -18,6 +23,8 @@ import { useAtomixGlass } from '../../lib/composables/useAtomixGlass';
  * - 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
@@ -74,6 +81,12 @@ import { useAtomixGlass } from '../../lib/composables/useAtomixGlass';
  * <AtomixGlass overLight="auto" debugOverLight={true}>
  *   <div>Content with debug logging enabled</div>
  * </AtomixGlass>
+ *
+ * @example
+ * // Performance-optimized for mobile devices
+ * <AtomixGlass devicePreset="performance" disableResponsiveBreakpoints={false}>
+ *   <div>Mobile-optimized glass effect</div>
+ * </AtomixGlass>
  */
 export function AtomixGlass({
   children,
@@ -104,10 +117,18 @@ export function AtomixGlass({
   withBorder = true,
   withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS,
   debugPerformance = false,
-  debugBorderRadius = false,
   debugOverLight = false,
   height,
   width,
+  withTimeAnimation = false,
+  animationSpeed = 1.0,
+  withMultiLayerDistortion = false,
+  distortionOctaves = 3,
+  distortionLacunarity = 2.0,
+  distortionGain = 0.5,
+  distortionQuality = 'medium',
+  devicePreset = 'balanced',
+  disableResponsiveBreakpoints = false,
   ...rest
 }: AtomixGlassProps) {
   const glassRef = useRef<HTMLDivElement>(null);
@@ -137,6 +158,8 @@ export function AtomixGlass({
     globalMousePosition,
     mouseOffset,
     transformStyle,
+    getShaderTime,
+    applyTimeBasedDistortion,
     handleMouseEnter,
     handleMouseLeave,
     handleMouseDown,
@@ -155,7 +178,6 @@ export function AtomixGlass({
     withoutEffects,
     elasticity,
     onClick,
-    debugBorderRadius,
     debugOverLight,
     debugPerformance,
     children,
@@ -165,8 +187,68 @@ export function AtomixGlass({
     padding,
     style,
     isFixedOrSticky,
+    // Phase 1: Animation System props
+    withTimeAnimation,
+    animationSpeed,
+    withMultiLayerDistortion,
+    distortionOctaves,
+    distortionLacunarity,
+    distortionGain,
+    distortionQuality,
+  });
+
+  // ============================================================================
+  // Phase 3: Optimization & Adaptation Systems
+  // ============================================================================
+
+  // Get device preset parameters - memoized to prevent recalculation
+  const devicePresetParams = useMemo(() => {
+    return getDevicePreset(devicePreset);
+  }, [devicePreset]); // Re-calculate only when devicePreset changes
+
+  // Responsive breakpoint system - automatically adjusts parameters based on viewport
+  const { 
+    responsiveParams, 
+    currentBreakpoint,
+    performanceTier,
+    isActive: isResponsiveActive
+  } = useResponsiveGlass({
+    baseParams: {
+      ...devicePresetParams,
+      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.0,
+      chromaticIntensity: aberrationIntensity || ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY,
+    },
+    breakpoints: MOBILE_OPTIMIZED_BREAKPOINTS,
+    enabled: !disableResponsiveBreakpoints && typeof window !== 'undefined', // Enable unless disabled
+    debug: false
   });
 
+  // Performance monitoring - tracks FPS, frame time, memory usage
+  const {
+    metrics: performanceMetrics,
+    recommendedQuality,
+    isUnderperforming,
+    setQualityLevel,
+    toggleMonitoring
+  } = usePerformanceMonitor({
+    enabled: false, // We'll toggle manually based on prop
+    debug: false,
+    showOverlay: false
+  });
+
+  // Auto-start performance monitoring if enabled (only in development)
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === 'development' && (window as any)?.enablePerformanceMonitoring) {
+      toggleMonitoring();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only run once on mount
+
   const isOverLight = useMemo(() => overLightConfig.isOverLight, [overLightConfig.isOverLight]);
 
   const shouldRenderOverLightLayers = withOverLightLayers && isOverLight;
@@ -479,6 +561,15 @@ export function AtomixGlass({
         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}
       </AtomixGlassContainer>
@@ -512,6 +603,15 @@ export function AtomixGlass({
           <span className={ATOMIX_GLASS.BORDER_2_CLASS} />
         </>
       )}
+      
+      {/* Phase 3: Performance Monitoring Dashboard - Only in development with debugPerformance enabled */}
+      {debugPerformance && performanceMetrics && (
+        <PerformanceDashboard 
+          metrics={performanceMetrics}
+          isVisible={true}
+          onClose={() => {}} // No-op, dashboard always visible when debugPerformance is true
+        />
+      )}
     </div>
   );
 }

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
 import type { CSSProperties } from 'react';
-import type { DisplacementMode, MousePosition, GlassSize } from '../../lib/types/components';
+import type { DisplacementMode, MousePosition, GlassSize, AtomixGlassProps } from '../../lib/types/components';
 import type { FragmentShaderType } from './shader-utils';
 import { GlassFilter } from './GlassFilter';
 import { calculateMouseInfluence, clampBlur, validateGlassSize } from './glass-utils';
@@ -59,7 +59,17 @@ const setCachedShader = (key: string, url: string): void => {
   }
 };
 
-interface AtomixGlassContainerProps {
+interface AtomixGlassContainerProps
+  extends Pick<
+    AtomixGlassProps,
+    | 'withTimeAnimation'
+    | 'animationSpeed'
+    | 'withMultiLayerDistortion'
+    | 'distortionOctaves'
+    | 'distortionLacunarity'
+    | 'distortionGain'
+    | 'distortionQuality'
+  > {
   className?: string;
   style?: React.CSSProperties;
   displacementScale?: number;
@@ -92,6 +102,9 @@ interface AtomixGlassContainerProps {
   shaderVariant?: FragmentShaderType;
   withLiquidBlur?: boolean;
 
+  // Phase 1: Animation System props
+  shaderTime?: number;
+
   contentRef?: React.RefObject<HTMLDivElement>;
   children?: React.ReactNode;
 }
@@ -128,6 +141,16 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       shaderVariant = 'liquidGlass',
       withLiquidBlur = false,
 
+      // Phase 1: Animation System props
+      shaderTime,
+      withTimeAnimation = false,
+      animationSpeed = 1.0,
+      withMultiLayerDistortion = false,
+      distortionOctaves = 3,
+      distortionLacunarity = 2.0,
+      distortionGain = 0.5,
+      distortionQuality = 'medium',
+
       contentRef,
     },
     ref
@@ -147,11 +170,15 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
 
     // Use shared module-level cache (no per-instance cache needed)
     const shaderDebounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const shaderUpdateTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    
+    // Phase 1: Animation frame ref for continuous shader updates
+    const animationFrameRef = useRef<number | null>(null);
 
     // Lazy load shader utilities only when shader mode is needed
     useEffect(() => {
       if (mode === 'shader') {
-        // Dynamic import shader utilities
+        // Dynamic import shader utilities with animation support
         import('./shader-utils')
           .then(shaderUtils => {
             shaderUtilsRef.current = {
@@ -174,12 +201,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     // Generate shader map with debouncing and caching
     useEffect(() => {
       // Enhanced validation for shader mode
-      if (
-        mode === 'shader' &&
-        glassSize &&
-        validateGlassSize(glassSize) &&
-        shaderUtilsRef.current
-      ) {
+      if (mode === 'shader' && glassSize && validateGlassSize(glassSize)) {
         // Create cache key from size and variant
         const cacheKey = `${glassSize.width}x${glassSize.height}-${shaderVariant}`;
 
@@ -213,10 +235,11 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
               fragment: selectedShader,
             });
 
-            // Defer shader generation with longer delay to avoid blocking
-            setTimeout(() => {
+            shaderUpdateTimeoutRef.current = setTimeout(() => {
               const url = shaderGeneratorRef.current?.updateShader() || '';
-              setCachedShader(cacheKey, url);
+              if (url) {
+                setCachedShader(cacheKey, url);
+              }
               setShaderMapUrl(url);
             }, 100);
           } catch (error) {
@@ -238,6 +261,10 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
           clearTimeout(shaderDebounceTimeoutRef.current);
           shaderDebounceTimeoutRef.current = null;
         }
+        if (shaderUpdateTimeoutRef.current) {
+          clearTimeout(shaderUpdateTimeoutRef.current);
+          shaderUpdateTimeoutRef.current = null;
+        }
         try {
           shaderGeneratorRef.current?.destroy();
         } catch (error) {
@@ -248,6 +275,92 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       };
     }, [mode, glassSize, shaderVariant]);
 
+    // Phase 1: Time-Based Animation Loop - Continuous shader regeneration
+    useEffect(() => {
+      // Only run animations in shader mode with time animation enabled
+      if (
+        mode !== 'shader' ||
+        !withTimeAnimation ||
+        effectiveReducedMotion ||
+        effectiveWithoutEffects
+      ) {
+        // Cancel any existing animation frame
+        if (animationFrameRef.current !== null) {
+          cancelAnimationFrame(animationFrameRef.current);
+          animationFrameRef.current = null;
+        }
+        return;
+      }
+
+      const baseFps =
+        distortionQuality === 'ultra'
+          ? 60
+          : distortionQuality === 'high'
+            ? 30
+            : distortionQuality === 'medium'
+              ? 24
+              : 20;
+      const effectiveSpeed = Math.max(0.5, Math.min(2, animationSpeed || 1));
+      const complexity =
+        withMultiLayerDistortion
+          ? Math.max(
+              1,
+              (distortionOctaves || 3) / 3 +
+                Math.max(0, (distortionLacunarity || 2) - 2) * 0.25 +
+                Math.max(0, (distortionGain || 0.5) - 0.5)
+            )
+          : 1;
+      const targetFps = Math.max(12, Math.min(60, Math.round((baseFps * effectiveSpeed) / complexity)));
+      const frameInterval = 1000 / targetFps;
+      let lastUpdate = 0;
+      let isCancelled = false;
+
+      const animate = (currentTime: number) => {
+        if (isCancelled) {
+          return;
+        }
+
+        if (currentTime - lastUpdate >= frameInterval && shaderGeneratorRef.current) {
+          lastUpdate = currentTime;
+          try {
+            const animatedShaderUrl = shaderGeneratorRef.current.updateShader();
+            if (animatedShaderUrl) {
+              setShaderMapUrl(animatedShaderUrl);
+            }
+          } catch (error) {
+            console.warn('AtomixGlassContainer: Error in animation loop', error);
+          }
+        }
+
+        animationFrameRef.current = requestAnimationFrame(animate);
+      };
+
+      // Start animation loop
+      animationFrameRef.current = requestAnimationFrame(animate);
+
+      // Cleanup animation on unmount or dependency change
+      return () => {
+        isCancelled = true;
+        if (animationFrameRef.current !== null) {
+          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<DOMRect | null>(null);

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