Loading…

Pixel Avatar

beta

A deterministic pixel avatar generated from a seed — crisp SVG, coloured from theme tokens, with a gentle shimmer.

Display
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add pixel-avatar

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { PixelAvatar } from "@/components/ui/pixel-avatar";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Shapes And Density

API

Generated from the component's own types, so a prop cannot appear here without existing.

<PixelAvatar>

Prop	Type	Default
`seed` (required) Any string — a name, an id. The same seed always draws the same avatar.	`string`	—
`animated` Shimmer, sparkle and breathe. Stops under reduced motion either way.	`boolean`	`true`
`cells` Pixels per side.	`number`	`6`
`palette` Replaces the three token-derived colours with any CSS colours.	`[string, string, string]`	—
`shape`	`"circle" \| "square"`	`"circle"`
`size` Rendered size. A number is pixels; a string is any CSS length.	`number \| string`	`64`

Plus every attribute of <svg> except children.

Accessibility

Decorative by default (aria-hidden), for the usual case of an avatar beside a visible name. Pass aria-label — the agent's name, not the seed — to make it role="img". The shimmer is decoration and stops under reduced motion, leaving the resting grid.

Quality

Measured from the source and its tests at build time.

All scores

7/7

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

seed

Any string — a name, an id. The same seed always draws the same avatar.

string

—

animated

Shimmer, sparkle and breathe. Stops under reduced motion either way.

boolean

true

cells

Pixels per side.

number

6

palette

Replaces the three token-derived colours with any CSS colours.

[string, string, string]

—

shape

"circle" | "square"

"circle"

size

Rendered size. A number is pixels; a string is any CSS length.

number | string

64