Liquid DOM ShowCase | GitHub 仓库
Andrew Prifer 发布了一个名为 Liquid DOM 的库，在 Web 上忠实实现了 Liquid Glass 效果，支持形状变形、动态折射/反射、自适应着色等，并可与 Three.js 集成，运行流畅。
渲染要求浏览器支持 WebGPU 和实验性 HTML-in-Canvas API（需 Chrome Flag 开启）
AI 摘要：Liquid DOM 是一个基于 SDF（Signed Distance Field）的高性能渲染引擎库，实现了 Liquid Glass 的全部视觉属性（形状变形、动态折射反射、自适应着色、色散等），支持 Canvas 与 HTML 混合布局，提供低层 API 和 React 高层 API，可直接采样 Three.js 场景而无需额外性能开销。
AndrewPrifer/2056923983581446529
Dear frontend devs and UI designers. I bring you Liquid DOM, a complete and faithful implementation of Liquid Glass on the Web.
- Shape morphing
- All properties animatable
- Dynamic refraction and reflection
- Adaptive tint
- Adaptive specular highlight
- Dispersion
- Full html integration
- Super fast layout engine that works across Canvas and html
- Pointer event handling
- Framework and renderer-agnostic low level API
- High level React API
- Ootb @threejs and r3f integration
And lots more.
Read on for implementation details and demos.