How dashersw/liquid-glass-js works
Liquid Glass JS is a browser-side WebGL library for rendering refractive glass containers and buttons. A page author creates components; containers capture the page background, render shape-aware glass effects, and expose nested sampling for child buttons. The demo adds interactive parameter controls and examples. The README documents responsive sizing, tinting, three shapes, and real-time effect adjustment. Source excerpts are partial, so the graph omits uncertain internal render-loop details; documented capabilities without sampled implementation are represented only where their module is supported by the tree.
Main entry points: button.js Button · container.js Container · index.html Demo Page · controls.js Effect Controls
Components 16
Capture And Rendering
- Page Content
- Page Capture
- WebGL API
- Rendered Glass
- Parent Canvas
container.js
Demo And Controls
- Effect Controls
controls.js - Demo Setup
demo.js - Demo Page
index.html
Presentation
- Control Styles
controls.css - Glass Styles
glass.css - Base Styles
styles.css
Other components
- Page Author
- html2canvas
- Page Viewer
Connections 23
- Page Author → Container: creates
- Page Author → Button: creates
- Button → Container: extends
- Container → html2canvas: captures page
- html2canvas → Page Capture: returns snapshot
- Container → WebGL API: renders shaders
- Page Capture → Container: supplies snapshot
- Container → Rendered Glass: renders effect
- Button → Parent Canvas: samples nested
- Parent Canvas → Button: provides texture
- Button → WebGL API: renders shader
- Button → Rendered Glass: renders effect
- Demo Setup → Container: creates examples
- Demo Setup → Button: creates examples
- Demo Page → Demo Setup: loads
- Demo Page → Effect Controls: loads
- Effect Controls → Container: updates uniforms
- Effect Controls → Button: updates uniforms
- Page Viewer → Effect Controls: adjusts parameters
- Rendered Glass → Page Viewer: displays
- Demo Page → Glass Styles: loads styles
- Demo Page → Base Styles: loads styles
- Demo Page → Control Styles: loads styles