Liquid Glass 是一个面向 Web 与 Electron 的开源玻璃质感界面组件库，由 Glass-HQ 团队维护，采用 MIT 协议发布。它把 Apple 在系统设计语言中标志性的「液态玻璃」视觉搬进了浏览器：提供 Clear 与 Regular 两种材质，同时支持浅色与深色外观，并能对实时内容产生折射效果。开发者通过 npm 安装 @glass-sdk/liquid-glass 后，即可在 React 项目中引入 GlassScene、GlassContent、GlassButton 等组件，配合官方样式文件快速搭建出通透、有层次感的界面。
项目要求 React 19 及以上版本，渲染依赖 HTTPS 或 localhost 环境以及可用的 WebGPU 适配器，目前已在桌面端 Chromium 浏览器上表现良好，Safari 与移动端仍在持续打磨中。
过去想在网页上还原 Apple 那种通透、会折射背景的玻璃质感，开发者往往只能靠手写多层 backdrop-filter、叠加半透明渐变和阴影来模拟，效果生硬且难以适配深浅色主题。更麻烦的是，一旦页面内容滚动或变化，静态模糊层无法跟随实时内容产生真实的折射与流动感，视觉上很容易「穿帮」。同时，跨浏览器兼容、性能开销、组件复用等问题都要自己解决，对独立开发者和前端团队来说，这是一块投入大、回报低的重复劳动。
Liquid Glass 把玻璃材质抽象成可直接调用的 React 组件，让开发者不必从零实现复杂的模糊与折射逻辑，就能在网页中还原接近系统级的玻璃观感。
提供两种玻璃质感预设，按场景切换通透度与存在感。
同一套组件同时支持明暗外观，无需为两套主题分别调样式。
玻璃层能对背后滚动变化的内容产生折射，观感更接近真实材质。
它把原本需要大量 CSS 技巧才能勉强实现的视觉效果，收敛成开箱即用的组件与样式，并且以开源 MIT 协议开放，对前端与设计工程方向都很有参考价值。
MIT 协议发布，个人项目与商业产品都可放心集成使用。
同一套组件可用于网页，也能嵌入 Electron 桌面应用界面。
项目仓库位于 GitHub，示例与 API 文档可在官方站点查看。
Liquid Glass，面向网页。开源。
Apple 的 Liquid Glass 外观，随处可用：Chromium 浏览器、Safari、Firefox、Electron 等。
它还处于早期阶段，有些粗糙。在桌面版 Chromium 上运行良好（这个视频就是）。Safari 和移动端目前还比较粗糙，这是我接下来要做的。
npm i @glass-sdk/liquid-glass
Demo: https://liquid-glass.glassapp.dev/
Repo: https://github.com/Glass-HQ/liquid-glass
