「Liquid Glass React」开源实现苹果“液态玻璃”效果！
把苹果 visionOS 的「Liquid Glass」视觉语言带到 Web/React 生态，让前端开发者无需着色器知识即可获得高级玻璃质感。
在线学习：
https://www.bilibili.com/video/BV1mdNez6E4L
利用 WebGL + CSS backdrop-filter，在鼠标位置附近实时位移深度贴图，实现边缘折射与“液化”动画。
MIT 协议开源，仅十余次 commit 就完成核心功能；主分支已较为稳定，但 Safari/Firefox 目前仅能显示模糊效果，不支持边缘位移。
地址：**** Hidden Message *****
多折射模式：tandard / polar / prominent / shader（实验） 四种算法，细腻程度递增。
液态弹性：elasticity 参数让玻璃随鼠标“拉伸回弹”，营造流体感。
色差与雾化：aberrationIntensity 控制 RGB 分离，blurAmount 控制磨砂雾度。
光照高亮：边缘与高光会自动映射背景亮度，与 visionOS 效果一致。
任意子元素：既可包裹按钮，也能包裹整块内容区；支持自定义内边距与圆角。
安装与快速上手
npm install liquid-glass-react
import LiquidGlass from 'liquid-glass-react';
export default function Card() {
return (
<LiquidGlass blurAmount={0.1} elasticity={0.3}>
<div className="p-6">
<h2>Hello Vision-Pro UI</h2>
<p>Just drop any JSX here.</p>
</div>
</LiquidGlass>
);
}
小甲鱼老师Web课程：
https://www.bilibili.com/video/BV1dG411B7nG
https://www.bilibili.com/video/BV1dG411B7nG
评论区聊聊你的想法吧{:10_330:}
https://xxx.ilovefishc.com/forum/202505/12/120451wiv7viv5iebupbbr.png
>>万能兑换C币许愿池<<
如果有收获，别忘了评分{:10_281:} ：
https://xxx.ilovefishc.com/forum/202011/20/092334ggd6inlzfisfrdir.png.thumb.jpg
https://xxx.ilovefishc.com/forum/202505/21/111710rvxgdn90vaub5gag.gif 感谢分享 朕又在鱼C学到东西啦！非常满意{:9_217:} 快速收敛 发表于 2025-6-17 14:28
感谢分享 朕又在鱼C学到东西啦！非常满意
{:7_141:} 感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里{:10_275:} 感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里{:10_275:} 卡卡老师讲数据 发表于 2025-6-17 17:08
感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里
{:10_275:}鱼C有你更精彩{:10_288:} 鱼C-小师妹 发表于 2025-6-17 18:37
感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里
{:10_288:}{:10_288:}{:10_288:} 感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里{:10_275:} 感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里{:10_275:} 康小泡 发表于 2025-6-18 17:06
感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里
{:10_288:}{:10_288:}{:10_288:} 感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里{:10_275:} 感谢分享！！鱼C论坛不愧是全国最大的「编程/AI/科技/新闻/娱乐」学习论坛！朕很喜欢这里{:10_275:}
页:
[1]