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://source.unsplash.com/random)",
        height: "100vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <LiquidGlass
        className="glass-card"
        glassThickness={40}
        blur={0.5}
        bezelWidth={20}
        refractiveIndex={1.5}
        specularOpacity={1}
        specularSaturation={4}
        style={{ padding: "2rem", borderRadius: "1rem", color: "white" }}
      >
        <h1>Liquid Glass</h1>
        <p>This background is distorted!</p>
      </LiquidGlass>
    </div>
  );
}

Props

Prop	Type	Default	Description
`glassThickness`	`number` \| `MotionValue`	`40`	Thickness of the glass effect. Controls displacement amount.
`bezelWidth`	`number` \| `MotionValue`	`20`	Width of the edge bezel where refraction occurs.
`blur`	`number` \| `MotionValue`	`0.2`	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`	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

Generates a seamless simplex noise texture using a 2D Canvas.
Creates an invisible SVG <filter> using <feDisplacementMap>.
Applies the filter to the component via CSS backdrop-filter.