Liquid Glass React

@khoivudev/liquid-glass-react

A lightweight React component that creates a "Liquid Glass" distortion effect using CSS backdrop-filter and SVG feDisplacementMap.

Installation

npm install @khoivudev/liquid-glass-react

Note: This package no longer requires three or @react-three/fiber.

Usage

Simply wrap your content with <LiquidGlass>. It acts like a div but applies the liquid distortion to the background behind it.

Important: This uses backdrop-filter, so the effect applies to what is behind the element.

import { LiquidGlass } from "@khoivudev/liquid-glass-react";

function App() {
  return (
    <div
      style={{
        backgroundImage: "url(https://picsum.photos/1600/900)",
        backgroundSize: "cover",
        backgroundPosition: "center",
        height: "100vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <LiquidGlass>{/* Your Content */}</LiquidGlass>
    </div>
  );
}

Props

| Prop | Type | Default | Description | | -------------------- | ------------------------- | ------- | --------------------------------------------------------------------- | | glassThickness | number | MotionValue | 50 | Thickness of the glass effect. Controls displacement amount. | | bezelWidth | number | MotionValue | 15 | Width of the edge bezel where refraction occurs. | | blur | number | MotionValue | 0.9 | Standard deviation for Gaussian blur on the source graphic. | | refractiveIndex | number | MotionValue | 1.5 | Refractive index (IOR). Glass is ~1.5, Water ~1.33. | | specularOpacity | number | MotionValue | 1.5 | Opacity of the specular highlights (0.0 - 1.0). | | specularSaturation | number | MotionValue | 4 | Saturation boost for the refracted area. | | dpr | number | MotionValue | 1 | Device Pixel Ratio. Defaults to window.devicePixelRatio if undefined. | | className | string | - | CSS classes to apply to the wrapper div. | | style | CSSProperties | - | Inline styles for the wrapper div. | | children | ReactNode | - | Content inside the glass container. |

Browser Support

Relies on backdrop-filter: url(...).

• Chrome/Edge: Good support.
• Firefox/Safari: Experimental/Limited support. May require flags or fallback to standard blur.

How it Works

1. Physical Simulation: Calculates a refraction profile based on bezel geometry (thickness, width, curve) and refractive index (Snell's Law).
2. Displacement Map: Generates a displacement map on a 2D Canvas based on the calculated profile.
3. SVG Filter: Creates an invisible SVG <filter> using <feDisplacementMap> to distort the background and a custom specular layer for highlights.
4. CSS Application: Applies the filter to the component via CSS backdrop-filter.