# Pixel avatar
> Symmetric 7x7 pixel avatar generated from a typed name; changed cells flip in a ring spreading from the centre as the hue drifts.
- Element: `<px-identicon>`
- React: `import { PxIdenticon } from "@/components/lumesec/px-identicon"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-identicon.json
- Page: https://elements.lumesec.ai/components/pixel-lab/identicon



Live preview: https://elements.lumesec.ai/view/px-identicon

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-identicon.js"></script>

<px-identicon></px-identicon>
```

## Installation

```bash
npx shadcn@latest add @lumesec/px-identicon
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-identicon.json
```

## Usage

React:

```tsx
import { PxIdenticon } from "@/components/lumesec/px-identicon";

export function Example() {
  return (
    <PxIdenticon />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-identicon.js"></script>

<px-identicon></px-identicon>
```

## Behaviour

A symmetric 7×7 avatar generated from a name. Every keystroke re-hashes it, and the cells that change flip over in a ring spreading from the centre while the hue drifts. Pixels near the pointer lift toward it.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail                           | Description                                                                                                                                                     |
| -------- | ---------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ name: string, hash: number }` | Fires on every edit of the name field and on Shuffle. `name` is the trimmed input (`?` when empty); `hash` is the unsigned 32-bit hash of its lower-cased form. |

## Accessibility

* The canvas has `role="img"` with `aria-label="Pixel avatar for <name>"`, updated on every change.
* The text field is labelled "Name" with a `<label for>`; Shuffle is a native button.
* Reduced motion: changed cells and the hue switch at once instead of flipping outward from the centre; the pointer lift still applies.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--card`, `--foreground`, `--lumesec`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-fg`, `--ui-muted`, `--ui-surface` and `--ui-track`.

## Notes

* The name comes from the component's own text field, which starts as "Ada Lovelace"; there is no attribute for it. Shuffle cycles through ten built-in names.
* The pattern is case-insensitive and mirrored left to right. The first six hex digits of the hash are shown under the field.
* The avatar canvas is a fixed 142 by 142px.