# dashersw/liquid-glass-js architecture

> Architecture diagram of the GitHub repository dashersw/liquid-glass-js, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/dashersw/liquid-glass-js
- Repository: https://github.com/dashersw/liquid-glass-js

## Overview

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`](https://github.com/dashersw/liquid-glass-js/blob/main/button.js) (Button), [`container.js`](https://github.com/dashersw/liquid-glass-js/blob/main/container.js) (Container), [`index.html`](https://github.com/dashersw/liquid-glass-js/blob/main/index.html) (Demo Page), [`controls.js`](https://github.com/dashersw/liquid-glass-js/blob/main/controls.js) (Effect Controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_components["Glass Components"]
  node_container["Container<br/>[container.js]"]
  node_button["Button<br/>[button.js]"]
end

subgraph group_rendering["Capture And Rendering"]
  node_page["Page Content"]
  node_capture["Page Capture"]
  node_webgl["WebGL API"]
  node_glass["Rendered Glass"]
  node_parentcanvas["Parent Canvas<br/>[container.js]"]
end

subgraph group_demo["Demo And Controls"]
  node_controls["Effect Controls<br/>[controls.js]"]
  node_demopage["Demo Setup<br/>[demo.js]"]
  node_html["Demo Page<br/>[index.html]"]
end

subgraph group_styling["Presentation"]
  node_controlstyles["Control Styles<br/>[controls.css]"]
  node_glassstyles["Glass Styles<br/>[glass.css]"]
  node_basestyles["Base Styles<br/>[styles.css]"]
end

node_author(("Page Author"))
node_html2canvas["html2canvas"]
node_viewer(("Page Viewer"))

node_author -->|"creates"| node_container
node_author -->|"creates"| node_button
node_button -->|"extends"| node_container
node_container -.->|"captures page"| node_html2canvas
node_html2canvas -.->|"returns snapshot"| node_capture
node_container -->|"renders shaders"| node_webgl
node_capture -->|"supplies snapshot"| node_container
node_container -->|"renders effect"| node_glass
node_button -->|"samples nested"| node_parentcanvas
node_parentcanvas -->|"provides texture"| node_button
node_button -->|"renders shader"| node_webgl
node_button -->|"renders effect"| node_glass
node_demopage -->|"creates examples"| node_container
node_demopage -->|"creates examples"| node_button
node_html -->|"loads"| node_demopage
node_html -->|"loads"| node_controls
node_controls -->|"updates uniforms"| node_container
node_controls -->|"updates uniforms"| node_button
node_viewer -->|"adjusts parameters"| node_controls
node_glass -->|"displays"| node_viewer
node_html -->|"loads styles"| node_glassstyles
node_html -->|"loads styles"| node_basestyles
node_html -->|"loads styles"| node_controlstyles

click node_container "https://github.com/dashersw/liquid-glass-js/blob/main/container.js"
click node_button "https://github.com/dashersw/liquid-glass-js/blob/main/button.js"
click node_parentcanvas "https://github.com/dashersw/liquid-glass-js/blob/main/container.js"
click node_controls "https://github.com/dashersw/liquid-glass-js/blob/main/controls.js"
click node_demopage "https://github.com/dashersw/liquid-glass-js/blob/main/demo.js"
click node_html "https://github.com/dashersw/liquid-glass-js/blob/main/index.html"
click node_controlstyles "https://github.com/dashersw/liquid-glass-js/blob/main/controls.css"
click node_glassstyles "https://github.com/dashersw/liquid-glass-js/blob/main/glass.css"
click node_basestyles "https://github.com/dashersw/liquid-glass-js/blob/main/styles.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_container,node_button,node_viewer toneBlue
class node_page,node_capture,node_webgl,node_glass,node_parentcanvas toneAmber
class node_controls,node_demopage,node_html toneMint
class node_controlstyles,node_glassstyles,node_basestyles toneRose
class node_author,node_html2canvas toneIndigo
```

## Components

### Glass Components

- [Container](https://github.com/dashersw/liquid-glass-js/blob/main/container.js): `container.js`
- [Button](https://github.com/dashersw/liquid-glass-js/blob/main/button.js): `button.js`

### Capture And Rendering

- **Page Content**
- **Page Capture**
- **WebGL API**
- **Rendered Glass**
- [Parent Canvas](https://github.com/dashersw/liquid-glass-js/blob/main/container.js): `container.js`

### Demo And Controls

- [Effect Controls](https://github.com/dashersw/liquid-glass-js/blob/main/controls.js): `controls.js`
- [Demo Setup](https://github.com/dashersw/liquid-glass-js/blob/main/demo.js): `demo.js`
- [Demo Page](https://github.com/dashersw/liquid-glass-js/blob/main/index.html): `index.html`

### Presentation

- [Control Styles](https://github.com/dashersw/liquid-glass-js/blob/main/controls.css): `controls.css`
- [Glass Styles](https://github.com/dashersw/liquid-glass-js/blob/main/glass.css): `glass.css`
- [Base Styles](https://github.com/dashersw/liquid-glass-js/blob/main/styles.css): `styles.css`

### Other components

- **Page Author**
- **html2canvas**
- **Page Viewer**

## Connections

- 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