Jakubantalik/thinking-orbs

解決する問題

Thinking-orbs は、AI およびエージェントベースのユーザーインターフェース向けに特別に設計された、軽量で標準化されたローディングアニメーションのセットを提供します。これは、重いグラフィックライブラリに依存せずに、AI エージェントが現在何をしているか（例：検索、解決、リスニング）を伝える、一貫性のある高性能な視覚フィードバックを作成するという問題を解決します。

仕組み

このライブラリは、プレーンな 2D キャンバスを使用して、9 つの異なる手調整されたアニメーションをレンダリングします。アプリケーションのカラーテーマを自動的に検出してドットが UI に一致するようにし、要素が画面外にある場合やブラウザタブが非表示の場合にアニメーションを一時停止するなどの組み込みのパフォーマンス最適化が含まれています。これは Web プロジェクトに「ドロップイン」で準備ができており、チャットアバターとインラインテキストサイズの両方に特定のプリセットがあります。

対象読者

このプロジェクトは、AI を活用した Web アプリケーションを構築する開発者向けで、エージェントがアクティブであるか情報を処理中であることをユーザーに示す、洗練されたアクセシブルで高性能な方法を必要としています。

ハイライト

• 異なるエージェントアクションを表す 9 つの異なるアニメーション状態。
• 最適な明瞭さのためにドット数と速度を調整する、2 つの目的に合わせたサイズ（64px と 20px）。
• プロジェクトのライトモードまたはダークモードと同期する自動テーマ検出。
• モーション削減設定とスクリーンリーダーの自動サポートを含む、組み込みのアクセシビリティ機能。
• 2D キャンバスを使用した高性能レンダリングにより、WebGL やフィルターのオーバーヘッドなしで、すべての主要ブラウザとの互換性を保証します。