SECAWA

SECAWA to marka cyberbezpieczeństwa z segmentu premium. Strona miała od pierwszego wejrzenia komunikować poziom technologiczny i pozycję lidera. Powstała w pełni customowa witryna zbudowana na reużywalnych blokach Gutenberga, z autorskim silnikiem animacji generującym trójwymiarowe tło w kształcie fali.

Brief

Marka premium w cyberbezpieczeństwie, której strona nie oddawała poziomu technologicznego firmy. Strona miała komunikować innowacyjność i pozycję lidera od pierwszego wejrzenia, a jednocześnie dać zespołowi narzędzie, którym wygodnie zarządza treścią bez dotykania kodu. Moją rolą było pełne wdrożenie techniczne.

System reużywalnych bloków

Zamiast sztywnych szablonów strona stoi na zestawie kilkudziesięciu customowych bloków Gutenberga, zbudowanych na ACF. Każdy blok (hero, sekcja oferty, sekcja filozofii, opinie, sekcja szkoleń, sekcje blogowe i kontaktowe) jest reużywalny i konfigurowalny, z osobnymi odstępami dla desktopu i mobile, kolorem lub obrazem tła i sterowaniem animacją. Dzięki temu klient składa i przebudowuje strony jak z klocków, zachowując spójność wizualną.

Autorski silnik animacji

Najbardziej charakterystyczny element marki to animowane tło w kształcie fali. Nie jest to gotowa biblioteka ani prosta grafika, tylko autorski silnik renderujący trójwymiarową siatkę fali w WebGL (Three.js), z shaderami i efektem poświaty (bloom). Silnik jest w pełni parametryzowany, od kolorów, amplitudy, częstotliwości i prędkości po kilkadziesiąt innych ustawień, z obsługą wielu warstw.

Dużą wagę położyłem na to, żeby efekt nie odbił się na wydajności ani dostępności. Animacja respektuje preferencję ograniczenia ruchu (prefers-reduced-motion) i automatycznie pauzuje się, gdy znika z widoku. Efektowne tło nie kosztuje więc ani szybkości strony, ani komfortu użytkownika.

Niestandardowy edytor

Żeby klient mógł realnie korzystać z tych możliwości, rozszerzyłem sam edytor Gutenberga. Standardowy blok grupy dostał dodatkowy panel "tło i animacja" z włącznikiem animacji i parametrami do edycji na żywo, sterowaniem nakładkami gradientowymi (radialne, liniowe, tryby mieszania, pozycja, rozmiar, rozmycie) oraz zarządzaniem obrazem tła. Konfiguracja, która normalnie wymagałaby kodu, dzieje się klikalnie w edytorze.

Rezultat

Strona oddaje high-techowy, premium charakter marki od pierwszej sekundy, a niestandardowy edytor usprawnił codzienną pracę z treścią. Klient dostał nie tylko efektowną witrynę, ale i samodzielność. Może budować nowe strony i sterować efektami bez programisty.