What your visitors see when the 3D does not load

A demo is the best case, by construction

When you open a template demo you are looking at it on a machine you chose, on a connection that works, in a browser you keep up to date, with hardware acceleration on. Every one of those is a condition, and your visitors will not all meet them.

For a conventional page that barely matters: worst case the fonts arrive late. For a page whose hero is a live 3D scene it matters a great deal, because there is a version of the page where the scene simply is not there, and what stands in its place was decided by whoever wrote the template — not by you, and not at the moment you find out.

So we read the source of all eighteen templates in this catalogue that render with a WebGL context, looking for one thing: what happens if the 3D library or the graphics context is missing. The answers were not uniform, which is the finding.

Four different answers, in one catalogue

Seventeen of the eighteen check before they draw. One does not — it constructs the renderer at the top of its script with nothing around it, so if the library is absent that line throws and the rest of the page script stops with it. That is a one-line fix in a file you own, and it is exactly the kind of thing nobody finds by looking at a demo.

The seventeen that do check are not equivalent either. They fall into three groups, and the difference between them is the difference between a visitor seeing a designed page and a visitor seeing a blank rectangle.

The first group is the pattern worth knowing by name, because it is cheap and it works. Quarry is one of the nine: a class goes on the root element when the library is missing, the canvas is hidden, and a handful of CSS shapes stand in for the geometry — the banks of the quarry, the waterline, the quay. It is not the scene. It is a composition in the same palette and the same perspective, and a visitor who has never seen the 3D version has no idea anything is missing.

The second group goes further. District wraps its scene construction in a real error path and logs that it is using a canvas fallback; Deck carries a whole second 2D engine and, before that, tries more than one CDN in turn for the library. Two templates out of sixty-two do this. It is more work than most template authors will do, and it is the only approach on this list where the page keeps moving.

The third row is the one to be candid about. Three of our templates fall back to a canvas that draws a short caption describing the fallback — text written for whoever was building the template, not for a visitor. Nobody is likely to see it, because it needs WebGL to be unavailable. Somebody eventually would. If you license one of these, that caption is yours to delete, and the test below will show it to you in about a minute.

The test, on any demo, in five minutes

You do not need the source to find out which of the five behaviours you are buying. Every demo in this catalogue is public, and the browser you already have will tell you.

• Open the demo, then open DevTools and go to the Network panel. Find the request for the 3D or animation library — it is the one coming from a domain that is not the site.

• Right-click it and block the request URL, then reload. What you are now looking at is what a visitor on a network that blocks that CDN sees. Judge it as a first impression, not as a bug report.

• Reload once more with the network throttled to a slow connection. A scene that arrives eight seconds late is a different problem from one that never arrives, and it needs a different answer.

• Set your operating system to reduced motion and reload. The scene should settle rather than keep moving, and nothing you need to read should be waiting on an animation to finish.

• Open it on the cheapest phone you can borrow, not the newest one you own. A 3D scene is the one thing on a website whose cost is paid by the visitor’s hardware.

• Leave the tab, wait a minute, come back. If the machine’s fan is audible, the render loop never stopped.

The first two steps are the ones that reveal what this guide is about. The rest are worth doing anyway, and two of them have reassuring answers in this catalogue.

What is already done for you, counted

Not everything on a launch checklist is your problem. Some of it is decided in the template, and in this catalogue several of those decisions are consistent enough to state as numbers.

The pixel-ratio row is the one that would be easiest to get wrong and is not. A recent phone reports a ratio of three, so a canvas sized naively renders nine times the pixels of the layout area — which is how a scene that is smooth on a laptop becomes a slideshow on a handset. Every template here that reads the ratio also clamps it.

The tab-hidden row explains itself once you see the split. The interactive templates run a continuous loop, so most of them stop it when the page is hidden; a classic template has nothing running to stop. The ten that do not stop are not broken — the browser throttles background animation frames anyway — but on a laptop with twenty tabs it is the difference you can hear.

You are also buying a version number

Every external library reference in this catalogue points at an exact release. Nothing loads a floating “latest” build, which is the failure mode that turns a working site into a broken one overnight without anybody touching it.

What it does mean is that the version is frozen on the day you buy. GSAP appears as 3.12.5 everywhere it appears at all. The 3D library is less uniform: sixteen templates reference release r128, one references 0.160.1 and one 0.169.0. That is three generations of the same library inside one catalogue, and the templates built on the older one were written for its behaviour — one of them notes in its own comments that it leaves colour handling alone because that release is not colour-managed.

The practical consequence is small but worth knowing before you commit: if you ever want to change how the scene looks, you are working inside the version the template was authored against, and upgrading the library underneath a hand-tuned scene is a real piece of work rather than a dependency bump. Whether the library loads from a CDN at all — and why you might want to serve it yourself — is covered in what a website template does not include, and that decision is worth making at the same time as this one.

How this should change what you choose

The useful question is not “is the fallback good”. It is how much the hero has to survive, which depends on who is visiting.

If your audience arrives on corporate networks, on managed devices, on older hardware, or through a government or institutional connection, the hero has to work without its best case, and the fallback stops being a detail. Prefer a template that composes something in its place — or one that needs nothing external at all. Twenty-three of the forty-four interactive templates here load no script from anywhere but themselves; Aperture draws its whole scroll-driven scene on a 2D canvas with no library behind it, which removes this entire category of risk rather than handling it.

If your audience is designers, developers or consumers on their own recent phones, the fallback will almost never run, and spending your choice on it would be optimising for a visitor you do not have. Judge the scene instead, and fix the caption.

And if the page absolutely must render the same thing for everybody, the honest answer is that a live 3D hero is the wrong instrument. The classic templates have no external script and nothing to fall back from; that is the trade they make, and for some sites it is the right one.

What we did not measure

Everything above is read from source, so it describes what the code does, not how fast it does it. We have no field performance data for these templates — no load times, no Core Web Vitals from real visitors — and we have not put numbers on any of it rather than estimate them. The counts tell you which checks exist; only your own device and your own audience tell you whether the result is fast enough.

The eighteen are our own inventory. This is not a survey of how the wider template market handles WebGL fallbacks, and we make no claim about it.