AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

LerSent001Shaders & WebGPU

Liquid Orb Editor

By LerSent001, a browser editor for shader-driven glass orbs built with React, WebGPU/WGSL, and Toolcraft UI. Switch between eleven dynamic sphere presets, tune color, speed, shape, refraction, and outer glow, then preview in orb-only or full scene mode. Configurations persist in the URL hash for sharing; export paths include independent Web pages and SwiftUI/Metal with a shared parameter snapshot. MIT licensed, with a static fallback when WebGPU is unavailable.

What's interesting

  • Eleven glass orb presets with live refraction controls
  • Share configs via URL hash
  • Export to web page or SwiftUI/Metal snapshot

Use in your project

  1. Tune the orb until refraction and glow match your brand.
  2. Share the URL hash with design for sign-off.
  3. Port parameters to React or SwiftUI from the export path you need.

Prompt your agent

From AI UX Playground: https://aiuxplayground.com/inspirations/liquid-orb-editor
Liquid Orb Editor by LerSent001

By LerSent001, a browser editor for shader-driven glass orbs built with React, WebGPU/WGSL, and Toolcraft UI. Switch between eleven dynamic sphere presets, tune color, speed, shape, refraction, and outer glow, then preview in orb-only or full scene mode. Configurations persist in the URL hash for sharing; export paths include independent Web pages and SwiftUI/Metal with a shared parameter snapshot. MIT licensed, with a static fallback when WebGPU is unavailable.

Port this glass orb treatment to our app.
Preset: [name]. Brand colors: [#hex].
Target: [React | SwiftUI].

Tags

WebGPUShaderReactGlassMotionOpen source