Morphing Orb (WebGL)
Three.js particle animation with real 3D rendering. Seventeen parametric shapes crossfade through a staggered per-dot wave, each with its own flowing color. Hover to speed up; move the cursor over the interactive orb to repel dots. Respects reduced-motion.
Large (500px)
Full detail with 3D lighting and pointer repel
Monochrome
Color · interactive
Size Variants
Responsive sizing from 200px to 64px
Medium (200px)
Small (64px)
Tiny (32px)
Color Modes
Different strategies for assigning colors to dots
Sequential
Colors follow dot creation order
Spatial
Colors based on 3D position
Shuffled
Palette shuffled for contrast
Note: WebGL has a browser limit of ~8-16 simultaneous contexts. This page uses lazy loading to only initialize canvases when scrolled into view.