Bringing React Interfaces to Life with Border Beam and Liquid Gooey

Designers love adding small visual accents to their mockups. Sometimes it's a neon beam that should glide across a pricing card border, sometimes buttons should stick together and stretch like mercury droplets. When a frontend developer sees such a concept, the first thought is usually the same: here we go again, writing custom SVG filters, messing with color blend matrices, or configuring bulky CSS animations for a single detail.

Jakub Antalík decided to package these kinds of effects into compact React libraries. In his monorepo called Libraries, he gathered two ready-to-use tools: border-beam and liquid-gooey. Each one solves exactly one problem without overloading your project with unnecessary dependencies.

What's inside the repository

The repository contains two independent npm packages, each with its own interactive demo page:

• border-beam — an animated beam of light that smoothly slides along the perimeter of any block or card. The demo runs at beam.jakubantalik.com.
• liquid-gooey — a physical effect of viscous liquid and morphing (the so-called gooey effect), where elements connect and separate as they move. The demo is available at gooey.jakubantalik.com.

Both packages are installed separately, so you won't have to drag unnecessary code into your bundle if you only need border highlighting.

How Border Beam works

The border-running beam is commonly seen on modern SaaS service websites. It's usually placed on a premium pricing block or on an email input field during registration.

Installing the package is standard:

npm install border-beam

Under the hood, the component renders an animated gradient layer that gets clipped to the shape of the parent container. You don't need to manually calculate corner rounding coordinates or compute offsets through requestAnimationFrame. The component accepts parameters for speed, beam size, color, and delay, neatly laying on top of your existing layout.

Working with the liquid elements effect

The gooey effect is built on a combination of blur (feGaussianBlur) and a contrasting color matrix (feColorMatrix). In its raw form, configuring these SVG filters in React is inconvenient: you need to handle cross-browser compatibility, optimize redraws, and pass the correct filter IDs.

The liquid-gooey library takes care of this routine for you:

npm install liquid-gooey

It provides ready-made components for creating element merging and flowing effects. If you're building an unusual tab switcher, an interactive cursor, or a floating action menu, the component transforms standard block movements into a seamless viscous animation.

Convenient monorepo organization

Beyond the components themselves, the repository architecture is worth looking at. Jakub uses npm workspaces with a split into two directories: packages/ for libraries and sites/ for demo showcases.

packages/       опубликованные библиотеки (по папке на npm-пакет)
sites/          демо-сайты для каждой библиотеки

A convenient workflow is set up here. The demo sites reference not the compiled bundles in dist, but directly the library source code in TypeScript via aliases. When the author edits a component, the showcase updates on the fly via hot reload without a preliminary rebuild.

Local startup looks simple:

npm install

# Запуск витрины для луча
npm run dev -w @sites/beam

# Запуск витрины для liquid-эффектов
npm run dev -w @sites/gooey

For deployment, two separate pipelines are configured: the border-beam showcase is hosted on GitHub Pages with an attached CNAME, and liquid-gooey is automatically built on Cloudflare Pages. Publishing to npm is triggered by release tags on GitHub via a separate workflow.

When it makes sense to use these components

Visual effects are good in moderation. If you surround every card in a dashboard with running beams, the interface will turn into a Christmas garland. But there are scenarios where these libraries save a lot of time:

1. Landing pages and promo sites. Highlighting the main call-to-action button or the recommended subscription plan card.
2. Onboarding. Soft highlighting of the required step or input field to draw the user's attention.
3. Micro-interfaces. Unusual tabs, accordion menus, or mode switches where standard smooth animations look too plain.

The only nuance to keep in mind: SVG filters with blur create load on the GPU. For heavy lists with hundreds of rows, liquid-gooey won't be suitable, but for compact control elements it works great.

What we have here is a practical example of how to package frequently recurring design patterns into tidy React components. The documentation in the README is still concise, but the live demo pages give a complete picture of the capabilities. If you're building a fresh promo site or want to add a pinch of interactivity to familiar forms, border-beam and liquid-gooey are definitely worth bookmarking.