Docs
Apple Liquid Glass
Apple Liquid Glass
Displays a supa Apple Liquid Glass using svg.
Installation
Copy and paste the Apple Liquid Glass code into your project.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 300 | Width of the liquid glass element in pixels |
height | number | 200 | Height of the liquid glass element in pixels |
initialPosition | { x: number; y: number } | center | Initial position of the glass element |
borderRadius | number | 150 | Border radius of the glass element in pixels |
className | string | "" | Additional CSS classes to apply to the container |
disabled | boolean | false | Disables dragging functionality when true |
constrainToViewport | boolean | true | Constrains movement within viewport boundaries |
opacity | number | 1 | Opacity of the glass element (0-1) |
blur | number | 0.25 | Blur intensity for backdrop filter in pixels |
contrast | number | 1.2 | Contrast adjustment for backdrop filter |
brightness | number | 1.05 | Brightness adjustment for backdrop filter |
saturate | number | 1.1 | Saturation adjustment for backdrop filter |
onDragStart | (position: Position) => void | undefined | Callback fired when dragging starts |
onDrag | (position: Position) => void | undefined | Callback fired during dragging |
onDragEnd | (position: Position) => void | undefined | Callback fired when dragging ends |
style | React.CSSProperties | {} | Additional inline styles to apply |
The component now supports full customization of appearance, behavior, and event handling, making it highly flexible for different use cases.
Usage
export default function Demo() {
return (
<div className="flex flex-col items-center justify-center w-full h-[600px]">
<div className="text-center mb-12">
<h1 className="text-4xl font-bold mb-4">Apple Liquid Glass</h1>
<p className="text-lg">Move the glass to see the effect</p>
</div>
<div
className="w-full h-full relative bg-cover bg-center brightness-120 rounded-lg"
style={{
backgroundImage: `url("https://img.buoucoding.com/image/2.jpg")`,
}}
>
<LiquidGlass />
</div>
</div>
)
}