这个项目能做什么
# Libraries.dev
**为AI代理精心打造的UI库。** 七个React库，为界面注入鲜活感：沿卡片边框游走的光束、模型工作时思考的球体、拥有生动面孔的机器人头像、如液体般融合的形状、随声音升腾的光晕、捕捉光线的拉丝金属，以及将像素马赛克溶解为真实照片的图像加载器。
每个库均可从npm安装，作为单个组件嵌入你的应用，包裹你已有的元素。你的标记保持语义不变，效果在其周围或背后渲染，全部通过props调整，无需手写WebGL。
| 库 | 功能 | npm | 页面 |
| --- | --- | --- | --- |
| [边框光束](packages/border-beam) | 沿卡片、按钮或输入框边框游走的柔和光晕 | `npm install border-beam` | [libraries.dev/beam](https://libraries.dev/beam) |
| [思考球体](packages/thinking-orbs) | 等待时思考的球体——九种AI界面加载状态 | `npm install thinking-orbs` | [libraries.dev/orbs](https://libraries.dev/orbs) |
| [机器人头像](packages/bot-avatars) | 带生动面孔的动画机器人头像——十八种光泽形状、四种状态，适用于AI代理 | `npm install bot-avatars` | [libraries.dev/avatars](https://libraries.dev/avatars) |
| [粘性效果](packages/liquid-gooey) | 像粘液一样融合、像果冻一样变形的碎片，同时文字保持清晰 | `npm install liquid-gooey` | [libraries.dev/gooey](https://libraries.dev/gooey) |
| [语音光晕](packages/voice-glow) | 从聊天输入框或手机屏幕底部随声音升腾的光晕 | `npm install voice-glow` | [libraries.dev/voice](https://libraries.dev/voice) |
| [金属效果](packages/metal-fx) | 用于按钮、图标、文字和徽章的液态金属，带反射和光标光效 | `npm install metal-fx` | [libraries.dev/metal](https://libraries.dev/metal) |
| [图像效果](packages/img-fx) | 变为图像的加载器——WebGL像素马赛克逐渐聚合成图片 | `npm install img-fx` | [libraries.dev/image](https://libraries.dev/image) |
在[libraries.dev](https://libraries.dev)上试用每个库：可交互的实时预览、安装命令、使用代码，以及可复制精确配置的游乐场。
## 使用方法
每个库都以提示词形式提供。复制它，粘贴到你的编码代理中，然后自定义——三步完成，无需设置。
1. **复制提示词。** 每个库页面都有*复制提示词*按钮。一次粘贴即可让代理获得整个库：其参数词汇和你的当前设置。
2. **粘贴到代理中。** 放入Claude Code、Cursor或Codex。代理会安装包并接入，匹配你的主题。
3. **自定义。** 使用Pro打开[Studio](https://libraries.dev/studio.html)，实时调整每个旋钮，并将结果复制为props。
或者用简单方式：
```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>开始</button>
</BorderBeam>
```
每个包的README都记录了其props。
## 常见问题
**需要什么？** React 18或更高版本。每个库都是独立包，零运行时依赖，除了Image库，它还需要`three`作为对等依赖。
**它们能与编码代理配合吗？** 能——这正是其设计目的。每个库都能从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>`）：手动运行工作流并指定包名，或发布标签为`<package>@<version>`（如`voice-glow@0.2.0`）的GitHub release。注册表已有的版本会被跳过。
## 部署
两个站点分别托管，因为GitHub Pages每个仓库只服务一个自定义域名：
- **beam.jakubantalik.com** — 通过`.github/workflows/deploy.yml`使用GitHub Pages；域名绑定在`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`，一个位于私有`libraries-pro`仓库中的Worker——参见`sites/home/README.md`。
`.node-version`为Cloudflare构建固定Node 20，与GitHub工作流使用的版本匹配；Cloudflare的默认版本较旧。
Cloudflare的**重试部署**会重放同一提交，而非获取分支最新版本，因此因过时提交而失败的构建会持续失败。推送新提交以获得新构建。
只有beam站点带有`public/CNAME`；该文件是GitHub Pages机制。Cloudflare托管的站点在Pages项目中绑定域名，DNS记录本身位于注册商（inetadmin）处，而非Cloudflare——`jakubantalik.com`不在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包，通过`spec/`中的黄金向量与Web渲染器保持同步。两者均未发布。
评论
0 评分人数达到10人后显示
登录后参与讨论。