About
Apple Liquid Glass
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds LiquidGlass to your project and fits it to your theme.
Code
How LiquidGlass is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"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>
);
}