An iridescent glass orb in WebGL 2: soft bands of cyan, violet, magenta and amber turn inside a glassy rim with a notch that travels around its edge, in a seamless 3.6 second loop.
About this tool
A prism orb rendered in real time with WebGL 2 and no library. Bands of cyan, violet, magenta and amber drift inside a glassy rim while a notch travels once around the edge, and the whole look repeats every 3.6 seconds without a visible seam. The motion is stored as a compact colour atlas and blended smoothly between frames, so the orb stays sharp at any size and costs very little to draw. It sits on any stage colour without a grey ring around it, from the default light grey to black or a brand colour. Hue shift recolours the prism, saturation takes it from vivid to monochrome, and size, speed, direction and pause are one control each. Both stage sliders reshape the picture, so a wide hero and a square card both look composed. 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 with the atlas inside it, 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