Halda: landing marki serumz pinowaną formułą i kampanią.
To projekt pokazowy ALUK, nie zlecenie. Marka „Halda” nie istnieje: zbudowaliśmy ją, żeby pokazać warstwę wizualną i animacje, które mieszczą się w landingu dla marki D2C. Strona działa na halda.madebyaluk.pl i można ją przewinąć od loadera po stopkę. Taki landing na produkcyjnym stacku wyceniamy w zakresie pakietu Growth.
Brief
Marka kosmetyczna sprzedająca jedno serum bezpośrednio klientom. Jeden produkt, jedna obietnica, więc strona ma zbudować nastrój i wytłumaczyć formułę, zanim pokaże cenę. Odbiorca ogląda, nie szuka: to sytuacja, w której smooth scroll i pinowane sekcje pomagają, a nie przeszkadzają.
Założenie: całość na jednej osi przewijania, bez podstron, z własnymi assetami (zdjęcia, spot i baner wygenerowane pod markę). Treść każdej sekcji ma być czytelna bez skryptów, a ruch ma być dodatkiem, nie warunkiem.
Co pokazuje strona
- 01
Loader i hero z kroplą.
Loader „nalewa” logo maską clip-path w rytmie ładowania klatek, potem zjeżdża i odsłania hero: zapętlone wideo z kroplą serum, buteleczka lekko idzie za kursorem, manifest niżej odsłania się słowo po słowie (SplitText). Smooth scroll (Lenis) startuje dopiero po loaderze.
- 02
Pinowana formuła trzech składników.
Sekcja przypięta na kilka ekranów: buteleczka obraca się na canvasie z sekwencji klatek scrubowanej scrollem, a przy kolejnych kątach pojawiają się notatki trzech składników i pasek postępu. Bez wideo, więc klatka zawsze nadąża za palcem.
- 03
Rytuał i liczby z badania.
Rytuał wieczorny jako pinowany, poziomy przebieg kroków, z „rozlaniem” zieleni maską clip-path na wejściu. Niżej liczniki wyników badania konsumenckiego dochodzą do wartości raz; liczby są fikcyjne, jak cała marka.
- 04
Sekcja kampanii z własnymi assetami.
Spot 10 s, baner i flat lay wygenerowane pod tę markę, ułożone w siatce z odsłoną clip-path. Bez cudzych reklam i logotypów w kadrze.
Na produkcję
Prezentacja to czysty HTML z GSAP z CDN. U klienta ten sam efekt budujemy na stacku, który da się utrzymać.
Astro albo Next.js
Statyczny landing idzie na Astro; gdy dochodzi formularz, CMS albo sklep headless, na Next.js. GSAP z pluginami przez npm, zarejestrowany w jednym module, nie z CDN.
Fonty i media u siebie
Self-host WOFF2 z polskim subsetem, obrazy w WebP i AVIF, wideo hero poniżej 1,5 MB z posterem. Assety z hashem i cache na rok.
Ruch z wyłącznikiem
gsap.matchMedia z gałęzią prefers-reduced-motion: bez scrubu i SplitText, stany końcowe od razu. Treść każdej sekcji widoczna także bez JavaScriptu.
Telefon z połową efektów
Pinowane sekcje krótsze, część elementów ukryta, follower obrazów wyłączony na dotyku. Sprawdzane na 390 px, nie tylko na laptopie.
Dla kogo
Styl „oglądam, nie szukam” sprzedaje się tam, gdzie klient kupuje emocję albo estetykę. Tam, gdzie liczy się zaufanie i szybka decyzja, ten sam ruch obniża konwersję.
Ten styl pasuje
- marki D2C: kosmetyki, kawa, odzież, jeden produkt-bohater
- premiery produktów i kampanie z własnymi zdjęciami lub wideo
- sklep headless (Shopify, Woo) z takim landingiem jako wejściem
Tu radzimy inaczej
- sklepy z dużym katalogiem: Lenis psuje przewijanie list, animacja tylko w hero
- kliniki, gabinety, usługi lokalne: telefon w 3 sekundy, nie loader
- strony, na których klient szuka konkretu, na przykład cennika
Fakty
Wyłącznie to, co zmierzyliśmy. Bez wyników biznesowych, bo prezentacja nie ma klientów.
- Pierwsze załadowanie (1600×1000, po loaderze)
- 2,69 MB
- Biblioteki
- GSAP + Lenis
Waga to pomiar transferu przy pierwszym wejściu na komputerze; większość to wideo i obrazy kampanii, które na produkcji dostają AVIF i ładowanie dopiero po LCP. Wyników Lighthouse nie podajemy, bo ich dla tej strony nie mierzyliśmy.
Prezentacja na żywo
Strona jest publiczna i działa w przeglądarce, z pełnym ruchem na komputerze i lżejszą wersją na telefonie. Marka jest fikcyjna, stopka strony to mówi.
Taki landing dla Twojej marki?
Zacznijmy od konkretów.
Napisz, co sprzedajesz i jakie masz materiały. Zaproponujemy zakres, termin i cenę, a wcześniej powiemy wprost, czy taki styl ma sens w Twojej branży.