mrkeyoor.com_
Fri 14 Aug 13:52 UTC
Webevaluationupdated 14 Aug 2026

Libraries

Libraries is a small TypeScript monorepo containing two React visual-effect packages: `border-beam` adds animated glows around components, and `liquid-gooey` makes interface elements merge, morph, and trail like liquid. It solves effects that are surprisingly hard to implement without blurring real content, breaking interactions, or rebuilding animation physics for each component.

Verdict

Use `border-beam` when you want this exact polished accent without adding a broad animation framework; it is focused, documented, and quick to trial. Treat `liquid-gooey` as a promising specialist tool that deserves device and layout testing before production because its visual machinery and 0.1.0 API are young. The repository is appealing precisely because it stays narrow, but the native ports and broader framework support are not yet turnkey.

Setup4/5One-package install, followed by effect-specific CSS tuning
Docs5/5Detailed APIs, internals, performance behavior, and caveats
Community3/5Current maintainer activity, but a small contributor and issue base
Maturity3/5Beam is usable; gooey and native ports remain early

Who it’s for

React 18+ teams that need one polished animated accent rather than a full component system.
Product designers who want border glow, liquid merge, shape morph, or trailing movement with live DOM content.
Developers prepared to tune layout, backgrounds, overflow, and motion for a particular interface.
Teams that value TypeScript types, ESM and CommonJS builds, reduced-motion handling, and permissive licensing.

Who it’s NOT for

Vue 3 teams expecting a supported wrapper: open issue #8 asks for Vue support, while the published web packages declare React 18+ peer dependencies.
Swift developers expecting normal repository-level Swift Package Manager installation: issue #9 reports that Package.swift lives in a nested directory and cannot be added from the repository URL.
Designers who must supply arbitrary brand color sequences today: the border package documents four fixed palettes, and custom ordered colors remain an open pull request linked to issue #4.
Liquid effects that rotate elements or combine with existing image masks and element filters: the liquid-gooey README says rotation is not mirrored in version 1 and warns that dissolve and shape morph write those CSS properties.
Teams requiring a mature, heavily tested animation platform: liquid-gooey is at version 0.1.0, and the JavaScript package scripts expose builds and type checks but no automated test command.
React 17 or legacy-browser applications: both packages require React 18+, and border-beam targets modern browser animation features.

Setup reality

Installing either web package takes one npm command and both ship types plus ESM and CommonJS output. Getting the intended picture is more involved than importing a component. Border Beam needs the child radius, border, background opacity, stacking, and surrounding overflow to cooperate with the selected effect. Liquid Gooey needs transparent item backgrounds, a group sized for full movement, and careful choices around masks, filters, travel, and observation. The demos are important setup tools, not decoration. Repository development is straightforward with npm workspaces, but the SwiftUI and React Native ports live in nested experimental areas and have separate toolchains and caveats.

Two narrow packages hiding under a generic name

Libraries is not a component library in the usual sense. The monorepo holds two visual effects and their demo sites. border-beam wraps React content with an animated border glow. liquid-gooey renders merging, morphing, and trailing liquid surfaces while keeping buttons, text, images, focus rings, and event handlers in the real DOM above the effect. Both are MIT licensed and require React 18 or newer.

The narrow scope is attractive. Installing a full motion or design system to get one glowing card is wasteful, while reproducing a convincing border or goo filter from scratch can consume days. Each package can be installed independently, ships TypeScript declarations, and offers ESM and CommonJS entry points. The monorepo's demo applications point directly at package source during development, so changes hot-reload without a separate library build.

The two packages are not equally mature. Border Beam's manifest is version 1.4.0 and has a changelog, several presets, and native ports in progress. Liquid Gooey is version 0.1.0 and presents a much larger surface of measurement, SVG filtering, springs, and image warping. Evaluate them separately even though they share a repository.

Border Beam does one decorative job well

BorderBeam wraps any element and overlays a traveling or breathing glow. Rotate presets cover compact, full-border, and bottom-line treatments. Pulse presets provide an inner breathing edge or an outward halo. Four palettes, light and dark themes, strength, timing, brightness, saturation, hue range, static colors, and activation callbacks cover the common adjustments without exposing every internal CSS value.

The implementation is considerate. Decorative layers ignore pointer events. The component detects the first child's border radius unless given an explicit value. Rotating effects use CSS gradients, masks, custom properties, and keyframes. Pulse effects share a frame-capped loop that pauses when inactive, offscreen, or reduced motion is requested. The README explains how browsers without interpolated custom-property support fall back to stepped motion.

