液态玻璃实验室
真折射,不止是模糊。
基于 SVG 位移滤镜的苹果风液态玻璃材质。玻璃会弯曲、放大并色散其背后的内容——边缘失真最强,中心保持微妙,就像透过一滴水看世界。
拖动玻璃卡片,观察直线在它的边缘发生弯曲。
Liquid Glass
拖我到条纹上
边缘弯曲,中心平静。
实现原理
01
透镜位移图
Canvas 把玻璃形状渲染成一张向量场贴图:红通道编码水平位移,绿通道编码垂直位移,中性灰表示不动。位移量在边界附近最强、到中心衰减为零——展开控制衰减带宽度,深度控制曲率。
02
折射与色散
feImage 把位移图喂给 feDisplacementMap,对背景做三次弯曲——RGB 三个通道各用略微不同的强度——再用 screen 混合回来。三个通道的错位恰好在失真最强的边缘画出彩虹镶边。
03
液态扰动与霜化
feTurbulence 在折射图像上叠加细微的有机涟漪,feGaussianBlur 负责霜化。整条滤镜链通过一句 CSS backdrop-filter: url(#filter) 生效,玻璃背后滚动或移动的内容都会被实时折射。