Liqvued (Liquid Vue)

A Vue 3 component for creating liquid glass effects using SVG filter primitives. Generates realistic SVG displacement maps on the fly.

Inspired by Liquid Glass CSS/SVG

Documentation

View Documentation & Demo

Features

• Real-time SVG filter generation — displacement maps computed via Canvas API
• Multiple surface types — convex, concave, lip, bowl, bevel, saddle, ripple, noise, asymmetric
• Configurable optics — bezel width, corner radius, displacement thickness, refraction, magnification, focus, glare angle
• Built-in glassmorphism styling — gradient backgrounds, inset shadows, highlight overlays
• TypeScript — full type definitions
• Lightweight — minimal runtime dependencies beyond Vue
• Flexible composition — as prop allows rendering as any HTML element or component

Installation

pnpm add liqvued

Usage

<script setup lang="ts">
import { Liqvued } from 'liqvued'
</script>

<template>
  <div style="background: url('bg.jpg') center/cover;">
    <Liqvued
      :radius="32"
      :bezel="22"
      :thickness="42"
      :refraction="1"
      :blur="0.4"
      surface="convex"
    >
      <p>Content behind the glass</p>
    </Liqvued>
  </div>
</template>

Props

Prop	Type	Default	Description
radius	number	32	Corner radius in pixels
borderRadius	string	—	Per-corner border-radius CSS value (e.g. "10px 20px 10px 20px"); overrides radius
bezel	number	22	Width of the displacement bezel in pixels
thickness	number	42	Maximum displacement magnitude in pixels
refraction	number	1	Refraction index multiplier
refractionMode	string	'edge'	Refraction direction mode: edge, center, or split
magnification	number	0	Center magnification amount. Positive values enlarge, negative values shrink
magnificationFocus	number	0.82	Focus radius of the magnification area. Lower values concentrate the effect near center
blur	number	0.4	CSS backdrop-filter blur amount
surface	string	'convex'	Glass surface profile shape
specularOpacity	number	0.45	Opacity of the specular highlight
glareAngle	number | false	-60	Light source angle in degrees for specular highlight. Set false to disable
glassBackground	string	—	Glass panel background color (auto-derived from asProps.color when available)
fallbackOnly	boolean	false	When true, disables the SVG displacement effect and uses only CSS blur
as	string | Component	'div'	HTML tag or Vue component to render as (rendered as a child of the glass root)
asProps	object	{}	Props passed to the rendered element/component

Surface Types

• convex — squircle convex profile — soft pill-like edges
• concave — inverted convex — inward-curving dish-like refraction
• lip — smooth transition from convex at center to concave at edge
• bowl — deeper concave profile with a more even inward pull
• bevel — linear edge ramp for harder, cleaner refraction
• saddle — mirrored S-curve that shifts direction through the middle
• ripple — small wave modulation across the edge band
• noise — irregular organic edge distortion
• asymmetric — biased profile with more weight toward one side of the edge band

Refraction Modes

• edge — original behavior; displacement follows the rounded edge normal
• center — displacement points inward from each edge toward the shape centerline
• split — outer and inner bezel halves bend in opposite directions with a neutral midpoint

Dynamic Element Rendering

Use the as prop to render the glass effect on any element or component:

<template>
  <Liqvued as="section" :as-props="{ class: 'my-panel' }">
    <p>Section with glass effect</p>
  </Liqvued>
</template>

Browser Compatibility

Browser	Effect
Chrome / Edge / Opera	✅ Full liquid glass (SVG backdrop-filter)
Safari / Firefox	❌ Glassmorphism blur fallback (auto-detected via CSS.supports() + UA check)

The fallback applies backdrop-filter: blur(12px) with a subtle border and shadow, so the component still looks like frosted glass in unsupported browsers. SVG filter generation is skipped entirely in fallback mode — no unnecessary CPU/GPU work.

How It Works

The component generates a per-pixel displacement map as an RGBA PNG (red/green channels encode X/Y displacement vectors), injects it into an SVG <feDisplacementMap> filter, and applies it via backdrop-filter combined with CSS blur. The surface profile functions define the edge refraction strength along the bezel, while refractionMode controls the displacement direction. magnification and magnificationFocus control an optional center lens effect. A separate specular highlight map is generated and composited via feBlend to simulate surface lighting.

License

MIT — see LICENSE