Avatar Orbit Cluster
A team ring that redistributes at any size, lifting the hovered member out.
- Category
- Components
- Added
- 2026-09-20
- Deps
- 1
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Orbital Action Menu
componentsA radial menu that fans actions along an arc, evenly spaced at any count.
Segmented Morph Toggle
componentsA segmented control where only the selected option expands to its label.