`createLiquidGlass`

The core factory function that applies the physics-based glass effect to any existing DOM element.

Basic Usage

import { createLiquidGlass } from '@avenra/liquid-glass';

const glass = createLiquidGlass('#my-div', {
  glassThickness: 100,
  blur: 0.8
});

The LiquidGlassOptions interface includes:

Prop	Type	Default	Description
`width`	`number`	`0` (auto)	Override element width for map computation
`height`	`number`	`0` (auto)	Override element height
`radius`	`number \| null`	`null` (auto)	Corner radius in px (auto-detected from CSS if null)
`bezelWidth`	`number`	`20`	Thickness of the refracting bezel in px
`glassThickness`	`number`	`80`	Virtual glass depth — controls refraction strength
`refractiveIndex`	`number`	`1.5`	Index of refraction (1.0 = none, 2.0 = strong)
`profile`	`'convexSquircle' \| 'convexCircle' \| 'concave' \| function`	`'convexSquircle'`	Surface curvature profile
`blur`	`number`	`0.5`	Pre-displacement Gaussian blur (stdDeviation)
`saturation`	`number`	`1.3`	Color saturation boost
`specularSlope`	`number`	`0.8`	Specular highlight intensity (0–1)
`filterMode`	`'screen' \| 'composite'`	`'screen'`	How specular layer is blended

Member	Type	Description
`element`	`Element`	The target DOM element
`refresh()`	`() => this`	Rebuild maps (call after resize if ResizeObserver unavailable)
`destroy()`	`() => void`	Remove effect and clean up
`on('resize', cb)`	`EventEmitter`	Fired when ResizeObserver triggers a rebuild
`on('destroy', cb)`	`EventEmitter`	Fired on destroy()