nilbuild/page-mascot

解決する課題

ウェブサイトへのインタラクティブなカーソル追跡キャラクター（マスコット）の追加を可能にし、開発者がユーザーのマウスを見てクリックに反応するキャラクターを簡単に実装できるようにします。

仕組み

このシステムは、3x3のスプライトシートを2つ使用します。1つは頭の向き用、もう1つは表情用です。コンポーネントはポインターの角度を計算し、向きシートの適切なセルを選択します。ユーザーがマスコットをクリックすると、リアクションシートのセルが短時間表示されます。また、AIエージェントが9つの向きと9つの表情をさまざまなスタイル（カラー、インク、スケッチ、リソ、ペーパー、ピクセル）で描き、整列したシートに組み立てる自動生成プロセスもサポートしています。

対象ユーザー

Reactコンポーネントを使用して、ページに遊び心のあるインタラクティブな要素を追加したいWeb開発者向けです。

ハイライト

• ポインターの角度に基づくカーソル追跡の頭の動き。
• クリックでトリガーされるリアクション（まばたき/潰れ）。
• スキルのインストールによるAI駆動のカスタムマスコット生成。
• リソやピクセルアートを含む複数のアートスタイルのサポート。
• スクリーンリーダーやprefers-reduced-motionへのアクセシビリティ配慮。