Noctis Archive: Digital Exhibition
Wystawa, po której zwiedza się przewijaniem
To projekt demonstracyjny, nie wdrożenie u klienta. Zbudowałem go, żeby pokazać ten mechanizm w działaniu.
W skrócie
Dla kogo
Marki, dla których sposób pokazania produktu jest częścią produktu: galerie, studia projektowe, architekci, producenci mebli.
Problem
Siatka kart ze zdjęciami wygląda tak samo u wszystkich i nie zatrzymuje nikogo dłużej niż na kilka sekund.
Co to zmienia
Przewijanie strony steruje kamerą w scenie 3D, więc zwiedzanie odbywa się tym samym gestem, którego użytkownik używa wszędzie indziej. Nie trzeba niczego tłumaczyć ani uczyć.
Wystawa, po której zwiedza się przewijaniem
Noctis Archive rozwiązuje konkretny problem prezentacyjny: jak pokazać portfolio projektów motion/3D w formie, która sama w sobie jest dowodem kompetencji. Zamiast siatki kart ze statycznymi miniaturami, użytkownik wchodzi w trójwymiarową scenę złożoną z sześciu proceduralnych brył geometrycznych, każda reprezentuje osobny projekt. Interfejs nie oddziela treści od formy: sama nawigacja po stronie jest demonstracją umiejętności, które strona opisuje.
Co z tego wynika dla Twojej firmy
To najdroższy koniec skali i powiem wprost: taka strona ma sens tylko wtedy, gdy samo wrażenie jest częścią tego, co sprzedajesz. Dla gabinetu, warsztatu czy biura rachunkowego byłaby wydatkiem bez pokrycia i odradzałbym ją na pierwszej rozmowie. Pokazuję ją, bo warto wiedzieć, gdzie kończą się możliwości przeglądarki.
DLA ZAINTERESOWANYCH TECHNICZNIE Na czym to zbudowałem i dlaczego akurat tak. Kliknij, żeby rozwinąć.
Stack technologiczny
React 18 + Vite 5
Fundament projektu. Vite eliminuje konfiguracyjny narzut webpack i dostarcza HMR w czasie poniżej 500ms, co jest istotne przy iterowaniu nad shaderami i timingiem animacji.
React Three Fiber (@react-three/fiber)
Deklaratywna warstwa nad Three.js. useFrame uruchamia logikę renderowania bez wywoływania re-renderów Reacta, pozycje obiektów i wartości uniformów shadera mutowane bezpośrednio w pętli RAF.
Drei (@react-three/drei)
AdaptiveDpr dynamicznie obniża devicePixelRatio gdy fps spada poniżej progu, AdaptiveEvents optymalizuje obsługę eventów wskaźnika. Razem zapewniają płynność sceny bez stałego obniżania jakości.
Autorski GLSL ShaderMaterial
Fragment shader łączy efekt Fresnela w world-space, animowane linie skanowania zależne od uTime, oraz shimmer siatki oparty na pochodnych współrzędnych UV. Glow na hover sterowany uniformem uGlow, lerp-owany co klatkę w useFrame.
GSAP 3 + ScrollTrigger
Sekwencje wejściowe (staggerowane z overflow:hidden) oraz przejście 3D→flat (gsap.to camera.position z power3.in). ScrollTrigger w trybie scrub:2, pozycja kamery jest pochodną fizycznej pozycji scrolla.
Lenis 1.x + Zustand
Lenis zastępuje natywny scroll inercyjnym modelem fizycznym. Zustand z subscribeWithSelector do subskrypcji selektywnej poza drzewem React, kamera resetuje pozycję reagując na state.activeProject === null.
Najciekawsze rozwiązania techniczne
Architektura przejścia 3D → flat z podwójnym Canvas
Kliknięcie kapsułki uruchamia sekwencję GSAP wciskającą kamerę w kierunku obiektu. W overlaye pojawia się drugi, izolowany Canvas renderujący tę samą bryłę z wyższą rozdzielczością i własnym oświetleniem. Dwa niezależne WebGL contexty działają równolegle.
Zero-allocation render loop
THREE.Vector3 do interpolacji skali tworzony raz przez useMemo i mutowany przez .set() w każdej klatce. Bez tej optymalizacji GC obsługiwałby ~360 alokacji/s (60fps × 6 mesh). Wzorzec charakterystyczny dla środowisk real-time.
Overlay zawsze zamontowany: GSAP jako silnik stanu widoczności
ProjectOverlay nigdy nie jest odmontowywany. GSAP przełącza display:flex/none. lastProject ref przechowuje dane przez cały czas trwania animacji wyjścia, gdyby komponent unmountował się, zawartość karty zniknęłaby przed końcem animacji wyjścia.
Twoja firma może być
moim kolejnym projektem
Opowiedz mi o swojej firmie, a powiem, który z tych mechanizmów miałby u Ciebie sens, a który byłby wydatkiem bez pokrycia.
Powiem też, czego nie warto u Ciebie robić