Liquid GlassLiquid Glass

모든 유리 표면 아래 깔리는 색조, 안쪽 음영, 빛 테두리 레이어입니다.The tint, inner shadow, and light border layer under every glass surface.

@horon-ai/react 표시Display

clear

regular

thick

tsx

import { LiquidGlass } from "@horon-ai/react";

export default function LiquidGlassDemo() {
  return (
    <>
      {(["clear", "regular", "thick"] as const).map((tier) => (
        <div
          key={tier}
          className={`relative flex h-28 w-40 items-center justify-center overflow-clip rounded-xl text-label-md text-text-primary ${
            tier === "clear" ? "bg-glass-clear" : tier === "regular" ? "bg-glass-regular" : "bg-glass-thick"
          }`}
        >
          <LiquidGlass />
          <span className="relative">{tier}</span>
        </div>
      ))}
    </>
  );
}