Guides - Atomix Glass Theming

Customize glass morphism effects to match your brand identity

Atomix Glass Theming

AtomixGlass is highly customizable, allowing you to create unique glass morphism effects that align with your brand. This guide covers theming options, custom configurations, and advanced techniques for creating stunning visual effects.

Basic Theming

AtomixGlass provides several props for basic customization:

Core Visual Properties

Property	Type	Default	Description
`displacementScale`	number	20	Distortion effect strength
`blurAmount`	number	1	Backdrop blur intensity
`saturation`	number	140	Color saturation percentage
`aberrationIntensity`	number	2.5	Chromatic aberration amount
`elasticity`	number	0.05	Interactive elasticity (0-1)
`borderRadius`	number	16	Border radius in pixels

Preset Themes

AtomixGlass includes several preset themes:

Subtle Theme

<AtomixGlass
  displacementScale={10}
  blurAmount={0.5}
  saturation={120}
  aberrationIntensity={1.5}
  elasticity={0.02}
  borderRadius={12}
>
  Subtle glass effect
</AtomixGlass>

Bold Theme

<AtomixGlass
  displacementScale={30}
  blurAmount={2}
  saturation={160}
  aberrationIntensity={3.5}
  elasticity={0.1}
  borderRadius={20}
>
  Bold glass effect
</AtomixGlass>

Color Customization

Customize glass colors using CSS custom properties:

.my-glass {
  --glass-bg-color: rgba(var(--atomix-light-rgb), 0.1);
  --glass-border-color: rgba(var(--atomix-light-rgb), 0.2);
  --glass-shadow-color: rgba(var(--atomix-dark-rgb), 0.1);
}

/* Dark theme */
.my-glass.dark {
  --glass-bg-color: rgba(var(--atomix-dark-rgb), 0.3);
  --glass-border-color: rgba(var(--atomix-light-rgb), 0.1);
  --glass-shadow-color: rgba(var(--atomix-dark-rgb), 0.3);
}

Apply custom class:

<AtomixGlass className="my-glass">
  Custom colored glass
</AtomixGlass>

Advanced Theming with Shader Mode

Shader mode enables advanced WebGL effects for premium experiences. Choose from multiple shader variants:

Available Shader Variants

// Liquid Glass (default) - Smooth liquid-like distortion
    <AtomixGlass
      mode="shader"
  shaderVariant="liquidGlass"
  displacementScale={20}
  blurAmount={1}
>
  Liquid glass effect
</AtomixGlass>

// Apple Fluid - Apple-inspired fluid animations
<AtomixGlass
  mode="shader"
  shaderVariant="appleFluid"
  displacementScale={25}
>
  Apple-style fluid glass
</AtomixGlass>

// Premium Glass - Refined luxury effect
<AtomixGlass
  mode="shader"
  shaderVariant="premiumGlass"
  displacementScale={22}
>
  Premium glass effect
</AtomixGlass>

// Liquid Metal - Metallic liquid effect
<AtomixGlass
  mode="shader"
  shaderVariant="liquidMetal"
  displacementScale={18}
>
  Liquid metal effect
</AtomixGlass>

Brand Integration

Create a reusable branded glass component:

// BrandGlass.tsx
import { AtomixGlass } from '@shohojdhara/atomix';

const BrandGlass = ({ children, ...props }) => {
  return (
    <AtomixGlass
      displacementScale={18}
      blurAmount={1.2}
      saturation={145}
      aberrationIntensity={2.8}
      elasticity={0.06}
      borderRadius={16}
      className="brand-glass"
      {...props}
    >
      {children}
    </AtomixGlass>
  );
};

export default BrandGlass;

Theme Switching

Implement dynamic theme switching:

const [theme, setTheme] = useState('light');

const glassConfig = {
  light: {
    displacementScale: 20,
    blurAmount: 1,
    saturation: 140,
    aberrationIntensity: 2.5,
    overLight: false,
  },
  dark: {
    displacementScale: 25,
    blurAmount: 1.5,
    saturation: 150,
    aberrationIntensity: 3,
    overLight: true,
  }
};

<AtomixGlass {...glassConfig[theme]}>
  Theme-aware glass
</AtomixGlass>

Responsive Theming

Adjust glass effects based on screen size:

import { useMediaQuery } from 'react-responsive';

function ResponsiveGlass({ children }) {
  const isMobile = useMediaQuery({ maxWidth: 768 });
  
  return (
    <AtomixGlass
      displacementScale={isMobile ? 10 : 20}
      blurAmount={isMobile ? 0.5 : 1}
      saturation={isMobile ? 120 : 140}
      mode={isMobile ? 'standard' : 'shader'}
      elasticity={isMobile ? 0 : 0.05}
      withLiquidBlur={!isMobile}
    >
      {children}
    </AtomixGlass>
  );
}

Best Practices

1. Consistency

Use consistent glass settings across similar UI elements
Create reusable themed components
Document your glass theme configuration

2. Accessibility

Ensure sufficient contrast for text over glass
Test with different background images
Provide fallbacks for browsers without support

3. Performance

Use lighter effects on mobile devices
Limit the number of glass elements per page
Consider disabling shader mode on low-end devices

4. Brand Alignment

Match glass colors to your brand palette
Adjust intensity to match your design language
Create variants for different contexts (hero, cards, modals)

Guides - Atomix Glass Theming

Customize glass morphism effects to match your brand identity

Atomix Glass Theming

Basic Theming

AtomixGlass provides several props for basic customization:

Core Visual Properties

