Animations showing an artificial intelligence “thinking” have become a familiar element in assistants, agents and generative AI applications, but developers do not necessarily have to rely on GIFs or prerendered video. Liquid Orb Editor takes a different approach: it generates the effect in real time using WebGPU and WGSL shaders, lets users customize it visually, and can then export both a standalone web page and SwiftUI/Metal code for integration into Apple applications.

Liquid Orb Editor explained in 20 seconds

Liquid Orb Editor provides 11 customizable animated presets that can be edited directly in the browser.
It uses React, WebGPU and WGSL shaders to render effects in real time.
Users can adjust colors, speed, shape, glass refraction and outer glow.
It exports standalone web pages as well as SwiftUI code with Metal shaders.
The project is open source under the MIT license and requires a WebGPU-compatible browser.

The project was developed by LerSent001 and can be used directly through a demo hosted on GitHub Pages, without installing a desktop application. Running it locally requires Node.js 22, pnpm 11 and a browser with WebGPU support.

The idea is relatively simple, but it addresses an increasingly common interface problem. Many AI applications need to represent states in which a model is processing information, waiting for a response, using tools or executing a task. Basic implementations often rely on GIFs, videos or CSS animations. Liquid Orb Editor generates the effect on the GPU instead, allowing it to be dynamically modified and integrated into the interface itself.

From an animated orb to a shader ready for an application

Liquid Orb Editor is built around WebGPU, the modern graphics API for web browsers designed to provide more direct access to GPU capabilities than previous technologies in many use cases.

Its effects are written in WGSL (WebGPU Shading Language), the shader language associated with WebGPU. Instead of playing a sequence of previously rendered images, the GPU continuously calculates the appearance and movement of the orb.

The editor currently provides 11 dynamic sphere presets, according to the version available in its repository. Each can be used as a starting point and subsequently customized.

Available controls include color, animation speed, shape, glass refraction and outer glow.

Users can preview the orb on its own or place it inside a sample scene. The latter can be useful because an effect that looks good against a dark background may behave very differently when incorporated into an actual application interface.

The application automatically displays its interface in Chinese or English depending on the browser language, while also allowing users to switch languages manually.

The feature that makes the project particularly interesting, however, is its export system.

Liquid Orb Editor can generate a standalone web page, but it can also export the effect as SwiftUI and Metal code.

Metal is Apple’s low-level graphics and compute API used across macOS, iOS, iPadOS and the company’s other platforms. This means the animation does not have to remain inside a website or be reproduced through an embedded web component in a native application.

The project directly includes an effect.metal file for its SwiftUI export, while effect.wgsl contains the shader used by the browser version.

For developers building applications for Apple platforms, this capability may ultimately be more useful than the visual editor itself: designing an effect in the browser and then obtaining a version that runs natively through Metal.

The same parameters can be used across Web and SwiftUI

One common problem when moving graphical animations between platforms is maintaining a similar appearance in both implementations.

Liquid Orb Editor attempts to reduce this problem by using the same parameter snapshot for its Web and SwiftUI exports.

Within the project’s code structure, orb-uniforms.ts provides the central mapping between parameters configured in the editor and the GPU uniforms. orb-renderer.ts contains the WebGPU renderer, while code-export.ts handles the exported versions.

The developer also states that the project is being continuously maintained, with work focused on presets, motion models, editor stability and visual consistency between WebGPU/WGSL and SwiftUI/Metal.

This effectively turns the browser into a small visual design environment. A developer or designer can adjust an effect until it looks right and then generate the code required to incorporate it into the final product.

There is another simple but useful feature: animation parameters are stored in the URL hash.

Instead of exporting a file just to show a configuration to another team member, users can share a link. Opening it restores the corresponding effect parameters.

That could make collaboration between designers and developers easier. A designer can change the color, shape or movement of the orb and send the resulting URL to the developer responsible for integrating it.

WebGPU provides an alternative to GIFs and video

Using shaders for interface animations brings both advantages and limitations.

The first benefit is flexibility. A GIF contains a fixed animation. Changing its color, speed or behavior usually means generating the asset again.

A shader can react in real time.

An application could, for example, alter the movement of an orb depending on whether an AI agent is listening, processing information, calling a tool or generating a response. Colors and intensity could also change according to application state.

Because the graphics are generated by the GPU, the animation can remain sharp across different resolutions without storing dozens or hundreds of individual frames.

The trade-off is compatibility.

Liquid Orb Editor requires a browser with WebGPU support. Although WebGPU availability has expanded considerably across modern browsers and operating systems, developers cannot assume that every older device or corporate environment will support it.

A commercial application would therefore benefit from providing a fallback when WebGPU is unavailable.

The Metal export reduces this limitation for native Apple applications because developers are no longer dependent on browser WebGPU support once the effect has been integrated natively.

A small open-source project gaining attention on GitHub

Liquid Orb Editor is distributed as open-source software under the MIT license, allowing developers to inspect, modify and integrate its code while complying with the license terms.

The repository also notes that part of the interface uses Toolcraft UI code, which retains its original MIT copyright notices.

Its developer says OpenAI Codex is used to assist with code implementation, regression validation and releases, although the animation itself does not depend on an AI model to operate. Rendering is handled by WebGPU and the shaders included with the project.

The project has also attracted attention on GitHub shortly after its release. Early references highlighted roughly 359 stars in its first ten days, illustrating the interest around a tool addressing a very specific interface requirement.

Liquid Orb Editor is not intended to replace a graphics engine or a full motion-design application. Instead, it focuses on creating and customizing one particular type of animation that is becoming increasingly common in AI interfaces.

And its most useful feature may not be the ability to quickly create an attractive orb indicating that an AI model is thinking. For developers, the more distinctive capability is being able to move from a visual WebGPU editor to reusable SwiftUI/Metal code, rather than ending up with a GIF or an animation that only works inside a browser.

Frequently asked questions

What is Liquid Orb Editor?

It is an open-source editor for creating real-time liquid glass orb animations using WebGPU and WGSL. It can be used directly from a compatible web browser.

Can Liquid Orb Editor animations be exported?

Yes. The project can generate a standalone web page as well as SwiftUI code and Metal shaders for Apple’s platforms.

Does Liquid Orb Editor require an NVIDIA or AMD GPU?

There is no specific NVIDIA or AMD requirement. The web editor needs a WebGPU-compatible environment, so support depends on the browser, operating system and hardware.