React Liquid Glass Effect 🧪✨

A premium, highly-customisable macOS-style liquid glassmorphism container component for React. It uses pure CSS properties and dynamically-isolated SVG displacement filters to create realistic light refraction, bevel highlights, and smooth fluid warp animations.

Features

• Zero Boilerplate: No need to copy-paste SVG filters or configure webpack/vite CSS loaders. Just import the component and it works.
• Filter Isolation: Uses React's useId() under the hood, ensuring that rendering multiple elements on one screen isolates their refractions without ID collisions.
• Prop-Driven Customisation: Easily tweak warp scale, noise seed, backdrop blur, tint colors, and borders directly via React props.
• Ultra-Lightweight: Built with TypeScript and bundled to ESM and CommonJS formats. Only a few kilobytes, with CSS styles auto-injected at runtime.

Installation

npm install liquid-glassmorphism-react

Usage

1. Basic Button

Wrap any button or element to apply the glass refraction. Specifying variant="button" applies the default button paddings and border-radius presets:

import { LiquidGlass } from 'liquid-glassmorphism-react';

function App() {
  return (
    <LiquidGlass variant="button" scale={150} seed={5}>
      <button style={{ background: 'none', border: 'none', color: 'white', fontWeight: 'bold' }}>
        Click Me
      </button>
    </LiquidGlass>
  );
}

2. macOS App Dock

The container wraps nested elements perfectly. Hovering over the Dock container scales the glass wrapper while maintaining sharp, undistorted child graphics:

import { LiquidGlass } from 'liquid-glassmorphism-react';

function Dock() {
  return (
    <LiquidGlass variant="dock" scale={80} seed={12}>
      <div style={{ display: 'flex', gap: '10px' }}>
        <img src="/assets/safari.png" alt="Safari" width="50" />
        <img src="/assets/notes.png" alt="Notes" width="50" />
        <img src="/assets/messages.png" alt="Messages" width="50" />
      </div>
    </LiquidGlass>
  );
}

3. Glass Dropdown Menu

import { LiquidGlass } from 'liquid-glassmorphism-react';

function Menu() {
  return (
    <LiquidGlass variant="menu" scale={100} tintColor="rgba(255, 255, 255, 0.15)">
      <div style={{ display: 'flex', flexDirection: 'column', color: 'white' }}>
        <div style={{ padding: '8px 16px' }}>New File</div>
        <div style={{ padding: '8px 16px' }}>Open File</div>
        <div style={{ padding: '8px 16px', borderTop: '1px solid rgba(255,255,255,0.1)' }}>Settings</div>
      </div>
    </LiquidGlass>
  );
}

Component API (Props Reference)

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | children | React.ReactNode | Required | The HTML elements or components to render inside the glass container. | | variant | 'menu' \| 'dock' \| 'button' \| 'none' | 'none' | Pre-configured sizing, padding, and border-radius layouts matching macOS elements. | | scale | number | 150 | The displacement map scale. Controls how heavily the background bends (refracts). | | seed | number | 5 | The SVG noise seed. Alters the random wave patterns under the glass. | | blur | string | '3px' | Backdrop blur value (e.g. '5px'). | | tintColor | string | 'rgba(255, 255, 255, 0.25)' | The color and opacity of the glass wash. | | shineTopLeftColor | string | 'rgba(255, 255, 255, 0.5)' | Color of the top-left inner reflection bevel highlight. | | shineBottomRightColor | string | 'rgba(255, 255, 255, 0.5)' | Color of the bottom-right inner bevel rim highlight. | | className | string | "" | Extra CSS class names to apply to the wrapper. | | style | React.CSSProperties | {} | Custom inline style rules to apply to the wrapper. |

Local Development & Testing

1. Install dependencies:

   npm install

2. Build the package:

   npm run build

3. Run the Vite sandbox demo app locally:

   npm run example

License

MIT