Why our homepage 3D turns itself off

There is a WebGL scene behind our homepage headline: a faceted core, six drifting shapes, a sparse point field. It responds to your pointer and drifts as you scroll.

A large share of visitors will never see it, and the site is better for that.

The problem with a 3D hero

A 3D hero is the easiest way to make a landing page look expensive and one of the easiest ways to make it feel cheap. The failure mode is well known: the page takes a second and a half to become useful, the phone gets warm, the battery indicator moves, and a scroll that should be effortless stutters.

The cost is not evenly distributed either. It falls hardest on older phones, cheaper phones, weak connections and metered data — which is to say, disproportionately on the people least able to absorb it.

So the scene is treated as strictly optional. The homepage is complete without it: headline, description, buttons and the CSS gradient field behind them are all server-rendered HTML and CSS, present in the first response. Nothing in the first screen waits for JavaScript.

The five checks

Before the browser fetches a single byte of three.js, five conditions have to pass. Any one of them failing means the 3D never loads.

1. Reduced motion

If your device reports prefers-reduced-motion: reduce, we stop immediately.

This is not a soft preference to be weighed against visual ambition. Someone who has enabled that setting has told the operating system that motion causes them a problem, and vestibular disorders are not a niche concern. It is an instruction, and we treat it as one.

The same setting also disables the splash animation, the scroll reveals, the card hovers and the drifting background orbs across the whole site.

2. Data saver

If the browser reports Data Saver enabled, or a 2G-class connection, we stop. Someone actively conserving data has not opted into a background download for a decorative animation.

3. Screen size

Below 768px we do not load it at all.

This one is worth explaining, because it is a design decision rather than a technical one. On a phone, the hero text occupies nearly the whole viewport. Whatever renders behind it is largely hidden, so the scene would be paying full cost for a fraction of the effect — on the devices least able to afford it. Phones get an animated CSS gradient layer instead, which costs almost nothing and, at that size, looks about as good.

4. Device capability

We read hardwareConcurrency and deviceMemory. Both are advisory and frequently undefined, so only an explicitly low value disqualifies a device — fewer than four cores, or less than 4GB of reported memory. An unknown value is treated as capable, because guessing pessimistically would disable the scene for most of Safari.

5. Actual WebGL support

Finally we create a canvas and try to obtain a context. Not a user-agent check — an actual attempt. If it fails, we stop.

What happens after the checks pass

Passing all five earns the scene a chance to load, not an immediate load.

The import waits for the load event, then waits again for requestIdleCallback with a 2.2 second timeout. In other words, it fetches only once the browser has finished everything that matters and is genuinely idle. three.js also sits in its own build chunk, so it never appears in any other page’s JavaScript.

When it does arrive, it fades in over 900ms. There is no layout shift, because the canvas has been sitting in the layout at its final size the whole time.

What happens while it runs

Three constraints keep it cheap:

It stops when it is not visible. An IntersectionObserver pauses the render loop the moment the canvas leaves the viewport, and a visibilitychange handler pauses it when you switch tabs. An idle WebGL loop burning a core in a background tab is one of the most common ways these heroes wreck battery life, and it is entirely avoidable.

Pixel ratio is capped at 1.75. Rendering at a phone’s or a modern laptop’s full device pixel ratio can mean four times the fragment work for a difference nobody can see on a soft-focus background.

The scene is small. One icosahedron, a wireframe shell, six low-poly satellites, 260 points, three lights. No textures, no environment map, no post-processing. Those are what turn a “premium 3D hero” into four megabytes.

And it can turn itself off mid-session

If you switch reduced motion on while the page is open, a media query listener tears the whole scene down — cancels the loop, removes every listener and observer, disposes the geometries, materials and the renderer — and the CSS layer underneath is already there.

The general principle

Decoration should degrade, and it should degrade toward the content rather than away from it.

The test we hold ourselves to is simple: if every enhancement failed to load, would the page still do its job? On the homepage the answer is yes. You would get the headline, the description, the buttons, a gradient and a grid, and you would probably not notice anything was missing.

Everything above that line is a bonus that has to earn its place on each individual visit. Most of the time it does. Sometimes it does not, and the right behaviour then is to quietly not happen.

If you want to see the difference, turn on Reduce Motion in your device’s accessibility settings and reload the homepage. It is a different page, and it is still a good one.