Premiumowy serwis promocyjny szwajcarskiej manufaktury zegarków

Ekskluzywna interaktywna strona lądowania, zaprojektowana w estetyce dark luxury i cyfrowego minimalizmu. Głównym celem projektu jest przekazanie filozofii powolnego ręcznego składania zegarków poprzez doskonały UX/UI, skomplikowane wieloetapowe animacje przewijania oraz unikalną proceduralną grafikę SVG działającą w czasie rzeczywistym.

Co zostało zrealizowane:
- Proceduralne generowanie zegarków SVG w czasie rzeczywistym: Wszystkie tarcze na stronie są tworzone wyłącznie za pomocą kodu (Vanilla JS + SVG), bez użycia jakiegokolwiek rastrowego obrazu. Główny zegar w bloku Hero synchronizuje się z lokalnym czasem użytkownika, płynnie rysując ruch każdej wskazówki.
- Skomplikowana interaktywna animacja przewijania (Exploded View): Sekcja z mechanizmem zegarka (Movement) wykorzystuje przypięcie ekranu (pinning). Podczas przewijania użytkownik dosłownie "rozbiera" narysowany w kodzie mechanizm zegarka na poszczególne części (zębatki, balans, obudowa), które rozprzestrzeniają się w osi Y z pojawieniem się odpowiednich podpisów.
- Dynamiczna zmiana kolorów (Theme Crossfade): Płynne przejście między "ciemnym" (Dark) a "jasnym" (Paper) motywem w locie podczas przewijania strony. Zrealizowane poprzez manipulację zmiennymi CSS za pomocą ScrollTrigger, aby stworzyć bezszwowe wrażenia wizualne.
- Premium mikrointerakcje i niestandardowy kursor: Własny algorytm kursora z magnetycznym pierścieniem, który płynnie podąża za myszą (używając matematyki lerp) i rozszerza się przy najechaniu na aktywne strefy. Interaktywna przycisk-orbita w sekcji Commission również delikatnie przyciąga się do kursora, dodając interfejsowi fizycznej wagi.
- Atmosferyczny efekt ziarna filmowego (Film Grain): Niestandardowy animowany efekt szumów, stworzony za pomocą filtru SVG (fractalNoise), nałożony na całą stronę przez mix-blend-mode, aby stworzyć drogą "analogową" teksturę bez utraty wydajności (FPS).
- Tematyczny preloader i wskaźnik przewijania: Ekran ładowania i stały wskaźnik postępu przewijania strony stylizowane na minimalistyczne tarcze zegarka z dynamicznymi wskazówkami.
- Matematyczna animacja ruchomych części: Programowo generowane zębatki (gear paths) i sprężyna balansowa, które mają cykliczne animacje CSS/GSAP obrotu i kołysania, imitując prawdziwy ruch mechaniczny (18,000 półkołyszeń na godzinę).
- Dostępność w sieci i optymalizacja: Kod napisany w czystym Vanilla JS. Wdrożono sprawdzenie prefers-reduced-motion: dla użytkowników, którzy wyłączają animacje w systemie, strona automatycznie wyłącza GSAP i pokazuje od razu rozłożony schemat zegarka, pozostając w pełni funkcjonalnym.

Technologie:
HTML5, CSS3 (Zaawansowane zmienne CSS), JavaScript (Vanilla ES6+, Proceduralne generowanie SVG), GSAP (GreenSock), ScrollTrigger, Filtry/Animacje SVG.