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 | | 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 | -60 | Light source angle in degrees for specular highlight | | 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

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 slope along the bezel, while 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