Interaktywna wystawa cyfrowa
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.
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ę, karta pustoszałaby przed końcem animacji.
Podsumowanie
Noctis Archive pokazuje umiejętność pracy na styku kilku środowisk wykonawczych jednocześnie: pętla renderowania WebGL, silnik animacji, model reaktywny i silnik smooth scroll muszą być zsynchronizowane bez wzajemnego blokowania.
Twój biznes może być
moją kolejną realizacją
Umów bezpłatną konsultację i sprawdźmy wspólnie, co mogę dla Ciebie zrobić.
Bezpłatna konsultacja, bez zobowiązań