thinking-orbs

# thinking-orbs AI・エージェントUI向けのドット思考オーブ読み込みインジケータ。手動調整された9種類のアニメーション状態を、それぞれ目的に合わせた2サイズで提供。プレーンな2Dキャンバスで描画され、WebGLやフィルターは不要で、Chrome・Safari・Firefoxで同一に動作します。 [ライブデモ](https://orbs.jakubantalik.com)・[リポジトリ](https://github.com/Jakubantalik/thinking-orbs)・[問題を報告](https://github.com/Jakubantalik/thinking-orbs/issues) ## インストール ```bash npm install thinking-orbs ``` ## クイックスタート ```tsx import { ThinkingOrb } from 'thinking-orbs'; function Status() { return <ThinkingOrb state="searching" size={64} />; } ``` ## 状態 エージェントが実行できる9つの動詞。それぞれが異なるアニメーションです： ```tsx <ThinkingOrb state="working" /> {/* 傾いた軌道上のパーティクル */} <ThinkingOrb state="searching" /> {/* スキャン子午線がドットの球体を走査 */} <ThinkingOrb state="solving" /> {/* バンドが乱れて、解決済みに戻る */} <ThinkingOrb state="listening" /> {/* 波形がリングを通過 */} <ThinkingOrb state="connecting" /> {/* 星座が結線される */} <ThinkingOrb state="weaving" /> {/* 3本のストランドが球体の周りで編まれる */} <ThinkingOrb state="composing" /> {/* 波打つマルチバンドのサッシュ */} <ThinkingOrb state="breathing" /> {/* ゆっくり変形するリング */} <ThinkingOrb state="shaping" /> {/* ドットの輪郭：円→三角形→四角形 */} ``` ## サイズ 2つの調整済みプリセット — スケール係数ではなく、別々のデザインです。`64`はチャットアバター用、`20`はインラインテキスト用。それぞれ独自のドット数、ドットサイズ、速度調整を備えています： ```tsx <ThinkingOrb state="working" size={64} /> <ThinkingOrb state="working" size={20} /> ``` ## テーマ 厳密にモノクロ — 暗い背景には明るいインク、明るい背景には暗いインク — モードはホストプロジェクトから自動的に選択されます： ```tsx <ThinkingOrb theme="auto" /> {/* デフォルト — プロジェクトから検出 */} <ThinkingOrb theme="dark" /> {/* 固定：暗い背景用の明るいドット */} <ThinkingOrb theme="light" /> {/* 固定：明るい背景用の暗いドット */} ``` `auto`は3層で解決され、いずれかが変更されるとライブで更新されます： 1. 祖先の`data-theme="dark|light"`属性または`dark`/`light`クラス（Tailwind/shadcnの慣例）、`MutationObserver`で監視； 2. それ以外は`prefers-color-scheme`、OSのテーマ切り替えにライブ対応； 3. SSRセーフ — キャンバスはテーマ解決後、クライアント側でのみ描画。 ## その他のプロパティ ```tsx <ThinkingOrb state="solving" size={20} speed={1.5} // プリセットの組み込み速度への乗数 paused={false} // 現在のフレームで凍結 aria-label="Analysing repository…" // 状態ごとのデフォルトを上書き /> ``` その他の`<canvas>`プロパティ（`className`、`style`、`data-*`など）はすべて透過されます。 ## アクセシビリティとパフォーマンス - 標準で`role="img"`と状態に応じた適切な`aria-label`を設定。 - `prefers-reduced-motion: reduce`では静的で代表的なフレームを描画 — アニメーションなし — それでもライブテーマには対応。 - 各インスタンスはスクロールで画面外に出た場合（`IntersectionObserver`）やタブが非表示の場合に自動的に一時停止し、位相を維持して再開 — 全インスタンスが1つのクロックを共有。 - プレーンな2Dキャンバスアークのみ：`ctx.filter`なし、SVGフィルターなし、WebGLなし — どこでも同じピクセル、低性能デバイスでも軽量。デバイスピクセル比は2に制限。 ## ライセンス MIT © Jakub Antalik