頁面區塊 Sections
極簡單句輪播
只放一句大字評價的極簡輪播 React 元件，句子上下交叉淡接帶輕微模糊，下方僅留作者與細點指示，背景有緩慢流動的細線。
給留白多的頁面用的評價區塊：沒有卡片框、沒有頭像，只有置中的一句大字引言、一行作者與一排極細的圓點。切換時舊句往上淡出並微微模糊、新句從下方淡入對焦，兩句交疊而過；作者行晚 120ms 跟進。背景是依 seed 生成的幾條極細曲線，以 20 秒為一圈緩慢流動。引言區高度固定為最長那一句，切換時版面不會跳動。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add one-line-quote-carouselPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
5000
600
9
編輯中的呼叫預設屬性
<OneLineQuoteCarousel/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/one-line-quote-carousel.json或在 components.json 設定 registries 後，改用 @webberui/one-line-quote-carousel 安裝。
使用
import { OneLineQuoteCarousel } from "@/components/ui/one-line-quote-carousel";
<OneLineQuoteCarousel
testimonials={[
{
quote: "改版之後，週末候位的客人少了一半。",
name: "林語晴",
role: "營運主理人",
company: "青嶼咖啡",
highlight: "少了一半",
},
{
quote: "新人第一天就能獨立跑完一整條路線。",
name: "陳柏宇",
company: "北辰物流",
},
]}
interval={5000}
seed={9}
onIndexChange={(i) => console.log(`切換到第 ${i + 1} 則`)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
testimonials | OneLineQuoteCarouselItem[] | — | 評價清單 |
eyebrow | string | — | 標題上方的小標 |
title | string | — | 區塊標題；本元件預設不顯示，有提供時成為 section 的 aria-labelledby |
subtitle | string | — | 標題下方的說明文字 |
autoplay | boolean | true | 是否自動播放；使用者開啟「減少動態效果」時一律關閉 |
interval | number | 5000 | 自動播放間隔（ms）；未提供時讀 --wb-one-line-quote-carousel-interval |
duration | number | 600 | 句子交叉淡接的時長（ms）；未提供時讀 --wb-one-line-quote-carousel-duration |
index | number | — | 受控的目前索引；未提供時由元件內部管理 |
defaultIndex | number | 0 | 非受控模式的初始索引 |
onIndexChange | (index: number) => void | — | 索引變動時回呼 |
showBackdrop | boolean | true | 是否顯示背景流動細線 |
seed | number | 9 | 背景曲線的隨機種子；同一個 seed 永遠畫出同一組 3–5 條曲線 |
className | string | — | 透傳到根 section |
OneLineQuoteCarouselItem
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
quote | string | — | 引言內文，建議一句話 |
name | string | — | 姓名 |
role | string | — | 職稱，接在姓名後以「 · 」分隔 |
company | string | — | 公司 |
highlight | string | — | quote 中要以強調色標記的片段 |
rating | number | — | 評分（0–5）；本元件不顯示，保留以便與其他評價元件共用資料 |
avatarHue | number | — | 色相；本元件不顯示頭像，保留以便共用資料 |
metric | { value: string; label: string } | — | 關鍵數字；本元件不顯示，保留以便共用資料 |
細節
- 節奏變數：
--wb-one-line-quote-carousel-interval（預設5000ms）與--wb-one-line-quote-carousel-duration（預設600ms）。傳入interval／duration會寫進這兩個變數，元件掛載後再從 computed style 讀回，所以在外層覆寫變數也有效。緩動固定為cubic-bezier(0.22,1,0.36,1)。 - 強調色只走
--wb-one-line-quote-carousel-accent（淺色預設#0d9488、深色預設#2dd4bf），用於 highlight 片段、小標與當前圓點。 - 引言區用一組隱形的「量尺」把所有引言疊在同一格，高度自動等於最長那一句；目前的引言絕對定位疊在上面，交叉淡接時新舊兩句同時存在。
- 背景曲線用確定性亂數（mulberry32）依
seed生成，伺服器與瀏覽器畫出完全相同的路徑；線寬固定 1px（vector-effect: non-scaling-stroke），左右兩端以遮罩淡出。 - 自動播放在滑鼠移入、鍵盤焦點位於輪播內、按下暫停鈕、分頁切到背景時暫停；每次換句或恢復播放都重新計時一整個間隔。
可及性
- 根元素是
section，有標題時以aria-labelledby關聯，否則帶aria-label；輪播區為role="region"、aria-roledescription="輪播"，可聚焦，聚焦後 ← / → 鍵切換 - 引言以
figure、blockquote、figcaption標記；隱形量尺設為aria-hidden，不會被重複朗讀 - 自動播放進行中為
aria-live="off"，避免定時打斷螢幕閱讀器；暫停或手動切換時改為polite - 每個圓點都是
type="button"，帶「第 n 則：姓名」的aria-label，當前那顆設定aria-current - 自動播放開啟時，圓點列尾端一定有可見的暫停鈕（WCAG 2.2.2），帶
aria-pressed；滑鼠移入或聚焦也會暫停 - 使用者系統開啟「減少動態效果」時：自動播放關閉、背景細線停止流動、句子不位移也不模糊，改為 150ms 淡入，仍可用圓點切換