How lersent001/orb works
Liquid Orb Editor is a browser-based editor for animated liquid-glass orbs. Users choose a preset, adjust its parameters, preview the result as an orb or in a scene, and share configurations through the URL hash or export standalone Web and SwiftUI/Metal code. The core runtime maps editor state into WebGPU rendering; optional local audio modulates supported presets. The README documents these capabilities, while the sampled source confirms the app entry point, renderer setup, and audio handoff; some internal wiring is described only at the subsystem level.
Main entry points: App.tsx Editor app · orb-renderer.ts WebGPU renderer · AudioControls.tsx Audio controls · code-export.ts Code exporters
Components 17
Editor experience
- Editor app
src/App.tsx - Audio controls
src/AudioControls.tsx - Editor localization
src/editor-i18n.ts - React entry point
src/main.tsx
Orb state
- Preset definitions
src/presets.ts - State transitions
src/orb-states.ts - GPU parameter mapping
src/orb-uniforms.ts
Rendering runtime
- WebGPU renderer
src/orb-renderer.ts - Shader source
src/shader-source.ts - Particle ribbon
src/particle-ribbon.ts - Audio response
src/orb-audio.ts
Sharing and exports
- Code exporters
src/code-export.ts
UI foundation
- Toolcraft UI
src/toolcraft/ui/components
Other components
- Editor user
- WebGPU device
- Local audio input
- Browser URL hash
Connections 19
- Editor user → Editor app: edits settings
- React entry point → Editor app: renders
- Editor app → Preset definitions: selects preset
- Editor app → State transitions: resolves state
- Editor app → WebGPU renderer: creates renderer
- Editor app → Audio controls: configures audio
- Editor app → Editor localization: localizes UI
- Editor app → Toolcraft UI: renders controls
- Editor app → Browser URL hash: reads and writes
- Editor app → Code exporters: requests export
- Local audio input → Audio controls: provides audio
- Audio controls → Audio response: supplies bands
- WebGPU renderer → Audio response: reads modulation
- WebGPU renderer → State transitions: uses parameters
- WebGPU renderer → GPU parameter mapping: maps parameters
- WebGPU renderer → Shader source: uses shader
- WebGPU renderer → Particle ribbon: renders ribbon
- WebGPU renderer → WebGPU device: submits rendering
- Code exporters → Preset definitions: exports parameters