Преміальний промо-сайт швейцарської годинникової мануфактури

Ексклюзивний інтерактивний лендінг, розроблений в естетиці dark luxury та цифрового мінімалізму. Головна мета проєкту - передати філософію повільної ручної збірки годинників через бездоганний UX/UI, складні багатоетапні скрол-анімації та унікальну процедурну SVG-графіку, що працює в реальному часі.

Що реалізовано:
- Процедурна генерація SVG-годинників у реальному часі: Усі циферблати на сайті створені виключно за допомогою коду (Vanilla JS + SVG), без використання жодного растрового зображення. Головний годинник у Hero-блоці синхронізується з локальним часом користувача, плавно відмальовуючи рух кожної стрілки.
- Складна інтерактивна скрол-анімація (Exploded View): Секція з механізмом годинника (Movement) використовує закріплення екрана (pinning). Під час скролу користувач буквально "розбирає" відмальований у коді калібр годинника на окремі деталі (шестерні, балансир, корпус), які розлітаються по осі Y із появою відповідних підписів.
- Динамічна зміна кольорових тем (Theme Crossfade): Плавний перехід між "темною" (Dark) та "світлою" (Paper) темами на льоту під час прокручування сторінки. Реалізовано через маніпуляцію CSS-змінними за допомогою ScrollTrigger для створення безшовного візуального досвіду.
- Преміальні мікроінтеракції та кастомний курсор: Власний алгоритм курсору з магнітним кільцем, яке плавно слідує за мишею (використовуючи математику lerp) і розширюється при наведенні на активні зони. Інтерактивна кнопка-орбіта у секції Commission також м'яко притягується до курсору, додаючи інтерфейсу фізичної ваги.
- Атмосферний ефект плівкового зерна (Film Grain): Кастомний анімований ефект шуму, створений через SVG-фільтр (fractalNoise), який накладено поверх усього сайту через mix-blend-mode для створення дорогої "аналогової" текстури без втрати продуктивності (FPS).
- Тематичний прелоадер та скрол-індикатор: Екран завантаження та фіксований індикатор прогресу прокрутки сторінки стилізовані під мінімалістичні циферблати годинника з динамічними стрілками.
- Математична анімація рушійних частин: Програмно згенеровані шестерні (gear paths) та балансирна пружина, які мають зациклені CSS/GSAP анімації обертання та коливання, імітуючи справжній механічний рух (18,000 напівколивань на годину).
- Web Accessibility та оптимізація: Код написаний на чистому Vanilla JS. Впроваджено перевірку prefers-reduced-motion: для користувачів, які відключають анімації в системі, сайт автоматично відключає GSAP і показує відразу розібрану схему годинника, залишаючись повністю функціональним.

Технології:
HTML5, CSS3 (Advanced CSS Variables), JavaScript (Vanilla ES6+, Procedural SVG Generation), GSAP (GreenSock), ScrollTrigger, SVG Filters/Animations.