Sobre el proyecto

# Libraries.dev **Bibliotecas UI de alta calidad para agentes de IA.** Siete bibliotecas React para los efectos que hacen que una interfaz se sienta viva: un haz de luz que recorre el borde de una tarjeta, orbes que piensan mientras un modelo trabaja, avatares de bots con caras animadas, formas que se fusionan como líquido, un brillo que se eleva con tu voz, metal cepillado que captura la luz, y un cargador de imágenes que disuelve un mosaico de píxeles en una foto real. Cada una se instala desde npm y se integra en tu aplicación como un componente único que envuelve el elemento que ya tienes. Tu marcado conserva su semántica, el efecto se renderiza alrededor o detrás, y todo se ajusta mediante props en lugar de WebGL escrito a mano. | Biblioteca | Qué hace | npm | Página | | --- | --- | --- | --- | | [Border beam](packages/border-beam) | Un brillo suave que recorre el borde de una tarjeta, botón o campo de entrada | `npm install border-beam` | [libraries.dev/beam](https://libraries.dev/beam) | | [Thinking orbs](packages/thinking-orbs) | Orbes que piensan mientras esperas — nueve estados de carga para interfaces de IA | `npm install thinking-orbs` | [libraries.dev/orbs](https://libraries.dev/orbs) | | [Bot avatars](packages/bot-avatars) | Avatares de bots animados con caras vivas — dieciocho formas brillantes, cuatro estados, para agentes de IA | `npm install bot-avatars` | [libraries.dev/avatars](https://libraries.dev/avatars) | | [Gooey](packages/liquid-gooey) | Piezas que se fusionan como goma y se transforman como gelatina mientras el texto permanece nítido | `npm install liquid-gooey` | [libraries.dev/gooey](https://libraries.dev/gooey) | | [Voice](packages/voice-glow) | Un brillo que se eleva con tu voz desde la parte inferior de un campo de chat o pantalla de teléfono | `npm install voice-glow` | [libraries.dev/voice](https://libraries.dev/voice) | | [Metal](packages/metal-fx) | Metal líquido para botones, iconos, texto e insignias, con reflejos y luz del cursor | `npm install metal-fx` | [libraries.dev/metal](https://libraries.dev/metal) | | [Image](packages/img-fx) | Un cargador que se convierte en la imagen — un mosaico de píxeles WebGL que se asienta en la foto | `npm install img-fx` | [libraries.dev/image](https://libraries.dev/image) | Prueba cada una en [libraries.dev](https://libraries.dev): una vista previa en vivo para experimentar, el comando de instalación, el código de uso, y un playground que copia la configuración exacta. ## Cómo usar Cada biblioteca se entrega como un prompt. Cópialo, pégalo en tu agente de codificación y hazlo tuyo — tres pasos, sin configuración. 1. **Copia el prompt.** Cada página de biblioteca tiene un botón *Copy prompt*. Un pegado le da a tu agente toda la biblioteca: su vocabulario de parámetros y tu configuración actual. 2. **Pégalo en tu agente.** Suéltalo en Claude Code, Cursor o Codex. El agente instala el paquete y lo conecta, adaptado a tu tema. 3. **Hazlo tuyo.** Abre el [Studio](https://libraries.dev/studio.html) con Pro para cada control, ajústalo en vivo y copia el resultado como props. O la forma simple: ```bash npm install border-beam # o thinking-orbs, bot-avatars, liquid-gooey, voice-glow, metal-fx, img-fx ``` ```tsx import { BorderBeam } from "border-beam"; <BorderBeam> <button>Get started</button> </BorderBeam> ``` El README de cada paquete documenta sus props. ## FAQ **¿Qué necesito?** React 18 o más reciente. Cada biblioteca es un paquete independiente con cero dependencias en tiempo de ejecución, excepto Image, que también necesita `three` como dependencia par. **¿Funcionan con agentes de codificación?** Sí — ese es el punto. Cada biblioteca se instala y configura limpiamente desde Cursor, Claude Code y Codex, y el botón de copiar-prompt de cada playground entrega a tu agente el vocabulario completo de parámetros junto con tu configuración actual. **¿Modo claro y oscuro?** Ambos, detectados por ti. El valor predeterminado `theme="auto"` resuelve un atributo `data-theme` o clase `dark` en un ancestro, luego usa `prefers-color-scheme` como respaldo, actualizándose en vivo cuando cambia cualquiera. Pasa `theme="dark"` o `theme="light"` para fijar uno. **¿Qué son Pro y el Studio?** Un plan en todas las bibliotecas. Pro desbloquea el [Studio](https://libraries.dev/studio.html) — personalización profunda por biblioteca más allá de los playgrounds públicos, con exportación de la configuración exacta — además de ajustes preestablecidos de Pro y cada futura biblioteca y actualización. Ver [pricing](https://libraries.dev/pro.html). **¿Proyectos comerciales?** Las bibliotecas son MIT — úsalas en cualquier lugar, incluido trabajo comercial. El contenido Pro (exportaciones del Studio, ajustes preestablecidos y recetas de Pro) está licenciado para ti o tu equipo bajo el plan que compres, para proyectos ilimitados. ## Trabajar en este repositorio Espacios de trabajo npm: `packages/` contiene las bibliotecas publicadas (una carpeta por paquete npm, cada una con su propio README y LICENSE), `sites/` los sitios de demostración — `sites/home` es libraries.dev. ```bash npm install npm run build:site-home # cada biblioteca + libraries.dev, como lo hace CI npm run dev -w @sites/home # libraries.dev con cada página y el Studio npm run typecheck # cada espacio de trabajo ``` El sitio principal importa los paquetes construidos, así que construye una biblioteca (`npm run build:beam`, `build:orbs`, `build:gooey`, `build:voice`, `build:metal`, `build:image`) antes de su página o banco de pruebas. Las demos independientes (`@sites/beam`, `@sites/gooey`, `@sites/orbs`) alias su biblioteca a su fuente y recargan en caliente sin reconstruir. ## Lanzamiento La publicación es por paquete (`publish.yml`, `npm publish -w <package>`): ejecuta el flujo de trabajo manualmente con el nombre del paquete, o publica una versión de GitHub cuyo tag sea `<package>@<version>` (`voice-glow@0.2.0`). Una versión que el registro ya tenga se omite. ## Despliegues Los dos sitios se alojan por separado, porque GitHub Pages sirve un dominio personalizado por repositorio: - **beam.jakubantalik.com** — GitHub Pages vía `.github/workflows/deploy.yml`; el enlace de dominio vive en `sites/beam/public/CNAME`. - **gooey.jakubantalik.com** — Cloudflare Pages, construido desde este repositorio con `npm run build:site-gooey`, salida `sites/gooey/dist`. - **orbs.jakubantalik.com** — Cloudflare Pages, construido con `npm run build:site-orbs`, salida `sites/orbs/dist`. - **libraries.dev** — Cloudflare Pages, desplegado por `.github/workflows/deploy-home.yml` en cada push a `main` (`npm run build:site-home`, salida `sites/home/dist`). El sitio principal: página de inicio, una página y banco de pruebas del Studio por biblioteca, precios de Pro, cuenta y páginas legales. Su backend es `api.libraries.dev`, un Worker en el repositorio privado `libraries-pro` — ver `sites/home/README.md`. `.node-version` fija Node 20 para las construcciones de Cloudflare, coincidiendo con la versión que usan los flujos de trabajo de GitHub; el predeterminado de Cloudflare es más antiguo. El **Retry deployment** de Cloudflare reproduce el mismo commit en lugar de buscar la punta de la rama, así que una construcción que falló en un commit desactualizado sigue fallando. Haz un nuevo commit para obtener uno fresco. Solo el sitio beam lleva un `public/CNAME`; ese archivo es un mecanismo de GitHub Pages. Los sitios alojados en Cloudflare vinculan su dominio en el proyecto Pages en su lugar, y el registro DNS vive en el registrador (inetadmin), no en Cloudflare — `jakubantalik.com` no está en los servidores de nombres de Cloudflare. `thinking-orbs` llegó por `git subtree`, así que su historial completo está en este repositorio — pero esos commits tocaron `src/…`, no `packages/thinking-orbs/src/…`. Por lo tanto, `git log -- packages/thinking-orbs` se detiene en la fusión. Para leer el historial real, registra desde el commit que nombra la fusión: ```bash git log --oneline 9c6d5c3 -- ports/ios/PillsDemo/Sources/PillsApp.swift git log --follow packages/thinking-orbs/src/index.ts ``` `thinking-orbs` también incluye puertos nativos bajo [`packages/thinking-orbs/ports`](packages/thinking-orbs/ports) — un paquete React Native y un paquete SwiftUI, mantenidos en sintonía con el renderizador web por los vectores dorados en `spec/`. Ninguno está publicado aún.