Customer avatars ride a large orbit ring that turns to bring the speaker into a fixed spotlight, while their quote assembles word by word beside it. A progress ring around the active face advances the carousel and pauses on hover or focus.
We replaced four dashboards and a weekly spreadsheet ritual. Finance now closes the month in two days instead of nine.
npx shadcn@latest add https://hyperblur.dev/r/proof-avatar-orbit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/proof-avatar-orbit.tsx.
import { ProofAvatarOrbit } from "@/components/hyperblur/proof-avatar-orbit"
<ProofAvatarOrbit testimonials={[{ quote: "We close the books in two days now.", name: "Hannah Weiss", role: "VP Finance", company: "Brightline", metric: "7 days", metricLabel: "faster close" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Customer stories" | Accent label in the header row. |
| title | string | "Heard from teams on Ledgerly" | Section heading, set small next to the eyebrow. |
| testimonials | { quote: string; name: string; role: string; company: string; metric?: string; metricLabel?: string }[] | 10 sample testimonials | Speakers placed evenly around the orbit. The metric shows in a chip under the quote. |
| defaultIndex | number | 0 | Testimonial shown first. |
| interval | number | 6500 | Milliseconds each quote stays before the orbit turns. |
| autoPlay | boolean | true | Advance automatically. Off when the user prefers reduced motion. |
| accent | string | "#22d3ee" | Color of the spotlight, progress ring and metric. |
| onIndexChange | (index: number) => void | undefined | Called with the new index whenever the active testimonial changes. |