A liquid glass orb in WebGL 2: its rippled skin splits light into thin rainbow lines, with soft reflections moving inside, in a slow motion that never visibly repeats.
About this tool
A liquid glass drop rendered in real time with WebGL 2 and no library. The orb is ray-marched as a true 3D surface with travelling ripples, and light passes through both sides of the glass at six wavelengths, so the ripples fan a studio light into fine rainbow fringes. A thin-film layer puts oil-slick colour on the rim, and one extra bounce off the back wall carries the soft reflections you see moving inside it. The motion is a set of slow, independent oscillations, so the drop breathes and wobbles without ever visibly repeating; a loop mode closes the same motion on an exact eight second cycle for clips. Ripple depth, rainbow split, rim iridescence and inner reflections are one slider each, alongside size, speed and pause, and the orb sits on any stage colour from the default light grey to black. Both stage sliders reshape the picture while deep ripples still stay inside the frame. The engineering holds up in a real page: drawing pauses when the orb is off screen or the tab is hidden, reduced motion holds a still frame, the canvas only appears once its first frame is ready, and browsers without WebGL 2 get a plain message instead of a broken canvas. The export is one HTML file, or a Svelte or React component.
In collections: Holographic & Iridescent Effects· Animated Orbs: AI, Siri & Voice Orb Animations
UI/UX · HTML / CSS / JS · All tools