Avatar Group

A stacked avatar group component that uses masks instead of fake borders to create the overlap cutouts.

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

Transparent-cutout