How samasante/liquid-glass works
liquid-glass is a headless React lens library for refracting live DOM, copied content, and video/canvas surfaces, with a companion interactive site for trying and learning the API. The main user workflow is to configure a Glass lens and optics, then render it through the DOM or WebGL path; motion values can drive lens geometry. The site exposes a playground, examples, and documentation. Some site and renderer internals were not sampled, so unsourced implementation details and links are omitted.
Main entry points: Examples.tsx Examples gallery · Playground.tsx Playground view · Docs.tsx Documentation view · Glass.tsx Glass component
Components 25
React Lens API
- Public exports
src/index.ts - Glass component
src/Glass.tsx - Interaction utilities
src/interaction.tsx
Refraction Engine
- DOM material
src/GlassMaterial.tsx - Displacement maps
src/displacement.ts - Motion values
src/signal.ts - WebGL surfaces
src/GlassSurface.tsx - WebGL renderer
src/glassWebGL.ts
Interactive Site
- Site app router
site/src/main.tsx - View navigation
site/src/router.ts - Playground view
site/src/views/Playground.tsx - Live glass demo
site/src/components/GlassDemo.tsx - Optics controls
site/src/components/GlassControlPanel.tsx - Documentation view
site/src/views/Docs.tsx - Examples gallery
site/src/views/Examples.tsx - Site navigation
site/src/components/SiteHeader.tsx - Theme state
site/src/theme.ts - Viewport query
site/src/useMedia.ts - Surface tiles
site/src/components/SurfaceTiles.tsx
Product Examples
- Video controls
examples/GlassVideoControls.tsx - Notification demo
examples/GlassNotification.tsx - Switch demo
examples/GlassSwitch.tsx - Slider demo
examples/GlassSlider.tsx - Context menu demo
examples/GlassContextMenu.tsx
Other components
- Application developer
Connections 38
- Application developer → Public exports: imports API
README.md - Public exports → Glass component: exports
src/index.ts - Public exports → Motion values: exports
src/index.ts - Public exports → Interaction utilities: exports
src/index.ts - Glass component → Displacement maps: uses maps
src/Glass.tsx - Glass component → Motion values: reads motion
src/Glass.tsx - Glass component → DOM material: renders DOM
src/Glass.tsx - Glass component → WebGL surfaces: routes media
src/Glass.tsx - DOM material → Displacement maps: uses maps
src/GlassMaterial.tsx - DOM material → Motion values: reads motion
src/GlassMaterial.tsx - WebGL surfaces → Displacement maps: generates maps
src/GlassSurface.tsx - WebGL surfaces → Motion values: reads motion
src/GlassSurface.tsx - WebGL surfaces → WebGL renderer: draws lenses
src/GlassSurface.tsx - Interaction utilities → Motion values: uses values
src/interaction.tsx - Site app router → View navigation: selects view
site/src/main.tsx - Site app router → Playground view: renders view
site/src/main.tsx - Site app router → Examples gallery: renders view
site/src/main.tsx - Site app router → Documentation view: renders view
site/src/main.tsx - Site navigation → View navigation: navigates
site/src/components/SiteHeader.tsx - Site navigation → Viewport query: checks viewport
site/src/components/SiteHeader.tsx - Playground view → Live glass demo: renders demo
site/src/views/Playground.tsx - Playground view → Optics controls: renders controls
site/src/views/Playground.tsx - Playground view → Site navigation: renders navigation
site/src/views/Playground.tsx - Playground view → Theme state: uses palette
site/src/views/Playground.tsx - Playground view → Viewport query: checks viewport
site/src/views/Playground.tsx - Documentation view → Public exports: demonstrates API
site/src/views/Docs.tsx - Documentation view → Site navigation: renders navigation
site/src/views/Docs.tsx - Documentation view → View navigation: navigates
site/src/views/Docs.tsx - Documentation view → Theme state: uses palette
site/src/views/Docs.tsx - Documentation view → Viewport query: checks viewport
site/src/views/Docs.tsx - Examples gallery → Site navigation: renders navigation
site/src/views/Examples.tsx - Examples gallery → Theme state: uses palette
site/src/views/Examples.tsx - Examples gallery → Video controls: renders example
site/src/views/Examples.tsx - Examples gallery → Notification demo: renders example
site/src/views/Examples.tsx - Examples gallery → Switch demo: renders example
site/src/views/Examples.tsx - Examples gallery → Slider demo: renders example
site/src/views/Examples.tsx - Examples gallery → Context menu demo: renders example
site/src/views/Examples.tsx - Examples gallery → Surface tiles: renders tiles
site/src/views/Examples.tsx