@oliverrr2424/liquid-glass

WebGL liquid glass renderer for Apple-style continuous corners, folder/card/pill/circle presets, refraction, full-surface blur, rim glow, drag, and resize interactions.

Install

npm install @oliverrr2424/liquid-glass

Vanilla JavaScript

import { LiquidGlass } from "@oliverrr2424/liquid-glass";

const glass = new LiquidGlass(document.querySelector("canvas"), {
  shape: "folder",
  refraction: 0.46,
  blur: 0.92,
  glow: 2
});

glass.setOptions({ shape: "pill", width: 360, height: 128 });

The canvas should have CSS dimensions:

canvas {
  width: 100vw;
  height: 100vh;
}

React

import { LiquidGlassView } from "@oliverrr2424/liquid-glass/react";

export function App() {
  return (
    <LiquidGlassView shape="folder" refraction={0.46} glow={2}>
      <div className="icons">Your UI overlay</div>
    </LiquidGlassView>
  );
}

Options

| Option | Default | Notes | | --- | ---: | --- | | shape | "folder" | "app-icon", "folder", "card", "pill", "circle", or "custom" | | width / height | preset size | Glass surface size in CSS pixels | | centerX / centerY | 0.51 / 0.45 | Normalized viewport position | | cornerShape | 5.65 | Superellipse exponent for continuous corners | | refraction | 0.46 | Rim refraction strength | | edgeSpread | 1.32 | Rim spread and diffusion | | blur | 0.92 | Whole in-glass blur amount | | glow | 2 | Rim glow strength | | dpr | 1.5 | Device pixel ratio cap | | interactive | true | Enables pointer events | | draggable | true | Drag the glass surface | | resizable | true | Resize from the edge |

Presets

import { LIQUID_GLASS_PRESETS } from "@oliverrr2424/liquid-glass";

Included presets: app-icon, folder, card, pill, circle.

Development

npm run check
npm pack --dry-run
npm run example