LiquidGlass

"use client";

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

const settings = {
  distortWidth: 0.3,
  distortHeight: 0.2,
  distortRadius: 0.6,
  smoothStepEdge: 0.8,
  distanceOffset: 0.15,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div
      className="relative h-screen w-screen overflow-hidden bg-background text-foreground"
      style={{
        backgroundImage:
          "repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 22px), repeating-linear-gradient(-45deg, currentColor 0 2px, transparent 2px 22px)",
      }}
    >
      <LiquidGlass
        distortWidth={s.distortWidth}
        distortHeight={s.distortHeight}
        distortRadius={s.distortRadius}
        smoothStepEdge={s.smoothStepEdge}
        distanceOffset={s.distanceOffset}
      />
    </div>
  );
}