「Liquid Glass React」开源实现苹果“液态玻璃”效果！

不二如是

把苹果 visionOS 的「Liquid Glass」视觉语言带到 Web/React 生态，让前端开发者无需着色器知识即可获得高级玻璃质感。

在线学习：



利用 WebGL + CSS backdrop-filter，在鼠标位置附近实时位移深度贴图，实现边缘折射与“液化”动画。

MIT 协议开源，仅十余次 commit 就完成核心功能；主分支已较为稳定，但 Safari/Firefox 目前仅能显示模糊效果，不支持边缘位移。

地址：

游客，如果您要查看本帖隐藏内容请回复

多折射模式：tandard / polar / prominent / shader（实验） 四种算法，细腻程度递增。

液态弹性：elasticity 参数让玻璃随鼠标“拉伸回弹”，营造流体感。

色差与雾化：aberrationIntensity 控制 RGB 分离，blurAmount 控制磨砂雾度。

光照高亮：边缘与高光会自动映射背景亮度，与 visionOS 效果一致。

任意子元素：既可包裹按钮，也能包裹整块内容区；支持自定义内边距与圆角。

安装与快速上手

1. npm install liquid-glass-react

复制代码

1. import LiquidGlass from 'liquid-glass-react';
   
2. 
   
3. export default function Card() {
   
4.   return (
   
5.     <LiquidGlass blurAmount={0.1} elasticity={0.3}>
   
6.       <div className="p-6">
   
7.         <h2>Hello Vision-Pro UI</h2>
   
8.         <p>Just drop any JSX here.</p>
   
9.       </div>
   
10.     </LiquidGlass>
    
11.   );
    
12. }

复制代码

小甲鱼老师Web课程：

评论区聊聊你的想法吧

                               
登录/注册后可看大图

>>万能兑换C币许愿池<<

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

                               
登录/注册后可看大图

                                                                    

快速收敛

感谢分享 朕又在鱼C学到东西啦！非常满意

不二如是

快速收敛 发表于 2025-6-17 14:28
感谢分享 朕又在鱼C学到东西啦！非常满意

卡卡老师讲数据

感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里

鱼C-小师妹

感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里

不二如是

卡卡老师讲数据 发表于 2025-6-17 17:08
感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里

鱼C有你更精彩

不二如是

鱼C-小师妹 发表于 2025-6-17 18:37
感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里

小甲鱼的二师兄

感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里