Donner vie aux interfaces React avec Border Beam et Liquid Gooey
Les designers adorent ajouter de petits accents visuels à leurs maquettes. Parfois, c'est un faisceau néon qui doit glisser le long de la bordure d'une carte tarifaire, parfois les boutons doivent se coller ensemble et s'étirer comme des gouttes de mercure. Quand un développeur frontend voit un tel concept, la première pensée est généralement la même : encore une fois, écrire des filtres SVG personnalisés, bidouiller des matrices de fusion de couleurs, ou configurer de lourdes animations CSS pour un seul détail.
Jakub Antalík a décidé d'empaqueter ce type d'effets dans des bibliothèques React compactes. Dans son monorepo appelé Libraries, il a rassemblé deux outils prêts à l'emploi : border-beam et liquid-gooey. Chacun résout exactement un problème sans surcharger votre projet avec des dépendances inutiles.
Ce que contient le dépôt
Le dépôt contient deux paquets npm indépendants, chacun avec sa propre page de démonstration interactive :
border-beam— un faisceau lumineux animé qui glisse en douceur le long du périmètre de n'importe quel bloc ou carte. La démo est disponible sur beam.jakubantalik.com.liquid-gooey— un effet physique de liquide visqueux et de morphing (le fameux effet gooey), où les éléments se connectent et se séparent lors de leurs mouvements. La démo est disponible sur gooey.jakubantalik.com.
Les deux paquets s'installent séparément, vous n'aurez donc pas à traîner du code inutile dans votre bundle si vous n'avez besoin que du surlignage de bordure.
Comment fonctionne Border Beam
Le faisceau qui parcourt la bordure est couramment vu sur les sites SaaS modernes. Il est généralement placé sur un bloc tarifaire premium ou sur un champ de saisie d'email lors de l'inscription.
L'installation du paquet est standard :
npm install border-beam
Sous le capot, le composant restitue une couche de dégradé animé qui est découpée à la forme du conteneur parent. Vous n'avez pas besoin de calculer manuellement les coordonnées d'arrondi des coins ni de calculer les décalages via requestAnimationFrame. Le composant accepte des paramètres pour la vitesse, la taille du faisceau, la couleur et le délai, se superposant proprement à votre mise en page existante.
Travailler avec l'effet des éléments liquides
L'effet gooey repose sur une combinaison de flou (feGaussianBlur) et d'une matrice de couleurs contrastantes (feColorMatrix). Sous sa forme brute, configurer ces filtres SVG dans React n'est pas pratique : vous devez gérer la compatibilité entre navigateurs, optimiser les redessins et transmettre les bons identifiants de filtre.
La bibliothèque liquid-gooey prend en charge cette routine pour vous :
npm install liquid-gooey
Elle fournit des composants prêts à l'emploi pour créer des effets de fusion et d'écoulement d'éléments. Si vous construisez un sélecteur d'onglets inhabituel, un curseur interactif ou un menu d'actions flottantes, le composant transforme les mouvements de blocs standard en une animation visqueuse fluide.
Organisation pratique du monorepo
Au-delà des composants eux-mêmes, l'architecture du dépôt mérite qu'on s'y attarde. Jakub utilise npm workspaces avec une séparation en deux répertoires : packages/ pour les bibliothèques et sites/ pour les showcases de démonstration.
packages/ опубликованные библиотеки (по папке на npm-пакет)
sites/ демо-сайты для каждой библиотеки
Un flux de travail pratique est configuré ici. Les sites de démonstration ne référencent pas les bundles compilés dans dist, mais directement le code source des bibliothèques en TypeScript via des alias. Quand l'auteur modifie un composant, le showcase se met à jour à la volée via le rechargement à chaud sans reconstruction préalable.
Le démarrage local est simple :
npm install
# Запуск витрины для луча
npm run dev -w @sites/beam
# Запуск витрины для liquid-эффектов
npm run dev -w @sites/gooey
Pour le déploiement, deux pipelines séparés sont configurés : le showcase border-beam est hébergé sur GitHub Pages avec un CNAME attaché, et liquid-gooey est automatiquement construit sur Cloudflare Pages. La publication sur npm est déclenchée par des tags de release sur GitHub via un workflow séparé.
Quand il est pertinent d'utiliser ces composants
Les effets visuels sont bons avec modération. Si vous entourez chaque carte d'un tableau de bord avec des faisceaux lumineux, l'interface se transformera en guirlande de Noël. Mais il y a des scénarios où ces bibliothèques font gagner beaucoup de temps :
- Pages d'atterrissage et sites promotionnels. Mettre en valeur le bouton d'appel à l'action principal ou la carte du plan d'abonnement recommandé.
- Parcours d'onboarding. Surlignage doux de l'étape ou du champ de saisie requis pour attirer l'attention de l'utilisateur.
- Micro-interfaces. Onglets inhabituels, menus accordéon ou commutateurs de mode où les animations fluides standard semblent trop ternes.
La seule nuance à garder à l'esprit : les filtres SVG avec flou créent une charge sur le GPU. Pour des listes lourdes avec des centaines de lignes, liquid-gooey ne conviendra pas, mais pour des éléments de contrôle compacts, cela fonctionne très bien.
Ce que nous avons ici est un exemple pratique de comment empaqueter des motifs de conception fréquemment récurrents en composants React soignés. La documentation dans le README est encore concise, mais les pages de démonstration en direct donnent une image complète des capacités. Si vous construisez un nouveau site promotionnel ou souhaitez ajouter une touche d'interactivité à des formulaires familiers, border-beam et liquid-gooey méritent définitivement d'être ajoutés aux favoris.
Projets similaires