Avatar Crop Square

Rounded-square profile avatars with size variants, fallback initials, and theme-aware styling.

Data-driven avatars with corner badges — photo, initials and icon content types across coloured rings, plus a presence row and an overlapping group stack, with skeleton loading, hover tooltips, staggered entrances and an async data seam.

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.

A token-driven Shared-with facepile of overlapping member avatars with real photos, a plus-N overflow chip, clean ring stacking with the leading avatar on top, a live design-system switcher, and add and remove controls.