fayazara/robot-heads

robot-heads – React向けアニメーション3Dロボットヘッド

これは何か

• <RobotHead> Reactコンポーネントを提供するnpmパッケージです。このコンポーネントは、2Dキャンバス（WebGLなし）上に様式化されたロボットの頭部を描画し、エージェントの状態（アイドル、思考中、リスニングなど）を反映するようにアニメーションします。

主な機能

• 4つの幾何学的形状 – 長方形、正方形、円、六角形 – すべて同じ画面、アンテナ、耳、動きを共有します。
• 状態駆動の顔 – 各状態（アイドル、思考中、検索中、リスニング中、発話中、作業中、ハッピー、エラー、スリープ中）には、独自のLEDマトリックスフェイス、動きパターン、アンテナライトの色があります。
• カスタマイズ可能な外観 – シェル、トリム、スクリーンの色のプロパティ。サイズ（ピクセル単位）、アニメーション速度、オプションのアンテナ、フロアシャドウ、複数のヘッドを非同期にするためのseed。
• インタラクティブ性 – interactive（デフォルト）の場合、ヘッドはマウスポインタを追跡し、クリックでホップ/スピンします。prefers-reduced-motionとpausedプロパティを尊重します。
• パフォーマンス重視 – すべてのヘッドが単一のアニメーションループを共有し、タブが非表示のときに一時停止します。同じ形状/サイズのヘッドは、ベイクされたテクスチャを再利用します。
• アクセシブル – キャンバスにはrole="img"と現在の状態を説明するaria-labelが設定されます。

仕組み

• ヘッドジオメトリは、角が丸い凸多角形として生成され、3D風メッシュ（耳、アンテナカラー）に旋盤加工されます。各フレームでメッシュが変換され、背面がカリングされ、シンプルなスタジオ照明設定（キーライト、フィルライト、リムライト、スカイドーム）とフィルム風トーンカーブで照らされます。
• フロントスクリーンはLEDマトリックスで、フェイスはシャープにレンダリングされた後、グロー効果のためにブルームされます。
• すべての描画は通常のHTML <canvas>要素で行われ、重いWebGL依存関係を回避します。

一般的な使用法

import { RobotHead } from 'robot-heads';

function Agent({status}: {status: 'idle' | 'thinking' | 'speaking'}) {
  return <RobotHead state={status} size={160} />;
}

プロパティを使用して、形状、色、速度を変更し、アンテナ、シャドウ、インタラクティブ性を有効/無効にできます。

開発とプレイグラウンド

• リポジトリはpnpmワークスペースで、ライブラリはsrc/にあり、インタラクティブなプレイグラウンドはsite/（Vite + Cloudflare Worker）にあります。pnpm run devを実行するとプレイグラウンドが起動し、ライブラリへの変更がホットリロードされます。
• pnpm run buildでdist/に配布可能なファイルを生成します。

ライセンス

• MITライセンス、著作者：Fayaz Ahmed。

誰が使うか

• AIチャットボット、音声アシスタント、またはインタラクティブなエージェントUIを構築するフロントエンド開発者で、エージェントの現在のアクティビティのための軽量でアニメーション化された視覚的手がかりを求める人。

---

すべての詳細は、リポジトリのREADMEから直接取得されています。