@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