頭像分頁引言

把幾則客戶評價收進同一個區塊：左側是一列頭像與姓名，點選或用方向鍵切換；選中標記（3px 強調色指示條＋淡底色塊）以彈簧沿列滑動，清單裡的頭像同步放大到 1.1 倍。右側顯示選中者的大頭像、引言、作者與可選的成效數字，切換時舊內容模糊淡出、新內容從模糊中浮現；背景一團 8% 不透明度的柔和光斑依選中者的色相過渡。窄螢幕上清單自動改為橫向捲動的頭像列。頭像不需要照片：預設以姓名縮寫＋黃金角度色相的漸層圓產生，也可傳 avatarSrc 換成真圖。

Playground

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

import * as React from "react";

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

<AvatarTabQuotes/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/avatar-tab-quotes.json

使用

import { AvatarTabQuotes } from "@/components/ui/avatar-tab-quotes";

<AvatarTabQuotes
  eyebrow="客戶怎麼說"
  title="四個團隊，四種上線速度"
  testimonials={[
    {
      quote: "改版後的會員頁一週就上線，門市店員也能自己換季節菜單。",
      name: "林語晴",
      role: "營運主管",
      company: "青嶼咖啡",
      highlight: "一週就上線",
      metric: { value: "7 天", label: "從設計到上線" },
    },
    {
      quote: "貨況追蹤頁的載入時間少了一半，客服電話跟著明顯變少。",
      name: "陳柏宇",
      role: "產品經理",
      company: "北辰物流",
    },
  ]}
/>

Props

AvatarTabQuotesItem

CSS 變數

細節

• 右側內容用 AnimatePresence 的 mode="wait"：舊內容先模糊（8px）、上移 8px 並淡出，新內容再從下方 8px、模糊中浮現，兩段都使用 --wb-avatar-tab-quotes-duration。
• 背景光斑是一個以 currentColor 填色的徑向漸層，切換時只改 color，讓瀏覽器原生的顏色過渡帶動色相變化，不需要逐格重繪。
• 窄螢幕時頭像列橫向捲動，切換（包括自動輪播）只捲動清單本身、不會拉動整個頁面，選中的頭像會被捲進可視範圍。
• 自動輪播在滑鼠移入、鍵盤聚焦於區塊內或分頁被隱藏時暫停；暫停時進度線停止，恢復後從頭計時。

可及性

• 根元素是 <section>，有 title 時以 aria-labelledby 指向標題，否則用 listLabel 作為名稱
• 頭像列為 role="tablist"，aria-orientation 依實際方向（直列或窄螢幕的橫向列）設定；每個頭像是 role="tab" 按鈕，採 roving tabindex
• 直列時 ↑／↓、橫向時 ←／→ 切換，Home／End 跳到第一則與最後一則；切換後焦點跟著移動
• 右側是 role="tabpanel"，以 aria-labelledby 指向目前的分頁；未自動輪播時內容變化以 aria-live="polite" 朗讀，輪播中則關閉朗讀避免干擾
• 引言以 figure／blockquote／figcaption 呈現；頭像為裝飾性（aria-hidden），分頁名稱由姓名與公司組成
• 開啟自動輪播時一定顯示可見的暫停／播放鈕（WCAG 2.2.2）
• 使用者系統開啟「減少動態效果」時，自動輪播預設關閉（仍可按播放鈕開啟），彈簧滑動、頭像放大、模糊與位移改為 150ms 淡入淡出，內容仍可透過頭像切換