A 3D element in the hero without destroying performance

A 3D scene at the top of a page is an expensive decision. It adds a heavy library, it costs CPU, and it depends on support that will not exist for everyone.

I decided it stays. Four constraints came with that decision, and none of them ever gets broken.

Constraint one: the performance-critical element is something else

The largest visible element on load must be text or a logo. The loading speed metric records the moment the largest element appears, and if the scene holds that title, your score is hostage to the visitor's graphics card.

Constraint two: deferred loading

The scene loads after the page, on its own schedule. The full page is readable and usable before any part of it arrives.

Constraint three: a non-graphical fallback

Not every device supports graphics acceleration, and some environments disable it. Those visitors get a static element that carries the same visual meaning; the area never renders blank.

Constraint four, the one always forgotten: respect reduced motion

Someone who enables "reduce motion" has a reason: vertigo, say, or migraines, and for some people a general sensitivity to motion. Respect is not softening the movement, it is stopping it, then showing the final state directly.

What I animate and what I do not

Transform and opacity, nothing else. The browser runs both on the graphics card without recomputing layout. Animating dimensions or positions forces it to recalculate the page on every frame.

The question I ask before any scene

What does the visitor understand because of it that they would not have understood without it?

If the answer is "nothing, but it is beautiful", the price is page speed. Mine survived the question because it carries the identity itself. In other places the scene was pure decoration, so I removed it.

Related reading