Agent Avatar

Renders a canvas-based pixel avatar for AI agents using a seed to generate unique patterns. It animates pixels with pulse, breathe, and wave effects. Use it to display distinct, animated avatars for AI entities.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/agent-avatar

npx layro-cli add @educlopez/agent-avatar

npx layro-cli add @educlopez/agent-avatar

bunx layro-cli add @educlopez/agent-avatar

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useEffect, useRef } from "react";

export type AgentAvatarProps = Omit<
  React.CanvasHTMLAttributes<HTMLCanvasElement>,
  "children"
> & {
  /** String seed to generate a unique deterministic avatar pattern */
  seed: string;
  /** Diameter in pixels */
  size?: number;
  /** Enable pixel animation (respects prefers-reduced-motion) */