thinking-orbsとは？AIエージェントUIに最適な6種アニメーションローディングコンポーネント

AIチャットボットやエージェントUIを作るとき、「処理中」の状態をどう伝えていますか？ぐるぐる回るスピナーは汎用的ですが、AIらしい没入感を演出するには物足りません。 thinking-orbsは、AI/エージェントの思考状態を6種類のアニメーションで表現するReactコンポーネントです。 GitHubで急上昇し、リリースから短期間で1,100以上のスターを獲得しています。

thinking-orbsとは何か？AIエージェントUIの「思考中」表現を革新する

thinking-orbsは「Dotted thought-orb loading indicators for AI & agent UIs」を掲げるオープンソースReactライブラリです。 6種の状態アニメーション・2サイズのプリセット・ライト/ダーク自動テーマを備え、npm install一行で導入できます。

最大の特徴は依存パッケージゼロ・WebGL不要で動作する点です。 Canvas 2D（arc()のみ）で描画されるため、ChromeはもちろんSafari・Firefoxでも完全に同一のピクセルで描画されます。

6種のアニメーション状態：AIの行動をビジュアルで伝える

thinking-orbsの核心は「AIエージェントが今何をしているか」を視覚的に区別できる6つの状態です：

動作・検索・解析系（情報処理を伝える）

// 情報を処理中（傾いた軌道を粒子が周回）
<ThinkingOrb state="working" size={64} />

// 検索・スキャン中（経線がドット地球儀をスキャン）
<ThinkingOrb state="searching" size={64} />

// 問題を解いている（バンドが乱れ→整列するアニメーション）
<ThinkingOrb state="solving" size={64} />

対話・生成系（コミュニケーションを伝える）

// 音声・入力を聴いている（波形がリングを流れる）
<ThinkingOrb state="listening" size={64} />

// テキスト・コードを生成中（波打つマルチバンドサッシュ）
<ThinkingOrb state="composing" size={64} />

// 形状を変換・整形中（円→三角→四角と変化するドット輪郭）
<ThinkingOrb state="shaping" size={64} />

インストールと基本的な使い方

インストール

npm install thinking-orbs

依存パッケージはゼロです。React 18以降・TypeScript対応。

最小実装例

import { ThinkingOrb } from 'thinking-orbs';

// AIエージェントの状態に応じてstateを切り替える
function AgentStatus({ agentState }: { agentState: string }) {
  return (
    <ThinkingOrb
      state={agentState as any}
      size={64}
      aria-label={`エージェント: ${agentState}中`}
    />
  );
}

2サイズのプリセット：スケールファクターではなく独立デザイン

// チャットアバターサイズ（64px）— ドット数・速度が最適化済み
<ThinkingOrb state="composing" size={64} />

// インラインテキストサイズ（20px）— 独立したデザイン
<ThinkingOrb state="composing" size={20} />

サイズ64と20は単なる拡大縮小ではなく、それぞれ独立したデザインです。ドット数・速度・間隔がそれぞれ最適化されています。

テーマとアクセシビリティの設定

自動テーマ切替（3段階解決）

<ThinkingOrb theme="auto" />  {/* デフォルト: Tailwind/shadcn規約に自動追従 */}
<ThinkingOrb theme="dark" />  {/* 固定: ダーク背景向け（白いドット） */}
<ThinkingOrb theme="light" /> {/* 固定: ライト背景向け（黒いドット） */}

autoモードは以下の優先度で解決されます：

祖先要素のdata-theme="dark|light"属性またはclass（Tailwind/shadcn規約）
prefers-color-scheme メディアクエリ
SSRセーフ（クライアントサイドでのみCanvas描画）

アクセシビリティ対応

role="img" + 状態別のデフォルトaria-labelが自動付与
prefers-reduced-motion: reduce 設定時は静止フレームを表示（アニメーション停止）
オフスクリーン時・タブ非表示時に自動一時停止（IntersectionObserver）

LottieやCSSアニメーションとの違い・なぜ今このツールか

ツール	違い
Lottie	JSONアニメーションを再生。AIの状態管理との連携が複雑で、デザイナーとの連携が必要
CSSアニメーション（カスタム実装）	個別実装が必要。クロスブラウザ対応・アクセシビリティ対応は自前
react-loading / react-spinners	汎用スピナー系。AIエージェントの「状態」を区別する仕組みがない
thinking-orbs	AI状態に特化した6種類の意味あるアニメーション。npm 1行・ゼロ依存

AIエージェントUIが急増する現在、「処理中」を一律のスピナーで表現するのではなく、エージェントが「何をしているか」を視覚的に伝えることでUXが大きく向上します。 Hacker News・X（Twitter）で話題になり急上昇したのも、この需要の高さを反映しています。

こんな人に向いている

フロントエンドエンジニア（AIチャットボット・LLMアプリ開発者）

Next.jsやReactでAIチャットUI（ChatGPT類似）を開発する場合、 thinking-orbsを使えばLLMの応答待ち・RAG検索中・回答生成中の各状態をコンポーネントのstateプロップ切り替えだけで視覚化できます。

フルスタックエンジニア（AIエージェントダッシュボード開発者）

複数の並行タスクを持つAIエージェントのステータスボードでは、各タスクの進捗をworking/solving/composingで区別して表示することで、エンドユーザーが何が起きているかを直感的に把握できます。

UXエンジニア（ユーザー体験向上担当）

size={20}のインラインサイズを使えば、テキスト内や小さなボタン横にも配置でき、 UIの密度を保ちつつ状態表示を追加できます。

使う前に知っておきたいこと

プラットフォーム制限

Reactのみ対応（現時点）。Vue 3のコミュニティポートは存在するが非公式（Issue参照）
Expoモバイル版（expo-thinking-orbs）も存在するが別パッケージ

現時点の制限

サイズは64と20の2プリセットのみ。カスタムサイズは現在未対応（Issueで要望あり）
カラーカスタマイズ未対応（Issue: "Add custom orb colors"が未完了）
Issueで日本語READMEの追加要望も出ており、日本語コミュニティからの注目度が伺える

ライセンス

まとめ：AI UI体験を格上げする最小コストのアニメーション

thinking-orbsは「npm install一行・ゼロ依存・ゼロ設定」で、 AIエージェントUIに意味のある6種類のアニメーションをもたらします。 LottieやWebGLを使わずCanvas 2Dで実現した軽量さと、アクセシビリティ対応の丁寧さが評価され、 AIエージェント開発ブームの中で急速に支持を集めています。

詳しくは公式GitHubリポジトリ（Jakubantalik/thinking-orbs）やライブデモ（orbs.jakubantalik.com）をご確認ください。

この技術を学ぶ

Webに興味を持った方には、Udemyのオンラインコースもおすすめです。

🎓 関連するWebコース一覧 — セール時（最大90%OFF）を狙うとお得です