Dando vida a interfaces React con Border Beam y Liquid Gooey
A los diseñadores les encanta añadir pequeños acentos visuales a sus mockups. A veces es un haz neón que debe deslizarse por el borde de una tarjeta de precios, a veces los botones deben pegarse y estirarse como gotas de mercurio. Cuando un desarrollador frontend ve un concepto así, el primer pensamiento suele ser el mismo: aquí vamos de nuevo, escribiendo filtros SVG personalizados, lidiando con matrices de mezcla de colores, o configurando animaciones CSS voluminosas para un solo detalle.
Jakub Antalík decidió empaquetar este tipo de efectos en librerías React compactas. En su monorepo llamado Libraries, reunió dos herramientas listas para usar: border-beam y liquid-gooey. Cada una resuelve exactamente un problema sin sobrecargar tu proyecto con dependencias innecesarias.
Qué hay dentro del repositorio
El repositorio contiene dos paquetes npm independientes, cada uno con su propia página de demo interactiva:
border-beam— un haz de luz animado que se desliza suavemente por el perímetro de cualquier bloque o tarjeta. La demo está en beam.jakubantalik.com.liquid-gooey— un efecto físico de líquido viscoso y morphing (el llamado efecto gooey), donde los elementos se conectan y separan mientras se mueven. La demo está disponible en gooey.jakubantalik.com.
Ambos paquetes se instalan por separado, así que no tendrás que arrastrar código innecesario a tu bundle si solo necesitas resaltado de bordes.
Cómo funciona Border Beam
El haz que recorre el borde se ve comúnmente en sitios web modernos de servicios SaaS. Generalmente se coloca en un bloque de precios premium o en un campo de email durante el registro.
Instalar el paquete es estándar:
npm install border-beam
Internamente, el componente renderiza una capa de gradiente animado que se recorta a la forma del contenedor padre. No necesitas calcular manualmente las coordenadas de redondeo de esquinas ni calcular offsets a través de requestAnimationFrame. El componente acepta parámetros para velocidad, tamaño del haz, color y delay, colocándose encima de tu layout existente.
Trabajando con el efecto de elementos líquidos
El efecto gooey se construye con una combinación de desenfoque (feGaussianBlur) y una matriz de colores contrastante (feColorMatrix). En su forma cruda, configurar estos filtros SVG en React es inconveniente: necesitas manejar compatibilidad entre navegadores, optimizar redibujados y pasar los IDs de filtro correctos.
La librería liquid-gooey se encarga de esta rutina por ti:
npm install liquid-gooey
Proporciona componentes listos para usar para crear efectos de fusión y flujo de elementos. Si estás construyendo un conmutador de tabs inusual, un cursor interactivo, o un menú de acciones flotante, el componente transforma los movimientos estándar de bloques en una animación viscosa fluida.
Organización conveniente del monorepo
Más allá de los componentes en sí, la arquitectura del repositorio vale la pena ver. Jakub usa npm workspaces con una división en dos directorios: packages/ para librerías y sites/ para showcases de demos.
packages/ опубликованные библиотеки (по папке на npm-пакет)
sites/ демо-сайты для каждой библиотеки
Aquí se configura un flujo de trabajo conveniente. Los sitios de demo referencian no los bundles compilados en dist, sino directamente el código fuente de la librería en TypeScript mediante aliases. Cuando el autor edita un componente, el showcase se actualiza al vuelo mediante hot reload sin una recompilación preliminar.
El inicio local es simple:
npm install
# Запуск витрины для луча
npm run dev -w @sites/beam
# Запуск витрины для liquid-эффектов
npm run dev -w @sites/gooey
Para el despliegue, se configuran dos pipelines separados: el showcase de border-beam está alojado en GitHub Pages con un CNAME adjunto, y liquid-gooey se compila automáticamente en Cloudflare Pages. La publicación en npm se activa mediante tags de release en GitHub a través de un workflow separado.
Cuándo tiene sentido usar estos componentes
Los efectos visuales son buenos con moderación. Si rodeas cada tarjeta de un dashboard con haces que recorren los bordes, la interfaz se convertirá en una guirnalda de Navidad. Pero hay escenarios donde estas librerías ahorran mucho tiempo:
- Páginas de destino y sitios promocionales. Resaltar el botón principal de llamada a la acción o la tarjeta del plan de suscripción recomendado.
- Onboarding. Resaltado suave del paso requerido o campo de entrada para atraer la atención del usuario.
- Micro-interfaces. Tabs inusuales, menús acordeón o conmutadores de modo donde las animaciones suaves estándar se ven demasiado simples.
La única nuance a tener en cuenta: los filtros SVG con desenfoque crean carga en la GPU. Para listas pesadas con cientos de filas, liquid-gooey no será adecuado, pero para elementos de control compactos funciona genial.
Lo que tenemos aquí es un ejemplo práctico de cómo empaquetar patrones de diseño que se repiten frecuentemente en componentes React ordenados. La documentación en el README es todavía concisa, pero las páginas de demo en vivo dan una imagen completa de las capacidades. Si estás construyendo un sitio promocional nuevo o quieres añadir un toque de interactividad a formularios familiares, border-beam y liquid-gooey definitivamente vale la pena marcar como favoritos.
Proyectos relacionados