随着界面设计从扁平化迈向动态物理模拟，Liquid Glass（液态玻璃）效果逐渐成为一种具有未来感的视觉表达方式。它融合了模糊、折射、弹性和微色差等一系列光学特征，在交互过程中营造出柔和而动感的玻璃质感。

这类效果最初由 Apple 在其系统 UI 中使用，例如 macOS 的控制中心、iOS 的弹出窗口等，常见的表现包括：

• 背景内容经过模糊与折射处理；
• 前景玻璃边缘出现微妙亮边与色散效果；
• 用户交互引发边缘形变或动态反馈。

传统实现方式通常依赖 WebGL 或低层图形 API，复杂度较高。而在 React 应用中，liquid-glass-react 组件库为这一效果提供了轻量化封装，极大降低了使用门槛。

1. 什么是 Liquid Glass？从界面视觉到物理模拟

Liquid Glass 并非单一视觉效果，而是一个复合交互设计概念，旨在通过以下几个方面模拟“可感知的玻璃”：

• 折射（Refraction）：模拟光线穿透异质介质时的路径弯曲；
• 模糊（Frosted Blur）：模拟玻璃表面的散射处理；
• 弹性响应（Elasticity）：让组件边缘根据用户行为产生柔性形变；
• 色差（Chromatic Aberration）：通过微小红蓝边缘错位提升真实感。

通过这些物理视觉模拟，UI 不再只是静态展示，而具备“可触感”的视觉反馈特性。

2. liquid-glass-react 简介

liquid-glass-react 是一个基于 TypeScript 实现的 React 组件库，核心特性包括：

• 多种折射模式：standard、shader、polar、prominent 可选；
• 完整参数化配置：控制模糊度、色差强度、弹性、边角半径等；
• 鼠标追踪支持：支持绑定外部容器实现更大范围的交互响应；
• 边缘高光与投影模拟：提升组件真实感与层次感；
• 完全可组合：支持任意嵌套子元素与事件处理逻辑。

该库使用简单，适用于希望提升界面质感与交互反馈的中高端前端项目。

3. 安装与使用

安装命令：

npm install liquid-glass-react

基本示例：

tsx

import LiquidGlass from 'liquid-glass-react'

function Example() {
  return (
    <LiquidGlass blurAmount={0.08} elasticity={0.2} cornerRadius={16}>
      <div className="p-6">
        <h3>玻璃内容</h3>
        <p>组件内内容将获得液态玻璃视觉特效。</p>
      </div>
    </LiquidGlass>
  )
}

配合 mouseContainer 参数可实现容器级鼠标追踪：

const ref = useRef<HTMLDivElement>(null)

<LiquidGlass mouseContainer={ref}>
  ...
</LiquidGlass>

4. 参数配置简析

5. 应用场景与建议

• 登录页、设置页等展示型页面的背景容器；
• 模态框或对话框；
• 高亮按钮、标签或导航卡片；
• 落地页动效交互组件；

需要注意 Safari 与 Firefox 对 shader 模式支持较差，在跨浏览器场景中可切换为 standard 模式。

总结

liquid-glass-react 组件以较低的接入成本提供了高视觉质量的动态玻璃特效，对于追求细腻质感与流畅交互反馈的 React 项目来说，是一个值得关注的视觉增强工具。如果需要更高级的效果整合，例如与 Three.js 或粒子系统配合，也可以在此基础上拓展。