# rdev/liquid-glass-react

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/rdev-liquid-glass-react).**

4,473 stars · 298 forks · TypeScript · mit

## Links

- GitHub: https://github.com/rdev/liquid-glass-react
- awesome-repositories: https://awesome-repositories.com/repository/rdev-liquid-glass-react.md

## Description

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.

## Tags

### Graphics & Multimedia

- [Refraction Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/lighting-systems/image-based-lighting/screen-space-refraction-techniques/refraction-engines.md) — Renders liquid glass effects by simulating light bending and chromatic aberration through fragment shaders in real-time.
- [Refractive Shader Pipelines](https://awesome-repositories.com/f/graphics-multimedia/gpu-accelerated-shaders/shader-injection-pipelines/refractive-shader-pipelines.md) — Separates RGB color channels in fragment shaders to create prismatic light-splitting effects with configurable intensity.
- [Interactive UI Distortions](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/post-processing-effects/lens-distortion/distortion-simulation/interactive-ui-distortions.md) — Translates mouse movement and clicks into dynamic displacement and refraction parameters for interactive visual feedback.

### Part of an Awesome List

- [Glassmorphism Shader Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/canvas-and-webgl-graphics/webgl-rendering-pipelines/glassmorphism-shader-libraries.md) — Provides a React component library that renders refractive, liquid-like glass effects using WebGL shaders.

### Development Tools & Productivity

- [Liquid Glass Effects](https://awesome-repositories.com/f/development-tools-productivity/interface-visual-effects/liquid-glass-effects.md) — Provides a WebGL-powered liquid glass effect that refracts UI elements in response to cursor movement. ([source](https://github.com/rdev/liquid-glass-react#readme))
- [Lifecycle-Synchronized Animation Managers](https://awesome-repositories.com/f/development-tools-productivity/interface-visual-effects/liquid-glass-effects/lifecycle-synchronized-animation-managers.md) — Manages WebGL animation loops synchronized with React component lifecycles for responsive visual effects.
- [Pointer-Driven Refraction Trackers](https://awesome-repositories.com/f/development-tools-productivity/interface-visual-effects/liquid-glass-effects/pointer-driven-refraction-trackers.md) — Responds to cursor movement over a defined area to dynamically shift refraction effects based on pointer position. ([source](https://github.com/rdev/liquid-glass-react/blob/master/README.md))
- [Cursor-Driven Refraction Trackers](https://awesome-repositories.com/f/development-tools-productivity/interface-visual-effects/liquid-glass-effects/refractive-ui-design/cursor-driven-refraction-trackers.md) — Implements cursor-driven refraction tracking that shifts visual effects based on pointer position. ([source](https://github.com/rdev/liquid-glass-react#readme))
- [Child Element Interaction Preservers](https://awesome-repositories.com/f/development-tools-productivity/interface-visual-effects/liquid-glass-effects/child-element-interaction-preservers.md) — Preserves correct hover and click behavior on child elements while the glass effect remains active. ([source](https://github.com/rdev/liquid-glass-react/blob/master/README.md))
- [Chromatic Aberration Overlays](https://awesome-repositories.com/f/development-tools-productivity/interface-visual-effects/liquid-glass-effects/chromatic-aberration-overlays.md) — Applies configurable chromatic aberration, frost, and elasticity effects to React components as glass overlays.
- [Glass Pane Wrappers](https://awesome-repositories.com/f/development-tools-productivity/interface-visual-effects/liquid-glass-effects/glass-pane-wrappers.md) — Ships a glass pane wrapper that refracts background content beneath child elements. ([source](https://github.com/rdev/liquid-glass-react#readme))
- [Refraction Parameter Configurators](https://awesome-repositories.com/f/development-tools-productivity/interface-visual-effects/liquid-glass-effects/refraction-parameter-configurators.md) — Provides runtime configuration of refraction parameters like displacement, blur, and chromatic aberration. ([source](https://github.com/rdev/liquid-glass-react#readme))
- [Elastic Easing Responses](https://awesome-repositories.com/f/development-tools-productivity/interface-visual-effects/liquid-glass-effects/refractive-ui-design/elastic-easing-responses.md) — Applies spring-like easing to distortion values for a liquid-like visual reaction that overshoots and settles.

### Software Engineering & Architecture

- [Shader Uniform Configurators](https://awesome-repositories.com/f/software-engineering-architecture/default-configuration-values/execution-parameter-configurations/application-parameter-configurators/pipeline-parameter-configurators/shader-uniform-configurators.md) — Provides runtime adjustment of shader uniform variables for displacement, blur, saturation, and frost effects.

### User Interface & Experience

- [WebGL Animation Loop Hooks](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/animation-lifecycle-hooks/react-animation-hooks/webgl-animation-loop-hooks.md) — Provides lifecycle-aware hooks that synchronize WebGL animation loops with React component rendering.
- [Animation Loops](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/frame-execution-synchronization/animation-loops.md) — Synchronizes WebGL rendering with React component lifecycle to manage continuous animation frames.
- [Pointer Coordinate Mappers](https://awesome-repositories.com/f/user-interface-experience/component-child-utilities/instance-references/parent-accessors/relative-parent-sizing/pointer-coordinate-mappers.md) — Maps pointer coordinates relative to a parent container to enable larger interactive tracking areas.