Orbiting Customer Avatars

Lay out your testimonials as a small solar system: avatars drift slowly along one or two dashed orbits (the inner ring runs faster and in the opposite direction), while each avatar counter-rotates so it always stays upright. Selecting an avatar pauses every orbit, scales the chosen one up with an accent ring, draws a thin line from the avatar to the centre and crossfades its quote into the middle; click empty space or press Esc to clear the selection and the orbits resume. No photos are needed — avatars are generated from the person's initials and a two-tone gradient whose hue steps by the golden angle, or you can pass avatarSrc for a real image. The selection supports controlled and uncontrolled modes, and an optional auto-advance picks the next person every 5 seconds.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<OrbitingCustomerAvatars/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/orbiting-customer-avatars.en.json

Usage

import { OrbitingCustomerAvatars } from "@/components/ui/orbiting-customer-avatars";

<OrbitingCustomerAvatars
  eyebrow="What customers say"
  title="The hours they got back"
  rings={2}
  testimonials={[
    {
      quote: "Reconciliation used to eat half my week. Now I'm done before lunch.",
      name: "Lin Hsiao-ching",
      role: "Store manager",
      company: "Good Day Goods",
      highlight: "done before lunch",
    },
    {
      quote: "Drivers open their phone and know the next stop. Support calls dropped by half.",
      name: "Chen Po-yu",
      role: "Operations lead",
      company: "Polaris Freight",
    },
    // …ideally 6–8 items for one ring, 9–13 for two
  ]}
  onSelectedChange={(index) => console.log(index)}
/>

Props

OrbitingCustomerAvatarsItem

How it works

• The motion is pure CSS keyframes: each ring is a container rotating 0→360deg linearly forever, and every avatar counter-rotates on the same period, so avatars always stay upright. The inner ring runs at 0.7× the outer period, in the opposite direction.
• Timing and colour are exposed as CSS variables: --wb-orbiting-customer-avatars-duration (outer period, default 40s) and --wb-orbiting-customer-avatars-accent (accent, #0d9488 light, #2dd4bf dark).
• Pausing uses animation-play-state: paused: selecting, mouse-hovering (fine pointers only) or keyboard-focusing any avatar freezes all orbits at their current angle. The connector line lives inside the rotating container, so it points at the avatar whatever angle it stopped at.
• All geometry is expressed as percentages of the stage, and size only sets the upper bound; on narrower containers everything scales down together, and the centre quote's type size follows the stage width through container queries.
• Auto-advance skips a beat while the pointer is over an avatar, while an avatar has keyboard focus, or while the tab is hidden.

Accessibility

• The root is a <section> labelled by its heading via aria-labelledby; without a heading it falls back to sectionLabel
• Each avatar is a type="button" with an aria-label of "name, role, company" and aria-pressed for its selected state; Tab visits them in order, focus pauses the orbit, and Enter / Space selects or clears
• Pressing Esc inside the stage clears the selection — the keyboard equivalent of clicking empty space
• The centre quote area is aria-live="polite", so changes are announced; quotes are marked up as figure / blockquote / figcaption
• When autoAdvance is on, a visible pause / resume button is always rendered (WCAG 2.2.2)
• With the system "reduce motion" setting, the orbits stand still with avatars evenly spaced and auto-advance is disabled; selection no longer scales, keeping only the accent ring, the connector line and a 150ms quote fade