# ASCII Avatar

> Generative identicons from any string, in block glyphs.

Category: Interface. Docs: https://asciicn.sumak.dev/docs/ascii-avatar

## Installation

```bash
npx shadcn@latest add @asciicn/ascii-avatar
```

Needs the `@asciicn` registry in components.json: `"registries": { "@asciicn": "https://asciicn.sumak.dev/r/{name}.json" }`.

## Usage

```tsx
import { AsciiAvatar } from "@/components/ascii/ascii-avatar"

<AsciiAvatar name="ada@lovelace.dev" />
<AsciiAvatar name="grace" variant="half" size={7} />
```

## Examples

### Variants

The same name in each variant. All three come out roughly square, since a character cell is about 0.6 wide by 1 tall.

```tsx
{(["blocks", "half", "quadrants"] as const).map((v) => (
  <AsciiAvatar key={v} name="ada@lovelace.dev" variant={v} size={7} />
))}
```

### As plain text

`avatarLines` returns the same pattern as strings, for terminals, logs or a `<pre>`. `identicon` returns the raw boolean grid.

```tsx
import { avatarLines } from "@/components/ascii/ascii-avatar"

console.log(avatarLines("ada@lovelace.dev", 5, "half").join("\n"))
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` |  | Any string. Seeds the pattern and colour, and is the accessible name. |
| `size` | `number` | `5` | Cells across. The pattern is mirrored, so odd sizes have a centre column. |
| `variant` | `"blocks" | "half" | "quadrants"` | `"blocks"` | Blocks spend two characters per cell, half stacks two cells per character, quadrants packs 2×2 for finer shapes. |
| `colored` | `boolean` | `true` | Tint with an oklch hue from the hash. Off uses the CSS `color`. |

## Notes

- **Accessibility.** `role="img"` labelled with `name`. Pass a friendlier `aria-label` when the seed is an email or id.
- **Determinism.** An FNV-1a hash seeds a small PRNG, so a string gives the same face on the server, the client and every visit. Nothing random at render, so no hydration mismatch.
- **Layout.** Size it with `text-*`; each cell is one or two characters, and rows are clipped to `1em` so blocks tile without gaps. Pick a size that puts cells on whole pixels (multiples of 5 px for a 0.6em-wide mono font such as Geist Mono) to avoid hairline seams between glyphs.
- **Dependencies.** None. Safe in Server Components.