The overlap is the fun part. It is a plain flex row with a negative margin so each circle sits on the one before it, and a ring the colour of the background to fake the little cut-out gap. The sliding is not mine to write, though. A layout animation handles it, so adding or removing a face reflows the whole row on its own:
// Negative margin overlaps the circles; the ring fakes the
// cut-out; layout animates the reflow when the list changes.
{members.map((m) => (
<motion.div
key={m.id}
layout
className="-ml-3 rounded-full ring-2 ring-white"
>
<Avatar seed={m.seed} />
</motion.div>
))}
The rest is little touches stacked up. The invite form opens on its own height and fade, the address gets checked as you type, and the copy button writes to the clipboard, flashes a tick for a second, then settles back. None of it is hard on its own. It just needed someone to bother.
