頁面區塊 Sections
打字引言列
一列並排的評價卡 React 元件，輪流以打字機效果逐字打出引言並帶游標閃爍，打完停留後換下一位，其他卡顯示淡化全文。
一列三張的客戶評價卡，輪流由一張成為作用卡：引言以打字機效果逐字打出（中文逐字、emoji 不拆），標點後稍作停頓，尾端有強調色游標閃爍；打完停留一段時間後，作用卡淡化、下一張接著從頭打字，最後一張後回到第一張。作用卡有強調色上邊線與陰影，切換時上邊線滑到新卡；其餘卡片以淡化方式顯示完整全文。點任一張卡立即切為作用卡並重打。卡片列後方有一層淡淡的稿紙行線。作用卡索引支援受控／非受控雙模式。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add typed-quote-rowPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
45
2000
編輯中的呼叫預設屬性
<TypedQuoteRow/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/typed-quote-row.json或在 components.json 設定 registries 後，改用 @webberui/typed-quote-row 安裝。
使用
import { TypedQuoteRow } from "@/components/ui/typed-quote-row";
<TypedQuoteRow
eyebrow="客戶怎麼說"
title="一句一句，說給你聽"
speed={45}
hold={2000}
testimonials={[
{
quote: "導入後櫃台結帳快了一倍，尖峰時段不再排到門外。",
name: "林語晴",
role: "店長",
company: "青嶼咖啡",
highlight: "結帳快了一倍",
},
{
quote: "司機端的路線指引很直覺，查件電話少了一大半！",
name: "王子豪",
role: "物流主任",
company: "北辰物流",
},
{
quote: "學員的進度一目了然，結業率比去年高出不少。",
name: "張雅雯",
role: "教務長",
company: "拾光學院",
},
]}
onActiveIndexChange={(index) => console.log(index)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
eyebrow | string | — | 標題上方的小標 |
title | string | — | 區塊標題 |
subtitle | string | — | 標題下方的說明文字 |
testimonials | TypedQuoteRowItem[] | — | 評價資料陣列（建議 3 則，一列並排） |
speed | number | — | 每個字打出的間隔（毫秒）；未提供時讀取 --wb-typed-quote-row-speed（預設 45ms） |
hold | number | 2000 | 一則打完後停留多久才換下一位（毫秒） |
loop | boolean | true | 最後一則打完後是否回到第一則 |
autoplay | boolean | true | 是否自動輪流換下一位；系統開啟「減少動態效果」時預設關閉 |
activeIndex | number | — | 受控的作用卡索引；未提供時由元件內部管理 |
defaultActiveIndex | number | 0 | 非受控模式的初始作用卡索引 |
onActiveIndexChange | (index: number) => void | — | 作用卡切換時回呼，參數為新索引 |
pauseLabel | string | "暫停輪播" | 暫停鈕的文字 |
playLabel | string | "繼續輪播" | 繼續鈕的文字 |
className | string | — | 併入根 section 的 class |
TypedQuoteRowItem
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
quote | string | — | 引言全文 |
name | string | — | 姓名 |
role | string | — | 職稱 |
company | string | — | 公司名稱 |
rating | number | — | 星等（0–5）；未提供時不顯示星等 |
avatarHue | number | — | 頭像漸層色相（0–360）；未提供時依索引以黃金角度自動配色 |
avatarSrc | string | — | 頭像圖片網址；提供時取代姓名縮寫漸層頭像 |
highlight | string | — | 引言中要以強調色標記的片段（打字時也會逐字上色） |
metric | { value: string; label: string } | — | 附帶的成效數字 |
細節
- 引言以
Intl.Segmenter依字素切割，中文逐字打出、emoji 與組合字不會被拆開；，。！？、等標點打出後多停 160ms。 - 引言區先放一份隱形全文撐出終稿高度，打字層疊在上方，從第一個字到最後一個字卡片高度都不變，版面不跳動。
- 只在區塊進入視口時打字與輪播，離開視口、切到其他分頁時暫停；滑鼠移入或鍵盤聚焦在卡片列時，打完的卡會停住不換下一位。
- 打字進度綁在「作用卡索引 + 重打次數」上，受控模式下由外部改
activeIndex也會自動從頭打字。 - 頭像不需要照片：中文姓名取末兩字、拉丁姓名取首字母，搭配依索引以黃金角度（137.508°）分配色相的雙色漸層，確定性輸出、SSR 與客戶端一致。
- 節奏與色彩可用 CSS 變數覆寫：
--wb-typed-quote-row-speed（打字間隔，預設 45ms）、--wb-typed-quote-row-accent（強調色，預設#0d9488，深色模式#2dd4bf）。
可及性
- 根元素是
section，以aria-labelledby指向標題；每則評價以figure／blockquote／figcaption呈現 - 打字層與撐高度的全文對輔助科技隱藏，同一張卡內保留一份
sr-only完整引言；作用卡切換不做 live 宣告，避免反覆打斷螢幕閱讀器 - 每張卡覆蓋一顆
type="button"的切換按鈕，帶aria-pressed表示是否為作用卡，鍵盤 Tab 聚焦時顯示 focus-visible 外框 - 自動播放時提供可見的暫停／繼續鈕（WCAG 2.2.2），暫停時作用卡直接補完全文
- 使用者系統開啟「減少動態效果」時，不打字、游標不閃爍，作用卡直接顯示全文，切換改為 150ms 淡入，自動播放預設關閉，仍可點卡片切換