Apple's Liquid Glass effect for Vue. Forked from liquid-glass-react
| Card Example | Button Example |
|---|---|
Click here to see it in action!
- Proper edgy bending and refraction
- Multiple refraction modes
- Configurable frosty level
- Supports arbitrary child elements
- Configurable paddings
- Correct hover and click effects
- Edges and highlights take on the underlying light like Apple's does
- Configurable chromatic aberration
- Configurable elasticity, to mimic Apple's "liquid" feel
⚠️ NOTE: Safari and Firefox only partially support the effect (displacement will not be visible)
npm install @zaosoula/liquid-glass-vue<script lang="ts" setup>
import LiquidGlass from '@zaosoula/liquid-glass-vue'
</script>
<template>
<LiquidGlass>
<div class="p-6">
<h2>Your content here</h2>
<p>This will have the liquid glass effect</p>
</div>
</LiquidGlass>
</template><LiquidGlass
:displacementScale="64"
:blurAmount="0.1"
:saturation="130"
:aberrationIntensity="2"
:elasticity="0.35"
:cornerRadius="100"
padding="8px 16px"
@lick={() => console.log('Button clicked!')}
>
<span class="text-white font-medium">Click Me</span>
</LiquidGlass>When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:
<script lang="ts" setup>
const containerRef = ref<HTMLDivElement>()
</script>
<template>
<div ref="containerRef" class="w-full h-screen bg-image">
<LiquidGlass
:mouseContainer="containerRef"
:elasticity="0.3"
:style="{ position: 'fixed', top: '50%', left: '50%' }"
>
<div class="p-6">
<h2>Glass responds to mouse anywhere in the container</h2>
</div>
</LiquidGlass>
</div>
</template>| Prop | Type | Default | Description |
|---|---|---|---|
displacementScale |
number |
70 |
Controls the intensity of the displacement effect |
blurAmount |
number |
0.0625 |
Controls the blur/frosting level |
saturation |
number |
140 |
Controls color saturation of the glass effect |
aberrationIntensity |
number |
2 |
Controls chromatic aberration intensity |
elasticity |
number |
0.15 |
Controls the "liquid" elastic feel (0 = rigid, higher = more elastic) |
cornerRadius |
number |
999 |
Border radius in pixels |
class |
string |
"" |
Additional CSS classes |
padding |
string |
- | CSS padding value |
style |
Record<string, any> |
- | Additional inline styles |
overLight |
boolean |
false |
Whether the glass is over a light background |
@click |
() => void |
- | Click handler |
mouseContainer |
Vue.Ref<HTMLElement | null> | null |
null |
Container element to track mouse movement on (defaults to the glass component itself) |
mode |
"standard" | "polar" | "prominent" | "shader" |
"standard" |
Refraction mode for different visual effects. shader is the most accurate but not the most stable. |
globalMousePos |
{ x: number; y: number } |
- | Global mouse position coordinates for manual control |
mouseOffset |
{ x: number; y: number } |
- | Mouse position offset for fine-tuning positioning |