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 属性，实现组件对外响应 。

技术架构与优势

技术优势一览

界面效果深度体验

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

✅ 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 / 交互式弹窗。
• 视觉增强型仪表盘：数据可视化卡片组件提升科技感。
• 个性导航或标签：鼠标移动时产生流动变形，提升用户颜值体验。
• 移动端体验增强：结合响应式布局实现轻质玻璃模糊效果。

与同类项目对比

✅ 优势：

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

总结

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

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

项目地址

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