Avatar Group

Features

• Stacked, overlapping member avatars rendered from a JS roster with real photos
• Leading avatar painted on top so each ring tucks neatly under the previous one
• Plus-N overflow chip that summarizes members beyond the visible cap
• Hover and focus lift each avatar forward and reveal the member name in an opaque tooltip bubble
• An aria-live caption that reflects the access count or the hovered person
• Live add and remove controls that update the group and overflow count in real time
• A design-system switcher that retones the whole component across 39 brand themes at runtime
• Bare layout with no surrounding panel — the facepile sits directly on the page
• Photos fall back to computed initials if an image fails to load
• Fully respects prefers-reduced-motion

Accessibility

List semantics

The stack uses role="list" and each member role="listitem"

Member labels

Each avatar carries an aria-label with the member name and role

Image alternative

Each photo uses a descriptive alt

Live caption

The caption is an aria-live="polite" region announcing the count or hovered person

Design switcher

The design-system <select> carries an aria-label; its icons are decorative

Keyboard activation

Controls are native buttons activated by Enter and Space

Focus indicators

:focus-visible with --ring outline on avatars and controls

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Avatar Group in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the avatar is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.