Particle globe hero

A portable copy of a hero from a live production landing page. Everything in assets/ is that site’s production code with its own content taken out, so copy it rather than rewriting it. It already covers the lazy-loading, reduced-motion, touch and resize edge cases that hand-written versions usually miss.

What it does

1. Entrance: 16k particles (8k on phones) start blown outward and gather into a slowly turning globe in 1.8 s.
2. Cursor scatter (mouse/trackpad only): particles within about 110 px of the pointer slide away and brighten. The globe yaws and pitches slightly toward the cursor. All of this happens in the vertex shader, so it costs nothing on the CPU.
3. Scroll fly-through (screens ≥ 48rem wide and ≥ 35rem tall, motion allowed): the stage pins for 160svh. The copy fades up and out, the globe glides to the centre, optional satellites appear inside it, the camera flies through the shell into a starfield, and a second headline fades in. Spin speeds up with scroll velocity.
4. Everywhere else (phones, short screens): the turning, cursor-free globe with normal scrolling.
5. Reduced motion: one still, assembled globe, redrawn only on resize. No JS: plain stacked copy.