Liquid Glass Vue

Apple's Liquid Glass effect for Vue.

Card Example | Button Example :-------------------------:|:-------------------------: |

Demo

Features

• Proper edgy bending and refraction
• 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 only partially supports the effect (no displacement) and Firefox does not support it at all.

Usage

Installation

npm install @scriptedpixels/liquid-glass-vue

Basic Usage

import LiquidGlass from '@scriptedpixels/liquid-glass-vue'

Button Example

Mouse Container Example

When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | Vue.VueNode | - | The content to render inside the glass container | | 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 | Vue.CSSProperties | - | Additional inline styles | | overLight | boolean | false | Whether the glass is over a light background | | onClick | () => void | - | Click handler | | mouseContainer | Vue.RefObject<HTMLElement \| null> \| null | null | Container element to track mouse movement on (defaults to the glass component itself) |