Liquid Glass React is a WebGL-powered component library that renders refractive, liquid-like glass effects on React UI elements. It simulates light bending and chromatic aberration through fragment shaders in real-time, creating interactive visual distortions driven by cursor movement and clicks.
The library distinguishes itself through a cursor-driven distortion pipeline that translates pointer coordinates into dynamic displacement, blur, saturation, and frost parameters with elastic easing for a liquid-like visual reaction. It supports chromatic dispersion that separates RGB color channels for prismatic light-splitting effects, and offers configurable refraction modes including standard, polar, prominent, and shader variants. The system synchronizes WebGL animation loops with React component lifecycles, and can map pointer coordinates relative to a parent container for larger interactive tracking areas.
The component handles child element interaction correctly, preserving hover and click behavior on nested content while the glass effect remains active. Refraction properties such as displacement intensity, chromatic aberration, frost level, elasticity, and edge bending are all adjustable at runtime through a configurable visual parameter pipeline.
