WebGL on Marketing Sites Without Killing Performance

The quantum globe on our own homepage is 22,000 particles in a single draw call. Simplex-noise displacement and colour cycling run entirely in a custom shader, and bloom is added in one post-processing pass. It looks rich, and it costs very little to run.

Rules we follow

• Render the canvas on the client only, and show a CSS fallback until it is ready.
• Cap the DPR at 2 and pause rendering when the canvas is off-screen.
• Respect prefers-reduced-motion by switching off scroll-scrubbed animation.
• Use shaders and instancing instead of thousands of separate meshes.
• Ship a lighter pipeline on phones: fewer particles, no depth of field, no drag-to-orbit.