Ortyx Orbital — animacje 3D, które nie spowalniają strony

Założenie

Animacje 3D mają opinię zabójcy wydajności: ciężka biblioteka, długie ładowanie, przycięte przewijanie i czerwony wynik w Lighthouse. Ortyx Orbital to demo, które miało pokazać, że da się inaczej.

To landing fikcyjnej firmy, która buduje konstelację małych satelitów obserwacyjnych. Satelita z three.js przelatuje przez pierwszy ekran, a w sekcji „Anatomia” rozkłada się na moduły w rytm przewijania. Niżej jest globus z orbitami i 14 stacjami naziemnymi, a potem misje w poziomym, przypiętym przewijaniu.

Najpierw strona, potem 3D

Pierwszy ekran nie czeka na scenę. Największy element, który mierzy Lighthouse (LCP), to nagłówek w HTML, a style są wpisane w stronę. Fonty, przycięte do liter łacińskich z polskimi, ważą razem 63 KB.

three.js (150 KB) to osobny plik. Ładuje się dopiero po wczytaniu strony, w wolnej chwili przeglądarki, a przy włączonym oszczędzaniu danych wcale. Scena buduje się w krótkich kawałkach, a shadery kompilują się, zanim pojawi się pierwsza klatka. Dlatego wczytywanie 3D nie blokuje kliknięć ani przewijania.

Bez karty graficznej, na przykład na maszynie wirtualnej albo w części testów automatycznych, przeglądarka liczyłaby scenę na procesorze, w kilku klatkach na sekundę. Strona sprawdza to w osobnym wątku i wtedy zamiast 3D pokazuje statyczne rendery satelity i globusa, zrobione z tej samej sceny.

Płynność

Przewijanie, animacje GSAP i render sceny chodzą na jednym zegarze. Lenis wygładza przewijanie, ScrollTrigger zapisuje tylko postęp od 0 do 1, a scena czyta go w tej samej klatce i sama go wygładza.

Gdy klatki trwają średnio dłużej niż 24 ms, scena obniża rozdzielczość renderu, zamiast gubić klatki. Gdy satelitę przykrywa inna sekcja, render się zatrzymuje. Na telefonie scena jest lżejsza: bez wygładzania krawędzi, z 700 gwiazdami zamiast 1500 i z rzadszymi punktami na globusie.

Dostępność

Ruch można zatrzymać przyciskiem w nagłówku (WCAG 2.2.2), a wybór zostaje zapamiętany. Przy ustawieniu „ogranicz ruch” satelita zmienia stan skokowo, bez animacji, a przewijanie zostaje natywne. Cała treść jest w HTML, a canvas jest ukryty przed czytnikami ekranu. Globus obsługuje się klawiaturą, a stacje to przyciski z kartą, która ogłasza wybraną stację.

Wynik

Lighthouse na komputerze (pomiar z 2 listopada 2026): 100 za wydajność, dostępność, dobre praktyki i SEO. LCP 0,4 s, blokowanie wątku 0 ms, przesunięcia układu 0. W symulacji telefonu wydajność wynosi 99–100. Przy wejściu strona główna pobiera około 300 KB, z czego połowa to three.js.

Treść (sekcje, części satelity, stacje i misje) jest w Sanity, po polsku i angielsku. Formularz kontaktowy zapisuje wiadomości w osobnym, prywatnym zbiorze danych.