libraries.dev

# Libraries.dev **AIエージェント向けのハイクラフトUIライブラリ。** インターフェースを生き生きと感じさせるエフェクトのための7つのReactライブラリ：カードのボーダーを光のビームが走るもの、モデルが動作している間に思考するオーブ、生きた顔を持つボットアバター、液体のように融合する形状、声に合わせて立ち上がるグロー、光を捉えるブラッシュドメタル、そしてピクセルモザイクを本物の写真へと溶かすイメージローダー。 それぞれnpmからインストールでき、すでに持っている要素をラップする単一のコンポーネントとしてアプリに組み込まれます。マークアップはセマンティクスを保ち、エフェクトはその周囲または背後にレンダリングされ、全体は手書きのWebGLではなくpropsによって調整されます。 | ライブラリ | 機能 | npm | ページ | | --- | --- | --- | --- | | [Border beam](packages/border-beam) | カード、ボタン、入力のボーダーを走る柔らかなグロー | `npm install border-beam` | [libraries.dev/beam](https://libraries.dev/beam) | | [Thinking orbs](packages/thinking-orbs) | 待っている間に思考するオーブ — AIインターフェース向けの9つのローディング状態 | `npm install thinking-orbs` | [libraries.dev/orbs](https://libraries.dev/orbs) | | [Bot avatars](packages/bot-avatars) | 生きた顔を持つアニメーションボットアバター — AIエージェント向けの18の光沢ある形状、4つの状態 | `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)で試せます：遊べるライブプレビュー、インストールコマンド、使用コード、そして正確な設定をコピーするプレイグラウンド。 ## 使い方 すべてのライブラリはプロンプトとして提供されます。コピーしてコーディングエージェントに貼り付ければ、あなたのものになります — 3ステップ、セットアップ不要。 1. **プロンプトをコピーする。** すべてのライブラリページには*Copy prompt*ボタンがあります。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>Get started</button> </BorderBeam> ``` 各パッケージのREADMEにpropsが記載されています。 ## FAQ **何が必要ですか？** React 18以降。各ライブラリはランタイム依存ゼロのスタンドアロンパッケージです。ただしImageは`three`をピア依存としても必要とします。 **コーディングエージェントで動作しますか？** はい — それが狙いです。すべてのライブラリはCursor、Claude Code、Codexからクリーンにインストール・設定でき、各プレイグラウンドのcopy-promptボタンはライブラリの完全なパラメータ語彙と現在の設定をエージェントに渡します。 **ライトモードとダークモードは？** 両方、自動検出されます。デフォルトの`theme="auto"`は祖先の`data-theme`属性または`dark`クラスを解決し、次に`prefers-color-scheme`にフォールバックし、どちらかが変わるとライブで更新されます。`theme="dark"`または`theme="light"`を渡して固定できます。 **ProとStudioとは？** すべてのライブラリにまたがる1つのプランです。Proは[Studio](https://libraries.dev/studio.html)をアンロックします — 公開プレイグラウンドを超えた、ライブラリごとの深いカスタマイズと、正確な設定のエクスポート — さらにProプリセットと、将来のすべてのライブラリとアップデート。詳しくは[価格](https://libraries.dev/pro.html)をご覧ください。 **商用プロジェクトは？** ライブラリはMITです — 商用を含めどこでも使用できます。Proコンテンツ（Studioエクスポート、Proプリセット、レシピ）は、購入したプランの下であなたまたはあなたのチームにライセンスされ、無制限のプロジェクトに使用できます。 ## このリポジトリでの作業 npmワークスペース：`packages/`には公開ライブラリ（npmパッケージごとに1フォルダ、それぞれ独自のREADMEとLICENSE付き）、`sites/`にはデモサイト — `sites/home`がlibraries.devです。 ```bash npm install npm run build:site-home # CIと同様に、すべてのライブラリ + libraries.dev npm run dev -w @sites/home # すべてのページとStudioを含むlibraries.dev npm run typecheck # すべてのワークスペース ``` ホームサイトはビルド済みパッケージをインポートするため、そのページやベンチの前にライブラリをビルドしてください（`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リリースを公開します。レジストリがすでに持つバージョンはスキップされます。 ## デプロイ 2つのサイトは別々にホストされています。GitHub Pagesはリポジトリごとに1つのカスタムドメインを提供するためです： - **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。`main`へのプッシュごとに`.github/workflows/deploy-home.yml`でデプロイ（`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の**Retry deployment**はブランチの先端を取得するのではなく同じコミットを再生するため、古いコミットで失敗したビルドは失敗し続けます。新しいコミットをプッシュして新鮮なものを取得してください。 `public/CNAME`を持つのはbeamサイトだけです。そのファイルはGitHub Pagesの仕組みです。Cloudflareホストのサイトは代わりにPagesプロジェクトでドメインをバインドし、DNSレコード自体はCloudflareではなくレジストラ（inetadmin）にあります — `jakubantalik.com`はCloudflareのネームサーバー上にありません。 `thinking-orbs`は`git subtree`で取り込まれたため、その完全な履歴はこのリポジトリにあります — ただしそれらのコミットは`packages/thinking-orbs/src/…`ではなく`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レンダラーと歩調を合わせています。どちらもまだ公開されていません。