A dark metal orb covered in 14,000 rounded spikes in three.js, its lobes flowing and morphing in a seamless 2 second loop under a dark studio light.
About this tool
A spiked metal orb rendered in real time with three.js. Fourteen thousand short rounded studs cover a soft, lobed sphere, and the lobes flow across the surface in a loop that repeats every 2 seconds without a visible seam; every stud follows the deforming surface. The look is a dark studio: the face of the orb stays almost black with a dim lattice of stud tips, and light only wraps the silhouette and the slopes of the lobes. All of it runs on the GPU in one draw call, with physically based gunmetal shading and a custom studio environment. Spike count, spike length, lobe depth and lobe scale reshape the orb; metal colour, roughness, studio light and edge glow restyle it; speed and morph set the motion, and both stage sliders reshape the frame for a hero or a card. Visitors can drag the orb to turn it, or use the arrow keys, and space pauses it. 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, resolution adapts to slower devices, and browsers without WebGL get a plain message instead of a broken canvas. The export is one HTML file, or a Svelte or React component.
In collections: Animated Orbs: AI, Siri & Voice Orb Animations
UI/UX · HTML / CSS / JS · All tools