Avatar Badges

Figtree profile avatars framed by animated gradient rings, with multiple sizes and theme-aware colors.

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.

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.