Premium promotional website for a Swiss watch manufacturer
Exclusive interactive landing page designed in the aesthetics of dark luxury and digital minimalism. The main goal of the project is to convey the philosophy of slow handcrafted watch assembly through impeccable UX/UI, complex multi-stage scroll animations, and unique procedural SVG graphics that operate in real time.
What has been implemented:
- Procedural generation of SVG watches in real time: All dials on the site are created exclusively using code (Vanilla JS + SVG), without the use of any raster images. The main clock in the Hero block is synchronized with the user's local time, smoothly rendering the movement of each hand.
- Complex interactive scroll animation (Exploded View): The section with the watch mechanism (Movement) uses screen pinning. During scrolling, the user literally "disassembles" the coded watch caliber into separate parts (gears, balance wheel, case), which scatter along the Y-axis with the appearance of corresponding labels.
- Dynamic color theme change (Theme Crossfade): Smooth transition between "dark" (Dark) and "light" (Paper) themes on the fly during page scrolling. Implemented through manipulation of CSS variables using ScrollTrigger to create a seamless visual experience.
- Premium micro-interactions and custom cursor: A custom cursor algorithm with a magnetic ring that smoothly follows the mouse (using lerp math) and expands when hovering over active areas. The interactive orbit button in the Commission section also gently attracts to the cursor, adding physical weight to the interface.
- Atmospheric film grain effect: A custom animated noise effect created through an SVG filter (fractalNoise), which is overlaid across the entire site using mix-blend-mode to create an expensive "analog" texture without sacrificing performance (FPS).
- Thematic preloader and scroll indicator: The loading screen and fixed scroll progress indicator are styled to resemble minimalist watch dials with dynamic hands.
- Mathematical animation of moving parts: Programmatically generated gears (gear paths) and balance spring, which have looped CSS/GSAP animations of rotation and oscillation, mimicking real mechanical movement (18,000 half-oscillations per hour).
- Web Accessibility and optimization: The code is written in pure Vanilla JS. A check for prefers-reduced-motion is implemented: for users who disable animations in the system, the site automatically disables GSAP and shows the disassembled watch scheme immediately, remaining fully functional.
Technologies:
HTML5, CSS3 (Advanced CSS Variables), JavaScript (Vanilla ES6+, Procedural SVG Generation), GSAP (GreenSock), ScrollTrigger, SVG Filters/Animations.
What has been implemented:
- Procedural generation of SVG watches in real time: All dials on the site are created exclusively using code (Vanilla JS + SVG), without the use of any raster images. The main clock in the Hero block is synchronized with the user's local time, smoothly rendering the movement of each hand.
- Complex interactive scroll animation (Exploded View): The section with the watch mechanism (Movement) uses screen pinning. During scrolling, the user literally "disassembles" the coded watch caliber into separate parts (gears, balance wheel, case), which scatter along the Y-axis with the appearance of corresponding labels.
- Dynamic color theme change (Theme Crossfade): Smooth transition between "dark" (Dark) and "light" (Paper) themes on the fly during page scrolling. Implemented through manipulation of CSS variables using ScrollTrigger to create a seamless visual experience.
- Premium micro-interactions and custom cursor: A custom cursor algorithm with a magnetic ring that smoothly follows the mouse (using lerp math) and expands when hovering over active areas. The interactive orbit button in the Commission section also gently attracts to the cursor, adding physical weight to the interface.
- Atmospheric film grain effect: A custom animated noise effect created through an SVG filter (fractalNoise), which is overlaid across the entire site using mix-blend-mode to create an expensive "analog" texture without sacrificing performance (FPS).
- Thematic preloader and scroll indicator: The loading screen and fixed scroll progress indicator are styled to resemble minimalist watch dials with dynamic hands.
- Mathematical animation of moving parts: Programmatically generated gears (gear paths) and balance spring, which have looped CSS/GSAP animations of rotation and oscillation, mimicking real mechanical movement (18,000 half-oscillations per hour).
- Web Accessibility and optimization: The code is written in pure Vanilla JS. A check for prefers-reduced-motion is implemented: for users who disable animations in the system, the site automatically disables GSAP and shows the disassembled watch scheme immediately, remaining fully functional.
Technologies:
HTML5, CSS3 (Advanced CSS Variables), JavaScript (Vanilla ES6+, Procedural SVG Generation), GSAP (GreenSock), ScrollTrigger, SVG Filters/Animations.
Lvov 
Available for hire
Offer work