Liquid Glass JS Library
Inspired by Apple's new Liquid Glass design language, this WebGL-powered library brings Vision Pro-style glass effects to the web with sophisticated refraction, blur, and masking systems.
Advanced Glass Effects Architecture
Our library implements real-time glass rendering using WebGL shaders with multi-layer refraction systems. Each glass element samples the background through sophisticated algorithms that simulate physical glass properties including edge distortion, rim effects, and customizable center warping.
The glass effects dynamically sample these background images, creating realistic refraction and blur that adapts to any content beneath the glass surfaces.
Notice how the glass buttons above interact with different image content - the WebGL shaders analyze the background in real-time to create convincing glass distortion effects.
Each glass element uses sophisticated sampling techniques to blur and refract the content behind it, creating depth and visual hierarchy while maintaining readability.
The scrolling interaction demonstrates how glass elements maintain their effects during dynamic page movement, continuously updating their background sampling.
Try adjusting the real-time controls to see how different parameters affect the glass rendering - from subtle transparency to dramatic refraction.
This extensive content ensures the glass effects can be tested across various backgrounds and scroll positions, demonstrating the robustness of the WebGL implementation.
Technical Capabilities & Architecture
🎯 Button & Container Types
The library supports three distinct geometric shapes, each with specialized WebGL shader calculations:
- Rounded Rectangles - Classic iOS-style buttons with customizable corner radius
- Perfect Circles - Circular buttons ideal for icons and compact controls
- Pill/Capsule Shapes - Pharmaceutical-inspired elongated buttons with semicircular ends
⚙️ Real-Time Control System
Every glass parameter is controllable via the live settings panel (which itself is a glass container):
- Edge & Rim Intensity - Controls glass refraction strength at boundaries
- Distance Falloffs - Exponential curves that define effect areas
- Center Warp Toggle - Optional content distortion for dramatic effects
- Corner Enhancement - Specialized corner light effects
- Ripple Textures - Surface imperfection simulation
- Blur Radius - Background defocus amount
- Tint Opacity - Controls gradient overlay intensity from subtle (0.1) to warm (0.8)
- Randomize Button - Generate creative glass effect combinations instantly
🏗️ Flexible Architecture
Container Class: Base glass surface with automatic child management, supports standalone page sampling or nested parent-child relationships. Each container can have its own tintOpacity setting.
Button Class: Extends Container with text overlays, click handlers, and intelligent sizing. Buttons can work independently or as children of containers, with individual tint control.
Nested Glass System: Child buttons sample their parent container's rendered output for true layered glass effects.
Per-Instance Properties: Each glass element can have custom tintOpacity, borderRadius, and type settings for precise design control and visual hierarchy.
🔬 WebGL Implementation
Built with cutting-edge graphics techniques:
- Multi-Layer Refraction - Separate edge, rim, and base intensity calculations
- Shape-Aware Normals - Different algorithms for rounded rectangles, circles, and pills
- Gaussian Blur Sampling - 13×13 adaptive blur with circular masking
- Real-Time Page Capture - html2canvas integration for background sampling
- Dynamic Uniform Updates - Live parameter changes without shader recompilation
🚀 Endless Possibilities
This foundation enables countless UI patterns: navigation bars, modals, cards, notifications, dock systems, control panels, and any interface element where Apple's Liquid Glass aesthetic is desired. The real-time parameter system makes it perfect for design prototyping and creating unique glass signatures for different applications.
Creative Examples: Use high tintOpacity (0.7+) for prominent control panels, subtle values (0.1-0.3) for elegant overlays, or randomize all parameters for unexpected artistic effects. Each glass element can have its own visual personality while maintaining the cohesive Liquid Glass aesthetic.
Experience the future of web interfaces with physically-accurate glass rendering that rivals native iOS and macOS applications.