Dando Vida a Interfaces React com Border Beam e Liquid Gooey
Designers adoram adicionar pequenos detalhes visuais aos seus mockups. Às vezes é um feixe neon que deve deslizar pela borda de um card de preços, outras vezes botões devem grudar uns nos outros e se esticar como gotas de mercúrio. Quando um desenvolvedor frontend vê um conceito assim, o primeiro pensamento geralmente é o mesmo: lá vamos nós de novo, escrevendo filtros SVG personalizados, mexendo com matrizes de mistura de cores, ou configurando animações CSS robustas para um único detalhe.
Jakub Antalík decidiu empacotar esses tipos de efeitos em bibliotecas React compactas. Em seu monorepo chamado Libraries, ele reuniu duas ferramentas prontas para uso: border-beam e liquid-gooey. Cada uma resolve exatamente um problema sem sobrecarregar seu projeto com dependências desnecessárias.
O que tem dentro do repositório
O repositório contém dois pacotes npm independentes, cada um com sua própria página de demonstração interativa:
border-beam— um feixe de luz animado que desliza suavemente ao longo do perímetro de qualquer bloco ou card. A demonstração está em beam.jakubantalik.com.liquid-gooey— um efeito físico de líquido viscoso e morphing (o chamado efeito gooey), onde elementos se conectam e se separam enquanto se movem. A demonstração está disponível em gooey.jakubantalik.com.
Ambos os pacotes são instalados separadamente, então você não terá que arrastar código desnecessário para o seu bundle se precisar apenas do destaque de borda.
Como o Border Beam funciona
O feixe que percorre a borda é comumente visto em sites modernos de serviços SaaS. Geralmente é colocado em um bloco de preços premium ou em um campo de email durante o registro.
Instalar o pacote é padrão:
npm install border-beam
Por baixo dos panos, o componente renderiza uma camada de gradiente animada que é recortada na forma do container pai. Você não precisa calcular manualmente as coordenadas de arredondamento dos cantos ou calcular offsets através de requestAnimationFrame. O componente aceita parâmetros para velocidade, tamanho do feixe, cor e atraso, ficando elegantemente sobre o seu layout existente.
Trabalhando com o efeito de elementos líquidos
O efeito gooey é construído em uma combinação de blur (feGaussianBlur) e uma matriz de cores contrastantes (feColorMatrix). Na sua forma bruta, configurar esses filtros SVG no React é inconveniente: você precisa lidar com compatibilidade entre navegadores, otimizar redesenhos e passar os IDs de filtro corretos.
A biblioteca liquid-gooey cuida dessa rotina para você:
npm install liquid-gooey
Ela fornece componentes prontos para criar efeitos de mesclagem e fluxo de elementos. Se você está construindo um alternador de abas incomum, um cursor interativo, ou um menu de ações flutuante, o componente transforma movimentos padrão de blocos em uma animação viscosa perfeita.
Organização conveniente do monorepo
Além dos componentes em si, a arquitetura do repositório vale a pena ser observada. Jakub usa npm workspaces com uma divisão em dois diretórios: packages/ para bibliotecas e sites/ para demonstrações.
packages/ опубликованные библиотеки (по папке на npm-пакет)
sites/ демо-сайты для каждой библиотеки
Um fluxo de trabalho conveniente está configurado aqui. Os sites de demonstração referenciam não os bundles compilados em dist, mas diretamente o código fonte da biblioteca em TypeScript via aliases. Quando o autor edita um componente, a demonstração é atualizada na hora via hot reload sem uma reconstrução prévia.
O início local é simples:
npm install
# Запуск витрины для луча
npm run dev -w @sites/beam
# Запуск витрины для liquid-эффектов
npm run dev -w @sites/gooey
Para deploy, dois pipelines separados são configurados: a demonstração border-beam é hospedada no GitHub Pages com um CNAME anexado, e liquid-gooey é automaticamente construída no Cloudflare Pages. A publicação no npm é acionada por tags de release no GitHub via um workflow separado.
Quando faz sentido usar esses componentes
Efeitos visuais são bons com moderação. Se você cercar cada card em um dashboard com feixes percorrendo, a interface vai se transformar em um enfeite de Natal. Mas há cenários onde essas bibliotecas economizam muito tempo:
- Páginas de destino e sites promocionais. Destacando o botão principal de call-to-action ou o card do plano de assinatura recomendado.
- Onboarding. Destaque suave da etapa ou campo de entrada obrigatório para chamar a atenção do usuário.
- Micro-interfaces. Abas incomuns, menus acordeão ou alternadores de modo onde animações suaves padrão parecem sem graça demais.
A única nuance a se ter em mente: filtros SVG com blur criam carga na GPU. Para listas pesadas com centenas de linhas, liquid-gooey não será adequado, mas para elementos de controle compactos funciona muito bem.
O que temos aqui é um exemplo prático de como empacotar padrões de design frequentemente recorrentes em componentes React organizados. A documentação no README ainda é concisa, mas as páginas de demonstração ao vivo dão uma imagem completa das capacidades. Se você está construindo um novo site promocional ou quer adicionar um toque de interatividade a formulários familiares, border-beam e liquid-gooey definitivamente merecem ser marcados.
Projetos relacionados