About
A universal Liquid Glass wrapper that applies Apple-style glassmorphism to any element. Use it as a button, icon container, card, or any shape — it automatically adapts to your borderRadius.
Key features:
- SVG turbulence-based liquid distortion that reacts to mouse movement
- Specular highlight that tracks cursor position
- Iridescent sheen with cursor-angle-based conic gradient
- Glowing border with directional gradient
- Inner shadow, top-edge highlight, and noise grain for depth
- Spring-animated hover scale
- Configurable blur, distortion strength, and border radius
Installation
Examples
Icon Containers
Liquid glass as app icon containers — rounded square, circle, and squircle shapes on a colorful background.
Card / Navigation
Liquid glass wrapping sidebar navigation and a music player card on a mountain landscape background.
Usage
import { LiquidGlass } from "@/components/motionx/liquid-glass";As a button
<LiquidGlass as="button" borderRadius={999} className="px-8 py-3">
<span className="text-white font-semibold">Click Me</span>
</LiquidGlass>As an icon container
<LiquidGlass
borderRadius="50%"
className="h-20 w-20 flex items-center justify-center"
>
<Icon className="text-white w-10 h-10" />
</LiquidGlass>As a card
<LiquidGlass borderRadius={24} blurAmount={22} className="max-w-sm">
<div className="p-6">
<h3 className="text-white font-bold">Glass Card</h3>
<p className="text-white/60">Content goes here.</p>
</div>
</LiquidGlass>With custom settings
<LiquidGlass
distortionStrength={0.5}
blurAmount={24}
sheenEnabled={false}
borderGlow={false}
hoverScale={1.05}
borderRadius={16}
>
{children}
</LiquidGlass>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content to wrap |
className | string | — | Additional CSS classes |
distortionStrength | number | 0.3 | SVG displacement intensity (0–1) |
blurAmount | number | 16 | Backdrop blur in px |
sheenEnabled | boolean | true | Show iridescent sheen |
borderGlow | boolean | true | Show glowing gradient border |
hoverScale | number | 1.02 | Scale factor on hover |
borderRadius | number | string | 24 | Border radius in px or CSS value (e.g. 50%) |
as | "div" | "button" | "span" | "div" | Semantic role — button adds role & tabIndex |
onClick | function | — | Click handler |
Tip: Place the component over a vivid background image or gradient — the glass distortion and blur effects are most visible when there's rich content behind the element.