Ortyx Orbital — 3D animation that doesn’t slow the site down

The idea

3D animation has a reputation as a performance killer: a heavy library, a long load, choppy scrolling and a red Lighthouse score. Ortyx Orbital is a demo built to show it doesn’t have to be that way.

It is the landing page of a fictional company building a constellation of small observation satellites. A three.js satellite flies across the first screen, and in the Anatomy section it comes apart into modules as you scroll. Below is a globe with orbits and 14 ground stations, then the missions in a pinned horizontal scroll.

The page first, then the 3D

The first screen doesn’t wait for the scene. The largest element Lighthouse measures (LCP) is the heading in the HTML, and the styles are inlined in the page. The fonts, cut down to Latin with Polish letters, weigh 63 KB together.

three.js (150 KB) is a separate file. It loads only after the page has loaded, when the browser is idle, and not at all with data saving on. The scene is built in short pieces, and the shaders compile before the first frame appears. That is why loading the 3D never blocks clicks or scrolling.

Without a GPU, on a virtual machine or in some automated tests for example, the browser would compute the scene on the CPU at a few frames a second. The page checks for that in a separate thread and then shows still renders of the satellite and the globe, made from the same scene, instead of the 3D.

Smoothness

Scrolling, the GSAP animations and the scene’s render all run on one clock. Lenis smooths the scrolling, ScrollTrigger only writes progress from 0 to 1, and the scene reads it in the same frame and smooths it itself.

When frames take longer than 24 ms on average, the scene lowers its render resolution instead of dropping frames. When another section covers the satellite, rendering stops. On phones the scene is lighter: no antialiasing, 700 stars instead of 1,500 and sparser dots on the globe.

Accessibility

Motion can be stopped with a button in the header (WCAG 2.2.2), and the choice is remembered. With “reduce motion” on, the satellite changes state in one step, without animation, and scrolling stays native. All the content is in the HTML, and the canvas is hidden from screen readers. The globe works with a keyboard, and the stations are buttons with a card that announces the chosen one.

The result

Lighthouse on desktop (measured on 2 November 2026): 100 for performance, accessibility, best practices and SEO. LCP 0.4 s, blocking time 0 ms, layout shift 0. In the mobile simulation, performance is 99–100. On first load, the home page downloads about 300 KB, half of it three.js.

The content (sections, satellite parts, stations and missions) lives in Sanity, in Polish and English. The contact form saves messages in a separate, private dataset.