# Avatar Group Animated

> A magnetic-spread avatar facepile where hovering or focusing one avatar pushes neighbours apart with exponential distance falloff, lifts and scales the active avatar, reveals a name tooltip, and spring-eases back on release — all driven by design tokens.

- Category: Avatar
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Runway
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: animation
- Page: https://builder.atheros.ai/components/avatar-group-animated
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_avatar_group_animated/preview-7267d2c00cc0.webp

## Features

- Magnetic-spread hover: neighbours push apart along the X axis with exponential falloff by distance from the active avatar
- The hovered or focused avatar lifts, scales up, and casts a primary-tinted glow
- Per-avatar name tooltips fade and rise in on activation
- Spring easing overshoots slightly on release for a natural snap-back
- Keyboard accessible — avatars are focusable and respond to focus the same as hover
- Overflow chip collapses extra members into a `+N` tile
- Leading avatar stays on top via descending inline `--agh-z` z-index
- Real photo avatars with initials fallback on image load error
- Fully respects `prefers-reduced-motion`

## Accessibility

- **List semantics** — The group is `role="list"` and each avatar is `role="listitem"` with an `aria-label`
- **Image alternative** — Each `<img>` carries the member name as `alt`; initials render on load error
- **Keyboard focus** — Avatars are `tabindex="0"` and spread on focus identically to hover
- **Focus indicators** — `:focus-visible` with `--ring` outline on avatars
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `Tab` — Move focus between avatars

## Common questions

**Which frameworks is Avatar Group Animated available in?**

Avatar Group Animated ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Avatar Group Animated free?**

Yes. Avatar Group Animated is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Avatar Group Animated support dark mode?**

Yes. Avatar Group Animated ships light and dark themes, both drawn from the Runway design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Avatar Group Animated live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/avatar-group-animated

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt