React-Oberflächen mit Border Beam und Liquid Gooey zum Leben erwecken
Designer lieben es, kleine visuelle Akzente in ihre Mockups einzubauen. Manchmal ist es ein Neonstrahl, der über den Rahmen einer Preiskarte gleiten soll, manchmal sollen sich Buttons wie Quecksilbertropfen zusammenfügen und dehnen. Wenn ein Frontend-Entwickler ein solches Konzept sieht, ist der erste Gedanke meist derselbe: Da fangen wir wieder an – eigene SVG-Filter schreiben, Farbmischmatrizen anpassen oder sperrige CSS-Animationen für eine einzelne Kleinigkeit konfigurieren.
Jakub Antalík hat beschlossen, solche Effekte in kompakten React-Bibliotheken zu bündeln. In seinem Monorepo namens Libraries hat er zwei sofort einsatzbereite Tools zusammengestellt: border-beam und liquid-gooey. Jedes davon löst genau ein Problem, ohne dein Projekt mit unnötigen Abhängigkeiten zu überladen.
Was sich im Repository befindet
Das Repository enthält zwei unabhängige npm-Pakete, jeweils mit eigener interaktiver Demo-Seite:
border-beam— ein animierter Lichtstrahl, der sanft entlang des Umfangs eines beliebigen Blocks oder einer Karte gleitet. Die Demo läuft unter beam.jakubantalik.com.liquid-gooey— ein physikalischer Effekt von viskoser Flüssigkeit und Morphing (der sogenannte Gooey-Effekt), bei dem sich Elemente beim Bewegen verbinden und trennen. Die Demo ist verfügbar unter gooey.jakubantalik.com.
Beide Pakete werden separat installiert, sodass du keinen unnötigen Code in dein Bundle ziehen musst, wenn du nur Rahmenhervorhebungen benötigst.
So funktioniert Border Beam
Der am Rand entlanglaufende Strahl ist auf modernen SaaS-Website ein häufiger Anblick. Er wird meist auf einem Premium-Preisblock oder auf einem E-Mail-Eingabefeld während der Registrierung platziert.
Die Installation des Pakets ist Standard:
npm install border-beam
Im Inneren rendert die Komponente eine animierte Gradientenschicht, die auf die Form des übergeordneten Containers zugeschnitten wird. Du musst keine Eckenrundungs-Koordinaten manuell berechnen oder Offsets über requestAnimationFrame berechnen. Die Komponente akzeptiert Parameter für Geschwindigkeit, Strahlbreite, Farbe und Verzögerung und legt sich sauber über dein bestehendes Layout.
Mit dem Flüssigelement-Effekt arbeiten
Der Gooey-Effekt basiert auf einer Kombination aus Unschärfe (feGaussianBlur) und einer kontrastierenden Farbmatrix (feColorMatrix). In seiner Rohform ist die Konfiguration dieser SVG-Filter in React umständlich: Du musst Browserkompatibilität handhaben, Neuzeichnungen optimieren und korrekte Filter-IDs übergeben.
Die Bibliothek liquid-gooey übernimmt diese Routinearbeit für dich:
npm install liquid-gooey
Sie bietet fertige Komponenten zum Erstellen von Elementzusammenführungs- und Fließeffekten. Wenn du einen ungewöhnlichen Tab-Wechsler, einen interaktiven Cursor oder ein schwebendes Aktionsmenü baust, verwandelt die Komponente standardmäßige Blockbewegungen in eine nahtlose viskose Animation.
Praktische Monorepo-Organisation
Über die Komponenten selbst hinaus lohnt sich ein Blick auf die Repository-Architektur. Jakub verwendet npm workspaces mit einer Aufteilung in zwei Verzeichnisse: packages/ für Bibliotheken und sites/ für Demo-Showcases.
packages/ опубликованные библиотеки (по папке на npm-пакет)
sites/ демо-сайты для каждой библиотеки
Ein praktischer Workflow ist hier eingerichtet. Die Demo-Sites referenzieren nicht die kompilierten Bundles in dist, sondern direkt den Bibliotheksquellcode in TypeScript über Aliasse. Wenn der Autor eine Komponente bearbeitet, aktualisiert sich das Showcase per Hot Reload, ohne dass ein vorheriger Rebuild nötig ist.
Der lokale Start sieht einfach aus:
npm install
# Запуск витрины для луча
npm run dev -w @sites/beam
# Запуск витрины для liquid-эффектов
npm run dev -w @sites/gooey
Für das Deployment sind zwei separate Pipelines konfiguriert: Das border-beam-Showcase wird auf GitHub Pages mit einem angehängten CNAME gehostet, und liquid-gooey wird automatisch auf Cloudflare Pages gebaut. Die Veröffentlichung auf npm wird durch Release-Tags auf GitHub über einen separaten Workflow ausgelöst.
Wann es sinnvoll ist, diese Komponenten zu verwenden
Visuelle Effekte sind in Maßen gut. Wenn du jede Karte im Dashboard mit umlaufenden Strahlen umgibst, wird die Oberfläche zur Weihnachtsbeleuchtung. Aber es gibt Szenarien, in denen diese Bibliotheken viel Zeit sparen:
- Landingpages und Promo-Sites. Hervorheben der Haupt-Call-to-Action-Schaltfläche oder der empfohlenen Abonnementplan-Karte.
- Onboarding. Sanftes Hervorheben des erforderlichen Schritts oder Eingabefelds, um die Aufmerksamkeit des Nutzers zu lenken.
- Mikro-Interfaces. Ungewöhnliche Tabs, Akkordeon-Menüs oder Moduswechsler, bei denen standardmäßige Smooth-Animationen zu flach wirken.
Der einzige Punkt, den du beachten solltest: SVG-Filter mit Unschärfe erzeugen Last auf der GPU. Für umfangreiche Listen mit Hunderten von Zeilen ist liquid-gooey nicht geeignet, aber für kompakte Steuerungselemente funktioniert es hervorragend.
Was wir hier haben, ist ein praktisches Beispiel dafür, wie man häufig wiederkehrende Designmuster in aufgeräumte React-Komponenten verpackt. Die Dokumentation in der README ist noch knapp, aber die Live-Demo-Seiten vermitteln ein vollständiges Bild der Möglichkeiten. Wenn du eine neue Promo-Site baust oder vertrauten Formularen einen Hauch Interaktivität verleihen möchtest, sind border-beam und liquid-gooey definitiv einen Bookmark wert.
Ähnliche Projekte