Libraries.dev

Install from npm by the package name, not the display name. The five are border-beam, thinking-orbs, liquid-gooey, metal-fx and img-fx. The site calls them Beam, Orb, Gooey, Metal and Image. Use the Copy prompt button on a library page. It hands you the install line, the usage and the full prop vocabulary in one paste, which is faster and more exact than reading the playground. Add three as a peer only for img-fx. The other four declare no runtime dependency at all. Budget about 83 KB gzipped for all five, and React 18 or newer. The default theme is "auto", so light and dark resolve without a prop. Do not trust a status code from this host. It has a catch-all route: /zzz-not-a-page returns 200, and /llms.txt and /sitemap.xml both return the HTML shell rather than a file. Real pages include /beam, /gooey, /metal, /image, /how-to-use, /studio and /pro.

Why it is here. It is the clearest example of a component library designed around the agent rather than the reader: every effect ships as a prompt, and the paid tier sells a skill that teaches an agent the parameter vocabulary. Two million npm downloads a month say the approach works.

License

MIT, Commercial license

Pricing

Free, Open source, Freemium, Subscription, One-time purchase, Free but account required

Framework

React, Next.js

Styling

Unknown

Distribution

npm package, Web app / online tool, Agent skill / rules pack

Platform

Web

Content type

Code, Prompts

Agent readiness

Ships a ready LLM prompt, Agent skill or rules pack, CLI installable, Readable open source

Accessibility

Unknown

Maturity

Actively maintained

Pricing detail

The five libraries are MIT and free on npm, and the site says they stay free. Pro is a separate plan for the Studio, the presets and the agent skill. Solo costs $9 a month, $90 a year, or $149 once. Team costs $39 a month, $390 a year, or $499 once. Pro adds a commercial licence for unlimited projects, client work included.

Package

border-beam

• Beam · border-beam: a rainbow glow riding the border of any element↗
• Gooey · liquid-gooey: pieces that merge and morph like goo↗
• Metal · metal-fx: a liquid-metal WebGL ring around buttons and icons↗
• Image · img-fx: a WebGL image-generation loader for cards↗
• How to use · The three-step agent flow and the table of all five libraries↗

• five MIT React effect libraries
• about 2M npm downloads a month
• every library ships as a copy-paste agent prompt
• no runtime dependency, about 83 KB for all five
• a catch-all route returns 200 for any path

Verified 2026-09-07. HTTP 200. https://libraries.dev/ 200, 86,250 bytes. Title "Libraries.dev: High-crafted UI libraries for AI agents". The meta description reads "Home of the UI effect libraries Beam, Orb, Gooey, Metal and Image. Production-ready React effects you can install from npm." The page shows "2,300,000+ installs", the heading "High-crafted UI libraries for AI agents", and the five libraries with their descriptions: Border beam "Animated rainbow glow riding any border", Thinking orbs "Thought-orb loading states for AI interfaces", Gooey "Liquid UI: pieces merge and morph like goo", Liquid Metal "Real-time chrome ring for buttons and icons", Image generation "WebGL image-generation loader for cards". The FAQ states "All five libraries (Beam, Orb, Gooey, Metal and Image) are MIT-licensed and free on npm" and names the packages border-beam, thinking-orbs, liquid-gooey, metal-fx and img-fx. It also states "React 18 or newer. Each library is a standalone package with zero runtime dependencies, except Image generation which also needs three as a peer dependency. All five together weigh about 83 KB gzipped." The three-step section reads "Every library ships as a prompt. One copy, and your coding agent builds it in: Claude Code, Cursor or Codex." https://libraries.dev/how-to-use 200 at 40,153 bytes and carries the five-library table plus the line "each playground has a copy-prompt button that hands your agent the library's full parameter vocabulary along with your current settings" and "The default theme=\"auto\" resolves". Its footer credits "Created by Jakub Antalik" and "Made with help from Alexandr Brinza (Orbs) and Martin Petercak (Metal)". https://libraries.dev/pro 200 at 238,942 bytes and lists Monthly, Annual and Lifetime with Solo at $9/mo and Team, plus the strings $9, $90, $149, $39, $390 and $499, and the lines "Studio access: deep customization of all five libraries, with an AI coding agent", "Commercial license, unlimited projects" and "plus presets, recipes and the Pro skill for your coding agent". npm registry: border-beam 1.3.0 MIT no dependencies created 2026-04-12, thinking-orbs 0.3.1 MIT created 2026-07-21, liquid-gooey 0.2.1 MIT created 2026-08-11, metal-fx 2.0.10 MIT created 2026-05-04, img-fx 0.5.1 MIT created 2026-05-16. npm downloads for the last month: border-beam 499,760, thinking-orbs 1,331,345, liquid-gooey 22,583, metal-fx 63,577, img-fx 82,161, which sums to 1,999,426. Catch-all check: /zzz-not-a-page returns 200 with the site HTML, and /llms.txt and /sitemap.xml both return the same HTML shell rather than a file, so neither exists. /pricing, /libraries, /border-beam, /thinking-orbs and /orb all return the 86,250-byte home page, while /beam 30,124, /gooey 26,799, /metal 26,892, /image 25,252, /studio 34,178 and /how-to-use 40,153 are distinct pages. The home page quotes Guillermo Rauch, Des Traynor, Kris Puckett, Adam Whitcroft, Yasir and Tran Mau Tri Tam.

• GSAP · JavaScript animation engine with 19 plugins, now free for commercial useS
• Lenis · Smooth-scroll engine that keeps native scroll and honours reduced-motionS
• Motion · Hybrid JS/React/Vue animation engine with springs, layout and scroll animationS
• NumberFlow · Dependency-free animated number component for React, Vue, Svelte and JSS
• React Bits · 234 copy-paste animated React components: text effects, cursors, WebGL backgroundsS
• React Native Reanimated · UI-thread animation library for React Native, v4 on the New ArchitectureS