liquid-glass 是一个用于 Web 的 Apple 风格“液态玻璃”React 组件库，核心组件为无头组件 `<Glass>`。它通过 SVG displacement filter / WebGL 等方式实现真实的折射、毛玻璃、边缘高光、色散等视觉效果。项目使用 TypeScript 编写，零运行时依赖，React / React DOM 为 peer dependencies，适合在现代 React 应用中构建高质感的按钮、卡片、通知、菜单、视频控件、滑块、开关等交互 UI。
适用领域
前端开发 / React 组件库 / Web UI 特效 / 动效与交互设计 / 设计系统 / 创意编码 / WebGL / SVG Filter / 高端营销页 / 产品官网
配置难度
中等。基础使用非常简单，只需要安装并使用 <Glass> 包裹内容；但如果要实现跨浏览器一致折射、视频多透镜、复杂动画或高性能移动端体验，需要较强的 React、CSS、浏览器渲染和性能调优经验。
商业价值
较高。该库可以帮助产品快速实现 Apple 风格的高质感玻璃 UI，用于官网、营销页、创意交互、媒体控件和高端 SaaS 界面时具有明显的视觉差异化价值。由于 MIT 许可、零依赖、API 简洁，集成成本较低；但商业项目中需要投入浏览器兼容性测试和性能优化，尤其是在 Safari、Firefox、移动端以及复杂动画场景下。
01
技术亮点
- 零运行时依赖，包体预计较小，React 是唯一 peer dependency。
- API 简洁，基础场景只需一个 <Glass> 组件。
- 无头设计，不强绑定具体 UI 样式，方便和 Tailwind、CSS Modules、设计系统集成。
- 支持 Chrome、Safari、Firefox，兼容性思路比很多仅支持 Chromium 的方案更完整。
- 在 Chrome / Edge 中可对真实 DOM 进行实时折射，文本仍可选择，链接仍可点击。
- 提供 refract 副本模式，可在 Safari 和 Firefox 中实现可控折射。
- 支持视频、Canvas 和多透镜场景，适合复杂媒体控件。
- 支持 optics 参数细调，包括 strength、depth、curvature、dispersion、frost、sheen、glow 等。
- 提供 motion utilities，可用于构建高帧率交互控件。
- MIT 许可证，适合商业项目使用。
- README 中包含较完整的 API 说明和示例思路。
02
目标用户
- React 前端开发者
- 追求高视觉质感的 UI 工程师
- 需要实现 Apple 风格 Liquid Glass 效果的团队
- 产品官网、Landing Page、活动页开发者
- 设计系统 / 组件库维护者
- 视频播放器、媒体交互界面开发者
- 熟悉 CSS、React、动画和浏览器兼容性的中高级前端工程师
03
配置要求
- 需要 React 环境，react 和 react-dom 是 peer dependencies。
- 无需 Provider、无需 CSS import、无需额外配置。
- 基础用法只需要引入 Glass 组件并包裹 DOM。
- Chrome / Edge 对真实 DOM 的 live bending 支持最好，因为依赖 backdrop-filter: url()。
- Safari / Firefox 可以显示霜化、染色和边缘高光，但对真实 DOM 的直接实时折射有限制；若要完整折射，需要使用 refract 副本模式。
- 视频或 Canvas 场景下可使用 src 或 draw，并通过 lenses 定义多个透镜。
- 如果使用动画，可传入普通 number 或兼容 MotionValue 接口的值，例如 framer-motion MotionValue。
- 部分高级效果涉及 SVG Filter、WebGL、浏览器渲染差异，需要在目标浏览器上实际测试。
04
适用场景
- 为按钮、卡片、弹窗、通知、菜单添加液态玻璃视觉效果
- 实现 macOS / iOS 风格的玻璃态开关、滑块、上下文菜单
- 在图片、视频或 Canvas 内容上叠加可折射的玻璃控件
- 构建高端产品官网、作品集、创意页面的视觉亮点
- 为视频播放器控制栏实现多个独立玻璃透镜
- 在 Chrome / Edge 中对真实 DOM 内容实现实时折射效果
- 在 Safari / Firefox 中通过 refract 副本模式实现跨浏览器折射
- 作为设计系统中的无头视觉基础组件，由业务侧自行封装样式和交互
05
部署与配置
- 确保项目使用 React，并已安装 react 和 react-dom。
- 通过 npm 安装：npm i @samasante/liquid-glass
- 在 React 组件中引入：import { Glass } from "@samasante/liquid-glass";
- 用 <Glass> 包裹需要玻璃效果的内容。
- 通过 style、className、Tailwind 或 CSS 设置尺寸、背景色、圆角、padding 等样式。
- 如需调整折射、色散、霜化、高光等效果，可传入 optics 配置。
- 如需跨浏览器稳定折射，可使用 refract、src、draw 或 lenses 等模式。
06
风险与注意事项
- 项目 stars 数量约 278，生态和长期维护稳定性仍需观察。
- 液态玻璃效果依赖浏览器底层渲染能力，不同浏览器表现可能不完全一致。
- Chrome / Edge 与 Safari / Firefox 在真实 DOM 折射能力上存在差异，业务上线前必须做兼容性验证。
- 复杂页面、大量玻璃透镜、视频或 Canvas 场景可能带来性能压力，尤其是移动端和低端设备。
- 视觉效果较强，若过度使用可能影响可读性、可访问性和用户体验。
- 高级用法涉及 WebGL、SVG Filter、MotionValue、Canvas 等概念，对初级前端有一定理解门槛。
- 项目不是 Apple 官方实现，不应在品牌或合规描述中暗示与 Apple 有关联。
- 如果页面需要严格 SSR 或服务端渲染，需要额外验证该组件在 Next.js 等框架中的水合与客户端渲染表现。
2026-06-25
第16名
新收录 · github_search
