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

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