Morpho's particle globe

Morpho's homepage opens with thousands of glowing dots that rush in from nowhere, settle into a slowly turning sphere, and scatter under your cursor. It looks like a video. It isn't - it's drawn live in the browser, every dot, every frame. I pulled it apart and rebuilt it from scratch. Here's the recreation, then the three pieces of technology that make it work.

WebGL draws it, not the DOM

The whole globe is a single <canvas> running WebGL2, the browser's low-level graphics API. There's no video, no image, no thousand <div>s. Every dot is a point handed straight to the GPU, and the entire sphere - roughly ten thousand particles - is painted in one draw call. That's the reason it stays smooth: the graphics card does the work in parallel instead of the page managing each element one at a time.

Shaders give it the look

The color, the glow, the sense that the middle is hollow - none of that is CSS. It comes from shaders: tiny programs that run on the GPU and decide the size and color of every point individually, on every frame. The drifting, nebula-like shimmer across the surface is generated with noise - the same mathematical technique games use for clouds and terrain - so the sphere never looks like a flat field of identical dots.

A tiny simulation gives it life

Nobody keyframed these dots. Each particle just follows a few simple rules - a bit of drift, some damping, a pull toward where it belongs - and organic behavior emerges from running those rules across thousands of points at once. The opening "rush in and condense," the lazy rotation, the ripple when you move your mouse: all of it falls out of the same handful of lines.

// One particle's whole personality: start far away, ease home every frame.
r = rand(80, 200)                    // seeded way out in space
r = damp(r, restingRadius, rate, dt) // pulled toward the sphere each frame
// Do this for ~10,000 points and the globe assembles itself.

And it behaves itself

The last part is manners. The effect scales down on high-density screens instead of rendering four times the pixels, it falls back to a plain background when WebGL isn't available, and it holds completely still for anyone who has prefers-reduced-motion turned on. Fancy shouldn't mean inconsiderate.

That's the entire trick. No 3D engine, no heavy library - just WebGL to draw, shaders to style, and a small simulation to move. Three ideas, one canvas, and a globe that feels alive.