Dither avatarPro

Agent and persona avatars rendered as dithered or halftone portraits from any photo, 24 to 96 px, with initials, presence and an accent ring.

Markdown

On this page

ProA persona switcher with dithered portraits, presence and a ring on the active one.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/dither-avatar

Usage

tsx

import { DitherAvatar } from "@/components/ui/chatcn/pro/dither-avatar"

<DitherAvatar src={agent.photo} name={agent.name} size={40} status="online" />

Faces up to 48 px use one device pixel per cell so they keep their features. Initials hold the place while the photo loads and stay when there is none. A page of avatars shares one WebGL context.

Examples

Sizes and states

Pro24 to 96 px in dither and halftone, square, and initials with no photo, while loading and when the photo is missing.

Props

Prop	Type	Notes
`src`	`string`	Optional; initials without it
`name`, `alt`	`string`	Initials come from `name`; `alt` overrides the spoken name
`size`	`number`	24 to 96. Default 40
`look`	`"dither" \| "halftone"`	Default `dither`
`algorithm`	Any dither method	Default `atkinson`
`shape`	`"circle" \| "square"`	Default `circle`
`status`	`"online" \| "busy" \| "away" \| "offline" \| ReactNode`	A presence dot, or your own node in that slot
`ring`	`boolean`	Accent ring for the speaking or selected persona
`ink`, `paper`	`string`	Tokens or CSS colors

Accessibility

One role="img" named with the person and their presence: "Code reviewer, busy".
Presence color always has a shape backup: a bar through busy, a hollow ring for offline.
Under forced colors the photo shows plainly.

Motion

The portrait fades in over 200 ms over the initials.