Osnowa: landing pracowni architekturyz cięciami jak w filmie.
To projekt pokazowy ALUK, nie zlecenie. Pracownia „Osnowa” nie istnieje: zbudowaliśmy ją, żeby pokazać, jak wideo, twarde cięcia i rysunek techniczny mogą opowiedzieć o architekturze bez ani jednej karty z ikoną. Strona działa na osnowa.madebyaluk.pl. Taki landing na produkcyjnym stacku wyceniamy w zakresie pakietu Growth.
Brief
Pracownia architektury z kilkunastoma realizacjami i jasnym manifestem. Klient takiej pracowni ogląda portfolio jak film: chce zobaczyć bryłę, światło i detal, nie listę usług. Strona ma dać ten seans i prowadzić do kontaktu.
Założenie: ciemna, redakcyjna typografia, własne kadry projektów i wideo zamiast zdjęć stockowych, jedna oś przewijania. Rysunek planu i proces mają pokazać warsztat, nie tylko efekt.
Co pokazuje strona
- 01
Wideo hero i obrysowany tytuł.
Zapętlone ujęcie pawilonu we mgle pod tytułem pracowni. Wideo startuje po loaderze, z posterem na wypadek, gdyby przeglądarka na telefonie odmówiła autoplayu.
- 02
Pinowane realizacje ze stepowanymi cięciami.
Sekcja przypięta na kilka ekranów: postęp scrolla dzielony na cztery kroki, każdy krok to twarde cięcie clip-path na kolejny projekt, z licznikiem 01/04 i paskiem postępu. Bez płynnego przenikania, jak w filmie architektonicznym.
- 03
Manifest linia po linii i rysujący się plan.
Tekst manifestu odsłania się wiersz po wierszu maską. Niżej rzut budynku jako SVG rysuje się kreską w tempie przewijania (stroke-dashoffset), a cztery kroki procesu podświetlają się obok.
- 04
Walk-through i nagrody z obrazem za kursorem.
Mały kadr wideo rozrasta się do pełnego ekranu. Na liście nagród zdjęcie podąża za kursorem i zmienia się przy najechaniu na wiersz; na dotyku ten efekt jest wyłączony.
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 bez formularzy idzie jako statyczny Astro; GSAP z ScrollTriggerem i SplitTextem przez npm. Jeden moduł rejestruje pluginy i uruchamia sekcje po document.fonts.ready.
Wideo pod kontrolą
Hero MP4 poniżej 1,5 MB, poster WebP, preload metadata, odtwarzanie dopiero po LCP. Walk-through ładowany, gdy sekcja wchodzi w ekran.
Ruch z wyłącznikiem
prefers-reduced-motion wyłącza scrub, pin i SplitText; realizacje stają się zwykłą listą kadrów. Wszystko czytelne bez JavaScriptu.
Telefon osobno
Krótszy pin, follower obrazu wyłączony, plan SVG rysowany szybciej. Sprawdzane na 390 px przed oddaniem.
Dla kogo
Ten układ jest dla firm, których produkt się ogląda: bryła, wnętrze, kadr. Tam, gdzie klient szuka terminu, ceny albo numeru telefonu, ten sam seans staje się przeszkodą.
Ten styl pasuje
- pracownie architektury i wnętrz, studia projektowe, fotografowie
- deweloperzy premium: pinowane widoki, plany SVG, wideo z drona
- agencje i studia z portfolio, które chcą followera obrazów zamiast siatki miniatur
Tu radzimy inaczej
- usługi lokalne i remonty: jedna strona, formularz, mapa, opinie
- hotele i gastronomia z ruchem z telefonu: lekki reveal tak, pin na 500 vh nie
- strony z dużą ilością treści do przeszukania
Fakty
Wyłącznie to, co zmierzyliśmy. Bez wyników biznesowych, bo prezentacja nie ma klientów.
- Pierwsze załadowanie (1600×1000, po loaderze)
- 3,88 MB
- Biblioteki
- GSAP + Lenis
Najcięższa z pięciu prezentacji: wideo hero i cztery pełnoekranowe kadry realizacji. Na produkcji wideo dostaje niższy bitrate i ładowanie po LCP, a kadry AVIF; tej wersji jeszcze nie mierzyliśmy, więc nie podajemy jej wagi.
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 projektujesz i jakie masz kadry. Zaproponujemy zakres, termin i cenę, a wcześniej powiemy wprost, czy taki styl ma sens w Twojej branży.