Avatar Group Animated

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

Customise it with AI

Open Avatar Group Animated 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.