Avatar Group

A stacked avatar group component that uses masks instead of fake borders to create the overlap cutouts. Most avatar group components solve the stacking problem with a solid border that matches the page background. That works until you put it on a gradient, an image, or any non-flat surface; then the seams show up. This one cuts a transparent hole through each avatar so the background actually shows through. Drop it on red, on yellow, on a gradient, on a hero image, the same component, no adjustments. controls:

• images (array, up to 10)

• max visible count

• size on desktop and size on mobile, fluid in between via clamp

• overlap (how much each avatar tucks under the next)

• gap (the breathing room of the cutout)

Ships as a single code component. No dependencies beyond Framer. Auto-sizing on width and height. Responsive image support built in.

part of the Onx Library — onxui.com