評價跑馬燈

放在 hero 下方的社會證明帶。每則評價只有一個小頭像、一句短評與「— 姓名，公司」，則與則之間以強調色星號分隔，左右兩端漸隱。內容複製一份後以 CSS 動畫線性無限捲動，速度以 px/s 指定、量測內容寬度後換算成週期；rows={2} 時第二行反向捲動、內容錯開一半。滑鼠移入、鍵盤聚焦、分頁隱藏或捲出畫面時自動暫停，右側另有一顆可見的暫停鈕。

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">

<ReviewTicker/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/review-ticker.json

使用

import { ReviewTicker } from "@/components/ui/review-ticker";

<ReviewTicker
  rows={2}
  speed={50}
  testimonials={[
    { quote: "門市排班從半天縮到十分鐘，店長終於能準時下班。", name: "林予安", company: "青嶼咖啡" },
    { quote: "出貨異常的通知時間縮短了一半，客服再也不用一通通電話追司機。", name: "陳柏宏", company: "北辰物流", short: "出貨異常通知時間縮短一半" },
    { quote: "結帳流程更短，這一季回購率是開站以來最高。", name: "黃冠廷", company: "好日選物" },
  ]}
/>

Props

ReviewTickerItem

細節

• 節奏變數：週期讀 --wb-review-ticker-duration（預設由 speed 換算，量測前為 45s），進場淡入讀 --wb-review-ticker-enter-duration（600ms），強調色讀 --wb-review-ticker-accent（預設 #0d9488，深色 #2dd4bf）。在全域設定 --wb-review-ticker-duration 會覆寫 speed。
• 無縫循環：內容複製一份後 translateX 從 0 走到 -50%；評價很少、一份內容比可視區窄時，會自動重複到填滿再複製，避免露出空白。
• 截斷：中英文都依「字元」計數截斷，不會切出半個字；截斷的評語 hover 時在帶子上方浮出完整引言，螢幕閱讀器則直接讀完整內容。
• 頭像不需要照片：姓名縮寫（中文取末兩字、拉丁取首字母）配上依索引黃金角度色相的雙色漸層，確定性產生；需要真圖時傳 avatarSrc。
• 背景是一條極淡的波浪線 SVG，由幾組正弦疊加產生，伺服器與瀏覽器輸出一致。

可及性

• 根元素是 section，有 title 時以 aria-labelledby 指向標題，否則使用 aria-label="客戶評價"
• 為了無縫循環而複製的內容、第二行（同一批評價的重複）都設為 aria-hidden，螢幕閱讀器每則只讀一次
• 每則評價以 figure／blockquote／figcaption 呈現；截斷時視覺文字對輔助科技隱藏，改讀完整引言
• 帶子右側有可見的暫停鈕（aria-pressed 表示狀態），符合 WCAG 2.2.2；滑鼠移入、鍵盤聚焦、分頁隱藏或捲出畫面時也會暫停
• 使用者系統開啟「減少動態效果」時不捲動，改為單行、可用鍵盤聚焦後水平捲動的靜態列，進場淡入縮短為 150ms，暫停鈕隱藏