Lumière to projekt webowy zbudowany wokół jednej idei: że strona internetowa może być środowiskiem, a nie dokumentem. To portfolio prac z zakresu projektowania i programowania — przestrzeń, w której światło, ruch i kod tworzą razem coś bliższego doświadczeniu niż zwykłej stronie.Lumière to projekt webowy zbudowany wokół jednej idei: że strona internetowa może być środowiskiem, a nie dokumentem. To portfolio prac z zakresu projektowania i programowania — przestrzeń, w której światło, ruch i kod tworzą razem coś bliższego doświadczeniu niż zwykłej stronie.
Strona otwiera się w ciemności. Fotorealistyczny model 3d lampy wisi w trójwymiarowej przestrzeni, renderowane w czasie rzeczywistym przy użyciu WebGL i React Three Fiber. W trakcie scrollowania zapalają się — powoli zalewając ekran ciepłym światłem, aż całe tło staje się białe. To nie jest efekt dla efektu. Chwila przybycia na stronę ma znaczenie równie duże, jak wszystko co następuje po niej.Strona otwiera się w ciemności. Fotorealistyczny model 3d lampy wisi w trójwymiarowej przestrzeni, renderowane w czasie rzeczywistym przy użyciu WebGL i React Three Fiber. W trakcie scrollowania zapalają się — powoli zalewając ekran ciepłym światłem, aż całe tło staje się białe. To nie jest efekt dla efektu. Chwila przybycia na stronę ma znaczenie równie duże, jak wszystko co następuje po niej.
WarsztatWarsztat
Każda warstwa Lumière została zaprojektowana ze świadomą intencją. Scena 3D jest w pełni interaktywna i zoptymalizowana wydajnościowo — działa w 60 klatkach na sekundę bez kompromisów w czasie ładowania, dzięki dynamicznym importom, lazy loadingowi i precyzyjnemu zarządzaniu zasobami. GSAP ScrollTrigger steruje choreografią opartą na scrollu, synchronizując animacje między sekcjami z dokładnością co do klatki. Tekst rozkłada się na pojedyncze litery i animuje kaskadowo. Zdjęcia wyłaniają się z ciemności wraz z ruchem kursora. Natywny element canvas rysuje świetlisty ślad w czasie rzeczywistym — z użyciem krzywych Béziera i gradientów radialnych — gdy użytkownik eksploruje sekcję Works.Każda warstwa Lumière została zaprojektowana ze świadomą intencją. Scena 3D jest w pełni interaktywna i zoptymalizowana wydajnościowo — działa w 60 klatkach na sekundę bez kompromisów w czasie ładowania, dzięki dynamicznym importom, lazy loadingowi i precyzyjnemu zarządzaniu zasobami. GSAP ScrollTrigger steruje choreografią opartą na scrollu, synchronizując animacje między sekcjami z dokładnością co do klatki. Tekst rozkłada się na pojedyncze litery i animuje kaskadowo. Zdjęcia wyłaniają się z ciemności wraz z ruchem kursora. Natywny element canvas rysuje świetlisty ślad w czasie rzeczywistym — z użyciem krzywych Béziera i gradientów radialnych — gdy użytkownik eksploruje sekcję Works.
Sekcja LightStudy tworzy iluzję ruchomego reflektora: okrągła maska podąża za kursorem, odsłaniając jasną wersję wnętrza ukrytą pod ciemną powierzchnią. Nawigacja odczytuje tło, nad którym się unosi, i dynamicznie zmienia swój kolor — biały na ciemnym, ciemny na jasnym — detal, którego większość odwiedzających nigdy świadomie nie zauważy, ale natychmiast by poczuła jego brak. Sekcja LightStudy tworzy iluzję ruchomego reflektora: okrągła maska podąża za kursorem, odsłaniając jasną wersję wnętrza ukrytą pod ciemną powierzchnią. Nawigacja odczytuje tło, nad którym się unosi, i dynamicznie zmienia swój kolor — biały na ciemnym, ciemny na jasnym — detal, którego większość odwiedzających nigdy świadomie nie zauważy, ale natychmiast by poczuła jego brak.
Typografia oparta jest na Cormorant Garamond italic. Kontrast między delikatnymi kreskami liter a kinematograficzną ciemnością tła nie jest przypadkowy.Typografia oparta jest na Cormorant Garamond italic. Kontrast między delikatnymi kreskami liter a kinematograficzną ciemnością tła nie jest przypadkowy.
Lumière to technicznie zaawansowany projekt na poziomie Awwwards. Łączy niezwykle bogate efekty wizualne — rendering 3D, rysowanie na Canvas, maskowanie, złożoną manipulację DOM — z bezkompromisową optymalizacją: dynamiczne importy, czyszczenie listenerów i wstrzymywanie rAF poza widokiem. Efektem jest doświadczenie płynne, niemal kinematograficzne. Lumière to technicznie zaawansowany projekt na poziomie Awwwards. Łączy niezwykle bogate efekty wizualne — rendering 3D, rysowanie na Canvas, maskowanie, złożoną manipulację DOM — z bezkompromisową optymalizacją: dynamiczne importy, czyszczenie listenerów i wstrzymywanie rAF poza widokiem. Efektem jest doświadczenie płynne, niemal kinematograficzne.
PodejściePodejście
To jest standard, który stosuję przy każdym projekcie. Niezależnie od tego, czy brief dotyczy portfolio, landing page'a czy cyfrowej wizytówki — proces jest ten sam: zrozumieć osobę, zdefiniować odczucie, zbudować z precyzją. Bez szablonów. Bez skrótów. Bez szczegółów pozostawionych przypadkowi.To jest standard, który stosuję przy każdym projekcie. Niezależnie od tego, czy brief dotyczy portfolio, landing page'a czy cyfrowej wizytówki — proces jest ten sam: zrozumieć osobę, zdefiniować odczucie, zbudować z precyzją. Bez szablonów. Bez skrótów. Bez szczegółów pozostawionych przypadkowi.
Zacznijmy współpracęZacznijmy współpracę
Jeśli potrzebujesz strony, która nie tylko istnieje — ale przyciąga uwagę, komunikuje charakter i pozostawia wrażenie — napisz do mnie. Luźny pomysł w zupełności wystarczy.Jeśli potrzebujesz strony, która nie tylko istnieje — ale przyciąga uwagę, komunikuje charakter i pozostawia wrażenie — napisz do mnie. Luźny pomysł w zupełności wystarczy.
