@scriptedpixels/liquid-glass-vue NPM

Liquid Glass Vue

Apple's Liquid Glass effect for Vue.

Card Example	Button Example

⚠️ NOTE: Safari only partially supports the effect (no displacement) and Firefox does not support it at all.

npm install @scriptedpixels/liquid-glass-vue

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

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

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)