@liquidglass/react

A beautiful React component that creates stunning liquid glass effects using advanced backdrop filters and SVG displacement mapping.

Installation

npm install @liquidglass/react
# or
yarn add @liquidglass/react
# or
pnpm add @liquidglass/react

Usage

import { LiquidGlass } from '@liquidglass/react';

function App() {
  return (
    <div style={{ width: '400px', height: '300px' }}>
      <LiquidGlass
        borderRadius={20}
        blur={0.5}
        contrast={1.2}
        brightness={1.1}
        saturation={1.2}
      >
        <h2>Beautiful Glass Effect</h2>
        <p>Your content here...</p>
      </LiquidGlass>
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | borderRadius | number | 20 | Border radius in pixels | | blur | number | 0.25 | Blur intensity | | contrast | number | 1.2 | Contrast level | | brightness | number | 1.05 | Brightness level | | saturation | number | 1.1 | Saturation level | | shadowIntensity | number | 0.25 | Shadow intensity | | displacementScale | number | 1 | Displacement effect scale | | elasticity | number | 0.6 | Elasticity of the liquid effect | | zIndex | number | 9999 | Z-index of the component | | className | string | undefined | Additional CSS classes | | children | ReactNode | undefined | Child components to render inside |

Features

• 🌊 Dynamic liquid glass effect with real-time displacement mapping
• 📱 Responsive design that adapts to container size
• 🎨 Customizable appearance with extensive props
• ⚡ Performance optimized with efficient canvas rendering
• 🔧 TypeScript support with full type definitions
• 🎯 Framework agnostic core with React bindings

Examples

Basic Usage

<LiquidGlass>
  <h1>Hello World</h1>
</LiquidGlass>

Customized Effect

<LiquidGlass
  borderRadius={50}
  blur={1.0}
  contrast={1.5}
  brightness={1.2}
  saturation={1.3}
  shadowIntensity={0.4}
  elasticity={0.8}
  className="my-glass-container"
>
  <div className="content">
    <h2>Custom Glass</h2>
    <p>With enhanced effects</p>
  </div>
</LiquidGlass>

Browser Support

• ✅ Chrome 76+
• ✅ Firefox 70+
• ✅ Safari 13+
• ✅ Edge 79+

Note: This component uses advanced CSS features like backdrop-filter and SVG filters. Older browsers may not support all effects.

License

MIT © Liquid Glass Team