環繞客戶頭像｜免費 React 元件

客戶頭像沿一到兩圈軌道緩慢環繞，點選或聚焦某個頭像時軌道暫停，該位客戶的引言在圓心交叉淡入。

把客戶評價排成一座小小的星系：頭像沿一到兩圈虛線軌道緩慢環繞（內圈較快且反向），頭像本身反向旋轉、始終保持直立。點選頭像時整組軌道暫停，選中者放大並亮起強調色外環，一條細線從頭像描向圓心，中央的引言同時交叉淡入；點空白處或按 Esc 取消選取，軌道恢復轉動。頭像不需要照片——以姓名縮寫加上黃金角度色相的雙色漸層生成，也可改用 avatarSrc 換成真圖。選取狀態支援受控／非受控雙模式，另可開啟每 5 秒自動選下一位的輪播。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add orbiting-customer-avatars

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

軌道圈數rings

舞台邊長（px）size

520

自動輪播autoAdvance

外圈週期（秒）duration

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>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

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

或在 components.json 設定 registries 後，改用 @webberui/orbiting-customer-avatars 安裝。

使用

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

<OrbitingCustomerAvatars
  eyebrow="客戶怎麼說"
  title="他們把時間省下來了"
  rings={2}
  testimonials={[
    {
      quote: "以前每週花半天對帳，現在午休前就收工。",
      name: "林曉晴",
      role: "店長",
      company: "好日選物",
      highlight: "午休前就收工",
    },
    {
      quote: "司機打開手機就知道下一站，客服電話少了一大半。",
      name: "陳柏宇",
      role: "營運主管",
      company: "北辰物流",
    },
    // …建議一圈 6–8 則、兩圈 9–13 則
  ]}
  onSelectedChange={(index) => console.log(index)}
/>

Props

Prop	型別	預設值	說明
`eyebrow`	`ReactNode`	—	標題上方的小標籤
`title`	`ReactNode`	—	區塊主標題，同時作為 section 的可及名稱
`subtitle`	`ReactNode`	—	主標題下方的說明
`testimonials`	`OrbitingCustomerAvatarsItem[]`	—	評價資料（必填）
`size`	`number`	`520`	舞台邊長（px）；窄螢幕會等比縮到容器寬
`rings`	`1 \| 2`	`1`	軌道圈數；`2` 時依數量自動把約四成（2–5 個）分到內圈
`selected`	`number \| null`	—	受控的選取索引，`null` 表示未選取
`defaultSelected`	`number \| null`	`null`	非受控模式的初始選取索引
`onSelectedChange`	`(index: number \| null) => void`	—	選取改變時回呼，取消選取時參數為 `null`
`autoAdvance`	`boolean`	`false`	每 5 秒自動選下一位；開啟時下方會顯示暫停鈕
`duration`	`number`	—	外圈繞一圈的秒數；未提供時讀取 `--wb-orbiting-customer-avatars-duration`（預設 40s）
`hint`	`string`	`"點選任一頭像，閱讀這位客戶的評價"`	未選取時中心下方的提示文字
`sectionLabel`	`string`	`"客戶評價"`	沒有 `title` 時 section 的可及名稱
`pauseLabel`	`string`	`"暫停自動輪播"`	自動輪播暫停鈕的文字
`playLabel`	`string`	`"繼續自動輪播"`	自動輪播繼續鈕的文字
`className`	`string`	—	併入最外層 section

OrbitingCustomerAvatarsItem

欄位	型別	預設值	說明
`quote`	`string`	—	引言全文
`name`	`string`	—	客戶姓名，也用來產生頭像縮寫（中文取末兩字、拉丁取首字母）
`role`	`string`	—	職稱
`company`	`string`	—	公司名稱
`rating`	`number`	—	評分（0–5），此元件不顯示，保留給共通資料結構
`avatarHue`	`number`	—	頭像漸層色相（0–360）；未提供時依索引以黃金角度 137.508° 推算
`highlight`	`string`	—	quote 中要以強調色標出的片段，需與原文完全相同
`metric`	`{ value: string; label: string }`	—	成果數字，選中時顯示於引言下方（舞台夠大時）
`avatarSrc`	`string`	—	頭像圖片網址；未提供時以縮寫 + 漸層圓佔位

細節

動畫由純 CSS keyframes 驅動：每圈一個容器做 0→360deg 的線性無限旋轉，頭像再以同週期反向旋轉抵銷，所以頭像永遠直立。內圈週期為外圈的 0.7 倍且方向相反。
節奏與顏色都外露成 CSS 變數：--wb-orbiting-customer-avatars-duration（外圈週期，預設 40s）、--wb-orbiting-customer-avatars-accent（強調色，淺色 #0d9488、深色 #2dd4bf）。
暫停用 animation-play-state: paused：選取、滑鼠 hover（僅精準指標）或鍵盤聚焦任一頭像時，所有軌道停在當下角度；連線畫在旋轉容器內，因此停在任何角度都會正確指向頭像。
所有幾何都以舞台邊長的百分比計算，size 只決定上限；容器較窄時整組等比縮小，中心引言字級以 container query 依舞台寬度調整。
自動輪播在滑鼠停留、鍵盤聚焦或分頁隱藏時會跳過該拍。

可及性

根元素為 <section>，以 aria-labelledby 指向標題；沒有標題時改用 sectionLabel 作為可及名稱
每個頭像都是 type="button"，aria-label 為「姓名，公司職稱」，並以 aria-pressed 表示是否選中；Tab 依序走訪，聚焦時軌道暫停，Enter／Space 選取或取消
在舞台內按 Esc 取消選取，作為「點空白處」的鍵盤等效操作
中心引言區為 aria-live="polite"，切換時由螢幕閱讀器朗讀；引言以 figure／blockquote／figcaption 標記
開啟 autoAdvance 時一定顯示可見的暫停／繼續按鈕（WCAG 2.2.2）
使用者系統開啟「減少動態效果」時，軌道靜止、頭像固定平均分佈，自動輪播停用；選取不再放大，只保留外環、連線與 150ms 引言淡入

環繞客戶頭像

把這個效果裝進你的專案

Playground

安裝

使用

Props

OrbitingCustomerAvatarsItem

細節

可及性

本頁目錄