Agent Avatar

Canvas-based generative pixel avatar for AI agents. Each seed produces a unique, deterministic pattern with animated color shifts.

Open in v0~8.9 kB

Last updated: March 7, 2026

Harper

Lucas

Olivia

Benjamin

Charlotte

Installation

npx smoothui-cli add agent-avatar

Features

  • Deterministic pixel patterns generated from a seed string
  • Animated color oscillation with per-pixel phase offsets
  • Retina-ready with devicePixelRatio scaling
  • Circular clipping with outer glow
  • Respects prefers-reduced-motion

Accessibility

Reduced Motion

This component respects the prefers-reduced-motion media query via window.matchMedia. When reduced motion is preferred, canvas animations are stopped and a single static frame is rendered instead.

ARIA

The <canvas> element includes role="img" and an aria-label derived from the seed prop, ensuring screen readers announce the avatar meaningfully.

Props

Wave Text

An animated text component that creates a smooth wave effect across characters.

AI Branch

An animated AI branch component with smooth transitions and interactive elements.

On this page

Installation
Features
Accessibility
Reduced Motion
ARIA
Props

Created by

Edu Calvo's avatar
Edu Calvo

Inspired by

grok.com