GitHub 2.8k star 开源既封神，“Liquid‑Glass‑React”，让你前端界面瞬间拥有苹果级液态玻璃效果！

嗨，我是小华同学，专注解锁高效工作与前沿AI工具！每日精选开源技术、实战技巧，助你省时50%、领先他人一步。👉免费订阅，与10万+技术人共享升级秘籍！

Liquid‑Glass‑React 旨在将 Apple iOS 26 上的“Liquid Glass”视觉特效，原汁原味地带入 React 应用。该组件已获得 2.8k stars、192 forks，凭借逼真的折射效果、多种反射模式、响应式交互和高度可配置性，成为前端开发者提高 UI 视觉质感的热门选择 。

为什么“Liquid Glass”值得体验？

随着 Apple 在 WWDC25 推出 iOS 26，新一代“Liquid Glass”设计语言在整个系统中大放异彩，从 Control Center 到 Dock，再到系统级组件，全都采用更流动、更玻璃感、可折射的材质 。Liquid‑Glass‑React 正是这一视觉语言的 Web 版本，让前端也能体验到类似 Apple 风格的界面语言。

解决方案

🔥 常见痛点

• 设计扁平、缺乏质感：平面化设计让界面显得“呆板”、“毫无生气”。
• 玻璃模糊效果实现复杂或性能低：Backdrop-filter 性能不稳定，不同浏览器支持有限。
• 缺少交互感：即使使用伪玻璃也只能静态展现，缺少鼠标、滚动反馈效果。

🛠 Liquid‑Glass‑React 解决方案

• 逼真折射＋高模糊度：通过 displacement、blur、chromatic aberration 重现真实视觉。
• 多种折射模式：如 standard / polar / prominent / shader，覆盖不同视觉需求。
• 响应用户思维：支持 elasticity、mouseContainer，实现手感灵动的交互效果。

核心功能解析

下面提炼项目中的 8 大亮点：

• 分层折射效果（displacementScale） 控制玻璃折射强度，越大折射越大，视觉效果越夸张 。
• 灵活可调的模糊等级（blurAmount） 调节玻璃 frosting 级别，实现半透明或强模糊视觉 。
• 饱和度调节（saturation） 平衡颜色强度，模拟光线在玻璃表面的折射效果 。
• 色差效果（aberrationIntensity） 模拟真实光学收边现象（chromatic aberration），增强质感 。
• 弹性流动（elasticity） 控制组件在鼠标移动时的形变反馈，模拟“液态”真实弹性 。
• 自定义圆角与 padding 支持 cornerRadius 和 padding 属性，自由控制玻璃组件形状 。
• 多折射模式切换（mode） 提供 standard / polar / prominent / shader 模式，满足多样视觉风格 。
• 全局鼠标控制 支持 mouseContainer 或 globalMousePos 属性，实现组件对外响应 。

技术架构与优势

技术优势一览

维度	优势说明
原生视觉还原	使用高保真 shader 重现苹果原生玻璃质感
高度可配置	8+ 参数可调节，满足高自由度视觉需求
交互流畅	elasticity 和 mouseContainer 实现自然反馈
多模式支持	提供 4 种折射风格，可用于按钮、卡片、弹窗等多场景
性能稳定	仅依赖 WebGL，性能比 CSS backdrop-filter 更稳定

界面效果深度体验

下面展示几个核心截屏与代码示例：

✅ 1. 标准卡片组件

<LiquidGlass className="w-80 p-6" cornerRadius={20}>
  <h3>Welcome to Liquid Glass</h3>
  <p>Modern frosty card effect.</p>
</LiquidGlass>

描述：标准折射 + 轻微粗糙 +圆润边角，可作为卡片展示。

✅ 2. 夸张按钮示例

<LiquidGlass
  displacementScale={64}
  blurAmount={0.1}
  saturation={130}
  aberrationIntensity={2}
  elasticity={0.35}
  cornerRadius={100}
  padding="8px 16px"
  onClick={() => console.log('Button clicked!')}
>
  <span className="text-white font-medium">Click Me</span>
</LiquidGlass>

描述：高折射、高饱和度，形态弹性高，适合 “点击式” 弹窗按钮。

✅ 3. 全局交互示例

<div ref={containerRef} className="bg-img w-full h-screen">
  <LiquidGlass
    mouseContainer={containerRef}
    elasticity={0.3}
    style={{ position: 'fixed', top: '50%', left: '50%' }}
  >
    <div className="p-6">Glass responds to mouse anywhere</div>
  </LiquidGlass>
</div>

描述：在自定义大容器内响应鼠标位置，实现全局动态交互。

应用场景推荐

• 交互式按钮与悬浮卡片：适用于登陆页 Call-to‑Action / 交互式弹窗。
• 视觉增强型仪表盘：数据可视化卡片组件提升科技感。
• 个性导航或标签：鼠标移动时产生流动变形，提升用户颜值体验。
• 移动端体验增强：结合响应式布局实现轻质玻璃模糊效果。

与同类项目对比

项目对比	displacements	模式数量	交互弹性	Browser 支持	包体积
Liquid‑Glass‑React	支持 ✔	4 模式	✔	Chrome 好，Safari/Firefox 部分不支持折射	约 80kb
gracefullight/liquid‑glass	支持	不详	待补充	支持多浏览器	未统计
Specy/liquid‑glass (3D)	支持真实 3D	Shader + 上下文	✔	有限制，打包重	较大
sharky‑2/liquid‑glass‑ui	支持拖拽	-	滚动反馈	支持主流浏览器	一般

✅ 优势：

• 支持多种 refraction 模式
• 参数配置细腻
• 动效自然、流畅
• 一致支持 React，易整合现有项目

总结

Liquid‑Glass‑React 不仅让 Web 界面拥有 Apple “Liquid Glass” 的视觉动力，也让 React 开发者更容易构建出富有交互感的 UI 组件。无论是按钮、卡片，还是背景组件，都可以通过简单设置，焕发高质感与动效表现。

• ⭐ 已获 2.8k stars，社区关注度高
• 🎯 多参数式调节：满足不同风格需求
• ⚡ 高效性能：基于 WebGL，性能优于 CSS
• 💡 易上手：几行代码即可展示流光溢彩效果

项目地址

https://github.com/rdev/liquid-glass-react