Testimonial Section

完整的社會證明區塊，內建標題、星等、頭像與三款版面：網格、無限跑馬燈、單則聚光輪播。

載入預覽⋯

Playground

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

版面樣式variant

網格欄數columns

卡片進場間隔（秒）stagger

0.1

只播放一次進場once

跑馬燈速度（px/秒）speed

聚光切換間隔（秒）interval

<TestimonialSection />

安裝

npx shadcn@latest add https://webberui.com/r/testimonial-section.json

或在 components.json 設定 registries 後，改用 @webberui/testimonial-section 安裝。

安裝依賴後，從 registry JSON（/r/testimonial-section.json 的 files[0].content）複製 testimonial-section.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

TestimonialSection 負責標題與版面編排，TestimonialCard 是單則推薦。以 variant 切換三款版面。

import {
  TestimonialSection,
  TestimonialCard,
} from "@/components/ui/testimonial-section";

<TestimonialSection
  variant="grid"
  columns={3}
  eyebrow="社會證明"
  title="開發者的真實回饋"
  description="數千支團隊已用 WebberUI 加速他們的介面開發。"
>
  <TestimonialCard
    rating={5}
    quote="安裝即用、動畫細膩，上線隔天就換掉了自製元件。"
    name="林亦芯"
    role="前端主管・Nimbus"
    avatar="https://i.pravatar.cc/96?img=1"
  />
  <TestimonialCard
    rating={5}
    quote="型別完整、可及性到位，程式碼品質超乎預期。"
    name="Marco Reyes"
    role="Staff Engineer・Fold"
  />
</TestimonialSection>;

三款版面

grid（預設）：響應式網格，卡片在進入視口時依序 stagger 浮現。以 columns（1–4）設定最大欄數。
marquee：無限橫向跑馬燈，游標懸停或子元素取得焦點時暫停；以 speed（像素／秒）調整速度。
spotlight：單則置中聚光輪播，自動輪播並提供箭頭與圓點控制；以 interval（秒）調整切換間隔。

<TestimonialSection variant="marquee" speed={40} title="客戶怎麼說">
  {/* ...TestimonialCard */}
</TestimonialSection>

<TestimonialSection variant="spotlight" interval={6} title="客戶怎麼說">
  {/* ...TestimonialCard */}
</TestimonialSection>

TestimonialCard 在 spotlight 版面會自動放大引言並置中排版，其餘版面則呈現為帶邊框的卡片。頭像 avatar 傳字串會當作圖片網址，也可傳入自訂節點；未提供時以姓名首字生成佔位。

Props

TestimonialSection

Prop	型別	預設值	說明
`children`	`React.ReactNode`	—	放入 `TestimonialCard` 子元件
`variant`	`"grid" \| "marquee" \| "spotlight"`	`"grid"`	版面樣式
`eyebrow`	`React.ReactNode`	—	標題上方的小標籤
`title`	`React.ReactNode`	—	區塊主標題
`description`	`React.ReactNode`	—	主標題下方的說明文字
`columns`	`number`	`3`	grid 版面的最大欄數（1–4）
`stagger`	`number`	`0.1`	grid 卡片進場間隔（秒）
`delay`	`number`	`0`	進場前延遲（秒）
`once`	`boolean`	`true`	grid 只在第一次進入視口時播放
`speed`	`number`	`40`	marquee 捲動速度（像素／秒）
`interval`	`number`	`6`	spotlight 自動切換間隔（秒）

TestimonialCard

Prop	型別	預設值	說明
`quote`	`React.ReactNode`	—	推薦內容（引言）
`name`	`string`	—	推薦人姓名
`role`	`React.ReactNode`	—	職稱／公司，例如 "CTO, Acme"
`avatar`	`string \| React.ReactNode`	—	字串當圖片網址，或傳入自訂節點
`rating`	`number`	—	星等評分（0–5），不傳則不顯示
`logo`	`React.ReactNode`	—	公司標誌等節點（grid／marquee 版面）

細節

版面與呈現分離：TestimonialSection 透過 Context 把目前 variant 傳給卡片，版面編排（網格、跑馬燈、輪播）與卡片視覺各司其職，卡片依 variant 自動調整樣式。
無限跑馬燈：以 useAnimationFrame 逐格推進 x，越過單組寬度後回捲形成無縫循環；透過 ResizeObserver 量測寬度，容器尺寸或內容變動時自動更新，卸載時中止觀察。第二組內容為視覺補位並帶 aria-hidden，避免輔助科技重複朗讀。
聚光輪播：以 AnimatePresence 做進退場交叉淡接與方向感位移；自動輪播用 setInterval，游標懸停或子元素 focus 時暫停，卸載時清除計時器。
語意標記：卡片使用 figure / blockquote / figcaption，星等以 role="img" 搭配 aria-label 朗讀為「評分 X / 5」。

可及性

使用者系統開啟「減少動態效果」時：grid 直接靜態渲染、marquee 退化為可手動捲動的橫向清單、spotlight 停止自動輪播並改以快速淡入淡出切換，皆不產生位移感。
marquee 在游標懸停與鍵盤 focus 時暫停，方便閱讀與操作內部連結。
spotlight 提供上一則／下一則箭頭與圓點按鈕（role="tab"、aria-selected），每張投影片帶「第 X 則，共 N 則」標籤；控制項具鍵盤焦點樣式。

Testimonial Section

On this page