Studiounivation
LIVE TEST

Liquid glass comparison lab

Two renderers that visibly bend live video.

Drag the first lens over the moving test lines, then compare it with the SVG backdrop renderer beside it.
01
liquid-glass-web-reactDrag the lens anywhere in the video
Drag the glass lens
02
@liquidglass/reactGenerated SVG backdrop displacement
REFRACTION
Live tuning
Hands-on testDrag renderer 01 across the lines.

Implementation notes

A real lens test—not two blurred rectangles.

Each renderer now sits directly over its own moving video surface. The high-contrast lines make displacement, chromatic edges, and blur immediately visible.
liquid-glass-web-react · v0.1.1

Best for a visible, draggable refraction lens.

  • Refracts live DOM and video content
  • Draggable generated displacement lens
  • Curvature, edge light and RGB controls
@liquidglass/react · v0.1.3

Best for contained glass interface cards.

  • Zero runtime dependencies
  • Canvas-generated SVG displacement
  • Direct blur, contrast and tint controls
Library importsBoth are installed in the main application.
import { LiquidGlass } from 'liquid-glass-web-react'
import { LiquidGlass as SvgLiquidGlass } from '@liquidglass/react'