The background of this website is a live 3D scene: up to 90,000 particles that form our logo, a globe, a bridge, a laptop, a phone, gears and code as you scroll. It also scores between 97 and 99 out of 100 for mobile performance on every page in Google Lighthouse. This is how.
Where we started
Our first version looked great on laptops. On a simulated low-end phone, the inner pages scored around 68, and the phone was busy for three to four seconds after loading, ignoring taps while it drew the scene. Visitors on cheaper phones would have tapped a button and seen nothing happen.
Fixing this did not mean removing the 3D. It meant treating every device differently.
1. The page comes first, the 3D comes second
Text, images and buttons are ordinary HTML that the browser shows immediately. The 3D code (about 140 KB compressed) is only downloaded after the page has finished loading and the browser is idle. On phones we wait a little longer, so the first taps and scrolls always respond instantly.
Until the scene is ready, visitors see a light static version of our logo, so nothing jumps or flashes when the 3D fades in.
2. Weak devices never download the 3D at all
Before loading anything, the site checks a few signals the browser already provides:
- Devices that report 2 GB of memory or less
- Devices with only one or two processor cores
- Visitors who have switched on Data Saver
- Very slow connections
- Visitors who have asked their device to reduce motion
These visitors get the light static background. They never pay for code they cannot run smoothly.
3. Three quality levels, chosen per device
Devices that do get the 3D are sorted into three levels based on memory, processor cores and the graphics chip:
| Level | Particles | Screen sharpness | Mouse effects |
|---|---|---|---|
| High (desktops, strong laptops) | 90,000 | Up to 2× | On |
| Medium (most phones and laptops) | 40,000 | Up to 1.5× | On |
| Low (older devices) | 16,000 | 1× | Off, capped at 30 frames per second |
If a device has no real graphics chip and the browser falls back to drawing 3D with the processor, the site skips the scene entirely. That fallback is the main cause of frozen pages on budget phones.
4. The scene watches its own frame rate
Labels like “medium” are only a guess. While the scene runs, it measures how long each frame takes. If frames are consistently slow, it removes about 30% of the particles and makes the rest slightly larger so the shape still reads clearly. If that is not enough, it lowers the screen sharpness.
If the device still cannot keep up at the lowest setting, the scene stops itself and fades back to the static background. Scrolling stays smooth no matter what.
5. All the movement happens on the graphics chip
Every particle has its position in all eight shapes stored once, when the page loads. Morphing between shapes, the scroll swirl and the click shockwave are calculated by the graphics chip in a small shader program, not by JavaScript. The main processor only updates a handful of numbers each frame, which leaves it free to respond to the visitor.
The scene also pauses completely when the browser tab is hidden.
6. Everything else on the page is light too
The 3D was not the only cost. Our client logos were 460 KB of PNG images; converted to WebP at the size they are actually shown, they are 63 KB. Fonts are preloaded, so text appears in its final font sooner. Code and fonts are cached by the browser for a year, and the next page is fetched as soon as a visitor shows intent to click.
The result
| Measurement (simulated slow phone) | Before | After |
|---|---|---|
| Lighthouse performance, inner pages | 68 to 69 | 97 to 99 |
| Time the page ignores taps while loading | 3 to 4 seconds | 0 to 40 milliseconds |
| Main content visible | About 2 seconds | About 2 seconds |
Accessibility and SEO score 100 on every page, because the content never depended on the 3D in the first place.
What this means for your project
A 3D website does not have to be slow. It has to be planned for the slowest device your customers use, not the fastest one your designer owns. When we build a 3D site, the light fallback and the performance budget are part of the design from day one, not something added after launch.
If you are weighing up whether 3D is right for you at all, read 3D website vs normal website, or see our 3D website development service.
