Ożywianie interfejsów React za pomocą Border Beam i Liquid Gooey

Projektanci uwielbiają dodawać niewielkie akcenty wizualne do swoich makiet. Czasem jest to neonowa belka, która powinna ślizgać się po obramowaniu karty cenowej, czasem przyciski powinny się do siebie przylepiać i rozciągać jak krople rtęci. Kiedy frontend developer widzi taki koncept, pierwsza myśl jest zwykle ta sama: znowu to samo, pisanie niestandardowych filtrów SVG, bawienie się macierzami mieszania kolorów czy konfigurowanie rozbudowanych animacji CSS dla jednego drobnego elementu.

Jakub Antalík postanowił opakować tego rodzaju efekty w kompaktowe biblioteki React. W swoim monorepo o nazwie Libraries zebrał dwa gotowe do użycia narzędzia: border-beam i liquid-gooey. Każde z nich rozwiązuje dokładnie jeden problem, nie obciążając projektu niepotrzebnymi zależnościami.

Co zawiera repozytorium

Repozytorium zawiera dwa niezależne pakiety npm, każdy z własną interaktywną stroną demo:

• border-beam — animowana belka świetlna, która płynnie przesuwa się wzdłuż obwodu dowolnego bloku lub karty. Demo dostępne jest pod adresem beam.jakubantalik.com.
• liquid-gooey — efekt fizyczny lepkiej cieczy i morphingu (tzw. efekt gooey), gdzie elementy łączą się i rozdzielają podczas ruchu. Demo dostępne jest pod adresem gooey.jakubantalik.com.

Oba pakiety instalują się oddzielnie, więc nie będziesz musiał wciągać niepotrzebnego kodu do swojego bundle'a, jeśli potrzebujesz tylko podświetlenia obramowania.

Jak działa Border Beam

Belka biegnąca wzdłuż obramowania jest często spotykana na nowoczesnych stronach usług SaaS. Zwykle umieszczana jest na premiumowym bloku cenowym lub na polu inputu email podczas rejestracji.

Instalacja pakietu jest standardowa:

npm install border-beam

Pod maską komponent renderuje animowaną warstwę gradientu, która jest przycinana do kształtu kontenera nadrzędnego. Nie musisz ręcznie obliczać współrzędnych zaokrąglenia rogów ani wyliczać offsetów przez requestAnimationFrame. Komponent przyjmuje parametry prędkości, rozmiaru belki, koloru i opóźnienia, elegancko nakładając się na istniejący układ.

Praca z efektem płynnych elementów

Efekt gooey jest zbudowany na kombinacji rozmycia (feGaussianBlur) i macierzy kontrastującego koloru (feColorMatrix). W surowej formie konfigurowanie tych filtrów SVG w React jest niewygodne: musisz obsłużyć kompatybilność między przeglądarkami, zoptymalizować przerysowania i przekazać poprawne ID filtrów.

Biblioteka liquid-gooey zajmuje się tą rutyną za Ciebie:

npm install liquid-gooey

Udostępnia gotowe komponenty do tworzenia efektów łączenia i przepływu elementów. Jeśli budujesz nietypowy przełącznik zakładek, interaktywny kursor lub menu akcji typu floating, komponent transformuje standardowe ruchy bloków w płynną animację lepkiej cieczy.

Wygodna organizacja monorepo

Ponad same komponenty, architektura repozytorium jest warta uwagi. Jakub używa npm workspaces z podziałem na dwa katalogi: packages/ dla bibliotek i sites/ dla showcase'ów demo.

packages/       опубликованные библиотеки (по папке на npm-пакет)
sites/          демо-сайты для каждой библиотеки

Wygodny workflow jest tutaj skonfigurowany. Strony demo odwołują się nie do skompilowanych bundle'i w dist, ale bezpośrednio do kodu źródłowego biblioteki w TypeScript poprzez aliasy. Kiedy autor edytuje komponent, showcase aktualizuje się na żywo poprzez hot reload bez wstępnego przebudowania.

Lokalny start wygląda prosto:

npm install

# Запуск витрины для луча
npm run dev -w @sites/beam

# Запуск витрины для liquid-эффектов
npm run dev -w @sites/gooey

Do wdrożenia skonfigurowane są dwa osobne pipeline'y: showcase border-beam jest hostowany na GitHub Pages z dołączonym CNAME, a liquid-gooey jest automatycznie budowany na Cloudflare Pages. Publikacja do npm jest wyzwalana przez tagi release na GitHub poprzez osobny workflow.

Kiedy warto używać tych komponentów

Efekty wizualne są dobre z umiarem. Jeśli otoczysz każdą kartę w dashboardzie biegnącymi belkami, interfejs zamieni się w świąteczną girlandę. Ale są scenariusze, gdzie te biblioteki oszczędzają mnóstwo czasu:

1. Strony landingowe i promocyjne. Wyróżnianie głównego przycisku call-to-action lub karty polecanego planu subskrypcji.
2. Onboarding. Delikatne podświetlanie wymaganego kroku lub pola inputu, aby przyciągnąć uwagę użytkownika.
3. Mikro-interfejsy. Nietypowe zakładki, menu akordeonowe lub przełączniki trybu, gdzie standardowe płynne animacje wyglądają zbyt zwyczajnie.

Jedyny niuans do zapamiętania: filtry SVG z rozmyciem obciążają GPU. Dla ciężkich list z setkami wierszy liquid-gooey nie będzie odpowiedni, ale dla kompaktowych elementów kontrolnych sprawdza się świetnie.

To, co tutaj mamy, to praktyczny przykład pakowania często powtarzających się wzorców projektowych w eleganckie komponenty React. Dokumentacja w README jest wciąż zwięzła, ale strony demo na żywo dają pełny obraz możliwości. Jeśli budujesz nową stronę promocyjną lub chcesz dodać szczyptę interaktywności do znajomych formularzy, border-beam i liquid-gooey zdecydowanie warto dodać do zakładek.