ZGIEŁK: landing festiwaluz typografią, która reaguje na ruch.
To projekt pokazowy ALUK, nie zlecenie. Festiwal „ZGIEŁK” nie istnieje: zbudowaliśmy go, żeby pokazać, ile ruchu mieści się w landingu eventu, zanim zacznie przeszkadzać. Strona działa na zgielk.madebyaluk.pl. Taki landing na produkcyjnym stacku wyceniamy w zakresie pakietu Growth.
Brief
Trzydniowy festiwal muzyki i światła w starej cegielni. Odbiorca decyduje emocją: liczy się lineup, data i bilet. Strona ma być głośna jak plakat, a mimo to prowadzić w trzech krokach do kupna.
Założenie: czerń, jedna kwaśna barwa i jedna magenta, typografia jako grafika, własne kadry tłumu i artystów, wideo w hero. Program, miejsce i bilety czytelne bez JavaScriptu.
Co pokazuje strona
- 01
Kinetyczna typografia.
Tytuł rozciągnięty na całą szerokość ekranu, podzielony na litery przez SplitText. Litery pochylają się w stronę kursora (skew), a przy przewijaniu rozjeżdżają się i obracają losowo, sterowane postępem scrolla.
- 02
Marquee reagujące na prędkość scrolla.
Pas z hasłami przyspiesza i pochyla się proporcjonalnie do prędkości przewijania, potem wraca do spokojnego tempa. Ten sam mechanizm w stopce.
- 03
Lineup z obrazem za kursorem.
Gigantyczne nazwy artystów wjeżdżają od dołu; najechanie przesuwa i pochyla wiersz, a za kursorem podąża zdjęcie artysty z podpisem sceny. Na dotyku follower jest wyłączony, lista działa jak zwykła lista.
- 04
Pinowane cięcia, odliczanie, bilety.
Sześć twardych cięć zdjęć i słów z krótkim błyskiem kontrastu przy zmianie kroku i licznikiem 01/06. Żywe odliczanie do daty festiwalu i trzy pule biletów z pieczątką rabatu.
Na produkcję
Prezentacja to czysty HTML z GSAP z CDN. U klienta ten sam efekt budujemy na stacku, który da się utrzymać.
Astro + GSAP + Lenis
Landing eventu bez logowania idzie jako statyczny Astro; sprzedaż biletów to link do operatora. GSAP z SplitTextem i ScrollTriggerem przez npm, start po document.fonts.ready.
Fonty i ziarno u siebie
Self-host WOFF2 z polskimi znakami (SplitText na liniach potrzebuje line-height, który nie tnie ogonków), ziarno jako SVG w data-URI, lżejsze na telefonie.
Ruch z wyłącznikiem
prefers-reduced-motion zostawia tytuł, lineup i cięcia w stanie końcowym, bez skew i scrubu. Odliczanie działa dalej, bo to treść, nie ozdoba.
Telefon z połową efektów
Mniejszy rozrzut liter, krótszy pin, marquee bez skew, follower wyłączony. Sprawdzane na 390 px.
Dla kogo
To najgłośniejszy z pięciu projektów i celowo tak zostaje: eventy, kluby i kultura sprzedają nastrój. Poza tą niszą te same efekty odradzamy.
Ten styl pasuje
- festiwale, kluby, koncerty, premiery kulturalne
- marki odzieżowe i dropy z limitowaną pulą
- kampanie z datą: odliczanie i pule biletów jako mechanika sprzedaży
Tu radzimy inaczej
- prawnicy, kliniki, księgowość: żadnego z tych efektów
- B2B i SaaS: kinetyczna typografia obniża wiarygodność produktu
- strony, na których liczy się czytanie dłuższych treści
Fakty
Wyłącznie to, co zmierzyliśmy. Bez wyników biznesowych, bo prezentacja nie ma klientów.
- Pierwsze załadowanie (1600×1000, po loaderze)
- 1,5 MB
- Biblioteki
- GSAP + Lenis
Waga przy pierwszym wejściu na komputerze; wideo tłumu w hero to jej większa część. Na produkcji poster wchodzi pierwszy, wideo 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 organizujesz i kiedy. Zaproponujemy zakres, termin i cenę, a wcześniej powiemy wprost, ile z tego ruchu ma sens w Twoim przypadku.