Responsive sizing
Width and height accept pixels or CSS size strings. A ResizeObserver measures the actual layout box and rebuilds an aspect-correct optical map only when the surface size changes.
A real backdrop lens, not a screenshot
Parallax Glass renders tint, blur, specular edges, chromatic separation, and pointer-responsive light around your existing React content. The component never captures the page, clones the DOM, or replaces live content with a rasterized layer. Text and controls behind the surface remain part of the real document.
The implementation is copied into your project, so you can inspect the optical math, tune material presets, and ship without a private runtime package. React 19 is used by this demo, while the installed primitive is ordinary TypeScript and CSS source.
Basic React usage
import { LiquidGlass } from "@/components/liquid-glass/liquid-glass"
export function GlassButton() {
return (
<LiquidGlass
width={240}
height={72}
borderRadius={24}
material="control"
>
<button type="button">Open project</button>
</LiquidGlass>
)
}Children render above the optical surface. Use stateLayerfor selection chrome and overlayLayer for an interactive layer that must sit above the content.
Responsive surfaces and material presets
Physical materials
Choose ultraThin, thin, regular, thick, or ultraThick to increase optical weight, blur, and separation from the background.
Semantic recipes
Navigation, control, panel, and selectionPressed provide stable starting points for common interface roles.
Pointer lighting
Tune highlight radius and strength per surface, or disable pointer lighting on non-interactive elements to avoid unnecessary filter work.