README
Liquid Glass Form Demo
This is a static WebGL2 implementation of an iOS-style Liquid Glass button over a real HTML form. It does not use backdrop-filter or a blurred overlay.
AI Disclosure
This project was generated by AI. Generation note: 5.5 xhigh.
Overview
The form is native DOM. A transparent fixed WebGL canvas only paints the floating submit button area. For the refraction pass, the page mirrors the visible form into an offscreen canvas texture, then the shader bends that texture through a static rounded lens. The button itself does not move, wobble, or animate; the refracted pixels change only when content scrolls or form values change behind it.
The shader includes:
- Screen-space texture refraction driven by a dome height field.
- Edge lensing that bends text and form controls most strongly near the button boundary.
- RGB dispersion for subtle chromatic separation.
- Static specular highlights and a glass edge treatment.
Browsers do not currently expose arbitrary live DOM pixels as a texture for general shader sampling, so this demo keeps a synchronized canvas mirror for the pixels behind the button.
Run
Open index.html directly, or serve the folder:
python3 -m http.server 5173Then visit http://127.0.0.1:5173/.
References
- Apple, Meet Liquid Glass
- Apple Newsroom, Apple introduces a delightful and elegant new software design
- Lettier, Screen Space Refraction