Orbiting Avatars
A ring of avatars that continuously orbit a central call-to-action button. Each avatar reveals a name and role tooltip on hover, with a smooth counter-rotate so faces always stay upright.
Default
Hover over any avatar to see its tooltip. Click the center button to trigger the callback.
MrBeastContent Creator
Christian BaleVisual Wizard
Tyler DurdenProduct Manager
Steve JobsCreative Director
Cleo AbramScience Communicator
Rustin cohleCode Alchemist
Alex HormoziEntrepreneur
Bryan JohnsonBlueprint
Tom HardyExperience Craftsman
Installation
$ npx shadcn add https://knot-ui.trupal.me/r/orbiting-avatars.json
Custom Avatars
Pass your own avatars array and tune radius, duration, and centerLabel to fit your design.
MrBeastContent Creator
Steve JobsCreative Director
Alex HormoziEntrepreneur
Cleo AbramScience Communicator
Bryan JohnsonBlueprint
OrbitingAvatarsProps
Props accepted by the <OrbitingAvatars /> component.
| Prop | Type | Default | Description |
|---|---|---|---|
| avatars | { src: string; name: string; role?: string }[] | defaultAvatars | Array of avatar objects to render on the orbit ring. Each entry requires a src and name; role is optional and shown in the tooltip. |
| radius | number | 130 | Distance in pixels from the center to each avatar along the orbit. |
| duration | number | 30 | Duration in seconds for one full orbit rotation. |
| centerLabel | ReactNode | "Contact Me" | Content rendered inside the center button. |
| onCenterClick | () => void | undefined | Callback fired when the center button is clicked. |