Portare le interfacce React alla vita con Border Beam e Liquid Gooey
I designer amano aggiungere piccoli accenti visivi ai loro mockup. A volte è un raggio neon che dovrebbe scorrere lungo il bordo di una card con i prezzi, a volte i pulsanti dovrebbero attaccarsi insieme e allungarsi come gocce di mercurio. Quando uno sviluppatore frontend vede un concetto del genere, il primo pensiero è di solito lo stesso: eccoci di nuovo, a scrivere filtri SVG personalizzati, a smanettare con matrici di fusione dei colori, o a configurare pesanti animazioni CSS per un singolo dettaglio.
Jakub Antalík ha deciso di confezionare questi tipi di effetti in librerie React compatte. Nel suo monorepo chiamato Libraries, ha raccolto due strumenti pronti all'uso: border-beam e liquid-gooey. Ciascuno risolve esattamente un problema senza sovraccaricare il tuo progetto con dipendenze inutili.
Cosa c'è dentro il repository
Il repository contiene due pacchetti npm indipendenti, ciascuno con la propria pagina demo interattiva:
border-beam— un raggio di luce animato che scorre senza problemi lungo il perimetro di qualsiasi blocco o card. La demo è disponibile su beam.jakubantalik.com.liquid-gooey— un effetto fisico di liquido viscoso e morphing (il cosiddetto effetto gooey), in cui gli elementi si connettono e si separano mentre si muovono. La demo è disponibile su gooey.jakubantalik.com.
Entrambi i pacchetti vengono installati separatamente, quindi non dovrai trascinare codice non necessario nel tuo bundle se hai solo bisogno dell'evidenziazione del bordo.
Come funziona Border Beam
Il raggio che corre lungo il bordo è comunemente visto sui siti SaaS moderni. Di solito viene posizionato su un blocco pricing premium o su un campo di input email durante la registrazione.
L'installazione del pacchetto è standard:
npm install border-beam
Sotto il cofano, il componente renderizza un layer con gradiente animato che viene ritagliato nella forma del contenitore padre. Non devi calcolare manualmente le coordinate di arrotondamento degli angoli o calcolare gli offset tramite requestAnimationFrame. Il componente accetta parametri per velocità, dimensione del raggio, colore e ritardo, posizionandosi ordinatamente sopra il tuo layout esistente.
Lavorare con l'effetto degli elementi liquidi
L'effetto gooey è costruito su una combinazione di blur (feGaussianBlur) e una matrice di colori contrastante (feColorMatrix). Nella sua forma grezza, configurare questi filtri SVG in React è scomodo: devi gestire la compatibilità cross-browser, ottimizzare i ridisegni e passare gli ID dei filtri corretti.
La libreria liquid-gooey si occupa di questa routine al posto tuo:
npm install liquid-gooey
Fornisce componenti pronti all'uso per creare effetti di fusione e scorrimento degli elementi. Se stai costruendo un selettore di tab insolito, un cursore interattivo o un menu floating action, il componente trasforma i movimenti standard dei blocchi in un'animazione viscosa fluida.
Organizzazione comoda del monorepo
Oltre ai componenti stessi, vale la pena dare un'occhiata all'architettura del repository. Jakub usa npm workspaces con una suddivisione in due directory: packages/ per le librerie e sites/ per le showcase demo.
packages/ опубликованные библиотеки (по папке на npm-пакет)
sites/ демо-сайты для каждой библиотеки
È impostato un workflow comodo. I siti demo referenziano non i bundle compilati in dist, ma direttamente il codice sorgente della libreria in TypeScript tramite alias. Quando l'autore modifica un componente, la showcase si aggiorna al volo tramite hot reload senza una ricompilazione preliminare.
L'avvio locale è semplice:
npm install
# Запуск витрины для луча
npm run dev -w @sites/beam
# Запуск витрины для liquid-эффектов
npm run dev -w @sites/gooey
Per il deployment, sono configurate due pipeline separate: la showcase border-beam è ospitata su GitHub Pages con un CNAME allegato, e liquid-gooey viene costruita automaticamente su Cloudflare Pages. La pubblicazione su npm viene attivata dai tag di release su GitHub tramite un workflow separato.
Quando ha senso usare questi componenti
Gli effetti visivi sono buoni se usati con moderazione. Se circondi ogni card in una dashboard con raggi luminosi che scorrono, l'interfaccia si trasformerà in un filo di lucine di Natale. Ma ci sono scenari in cui queste librerie fanno risparmiare molto tempo:
- Landing page e siti promozionali. Evidenziare il pulsante principale call-to-action o la card del piano di abbonamento consigliato.
- Onboarding. Evidenziazione morbida del passaggio o del campo di input richiesto per attirare l'attenzione dell'utente.
- Micro-interfacce. Tab insoliti, menu accordion o selettori di modalità dove le animazioni smooth standard sembrano troppo banali.
L'unica sfumatura da tenere a mente: i filtri SVG con blur creano carico sulla GPU. Per liste pesanti con centinaia di righe, liquid-gooey non sarà adatto, ma per elementi di controllo compatti funziona benissimo.
Quello che abbiamo qui è un esempio pratico di come confezionare pattern di design frequentemente ricorrenti in componenti React ordinati. La documentazione nel README è ancora concisa, ma le pagine demo dal vivo danno un quadro completo delle capacità. Se stai costruendo un nuovo sito promozionale o vuoi aggiungere un tocco di interattività a moduli familiari, border-beam e liquid-gooey meritano sicuramente di essere salvati nei segnalibri.
Progetti correlati