Fluid Glass UI: How to give an AI agent a reproducible WebGL interface instead of an abstract prompt
Main chat
A chat for vibe coders: news, guides, live cases, marketplace, and finding executors.
AI interface generation has a problem not with ideas, but with repeatability
Ask for a glass dashboard several times and you will get a few different results. In one case, the cards will be too transparent, in another the contrast will disappear, in the third there will be heavy animation that overloads the phone. For a quick experiment, this is acceptable. For a product or series of screens, no longer.
Fluid Glass UI offers a different approach: not to describe the visual style anew in each prompt, but to give the agent a finished and verifiable material core. The project appeared on GitHub on August 2, 2026 and is distributed on Apache-2.0.
What exactly is recorded
In the repository, it is not business logic that is immutable, but the visual physics of the interface: the geometry of cards, the order of glass layers, the transparency budget, the WebGL shader, the cursor response and the CSS-fallback. This is important: an agent can change signatures, values, colors, card counts, and speed, but does not “reinvent” the material at every task.
For the team, this is like a design system, only at the level of finished visual effect. Instead of the phrase “do glassmorphism, but not too glossy”, there is a specific set of assets, APIs and constraints.
Not just a demo: there are limitations to the real interface
Fluid Glass UI is designed for a modern browser with WebGL1, but does not assume that everyone has WebGL. If the context is not available, the CSS option is activated. The project also limits the number of simultaneous WebGL-contexts to eight – this is protection against problems in Safari on iOS. In the configuration, you can create up to twelve cards: the extra ones will be shown through the fallback, rather than breaking the screen.
The material has quality profiles auto, high, balanced, eco and fallback, as well as a pause outside viewport, ResizeObserver, IntersectionObserver and prefers-reduced-motion accounting. For designers, this is a good example of how an effect needs to be designed along with its degradation and energy consumption, rather than adding those details at the very end.
How to Use with an AI Agent
- Copy the project directory into your agent’s skills folder or give the agent a link to the repository.
- Ask for a specific interface: for example, a financial dashboard with four KPIs rather than “beautiful glass cards.”.
- Transmit real data, brand palette and permissible traffic intensity through JSON-config.
- Ask the agent not to change canonical assets and execute
python tools/package_qa.py. - Check on your mobile device, in reduced motion mode and with WebGL disabled.
The main practical value here is not that the agent can write a shader. It gets a clear boundary: which parts of the visual system can be adapted to the task, and which can not be changed without a design decision.
Where the approach is appropriate and where it is not
The material works well for compact analytical surfaces, demonstration widgets, product KPIs and immersive promo screens on a dark background. But this is not a universal replacement for the basic UI system: the project has a fixed card height of 144 pixels, and “glass” can worsen readability in complex work interfaces.
Therefore, a reasonable scenario is to use Fluid Glass UI as a limited characteristic product layer, rather than stretching it over the entire cabinet. First, determine where the effect helps to read priorities or convey the character of the brand, then fix the permissible variations in the config.
What to take in your practice
Fluid Glass UI is interesting not only as a visual technique. It shows a mature way to work with agents: design code doesn’t have to be an endless textual description. The more verifiable references, constraints, and QA rules in the system, the more stable the result is and the less time it takes to fix “almost the same” interface.
Source, demo and documentation are available in репозитории Fluid Glass UI.
