Liquid Glass React

Liquid Glass React

Apple's Liquid Glass effect for React.

Card Example | Button Example

:-------------------------:|:-------------------------:

|

🎬 Demo

Click here to see it in action!

✨ Features

• Proper edgy bending and refraction
• Multiple refraction modes
• Configurable frosty level
• Supports arbitrary child elements
• Configurable paddings
• Correct hover and click effects
• Edges and highlights take on the underlying light like Apple's does
• Configurable chromatic aberration
• Configurable elasticity, to mimic Apple's "liquid" feel

> ⚠️ NOTE: Safari and Firefox only partially support the effect (displacement will not be visible)

🚀 Usage

Installation

npm install liquid-glass-react

Basic Usage

import LiquidGlass from 'liquid-glass-react'

function App() {
  return (
    <LiquidGlass>
      
        Your content here
        This will have the liquid glass effect
      
    </LiquidGlass>
  )
}

Button Example

<LiquidGlass
  displacementScale={64}
  blurAmount={0.1}
  saturation={130}
  aberrationIntensity={2}
  elasticity={0.35}
  cornerRadius={100}
  padding="8px 16px"
  onClick={() => console.log('Button clicked!')}
>
  Click Me
</LiquidGlass>

Mouse Container Example

When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:

function App() {
  const containerRef = useRef<HTMLDivElement>(null)

  return (
    
      <LiquidGlass
        mouseContainer={containerRef}
        elasticity={0.3}
        style={{ position: 'fixed', top: '50%', left: '50%' }}
      >
        
          Glass responds to mouse anywhere in the container
        
      </LiquidGlass>
    
  )
}

Props