React-interfaces tot leven brengen met Border Beam en Liquid Gooey
Ontwerpers voegen graag kleine visuele accenten toe aan hun mockups. Soms is het een neonstraal die over de rand van een prijskaartje moet glijden, soms moeten knoppen aan elkaar plakken en uitrekken als kwikdruppels. Wanneer een frontend-ontwikkelaar zo'n concept ziet, is de eerste gedachte meestal hetzelfde: hier gaan we weer, aangepaste SVG-filters schrijven, kleurenmengmatrices aanpassen, of logge CSS-animaties configureren voor een enkel detail.
Jakub Antalík besloot dit soort effecten te verpakken in compacte React-bibliotheken. In zijn monorepo genaamd Libraries verzamelde hij twee kant-en-klare tools: border-beam en liquid-gooey. Elk van hen lost precies één probleem op zonder je project te belasten met onnodige afhankelijkheden.
Wat zit er in de repository
De repository bevat twee onafhankelijke npm-pakketten, elk met zijn eigen interactieve demopagina:
border-beam— een geanimeerde lichtstraal die soepel over de omtrek van elk blok of kaartje glijdt. De demo draait op beam.jakubantalik.com.liquid-gooey— een fysiek effect van stroperige vloeistof en morphing (het zogenaamde gooey-effect), waarbij elementen verbinden en scheiden terwijl ze bewegen. De demo is beschikbaar op gooey.jakubantalik.com.
Beide pakketten worden apart geïnstalleerd, dus je hoeft geen onnodige code naar je bundle te slepen als je alleen randondersteuning nodig hebt.
Hoe Border Beam werkt
De randlopende straal wordt vaak gezien op moderne SaaS-servicewebsites. Het wordt meestal geplaatst op een premium prijsblok of op een e-mailinvoerveld tijdens registratie.
Het installeren van het pakket is standaard:
npm install border-beam
Onder de motorkap rendert de component een geanimeerde verlooplaag die wordt bijgesneden tot de vorm van de bovenliggende container. Je hoeft de hoekafondingscoördinaten niet handmatig te berekenen of offsets te berekenen via requestAnimationFrame. De component accepteert parameters voor snelheid, straalgrootte, kleur en vertraging, en past netjes bovenop je bestaande lay-out.
Werken met het vloeibare elementen-effect
Het gooey-effect is opgebouwd uit een combinatie van blur (feGaussianBlur) en een contrasterende kleurmatrix (feColorMatrix). In zijn ruwe vorm is het configureren van deze SVG-filters in React onhandig: je moet cross-browser compatibiliteit afhandelen, hertekeningen optimaliseren en de juiste filter-ID's doorgeven.
De liquid-gooey bibliotheek neemt deze routine voor je uit handen:
npm install liquid-gooey
Het biedt kant-en-klare componenten voor het creëren van element-samenvoegings- en stromeffecten. Als je een ongebruikelijke tab-switcher, een interactieve cursor of een zwevend actiemenu bouwt, transformeert de component standaard blokbewegingen in een naadloze stroperige animatie.
Handige monorepo-organisatie
Naast de componenten zelf is de repository-architectuur het bekijken waard. Jakub gebruikt npm workspaces met een splitsing in twee directories: packages/ voor bibliotheken en sites/ voor demo-showcases.
packages/ опубликованные библиотеки (по папке на npm-пакет)
sites/ демо-сайты для каждой библиотеки
Hier is een handige workflow opgezet. De demo-sites verwijzen niet naar de gecompileerde bundles in dist, maar direct naar de bibliotheekbroncode in TypeScript via aliassen. Wanneer de auteur een component bewerkt, wordt de showcase direct bijgewerkt via hot reload zonder voorafgaande herbouw.
Lokale opstart ziet er eenvoudig uit:
npm install
# Запуск витрины для луча
npm run dev -w @sites/beam
# Запуск витрины для liquid-эффектов
npm run dev -w @sites/gooey
Voor deployment zijn twee afzonderlijke pipelines geconfigureerd: de border-beam showcase wordt gehost op GitHub Pages met een gekoppelde CNAME, en liquid-gooey wordt automatisch gebouwd op Cloudflare Pages. Publiceren naar npm wordt geactiveerd door release-tags op GitHub via een afzonderlijke workflow.
Wanneer het zinvol is om deze componenten te gebruiken
Visuele effecten zijn goed in moderatie. Als je elk kaartje in een dashboard omringt met lopende stralen, zal de interface veranderen in een kerstversiering. Maar er zijn scenario's waarin deze bibliotheken veel tijd besparen:
- Landingpages en promotiesites. Het markeren van de belangrijkste call-to-action-knop of de aanbevolen abonnementsplankaart.
- Onboarding. Zachte markering van de vereiste stap of het invoerveld om de aandacht van de gebruiker te trekken.
- Micro-interfaces. Ongebruikelijke tabs, accordeonmenu's of modus-schakelaars waar standaard vloeiende animaties te saai uitzien.
Het enige nuancepunt om te onthouden: SVG-filters met blur creëren belasting op de GPU. Voor zware lijsten met honderden rijen is liquid-gooey niet geschikt, maar voor compacte controle-elementen werkt het geweldig.
Wat we hier hebben is een praktisch voorbeeld van hoe je vaak voorkomende ontwerppatronen kunt verpakken in nette React-componenten. De documentatie in de README is nog beknopt, maar de live demopagina's geven een compleet beeld van de mogelijkheden. Als je een nieuwe promotiesite bouwt of een vleugje interactiviteit wilt toevoegen aan vertrouwde formulieren, zijn border-beam en liquid-gooey zeker het bookmarken waard.
Gerelateerde projecten