Immersive luxury landing page for a selective perfume brand
Premium immersive landing page for the fictional selective perfume brand "NOIRE ATLAS".
The project is implemented in the style of dark luxury minimalism, inspired by Awwwards-winning websites. The main focus is on complex interactive animation, atmospheric visuals, and a smooth immersion effect (storytelling).
What has been implemented:
- Branded preloader with a percentage counter and sliding screen effect
- Custom interactive cursor that changes size and shows hints when hovering over elements
- Background Canvas smoke animation in the Hero block that physically reacts to mouse movements
- Horizontal scroll slider for the fragrance line with built-in image parallax
- Generative Canvas visualizations of olfactory profiles (each fragrance has its own unique interactive figure)
- Magnetic effect for buttons (elements gently attract to the cursor when approaching)
- Full responsiveness (on smartphones, horizontal scroll smoothly transitions to a vertical feed)
- Optimized code without unnecessary libraries - the entire interface and logic work from a single file
Technologies: HTML5 Canvas, CSS (Vanilla), JavaScript, GSAP, ScrollTrigger
The project is implemented in the style of dark luxury minimalism, inspired by Awwwards-winning websites. The main focus is on complex interactive animation, atmospheric visuals, and a smooth immersion effect (storytelling).
What has been implemented:
- Branded preloader with a percentage counter and sliding screen effect
- Custom interactive cursor that changes size and shows hints when hovering over elements
- Background Canvas smoke animation in the Hero block that physically reacts to mouse movements
- Horizontal scroll slider for the fragrance line with built-in image parallax
- Generative Canvas visualizations of olfactory profiles (each fragrance has its own unique interactive figure)
- Magnetic effect for buttons (elements gently attract to the cursor when approaching)
- Full responsiveness (on smartphones, horizontal scroll smoothly transitions to a vertical feed)
- Optimized code without unnecessary libraries - the entire interface and logic work from a single file
Technologies: HTML5 Canvas, CSS (Vanilla), JavaScript, GSAP, ScrollTrigger