Create Apple’s Liquid Glass Effects with React

Description:

liquid-glass-react is a React component that creates interactive, liquid glass-style effects in your React apps.

It recreates the sophisticated glass morphism that Apple uses across their new UI, complete with proper edge bending, refraction, and that distinctive “liquid” elasticity when interacting with elements.

See It In Action

Features

• Proper edge bending and refraction effects
• Configurable frost/blur intensity levels
• Chromatic aberration control for realistic light dispersion
• Elastic “liquid” animations that respond to mouse movement
• Support for arbitrary child elements and content
• Configurable padding and styling options
• Correct hover and click interaction states
• Light-aware edges and highlights that adapt to background

How To Use It

1. Installation.

npm install liquid-glass-react

2. Import the component and wrap your content with it.

function MyComponent() {
  return (
    <LiquidGlass>
      <div className="p-8 text-center">
        <h3>Glass Content</h3>
        <p>This whole block is wrapped.</p>
      </div>
    </LiquidGlass>
  )
}

3. Available props to customize the liquid glass effect.

• children: The content to render inside the glass container. Can be any valid React node.
• displacementScale: number (default: 70). Controls the intensity of the background distortion. Higher values create a more pronounced “warp” effect.
• blurAmount: number (default: 0.0625). Sets the blur level or “frostiness” of the glass.
• saturation: number (default: 140). Adjusts the color saturation of the content seen through the glass. 100 is normal.
• aberrationIntensity: number (default: 2). Controls the strength of the chromatic aberration, which splits color channels for a lens-like effect.
• elasticity: number (default: 0.15). Defines the “liquid” bounciness. 0 creates a rigid effect, while higher values make it more wobbly.
• cornerRadius: number (default: 999). The border radius of the glass component in pixels.
• className: string (default: ""). Pass additional CSS classes to the component’s root element.
• padding: string. Sets the CSS padding for the content inside the glass.
• style: React.CSSProperties. Pass additional inline styles to the component.
• overLight: boolean (default: false). Set to true if the glass is primarily over a light-colored background to adjust edge highlights.
• onClick: () => void. A standard click event handler.
• mouseContainer: React.RefObject<HTMLElement | null>. A ref to a larger element. The glass effect will react to mouse movement within this entire container, not just over the glass itself.

<LiquidGlass
  displacementScale={64}
  blurAmount={0.1}
  elasticity={0.35}
  cornerRadius={100}
  padding="8px 16px"
  onClick={() => console.log('Click!')}
>
  <span className="text-white font-medium">Click Me</span>
</LiquidGlass>

4. A key feature is the mouseContainer prop. It decouples the effect’s trigger area from the element itself. You can have a small glass element react to mouse movement over its entire parent. This requires a ref.

import { useRef } from 'react';
import LiquidGlass from 'liquid-glass-react';
function MyPage() {
  const pageRef = useRef<HTMLDivElement>(null);
  return (
    <div ref={pageRef} className="w-full h-screen bg-image">
      <LiquidGlass
        mouseContainer={pageRef}
        elasticity={0.3}
        style={{ position: 'fixed', top: '45%', left: '50%', transform: 'translate(-50%, -50%)' }}
      >
        <div className="p-6">
          <h2>This glass pane follows the mouse anywhere on the page.</h2>
        </div>
      </LiquidGlass>
    </div>
  );
}