Property	Type	Default	Description
`displacementScale`	number	20	Distortion effect strength
`blurAmount`	number	1	Backdrop blur intensity
`saturation`	number	140	Color saturation percentage
`aberrationIntensity`	number	2.5	Chromatic aberration amount
`elasticity`	number	0.05	Interactive elasticity (0-1)
`borderRadius`	number	16	Border radius in pixels

Preset Themes

AtomixGlass includes several preset themes:

Subtle Theme

<AtomixGlass
  displacementScale={10}
  blurAmount={0.5}
  saturation={120}
  aberrationIntensity={1.5}
  elasticity={0.02}
  borderRadius={12}
>
  Subtle glass effect
</AtomixGlass>

Bold Theme

<AtomixGlass
  displacementScale={30}
  blurAmount={2}
  saturation={160}
  aberrationIntensity={3.5}
  elasticity={0.1}
  borderRadius={20}
>
  Bold glass effect
</AtomixGlass>

Color Customization

Customize glass colors using CSS custom properties:

.my-glass {
  --glass-bg-color: rgba(var(--atomix-light-rgb), 0.1);
  --glass-border-color: rgba(var(--atomix-light-rgb), 0.2);
  --glass-shadow-color: rgba(var(--atomix-dark-rgb), 0.1);
}

/* Dark theme */
.my-glass.dark {
  --glass-bg-color: rgba(var(--atomix-dark-rgb), 0.3);
  --glass-border-color: rgba(var(--atomix-light-rgb), 0.1);
  --glass-shadow-color: rgba(var(--atomix-dark-rgb), 0.3);
}

Apply custom class:

<AtomixGlass className="my-glass">
  Custom colored glass
</AtomixGlass>

Advanced Theming with Shader Mode

Shader mode enables advanced WebGL effects for premium experiences. Choose from multiple shader variants:

Available Shader Variants

// Liquid Glass (default) - Smooth liquid-like distortion
    <AtomixGlass
      mode="shader"
  shaderVariant="liquidGlass"
  displacementScale={20}
  blurAmount={1}
>
  Liquid glass effect
</AtomixGlass>

// Apple Fluid - Apple-inspired fluid animations
<AtomixGlass
  mode="shader"
  shaderVariant="appleFluid"
  displacementScale={25}
>
  Apple-style fluid glass
</AtomixGlass>

// Premium Glass - Refined luxury effect
<AtomixGlass
  mode="shader"
  shaderVariant="premiumGlass"
  displacementScale={22}
>
  Premium glass effect
</AtomixGlass>

// Liquid Metal - Metallic liquid effect
<AtomixGlass
  mode="shader"
  shaderVariant="liquidMetal"
  displacementScale={18}
>
  Liquid metal effect
</AtomixGlass>

Brand Integration

Create a reusable branded glass component:

// BrandGlass.tsx
import { AtomixGlass } from '@shohojdhara/atomix';

const BrandGlass = ({ children, ...props }) => {
  return (
    <AtomixGlass
      displacementScale={18}
      blurAmount={1.2}
      saturation={145}
      aberrationIntensity={2.8}
      elasticity={0.06}
      borderRadius={16}
      className="brand-glass"
      {...props}
    >
      {children}
    </AtomixGlass>
  );
};

export default BrandGlass;

Theme Switching

Implement dynamic theme switching:

const [theme, setTheme] = useState('light');

const glassConfig = {
  light: {
    displacementScale: 20,
    blurAmount: 1,
    saturation: 140,
    aberrationIntensity: 2.5,
    overLight: false,
  },
  dark: {
    displacementScale: 25,
    blurAmount: 1.5,
    saturation: 150,
    aberrationIntensity: 3,
    overLight: true,
  }
};

<AtomixGlass {...glassConfig[theme]}>
  Theme-aware glass
</AtomixGlass>

Responsive Theming

Adjust glass effects based on screen size:

import { useMediaQuery } from 'react-responsive';

function ResponsiveGlass({ children }) {
  const isMobile = useMediaQuery({ maxWidth: 768 });
  
  return (
    <AtomixGlass
      displacementScale={isMobile ? 10 : 20}
      blurAmount={isMobile ? 0.5 : 1}
      saturation={isMobile ? 120 : 140}
      mode={isMobile ? 'standard' : 'shader'}
      elasticity={isMobile ? 0 : 0.05}
      withLiquidBlur={!isMobile}
    >
      {children}
    </AtomixGlass>
  );
}

Best Practices

1. Consistency

Use consistent glass settings across similar UI elements
Create reusable themed components
Document your glass theme configuration

2. Accessibility

Ensure sufficient contrast for text over glass
Test with different background images
Provide fallbacks for browsers without support

3. Performance

Use lighter effects on mobile devices
Limit the number of glass elements per page
Consider disabling shader mode on low-end devices

4. Brand Alignment

Match glass colors to your brand palette
Adjust intensity to match your design language
Create variants for different contexts (hero, cards, modals)

Getting Started

Documentation

Resources

Community

Guides - Atomix Glass Theming

Atomix Glass Theming

Basic Theming

Core Visual Properties

Preset Themes

Subtle Theme

Bold Theme

Color Customization

Advanced Theming with Shader Mode

Available Shader Variants

Brand Integration

Theme Switching

Responsive Theming

Best Practices

1. Consistency

2. Accessibility

3. Performance

4. Brand Alignment

Guides - Atomix Glass Theming

Atomix Glass Theming

Basic Theming

Core Visual Properties

Preset Themes

Subtle Theme

Bold Theme

Color Customization

Advanced Theming with Shader Mode

Available Shader Variants

Brand Integration

Theme Switching

Responsive Theming

Best Practices

1. Consistency

2. Accessibility

3. Performance

4. Brand Alignment