Liquid Glass UI System
Liquid Glass Design
Explore fluid organic fusion, physical glass refraction, and specular edge reflections. Fully customizable using Next.js 15, Tailwind v4, and Framer Motion.
滤镜参数调节
调整 SVG 矩阵参数以改变粘性小球在融合时的流动张力、边界清晰度及融合阀值。
模糊半径 (Blur)14px
`stdDeviation`：控制小球开始相互融合的感应范围。
边缘锐度 (Contrast)24
`feColorMatrix` Alpha倍率：增加此值可消除模糊边缘，使其变得锐利。
融合阀值 (Threshold)-10
`feColorMatrix` Alpha偏移：负值越深，液态流体边缘越窄、粘连越细。
实时渲染矩阵数据
matrix: [ 0 0 0 24 -10 ]
液态物理沙盒 (Liquid Physical Sandbox)
拖拽不同颜色的小球相互碰撞，您会发现它们呈现类似水滴、油滴的有机融合和剥离效果。
Core
Drag
Fluid
Goo
1. 折射磨砂玻璃
利用 `backdrop-blur(24px)` 配合 `saturate(190%)`，能精准捕获底层鲜艳的流体背景色，使其折射出柔和饱满的晕染效果，模拟真实有机玻璃的材质感。
2. 物理边缘高光
完美的“Liquid Glass”需要内阴影（Inset Shadow）塑造厚度。我们在顶部加入了白色高光，在底部添加了微弱暗光，产生极致细腻的边缘物理倒角。
3. 液态融合滤镜
当小球相互重叠时，高斯模糊使透明度通道结合，接着通过颜色矩阵对 Alpha 通道施加高对比度，最终使融合的部分重构出平滑水滴般的流动连结。
外观样式：暗色极客黑