liquid-glass

Realistic liquid glass refraction with chromatic aberration for the web. Captures actual page pixels via html2canvas, applies barrel distortion + per-channel chromatic aberration, and adds static wave turbulence via SVG filters.

Install

npm install liquid-glass html2canvas

Quick Start

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>

import { createLiquidGlass } from 'liquid-glass'

const glass = createLiquidGlass('.my-card', {
  background: '.bg-layer',
})

// Re-capture after layout changes
glass.refresh()

// Clean up
glass.destroy()

How It Works

1. Captures the page behind the glass element using html2canvas
2. Applies barrel distortion (convex lens effect) via Canvas 2D pixel manipulation
3. Splits R/G/B channels with edge-weighted offset for chromatic aberration
4. Applies a static SVG feTurbulence wave filter for organic glass texture
5. Adds frost blur + dark tint overlay

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | background | string \| HTMLElement | required | Element to hide during capture | | distortion | number | 0.15 | Barrel distortion strength (0-1) | | chromatic | number | 2.5 | Chromatic aberration edge intensity (px) | | frost | number | 0.3 | Frosted blur overlay opacity (0-1) | | tint | string | 'rgba(15,15,25,0.15)' | Dark tint overlay color | | wave | number | 12 | Static wave turbulence scale. 0 to disable | | waveFrequency | [number, number] | [0.008, 0.006] | Turbulence frequency [x, y] | | glow | boolean | true | Pointer-following specular glow |

API

createLiquidGlass(target, options): LiquidGlassInstance

Returns:

• destroy() — Remove canvas, filters, listeners
• refresh() — Re-capture background and re-render

Browser Support

Works in all modern browsers (Chrome, Safari, Firefox, Edge). Uses html2canvas for pixel capture and Canvas 2D for distortion — no browser-specific APIs.

Peer Dependencies

• html2canvas ^1.4.0

Navigation Bar

Use createLiquidNav to apply liquid glass + sticky/fixed positioning to a navigation element.

<nav class="my-nav">
  <a href="#">About</a>
  <a href="#">Work</a>
  <a href="#">Studio</a>
  <a href="#">Contact</a>
</nav>

import { createLiquidNav } from 'liquid-glass'

const nav = createLiquidNav('.my-nav', {
  position: 'sticky',
  top: 16,
  gap: 24,
})

nav.refresh()
nav.destroy()

Nav Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | position | 'sticky' \| 'fixed' \| 'static' | 'sticky' | Positioning strategy | | top | number | 0 | Distance from top (px) | | gap | number | 24 | Space between items (px) | | padding | string | '12px 20px' | Inner padding | | recaptureOnScroll | boolean | true if sticky/fixed | Re-capture background during scroll | | wave / waveFrequency | — | — | Same as createLiquidGlass |

Returns the same LiquidGlassInstance with destroy() and refresh().

License

MIT