npm package: @khoivudev/liquid-glass-react
Description: A lightweight React component that creates a "Liquid Glass" distortion effect using CSS backdrop-filter and SVG feDisplacementMap.
Author: Khoi Vu
Latest version: 1.0.13

# 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`.

![Liquid Glass Demo](https://via.placeholder.com/800x400.png?text=Liquid+Glass+CSS+Effect)

## Installation

```bash
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.

```tsx
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`.