liquid-glass-react：为 React 带来 Apple Liquid Glass 液态玻璃效果
liquid-glass-react 是一个 React 组件库，用于在网页中复现 Apple 的 Liquid Glass（液态玻璃）视觉效果，具备边缘弯曲与折射、多种折射模式、可配置的磨砂程度、色差、弹性以及悬停与点击效果；支持任意子元素与自定义内边距，Safari 与 Firefox 仅部分支持该效果。
社区作者 · zZz
它解决什么问题
该项目名为 Liquid Glass React，定位是「Apple's Liquid Glass effect for React」，即为 React 应用提供苹果风格的液态玻璃视觉组件。
功能特性（来自 README）：
- 正确的边缘弯曲与折射（Proper edgy bending and refraction）
- 多种折射模式（Multiple refraction modes）
- 可配置的磨砂/霜化程度（Configurable frosty level）
- 支持任意子元素（Supports arbitrary child elements）
- 可配置的内边距（Configurable paddings）
- 正确的悬停与点击效果（Correct hover and click effects）
- 边缘与高光会像 Apple 那样随底层光线变化
- 可配置的色差（Configurable chromatic aberration）
- 可配置的弹性，用来模拟 Apple 的「液态」手感（Configurable elasticity）
注意：Safari 与 Firefox 仅部分支持该效果，位移（displacement）效果不可见。
组件 Props（README 表格整理）：
- children：React.ReactNode，无默认值，玻璃容器内渲染的内容
- displacementScale：number，默认 70，控制位移效果强度
- blurAmount：number，默认 0.0625，控制模糊/霜化程度
- saturation：number，默认 140，控制玻璃效果的色彩饱和度
- aberrationIntensity：number，默认 2，控制色差强度
- elasticity：number，默认 0.15，控制液态弹性手感（0 = 刚性，越大越有弹性）
- cornerRadius：number，默认 999，圆角像素值
- className：string，默认 ""，附加 CSS 类
- padding：string，无默认值，CSS padding 值
- style：React.CSSProperties，无默认值，附加行内样式
- overLight：boolean，默认 false，玻璃是否位于浅色背景之上
- onClick：() => void，无默认值，点击处理函数
- mouseContainer：React.RefObject<HTMLElement | null> | null，默认 null，用于跟踪鼠标移动的容器元素（默认是玻璃组件自身）
- mode："standard" | "polar" | "prominent" | "shader"，默认 "standard"，折射模式；shader 最准确但最不稳定
- globalMousePos：{ x: number; y: number }，无默认值，用于手动控制的全局鼠标坐标
- mouseOffset：{ x: number; y: number }，无默认值，用于微调定位的鼠标位置偏移
页面展示了 Card Example 与 Button Example 两个示例（配图 1、配图 2），以及演示动图 project liquid（配图 3），并提供 Demo 链接可查看实际效果。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
前置环境：需要 Node.js 与 npm 环境（具体最低版本来源未注明，待核验），项目需为 React 应用。
第一步：安装依赖包。在项目根目录执行：
npm install liquid-glass-react第二步：基础用法。在组件文件中导入并使用默认导出组件 LiquidGlass，将需要呈现玻璃效果的内容作为子元素放入：
import LiquidGlass from 'liquid-glass-react'
function App ( ) { return ( < LiquidGlass > < div className = "p-6" > < h2 > Your content here < /h2 > < p > This will have the liquid glass effect < /p > < /div > < /LiquidGlass > ) }
第三步（可选）：按钮示例。通过位移、模糊、饱和度、色差、弹性、圆角与内边距等参数做出按钮形态，并绑定 onClick：
< 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 >
第四步（可选）：鼠标容器示例。当希望玻璃效果响应更大范围（例如父容器）内的鼠标移动时，使用 mouseContainer 属性，并用 useRef 绑定父容器：
function App ( ) { const containerRef = useRef < HTMLDivElement > ( null )
return ( < div ref = { containerRef } className = "w-full h-screen bg-image" > < LiquidGlass mouseContainer = { containerRef } elasticity = { 0.
3 } style = { { position : 'fixed' , top : '50%' , left : '50%' } } > < div className = "p-6" > < h2 > Glass responds to mouse anywhere in the container < /h2 > < /div > < /LiquidGlass > < /div > ) }
首次运行与常见问题：
- Safari 和 Firefox 只部分支持该效果，位移（displacement）将不可见，建议在 Chromium 内核浏览器中查看完整效果。
- mode 选择 shader 时视觉效果最准确，但稳定性最差，如遇异常可回退到 standard。
- 弹性手感可通过 elasticity 调整（0 为刚性，数值越大越有弹性）；若玻璃位于浅色背景上，可开启 overLight。
