プロフィール画像が未設定のとき、単色の丸に頭文字を置くだけでは、一覧の中で人を見分けにくいことがあります。かといって、仮画像を保存して配信する仕組みまで用意するのは大げさです。blobatarは、名前やメールアドレス、IDなどの文字列から幾何学的なSVGアバターを決定的に生成します。同じ文字列なら同じ姿になるため、画像を持たないユーザーやBotにも、見分けるための顔を添えられます。コアは依存パッケージなし、gzip後で約4.4KBと案内されています。(公式サイト, README)
保存しなくても、同じ顔に戻れる
基本のAPIはblobatar(name)です。SVG文字列を返すほか、blobatarUri()なら<img>やCSSの背景に渡せるData URIを得られます。入力は既定でNFC正規化され、前後の空白と大文字・小文字の差も吸収されます。表示名の表記が少し揺れても同じ結果になりやすい設計です。生の文字列を区別したければ、正規化を無効にもできます。(Package README)
React、Vue、Svelte、Solid、Preactには個別のアダプターがあり、React Nativeにも対応しています。Webの静止表示は単一の<img>、アニメーションを有効にした場合はインラインSVGへ切り替わります。呼吸、まばたき、視線の動きにはmotion.cssが必要で、prefers-reduced-motionでは静止します。大量のアバターを並べる画面で、初期状態を軽い<img>にしているのは実用的な判断です。(README)
見た目の変更を「世代」として分ける
決定的な生成で難しいのは、ライブラリを改良したあとも以前の顔を保てるかどうかです。blobatarでは、同じ名前から同じ見た目を得る契約をパッケージのメジャーバージョン単位に置いています。輪郭の追加は既存の割り当てを動かすため、新しい「generation」としてメジャー更新に分離。通常のAPIへ世代指定を持ち込まず、アップグレードそのものを見た目変更への同意にしています。(ADR-0008)
URLで使う場合はhttps://blobatar.dev/avatar/<name>というHTTPエンドポイントもあります。ただし、<name>に入れた値はURLのパスとして第三者のサービスへ送信され、リクエストログやキャッシュに残る可能性があります。URLを直接開けば、ブラウザーの履歴にも残り得ます。公開エンドポイントには名前やメールアドレスをそのまま渡さず、個人情報を含まない、アバター用にランダムに発行した不透明な識別子を使います。名前やメールアドレスを入力にしたい場合は、ライブラリでローカル生成し、第三者へ送らない構成にします。
公開エンドポイントは?gen=1のように世代を固定でき、明示した世代は同じ顔を返し続ける方針です。一方、世代を省いたURLは現在の世代へ追随します。既存画面の顔を変えたくないなら、パッケージのメジャーを固定するか、URLにgenを付けるかを先に決めておく必要があります。
どこまで個性を固定するか
background、hue、toneに加え、traitsで輪郭や目などの軸を0〜1の値へ固定できます。ブランドカラーだけそろえ、残りは名前から生成する、といった中間の調整が可能です。すべてのtraitを固定すれば、入力に左右されない一体のキャラクターにもできます。(Package README)
導入方法は二つです。アプリ内で生成すればネットワーク要求はなく、URLが必要なメールや外部サービスではホストされたエンドポイントを使えます。ただし公式READMEは、公開エンドポイントがレート制限付きであることも明記しています。表示がサービスの要になるなら、同梱のCloudflare Workers実装を自前で動かす選択肢まで含めて比べるのがよさそうです。