Sobre o projeto

# Libraries.dev **Bibliotecas de UI altamente elaboradas para agentes de IA.** Sete bibliotecas React para os efeitos que fazem uma interface parecer viva: um feixe de luz que percorre a borda de um cartão, orbes que pensam enquanto um modelo trabalha, avatares de bot com rostos vivos, formas que se fundem como líquido, um brilho que sobe com a sua voz, metal escovado que capta a luz, e um carregador de imagens que dissolve um mosaico de píxeis numa fotografia real. Cada uma instala-se via npm e entra na sua aplicação como um único componente que envolve o elemento que já tem. O seu markup mantém a semântica, o efeito renderiza-se à volta ou por trás dele, e tudo é ajustado por props em vez de WebGL escrito à mão. | Biblioteca | O que faz | npm | Página | | --- | --- | --- | --- | | [Border beam](packages/border-beam) | Um brilho suave que percorre a borda de um cartão, botão ou input | `npm install border-beam` | [libraries.dev/beam](https://libraries.dev/beam) | | [Thinking orbs](packages/thinking-orbs) | Orbes que pensam enquanto espera — nove estados de carregamento para interfaces de IA | `npm install thinking-orbs` | [libraries.dev/orbs](https://libraries.dev/orbs) | | [Bot avatars](packages/bot-avatars) | Avatares de bot animados com rostos vivos — dezoito formas brilhantes, quatro estados, para agentes de IA | `npm install bot-avatars` | [libraries.dev/avatars](https://libraries.dev/avatars) | | [Gooey](packages/liquid-gooey) | Peças que se fundem como gosma e se transformam como gelatina enquanto o texto permanece nítido | `npm install liquid-gooey` | [libraries.dev/gooey](https://libraries.dev/gooey) | | [Voice](packages/voice-glow) | Um brilho que sobe com a sua voz a partir da base de um input de chat ou ecrã de telefone | `npm install voice-glow` | [libraries.dev/voice](https://libraries.dev/voice) | | [Metal](packages/metal-fx) | Metal líquido para botões, ícones, texto e badges, com reflexos e luz do cursor | `npm install metal-fx` | [libraries.dev/metal](https://libraries.dev/metal) | | [Image](packages/img-fx) | Um carregador que se torna na imagem — um mosaico de píxeis WebGL que assenta na imagem | `npm install img-fx` | [libraries.dev/image](https://libraries.dev/image) | Experimente cada uma em [libraries.dev](https://libraries.dev): uma pré-visualização ao vivo para brincar, o comando de instalação, o código de utilização, e um playground que copia a configuração exata. ## Como usar Cada biblioteca é distribuída como um prompt. Copie-o, cole-o no seu agente de programação, e torne-o seu — três passos, sem configuração. 1. **Copie o prompt.** Cada página de biblioteca tem um botão *Copy prompt*. Uma colagem dá ao seu agente a biblioteca inteira: o seu vocabulário de parâmetros e as suas definições atuais. 2. **Cole-o no seu agente.** Coloque-o no Claude Code, Cursor ou Codex. O agente instala o pacote e integra-o, ajustado ao seu tema. 3. **Torne-o seu.** Abra o [Studio](https://libraries.dev/studio.html) com Pro para todos os controlos, ajuste ao vivo e copie o resultado como props. Ou da forma simples: ```bash npm install border-beam # ou thinking-orbs, bot-avatars, liquid-gooey, voice-glow, metal-fx, img-fx ``` ```tsx import { BorderBeam } from "border-beam"; <BorderBeam> <button>Get started</button> </BorderBeam> ``` O README de cada pacote documenta as suas props. ## FAQ **Do que preciso?** React 18 ou mais recente. Cada biblioteca é um pacote autónomo sem dependências de runtime, exceto Image, que também precisa de `three` como peer dependency. **Funcionam com agentes de programação?** Sim — é esse o objetivo. Cada biblioteca instala-se e configura-se de forma limpa a partir do Cursor, Claude Code e Codex, e o botão copy-prompt de cada playground entrega ao seu agente o vocabulário completo de parâmetros da biblioteca juntamente com as suas definições atuais. **Modo claro e escuro?** Ambos, detetados por si. O `theme="auto"` predefinido resolve um atributo `data-theme` ou uma classe `dark` num ancestral, depois recorre a `prefers-color-scheme`, atualizando ao vivo quando qualquer um muda. Passe `theme="dark"` ou `theme="light"` para fixar um. **O que são o Pro e o Studio?** Um plano para todas as bibliotecas. O Pro desbloqueia o [Studio](https://libraries.dev/studio.html) — personalização profunda, por biblioteca, para além dos playgrounds públicos, com exportação da configuração exata — mais presets Pro e todas as bibliotecas e atualizações futuras. Veja [preços](https://libraries.dev/pro.html). **Projetos comerciais?** As bibliotecas são MIT — use-as em qualquer lugar, incluindo trabalho comercial. O conteúdo Pro (exportações do Studio, presets e receitas Pro) é licenciado a si ou à sua equipa sob o plano que comprar, para projetos ilimitados. ## Trabalhar neste repositório npm workspaces: `packages/` contém as bibliotecas publicadas (uma pasta por pacote npm, cada uma com o seu próprio README e LICENSE), `sites/` os sites de demonstração — `sites/home` é o libraries.dev. ```bash npm install npm run build:site-home # todas as bibliotecas + libraries.dev, como o CI faz npm run dev -w @sites/home # libraries.dev com todas as páginas e o Studio npm run typecheck # todos os workspaces ``` O site principal importa os pacotes compilados, por isso compile uma biblioteca (`npm run build:beam`, `build:orbs`, `build:gooey`, `build:voice`, `build:metal`, `build:image`) antes da sua página ou bench. As demos autónomas (`@sites/beam`, `@sites/gooey`, `@sites/orbs`) fazem alias da sua biblioteca ao seu código-fonte e recarregam a quente sem recompilar. ## Lançamento A publicação é por pacote (`publish.yml`, `npm publish -w <package>`): execute o workflow manualmente com o nome do pacote, ou publique um GitHub release cuja tag seja `<package>@<version>` (`voice-glow@0.2.0`). Uma versão que o registo já tenha é ignorada. ## Deploys Os dois sites são alojados separadamente, porque o GitHub Pages serve um domínio personalizado por repositório: - **beam.jakubantalik.com** — GitHub Pages via `.github/workflows/deploy.yml`; a ligação do domínio está em `sites/beam/public/CNAME`. - **gooey.jakubantalik.com** — Cloudflare Pages, compilado a partir deste repositório com `npm run build:site-gooey`, output `sites/gooey/dist`. - **orbs.jakubantalik.com** — Cloudflare Pages, compilado com `npm run build:site-orbs`, output `sites/orbs/dist`. - **libraries.dev** — Cloudflare Pages, implementado por `.github/workflows/deploy-home.yml` em cada push para `main` (`npm run build:site-home`, output `sites/home/dist`). O site principal: landing, uma página e um bench do Studio por biblioteca, preços Pro, páginas de conta e legais. O seu backend é `api.libraries.dev`, um Worker no repositório privado `libraries-pro` — veja `sites/home/README.md`. `.node-version` fixa o Node 20 para as compilações Cloudflare, correspondendo à versão que os workflows do GitHub usam; a predefinição da Cloudflare é mais antiga. O **Retry deployment** da Cloudflare reproduz o mesmo commit em vez de ir buscar a ponta do branch, por isso uma compilação que falhou num commit desatualizado continua a falhar. Faça push de um novo commit para obter um novo. Apenas o site beam tem um `public/CNAME`; esse ficheiro é um mecanismo do GitHub Pages. Os sites alojados na Cloudflare ligam o seu domínio no projeto Pages, e o registo DNS em si está no registar (inetadmin), não na Cloudflare — `jakubantalik.com` não está nos nameservers da Cloudflare. O `thinking-orbs` chegou por `git subtree`, por isso o seu histórico completo está neste repositório — mas esses commits tocaram em `src/…`, não em `packages/thinking-orbs/src/…`. O `git log -- packages/thinking-orbs` portanto para no merge. Para ler o histórico real, faça log a partir do commit que o merge nomeia: ```bash git log --oneline 9c6d5c3 -- ports/ios/PillsDemo/Sources/PillsApp.swift git log --follow packages/thinking-orbs/src/index.ts ``` O `thinking-orbs` também tem ports nativos em [`packages/thinking-orbs/ports`](packages/thinking-orbs/ports) — um pacote React Native e um pacote SwiftUI, mantidos em sincronia com o renderizador web pelos golden vectors em `spec/`. Nenhum está publicado ainda.