What is this?
Liquid Orb Editor is a real-time editor for creating animated liquid-glass orb effects, built with React and WebGPU/WGSL. You tweak color, speed, shape, glass refraction and glow, then export the result as a standalone web page or as SwiftUI/Metal code for iOS apps.
Liquid Orb Editor is a real-time editor for creating animated liquid-glass orb effects, built with React and WebGPU/WGSL. You tweak color, speed, shape, glass refraction and glow, then export the result as a standalone web page or as SwiftUI/Metal code for iOS apps.Is this a visual editor or a code library?It is a browser-based visual editor: you adjust parameters with sliders and previews, and it generates ready-to-use Web code or SwiftUI/Metal code for you, rather than being a library you import.
It is a browser-based visual editor: you adjust parameters with sliders and previews, and it generates ready-to-use Web code or SwiftUI/Metal code for you, rather than being a library you import.How do I run the editor?There is a hosted online version, or you can clone the repo and run it locally with pnpm (dev/build/preview scripts are powered by Vite).
There is a hosted online version, or you can clone the repo and run it locally with pnpm (dev/build/preview scripts are powered by Vite).What do I need installed to run it locally?You need Node.js 22 and pnpm 11, plus a browser that actually supports WebGPU to preview and edit the orb.
You need Node.js 22 and pnpm 11, plus a browser that actually supports WebGPU to preview and edit the orb.Will it run in any browser?No — the live preview depends on WebGPU support, so browsers without WebGPU can't render or edit the orb; the project is also still actively evolving, with ongoing changes to presets and output consistency.
No — the live preview depends on WebGPU support, so browsers without WebGPU can't render or edit the orb; the project is also still actively evolving, with ongoing changes to presets and output consistency.What presets does it ship with?It comes with 12 editable, animated orb presets covering different colors, motion styles and glass looks that you can tweak or use as starting points.
It comes with 12 editable, animated orb presets covering different colors, motion styles and glass looks that you can tweak or use as starting points.Can I share a design I made with someone else?Yes — all your parameter choices are encoded into the page's URL hash, so sharing the link reproduces the exact orb you configured.
Yes — all your parameter choices are encoded into the page's URL hash, so sharing the link reproduces the exact orb you configured.What role does OpenAI Codex play here?The author uses OpenAI Codex to help implement code, run regression verification on the Web/SwiftUI exports, and prepare releases.
The author uses OpenAI Codex to help implement code, run regression verification on the Web/SwiftUI exports, and prepare releases.Does the editor support Chinese and English?Yes, it auto-detects your browser language to show a Chinese or English interface, and you can switch between the two at any time.
Yes, it auto-detects your browser language to show a Chinese or English interface, and you can switch between the two at any time.What are similar projects?shaders, threejs-architecture-effects, empire, natural-disasters, RhineLabUI, framefields, iw4L, ascii
shaders, threejs-architecture-effects, empire, natural-disasters, RhineLabUI, framefields, iw4L, asciiWhich topics is it in?openai-codex, shader, webgpu, design-tools, pnpm, creative-coding, metal, swiftui, graphics, vite, 3d, animation
openai-codex, shader, webgpu, design-tools, pnpm, creative-coding, metal, swiftui, graphics, vite, 3d, animation