design-infraGitHub
← Sources

libraries.dev

npmfree

"High-crafted UI libraries for AI agents" — MIT npm packages for agent UIs: thinking-orbs, border-beam, liquid-gooey, voice-glow, bot-avatars, metal-fx, img-fx.

$pnpm add <package>

libraries.dev (by Jakub Antalik et al.)

Use it for: the "alive" details of AI products — what the agent is doing (orbs), the one active element (border beam), voice mode (voice glow), agent identity (bot avatars), premium CTAs (metal). Each is a zero-dependency npm package with a small React API.

packagewhatnotes
thinking-orbs9 dotted-orb states for agent activity, sizes 64/32/20wrapped by @oc/agent-status; also thinking-orbs-native, SwiftUI
border-beamtraveling / breathing glow around any elementwrapped by @oc/beam-card; theme defaults to dark
liquid-gooeyMorph / Move / Melt / Bend gooey effectsSVG filters, Safari-safe
voice-glowsound-reactive bottom glowfeed it mic intensity
bot-avatars18 animated bot avatars, idle/working/sleepingcanvas 2D
metal-fxliquid-metal rings, buttons, text, badgesPaper Shaders engine
img-fxWebGL image-generation loaderpeer dep three

Source: https://github.com/Jakubantalik/Libraries.dev (monorepo, packages/*).

Gotchas

  • thinking-orbs theme="auto" reads .dark / data-theme on ancestors — works with shadcn out of the box.
  • border-beam does not auto-detect theme unless theme="auto" (system preference only).
  • WebGL packages (img-fx, metal-fx): client-only, one or two per page.