Об этом проекте

# Libraries.dev **Высококачественные UI-библиотеки для ИИ-агентов.** Семь React-библиотек для эффектов, которые оживляют интерфейс: луч света, бегущий по границе карточки, орбы, которые «думают», пока работает модель, аватары ботов с живыми лицами, фигуры, сливающиеся как жидкость, свечение, поднимающееся вместе с вашим голосом, шлифованный металл, ловящий свет, и загрузчик изображений, растворяющий пиксельную мозаику в настоящую фотографию. Каждая устанавливается из npm и встраивается в ваше приложение одним компонентом, который оборачивает уже имеющийся элемент. Ваша разметка сохраняет семантику, эффект рендерится вокруг или позади неё, а всё управляется пропсами, а не написанным вручную WebGL. | Библиотека | Что делает | npm | Страница | | --- | --- | --- | --- | | [Border beam](packages/border-beam) | Мягкое свечение, скользящее по границе карточки, кнопки или поля ввода | `npm install border-beam` | [libraries.dev/beam](https://libraries.dev/beam) | | [Thinking orbs](packages/thinking-orbs) | Орбы, которые «думают», пока вы ждёте — девять состояний загрузки для ИИ-интерфейсов | `npm install thinking-orbs` | [libraries.dev/orbs](https://libraries.dev/orbs) | | [Bot avatars](packages/bot-avatars) | Анимированные аватары ботов с живыми лицами — восемнадцать глянцевых форм, четыре состояния, для ИИ-агентов | `npm install bot-avatars` | [libraries.dev/avatars](https://libraries.dev/avatars) | | [Gooey](packages/liquid-gooey) | Части, сливающиеся как слизь и перетекающие как желе, при этом текст остаётся чётким | `npm install liquid-gooey` | [libraries.dev/gooey](https://libraries.dev/gooey) | | [Voice](packages/voice-glow) | Свечение, поднимающееся вместе с вашим голосом снизу поля чата или экрана телефона | `npm install voice-glow` | [libraries.dev/voice](https://libraries.dev/voice) | | [Metal](packages/metal-fx) | Жидкий металл для кнопок, иконок, текста и бейджей, с отражениями и светом от курсора | `npm install metal-fx` | [libraries.dev/metal](https://libraries.dev/metal) | | [Image](packages/img-fx) | Загрузчик, который становится изображением — WebGL-мозаика пикселей, оседающая в картинку | `npm install img-fx` | [libraries.dev/image](https://libraries.dev/image) | Попробуйте каждую на [libraries.dev](https://libraries.dev): живое превью для экспериментов, команда установки, код использования и песочница, копирующая точную конфигурацию. ## Как использовать Каждая библиотека поставляется как промпт. Скопируйте его, вставьте в своего кодинг-агента и сделайте её своей — три шага, без настройки. 1. **Скопируйте промпт.** На странице каждой библиотеки есть кнопка *Copy prompt*. Одна вставка даёт вашему агенту всю библиотеку: её словарь параметров и ваши текущие настройки. 2. **Вставьте его в своего агента.** Отправьте его в Claude Code, Cursor или Codex. Агент установит пакет и подключит его, подогнав под вашу тему. 3. **Сделайте её своей.** Откройте [Studio](https://libraries.dev/studio.html) с Pro для доступа ко всем настройкам, настройте вживую и скопируйте результат как пропсы. Или обычным способом: ```bash npm install border-beam # или thinking-orbs, bot-avatars, liquid-gooey, voice-glow, metal-fx, img-fx ``` ```tsx import { BorderBeam } from "border-beam"; <BorderBeam> <button>Get started</button> </BorderBeam> ``` README каждого пакета описывает его пропсы. ## FAQ **Что нужно?** React 18 или новее. Каждая библиотека — самостоятельный пакет без runtime-зависимостей, кроме Image, которому также нужен `three` как peer-зависимость. **Работают ли они с кодинг-агентами?** Да — в этом и смысл. Каждая библиотека чисто устанавливается и настраивается из Cursor, Claude Code и Codex, а кнопка копирования промпта в каждой песочнице передаёт вашему агенту полный словарь параметров библиотеки вместе с вашими текущими настройками. **Светлая и тёмная темы?** Обе, определяются автоматически. Значение по умолчанию `theme="auto"` разрешает атрибут `data-theme` или класс `dark` у предка, затем откатывается к `prefers-color-scheme`, обновляясь вживую при изменении любого из них. Передайте `theme="dark"` или `theme="light"`, чтобы зафиксировать одну. **Что такое Pro и Studio?** Один план для всех библиотек. Pro открывает [Studio](https://libraries.dev/studio.html) — глубокую настройку каждой библиотеки сверх публичных песочниц, с экспортом точной конфигурации — плюс Pro-пресеты и все будущие библиотеки и обновления. См. [цены](https://libraries.dev/pro.html). **Коммерческие проекты?** Библиотеки под MIT — используйте их где угодно, включая коммерческую работу. Контент Pro (экспорты Studio, Pro-пресеты и рецепты) лицензируется вам или вашей команде по купленному плану, для неограниченного числа проектов. ## Работа в этом репозитории npm workspaces: `packages/` содержит публикуемые библиотеки (одна папка на npm-пакет, каждая со своим README и LICENSE), `sites/` — демо-сайты, `sites/home` — это libraries.dev. ```bash npm install npm run build:site-home # каждая библиотека + libraries.dev, как в CI npm run dev -w @sites/home # libraries.dev со всеми страницами и Studio npm run typecheck # каждый workspace ``` Домашний сайт импортирует собранные пакеты, поэтому соберите библиотеку (`npm run build:beam`, `build:orbs`, `build:gooey`, `build:voice`, `build:metal`, `build:image`) перед её страницей или стендом. Автономные демо (`@sites/beam`, `@sites/gooey`, `@sites/orbs`) алиасят свою библиотеку на её исходники и перезагружаются на лету без пересборки. ## Релизы Публикация выполняется по пакету (`publish.yml`, `npm publish -w <package>`): запустите workflow вручную с именем пакета или опубликуйте GitHub-релиз с тегом `<package>@<version>` (`voice-glow@0.2.0`). Версия, которая уже есть в реестре, пропускается. ## Деплои Два сайта хостятся раздельно, потому что GitHub Pages обслуживает один кастомный домен на репозиторий: - **beam.jakubantalik.com** — GitHub Pages через `.github/workflows/deploy.yml`; привязка домена лежит в `sites/beam/public/CNAME`. - **gooey.jakubantalik.com** — Cloudflare Pages, собирается из этого репозитория командой `npm run build:site-gooey`, вывод `sites/gooey/dist`. - **orbs.jakubantalik.com** — Cloudflare Pages, собирается командой `npm run build:site-orbs`, вывод `sites/orbs/dist`. - **libraries.dev** — Cloudflare Pages, деплоится через `.github/workflows/deploy-home.yml` при каждом пуше в `main` (`npm run build:site-home`, вывод `sites/home/dist`). Главный сайт: лендинг, страница и стенд Studio для каждой библиотеки, цены Pro, страницы аккаунта и юридические. Его бэкенд — `api.libraries.dev`, Worker в приватном репозитории `libraries-pro` — см. `sites/home/README.md`. `.node-version` фиксирует Node 20 для сборок Cloudflare, совпадая с версией, которую используют GitHub-workflow; по умолчанию у Cloudflare версия старее. **Retry deployment** в Cloudflare повторяет тот же коммит, а не забирает вершину ветки, поэтому сборка, упавшая на устаревшем коммите, продолжит падать. Запушьте новый коммит, чтобы получить свежий. Только сайт beam несёт `public/CNAME`; этот файл — механизм GitHub Pages. Сайты на Cloudflare привязывают домен в проекте Pages, а сама DNS-запись живёт у регистратора (inetadmin), не в Cloudflare — `jakubantalik.com` не на nameserver'ах Cloudflare. `thinking-orbs` появился через `git subtree`, поэтому вся его история есть в этом репозитории — но те коммиты затрагивали `src/…`, а не `packages/thinking-orbs/src/…`. Поэтому `git log -- packages/thinking-orbs` останавливается на мердже. Чтобы прочитать настоящую историю, логируйте от коммита, который называет мердж: ```bash git log --oneline 9c6d5c3 -- ports/ios/PillsDemo/Sources/PillsApp.swift git log --follow packages/thinking-orbs/src/index.ts ``` `thinking-orbs` также несёт нативные порты в [`packages/thinking-orbs/ports`](packages/thinking-orbs/ports) — пакет React Native и пакет SwiftUI, синхронизируемые с веб-рендерером через golden vectors в `spec/`. Ни один из них пока не опубликован.