Avatar Orbit Cluster
A team ring that redistributes at any size, lifting the hovered member out.
DOM + CSS1 dep1 file · 3 KB TSX
Props
"use client";
import { useState } from "react";
import { motion } from "framer-motion";
type Person = { id: string; name: string; role: string; avatar: string };
export function AvatarOrbitCluster({
people,
radius = 58,
size = 34,
spin = true,
}: {
people: Person[];
radius?: number;
size?: number;
spin?: boolean;
}) {
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
The overlapping avatar stack is one of the most copied components on the web and one of the least robust: it depends on hand-tuned negative margins, it degrades into an unreadable pile past about five people, and adding a member means re-tuning the spacing. Arranging the same avatars on a ring with polar placement removes all of that — the angle is simply the index's share of a full turn, so six members and sixteen both distribute correctly with no changes. Two behavioural choices make it feel considered. The hovered avatar scales and raises its z-index while the centre of the cluster becomes a readout for that person's name and role, so the cluster carries information rather than just indicating headcount. And the rotation pauses on hover, because asking someone to chase a moving target is hostile and the pause is what makes the component feel responsive rather than merely animated. Position is animated through transform rather than `left`/`top`, so it stays on the compositor.
Curator’s note
Built for viberdy 2.1 as the replacement for the retired flat avatar stack — same job, and it survives the team growing.