Consumers still need to understand stacking. The outward pulse renders behind an opaque child and requires visible overflow around the wrapper. It also expects the child to provide its own subtle border for the idle hairline. A transparent child can expose the inner glow, while a parent with clipped overflow can cut off the halo. These are predictable CSS constraints, but they mean the package is not guaranteed to look like the demo after one import.

Accessibility is mostly appropriate for a decorative effect. Pulse modes include reduced-motion behavior. The README says rotate modes respect that preference when the consumer implements it, which shifts some responsibility to the application. Teams should verify the actual mode they ship rather than assuming every preset behaves identically.

Liquid Gooey is more original and more demanding

Most gooey UI demos apply blur and alpha contrast directly to content. That softens text and images, destroys normal shadows, and often behaves badly in Safari. Liquid Gooey splits the illusion into two layers: an SVG silhouette below carries the filter and merged shadow, while normal DOM content stays sharp and interactive above. That architecture makes the package useful for real controls rather than decorative circles.

The default morph effect merges touching pieces and can animate position, scale, shape, corner radius, and a temporary content blur. The move effect lets an application move the element while a spring-driven liquid shape trails behind. An optional dissolve modifier warps imagery where morphing surfaces touch. High-level knobs provide speed, bounce, springiness, wobble, stretch, and trail, while an advanced escape hatch exposes the underlying engine values.

Performance design is documented rather than hand-waved. Component-driven springs compile to cached CSS linear() easing. Observed elements share one measurement loop per group, which sleeps after stillness and wakes from relevant events. Dissolve rendering appears only near contact. These choices are encouraging, but every real interface should still be profiled on its lowest target device, especially with several observed or dissolving items.

The caveats are unusually specific. Dissolve writes mask-image on images, shape morph writes an element filter, and those features should not be combined with consumer styles using the same properties. Rotation is not mirrored in version 1. The group must reserve enough space for all travel, and item backgrounds normally need to be transparent. This is specialist rendering, not a drop-in replacement for ordinary layout animation.

Native ports are promising, not the default product

The tree includes a SwiftUI port using Metal shaders and a React Native port with an example application. The Swift package says all five beam types and four variants are implemented for iOS 17 and macOS 14, but visual parity tuning remains pending. Building requires full Xcode, and simulator setup adds XcodeGen and platform downloads.

More importantly, issue #9 reports that Swift Package Manager cannot add the repository through the documented URL because the manifest sits below the repository root. Until packaging changes, native users should treat the source as a port to inspect or integrate manually. Issue #8 similarly shows that Vue support is a request, not a current feature. The published web packages are the part ready for ordinary consumption.

Healthy small-project activity with uneven release signals

The last push was August 11, 2026, and issues and pull requests were updated that week. The open count of five includes both. The latest GitHub Release is v1.3.0 from July 2, while the tree contains a 1.4.0 tag and the Border Beam package manifest also says 1.4.0. That mismatch is not abandonment, but consumers should verify the npm version and source tag they are actually installing instead of relying only on the Releases page.

Documentation is the standout. The package READMEs explain props, rendering architecture, performance, accessibility, and conflicts with consumer CSS. JavaScript validation is lighter: package scripts provide builds and type checks, but no automated test command is exposed. The Swift port does include snapshot and specification tests.

Choose this repository for its exact effects. Border Beam is the safer production choice today. Liquid Gooey is the more distinctive idea, but pin it, test its caveats, and expect an early API to move.

Alternatives

ProjectWhat it isPick it when
Magic UIA broad collection of animated interface components and effects copied into an application as source.pick this instead when you want a larger effect catalog and prefer owning copy-pasted component code.
MotionA general animation library for React and JavaScript with gestures, layout animation, and orchestration.pick this instead when you need a flexible animation foundation rather than two finished visual treatments.
React SpringA mature React library for physics-based animation primitives across multiple render targets.pick this instead when spring behavior and custom motion systems matter more than built-in beam or liquid rendering.

What people are saying

  1. [github-trending] Jakubantalik/Libraries

Sources

  1. Libraries repository README
  2. Border Beam package documentation
  3. Liquid Gooey package documentation
  4. Libraries v1.3.0 release
  5. Swift Package Manager installation issue
  6. Vue 3 support request