LiquidGlass

#1 True LiquidGlass Component for Framer

A WebGL-powered canvas component that applies a procedural refraction shader over layout containers in Framer. It serves as a drop-in wrapper to achieve a high-fidelity glass distortion effect without the performance drops, pixelation, or cross-browser rendering inconsistencies associated with SVG displacement filters feDisplacementMap).

Technical Mechanics

Browser security limitations prevent direct real-time manipulation of active background DOM elements. To circumvent this, the component captures the underlying viewport data layer and mathematically warps the texture coordinates relative to the shape boundaries using custom fragment shaders executed on the GPU. This maintains crisp anti-aliasing on text, vectors, and media passing beneath the frame.

Key Features

* Automatic Layout Inheritance: Functions as a structural "Glass Beacon." Dropping the component into an auto-layout stack or absolute-positioned frame causes it to automatically read and match the parent container's width, height, and border-radius settings.

* Procedural Refraction Shader: GPU-calculated edge distortion and normal-mapped surface reflection rims that adapt dynamically to viewport resizing.

* Chromatic Dispersion: Optional configuration to simulate physical light splitting (edge color separation) along the container boundaries.

* Interactive Layer Mapping: Toggles for cursor-relative coordinate tracking, allowing the distortion field to react dynamically to pointer movements.

* Adjustable Parameter Stacks: Direct panel controls for refraction index values, blur opacity thresholds, specular light placement, and background tint hex codes.