Liquid Glass — React Glass Effect

A molten glass loop. Travelling waves reshape its silhouette and the image transmitted through it.

Starting live preview

Usage

import { LiquidGlass } from "@/components/LiquidGlass";

export function GlassStudy() {
  return <div style={{ height: 520 }}><LiquidGlass interactive
    {...{
      interactive: true,
      speed: 0.6,
      distortion: 0.3,
      chromatic: 0.4,
      scale: 1
    }}
  /></div>;
}

Implementation notes & API

Original ray-marched glass annulus with moving geometry, spectral transmission and studio reflections. Procedural printed backdrop; arbitrary DOM is not sampled. Mount inside a sized parent. Pointer tilts the sculpture. Distortion reshapes the silhouette; chromatic controls spectral separation; scale changes the travelling wave tempo. The previous contour-line field has been replaced. Existing prop names and preset IDs remain valid.

Property	Type	Notes / default
`interactive`	`boolean`	false in the library; enabled in this preview
`fallback`	`ReactNode`	Shown when the renderer is unavailable
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT