📦 Installation

Install the latest version using npm:

npm install universe-glass@latest

1️⃣ How to use?

"use client";

import LiquidGlassContainer from "universe-glass";

export default function GlassLayer() {
  const defaultConfig = {
    width: 300,
    height: 300,
    radius: 50,
    bevelWidth: 0.1, // 0 to 1
    bevelBlur: 7, // 0 to 50
    backgroundBlur: 20,
    warpAmount: 0.07, // 0 to 1
    warpDistance: 50, // 0 to 100
    warpDirection: -180, // -180 to 180
    caAmount: 2, // Chromatic aberration, 0 to 10
}
  return (
    <LiquidGlassContainer config={defaultConfig} className="fixed! left-1/2! top-1/2! -translate-x-1/2! -translate-y-1/2!">
      <h1>Hello Liquid Glass!</h1>
    </LiquidGlassContainer>
  );
}

Demo

👉 Visit Demo