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"
        distortionScale={30}
        style={{ padding: "2rem", borderRadius: "1rem", color: "white" }}
      >
        <h1>Liquid Glass</h1>
        <p>This background is distorted!</p>
      </LiquidGlass>
    </div>
  );
}

Props

Prop	Type	Default	Description
`distortionScale`	`number`	`30`	Intensity of the displacement.
`refractionLevel`	`number`	`undefined`	Alias for `distortionScale` (overrides it if set).
`blurLevel`	`number`	`0`	CSS blur radius in pixels applied to background (e.g. 5).
`specularOpacity`	`number`	`0.5`	Opacity of the liquid highlights (0.0 - 1.0).
`specularShininess`	`number`	`20`	Sharpness of the highlights (specular exponent).
`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.