Avatar Gradient Border

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 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.

A square avatar crop tool with corner registration marks, focal wheel zoom with a live zoom readout, multi-size square previews, a rule-of-thirds grid overlay, rotate/flip controls, and canvas-based crop output for profile picture editing, styled with the Cutplate design system.

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.