Immersyjny luksusowy landing dla marki selektywnej perfumerii
Premium immersyjny landing page dla fikcyjnej marki selektywnej perfumerii „NOIRE ATLAS”.
Projekt zrealizowany w stylu ciemnego luksusowego minimalizmu, inspirowany stronami zwycięzcami Awwwards. Główny nacisk położono na skomplikowaną interaktywną animację, atmosferyczną wizualizację oraz efekt płynnego zanurzenia (storytelling).
Co zrealizowano:
- Markowy preloader z procentowym licznikiem i efektem rozsuwanego ekranu
- Niestandardowy interaktywny kursor, który zmienia rozmiar i pokazuje podpowiedzi po najechaniu na elementy
- Tło Canvas z animacją dymu w bloku Hero, które fizycznie reaguje na ruchy myszy
- Poziomy scroll-slider dla linii zapachów z wbudowanym parallaxem obrazów
- Generatywne wizualizacje Canvas profili olfaktorycznych (każdy zapach ma swoją unikalną interaktywną figurę)
- Efekt magnetyczny dla przycisków (elementy delikatnie przyciągają się do kursora po zbliżeniu)
- Pełna responsywność (na smartfonach poziomy scroll płynnie przechodzi w pionowy strumień)
- Optymalny kod bez zbędnych bibliotek - cały interfejs i logika działają z jednego pliku
Technologie: HTML5 Canvas, CSS (Vanilla), JavaScript, GSAP, ScrollTrigger
Projekt zrealizowany w stylu ciemnego luksusowego minimalizmu, inspirowany stronami zwycięzcami Awwwards. Główny nacisk położono na skomplikowaną interaktywną animację, atmosferyczną wizualizację oraz efekt płynnego zanurzenia (storytelling).
Co zrealizowano:
- Markowy preloader z procentowym licznikiem i efektem rozsuwanego ekranu
- Niestandardowy interaktywny kursor, który zmienia rozmiar i pokazuje podpowiedzi po najechaniu na elementy
- Tło Canvas z animacją dymu w bloku Hero, które fizycznie reaguje na ruchy myszy
- Poziomy scroll-slider dla linii zapachów z wbudowanym parallaxem obrazów
- Generatywne wizualizacje Canvas profili olfaktorycznych (każdy zapach ma swoją unikalną interaktywną figurę)
- Efekt magnetyczny dla przycisków (elementy delikatnie przyciągają się do kursora po zbliżeniu)
- Pełna responsywność (na smartfonach poziomy scroll płynnie przechodzi w pionowy strumień)
- Optymalny kod bez zbędnych bibliotek - cały interfejs i logika działają z jednego pliku
Technologie: HTML5 Canvas, CSS (Vanilla), JavaScript, GSAP, ScrollTrigger