Simple Liquid Glass

A React component for creating stunning liquid glass morphism effects with customizable distortion, blur, and chromatic aberration.

npm version license size

Features

🎨 Beautiful glass morphism effect with liquid distortion
⚡ Lightweight and performant
🔧 Highly customizable with multiple parameters
📱 Responsive and works with any content
🎯 TypeScript support
🌈 Chromatic aberration and blur effects
🖼️ Border gradient support

Installation

npm install simple-liquid-glass

or with yarn:

yarn add simple-liquid-glass

Usage

Basic Usage

import React from 'react';
import { LiquidGlass } from 'simple-liquid-glass';

function App() {
  return (
    <div style={{ width: '300px', height: '200px' }}>
      <LiquidGlass>
        <div style={{ padding: '20px', color: 'white' }}>
          <h2>Your Content Here</h2>
          <p>This content has a liquid glass effect!</p>
        </div>
      </LiquidGlass>
    </div>
  );
}

Advanced Usage with Custom Settings

import React from 'react';
import { LiquidGlass } from 'simple-liquid-glass';

function App() {
  return (
    <div style={{ width: '400px', height: '300px' }}>
      <LiquidGlass
        mode="custom"
        scale={200}
        radius={20}
        border={0.1}
        lightness={60}
        displace={0.5}
        alpha={0.8}
        blur={10}
        dispersion={30}
        frost={0.2}
        borderColor="rgba(255, 255, 255, 0.5)"
        className="my-glass-container"
        style={{ boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)' }}
      >
        <div style={{ padding: '30px' }}>
          <h1>Custom Glass Effect</h1>
          <p>Fully customized liquid glass morphism</p>
        </div>
      </LiquidGlass>
    </div>
  );
}

Preset Mode

The component comes with a beautiful preset that works out of the box:

<LiquidGlass mode="preset">
  <YourContent />
</LiquidGlass>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	Content to display inside the glass effect
`mode`	`'preset' \| 'custom'`	`'preset'`	Use preset values or custom configuration
`scale`	`number`	`160`	Scale of the displacement effect (-360 to 360)
`radius`	`number`	`50`	Border radius of the glass effect
`border`	`number`	`0.05`	Border thickness (0 to 0.5)
`lightness`	`number`	`53`	Lightness of the glass (0 to 100)
`displace`	`number`	`0.38`	Displacement blur amount (0 to 10)
`alpha`	`number`	`0.9`	Alpha transparency (0 to 1)
`blur`	`number`	`5`	Blur amount for the glass effect
`dispersion`	`number`	`50`	Chromatic dispersion amount
`frost`	`number`	`0.1`	Frost effect intensity (0 to 1)
`borderColor`	`string`	`'rgba(120, 120, 120, 0.7)'`	Border color in CSS format
`className`	`string`	-	Additional CSS class names
`style`	`CSSProperties`	-	Additional inline styles

Examples

Card with Glass Effect

<div className="card-container" style={{ 
  width: '350px', 
  height: '200px',
  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
}}>
  <LiquidGlass radius={15} frost={0.15}>
    <div style={{ padding: '24px', height: '100%' }}>
      <h3 style={{ color: 'white', marginBottom: '12px' }}>
        Glass Card
      </h3>
      <p style={{ color: 'rgba(255, 255, 255, 0.9)' }}>
        This is a beautiful glass morphism card with liquid distortion effects.
      </p>
    </div>
  </LiquidGlass>
</div>

Overlay Effect

<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <img src="background.jpg" alt="Background" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
  
  <div style={{ 
    position: 'absolute', 
    top: '50%', 
    left: '50%', 
    transform: 'translate(-50%, -50%)',
    width: '300px',
    height: '150px'
  }}>
    <LiquidGlass>
      <div style={{ padding: '20px', textAlign: 'center', color: 'white' }}>
        <h2>Overlay Content</h2>
        <p>Glass effect over image</p>
      </div>
    </LiquidGlass>
  </div>
</div>

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

The component uses modern CSS features like backdrop-filter and SVG filters. Older browsers may not support all effects.

Performance Tips

The component uses ResizeObserver to adapt to size changes efficiently
SVG filters are hardware-accelerated in modern browsers
For best performance, avoid animating the glass parameters rapidly
Use the preset mode for optimal default settings

License

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Support

If you find this package helpful, please consider giving it a star on GitHub!

For issues and feature requests, please create an issue.