Nurt: landing konta firmowegoz pulpitem, który składa się w scrollu.
To projekt pokazowy ALUK, nie zlecenie. Fintech „Nurt” nie istnieje: zbudowaliśmy go, żeby pokazać warstwę wizualną landingu produktu SaaS, w którym interfejs aplikacji jest częścią animacji, nie zrzutem ekranu. Strona działa na nurt.madebyaluk.pl. Sam landing wyceniamy w zakresie pakietu Growth; aplikację za nim budujemy osobno.
Brief
Konto firmowe dla małych firm: prognoza przepływów, karty zespołu, faktury. Produkt tłumaczy się ekranem, więc landing ma pokazać pulpit w ruchu i dać poczucie, że aplikacja jest lekka, zanim ktoś założy konto.
Założenie: jasna paleta, pastelowe gradienty, pulpit zbudowany w HTML (te same komponenty, które mogą trafić do aplikacji), liczby i cennik na stronie. Najlżejsza z pięciu prezentacji, bo bez wideo w hero.
Co pokazuje strona
- 01
Gradient mesh na canvasie.
Tło hero to kilka rozmytych plam rysowanych na canvasie w tickerze GSAP, zatrzymywanych, gdy sekcja wychodzi z ekranu. Jednolita paleta marki, bez obrazka w tle.
- 02
Pulpit, który składa się w scrollu.
Kafelki pulpitu (saldo, prognoza, operacje, karty, faktury) unoszą się luźno w hero, a przewijanie składa je w kompletny ekran aplikacji w ramce przeglądarki. Pulpit jest zbudowany w HTML, nie jako zrzut ekranu.
- 03
Pinowane funkcje i wykres SVG.
Trzy ekrany produktu (prognoza, karty zespołu, faktury KSeF) jako twarde cięcia sterowane postępem scrolla, z listą po lewej. Niżej wykres prognozy rysowany w tempie przewijania: linia, pole, dołek i alternatywna ścieżka „po decyzji”.
- 04
Liczniki i przełącznik cennika.
Liczby wjeżdżają raz, gdy wchodzą w ekran. Przełącznik miesięcznie/rocznie animuje kwoty z danych w atrybutach, bez przeładowania sekcji.
Na produkcję
Prezentacja to czysty HTML z GSAP z CDN. U klienta ten sam efekt budujemy na stacku, który da się utrzymać.
Next.js
Fintech ma formularze, logowanie i treści z CMS, więc produkcja to Next.js z GSAP przez npm. Pulpit w HTML zostaje: to te same komponenty, które potem trafiają do aplikacji.
Skromniej niż w prezentacji
Dla B2B SaaS radzimy micro-interakcje UI, prawdziwe ekrany i liczby, bez kinetycznej typografii i scroll-jackingu. Prezentacja pokazuje sufit, produkcja zwykle schodzi niżej.
Ruch z wyłącznikiem
prefers-reduced-motion wyłącza canvas, scrub i liczniki; pulpit i wykres są widoczne od razu. Treść działa bez JavaScriptu.
Telefon z połową efektów
Pulpit składa się z mniejszej liczby kafelków, pin jest krótszy, canvas lżejszy. Sprawdzane na 390 px.
Dla kogo
Landing produktu cyfrowego ma pokazać ekran i zbudować zaufanie. Prezentacja idzie w stronę pokazu; u klienta z B2B zostawiamy z niej pulpit w ruchu, liczniki i wykres, a resztę wyciszamy.
Ten styl pasuje
- SaaS i fintech z produktem, który tłumaczy się ekranem
- aplikacje webowe przed premierą: landing z pulpitem w ruchu zamiast makiet
- narzędzia z cennikiem na stronie, gdzie liczby są argumentem
Tu radzimy inaczej
- produkty dla instytucji, gdzie decyzję podejmuje dział zgodności: bez Lenisa i pinów
- strony, na których klient chce od razu się zalogować, nie oglądać
- kinetyczna typografia i scroll-jacking w B2B: pokazujemy, że umiemy, i odradzamy
Fakty
Wyłącznie to, co zmierzyliśmy. Bez wyników biznesowych, bo prezentacja nie ma klientów.
- Pierwsze załadowanie (1600×1000, po loaderze)
- 0,54 MB
- Biblioteki
- GSAP + Lenis
Waga mieści się poniżej jednego megabajta, bo pulpit i wykres to HTML i SVG, a nie obrazy. Wideo karty ładuje się dopiero w swojej sekcji. 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 robi Twój produkt i jakie masz ekrany. Zaproponujemy zakres landingu, termin i cenę, a jeśli potrzebujesz też aplikacji, powiemy, jak to podzielić.